Altinn / Altinn/app-frontend-react
Developer tools
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### 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](https://dev.altinn.studio/repos/ttd/signing-test/src/branch/master/App/views/Home/Index.cshtml).
- [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
```[tasklist]
### Tasks
```
Contributor guide
Research direction
No implementation file, test, or entry point is named. Start by reviewing the unchecked feature list and the referenced issues #136, #990, and #648; this issue is ready only after one feature is selected with explicit acceptance criteria and a defined test or user-visible outcome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- developer-experience, devtools, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100