Developer tools

[olemartinorg]

Description

We're creating a platform used by developers to create apps. Let's give them tools.

I've had this marinating in the back of my head for a while, so when the opportunity arose to write a list of features I'd want on Slack, it's probably best to detail this in an issue as well.

Some nice-to have features

• [ ] Visualizing the data model while filling out the form. There could be multiple ways to show the data model.
  • Resolved bindings for each component, aka node.getFormData() (although that does not currently work well with a list binding)
  • The entire data model in dot-notation (aka the redux state)
  • The entire data model as JSON (aka what we send off to save on the backend)
  • The entire data model as XML (we could probably ask the backend for the raw data)
  • See #136
• [ ] Functionality to inspect properties on all components
  • See expressions and what they resolve to, for each component in the form
  • Bonus points if we can visualize every evaluation step in an expression (in ["equals", ["component", "something"], "yes"] we evaluate two discrete expression functions, first ["component", "something"] and ["equals", "value", "yes"])
• [ ] Inspect the data model targets for every component binding
  • I've made a prototype for this, see #990
• [ ] Showing/hiding hidden components, and why they are hidden
• [ ] Showing/hiding hidden pages, and why they are hidden
• [ ] Showing errors/warnings (from expression evaluation and from validations as defined in #648)
• [x] Navigating the current form pages without having to add a navigation bar while developing
• [x] One button-click to preview PDF
• [ ] Show indicators to see which components trigger validations (and what will be validated when) in the GUI
• [x] Adding functionality to load other versions of app-frontend-react (it should be possible to implement with some trickery). That means we could easily switch the version in tt02 and production as well. #1174
• [x] #1075
• [x] Show the developer tools (or just a button for it) automatically when the domain is local.altinn.studio. That way we don't even have to advertise that we're shipping developer tools to app developers; they'll find out. Just make sure to inform them about the keyboard shortcut in production as well.
• [x] Change action permissions to test conditional rendering based on user permissions in policy (relevant for signing flow). Should work similar to this.
• [x] #1114
• [x] Change the language on the fly without a language selector configured https://github.com/Altinn/app-frontend-react/pull/1321

Inspiration

• https://labs.oslo.kommune.no/tema/skjema/skjema-studio/videoer
  • Their tools have options for showing hidden components and pages

    ### Tasks

[ivarne]

❤️❤️❤️

• [ ] Show fields from the data model that isn’t bound to any component. This data is used for various purposes, and we need an easy way for testers to check that the values are set correctly.
• [ ] Instance.DataValues
• [ ] Instance.PresentationTexts
• [x] Download xml data as file for use in prefill https://github.com/Altinn/app-frontend-react/pull/1319
• [ ] record a test case that can be replayed using a browser automator (Playwright, puppeteer, selenium or another solution) that verifies validations.

[olemartinorg]

@ivarne

record a test case that can be replayed using a browser automator (Playwright, puppeteer, selenium or another solution) that verifies validations.

Very good point! 👏 I've been hinting at this thing in some slack messages earlier today, and I've tried to "sell" such a solution internally as well. It's probably time to create a proper issue detailing my thoughts on this, so I wrote #1040. Would love to hear your thoughts there as well! 🙏

My thoughts have been to support this in the upcoming Studio app-preview functionality (Studio could also take the result and save it to the app repo without you having to do it manually), but the recording would have to happen in app-frontend, so we could probably also expose that functionality in the developer tools.

[bjosttveit]

Could it be an idea to add a "console"? The "real console" gets a bit cluttered with random warnings and such. For example, expressions log pretty errors to the console if they fail to resolve, maybe we could have a cleaner console in the developer tools with only intentional logs?

[olemartinorg]

@bjosttveit I agree! But it might be a bit tedious to implement by ourselves (we have limited developer resources), so unless we find a ready-made react console we can use, I think we should have developers keep using the built-in console.

With that said, we should absolutely display errors/warnings regarding the app configuration. Having an interactive console might be a bit harder to get right.

[bjosttveit]

Yeah, maybe just a log, we dont need to be able to send commands really. Maybe hard to make it display things correctly?

[olemartinorg]

It would be needlessly difficult to parse the format we send off to the browser console just to colorize the output, but we could easily change the format and just display it in the devtools (we could even include a nudge animation and/or error counter to inform developers when errors occur). Our errors/warnings/messages to app-developers should preferably be displayed in the devtools instead of in the browser console.

We could even include a tool to copy the log for attaching to a bug report.. 😉