Altinn / Altinn/app-frontend-react

Developer tools

Open
#1,021 6 comments 4 reactions 0 assignees View on GitHub
Epic kind/feature-request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.