Modularized components

[olemartinorg]

Description

Started modularizing layout components. In other words, a new LayoutComponent class has been added (which every layout component now has to implement). It is the common 'tool box' used by GenericComponent.tsx and serves as a place where every peculiarity of each layout component implementation should be implemented.

This is the start, and builds a framework we can extend further. As discussed in the comments under, getDisplayFormData is probably the next thing to start working on moving into this class.

As this change is only about moving code around, I'm relying on our automatic tests to catch any bugs introduced, and so I haven't really tested this change myself. It turned out that not all components expected all the same properties as they get from GenericComponent.tsx, so I had to clean some of them up for this to work. For example, CheckboxContainerComponent could render validation messages if given validationMessages, but that doesn't ever seem to happen (so I removed that part).

Related Issue(s)

• Architecture: Modularize components using classes and inheritance #377

Verification

• Manual testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added
  • Cypress E2E test(s) have been added
  • No automatic tests are needed here
  • I want someone to help me make some tests
• User documentation @ altinn-studio-docs
  • Has been updated
  • No changes/updates needed
• Changes/additions to component properties
  • Changes are reflected in both src/layout/layout.d.ts and layout.schema.v1.json, and these are all backwards-compatible
  • No changes made
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board

[olemartinorg]

What do you think, @bjosttveit? I know you had thoughts about how to solve this. Did you imagine it differently, or were we on the same track?

[bjosttveit]

What do you think, @bjosttveit? I know you had thoughts about how to solve this. Did you imagine it differently, or were we on the same track?

I guess my thoughts were mostly idealistic and more relevant to a major release by having component classes do much more than having a render function (like validation logic, having some sort of renderSummary(), and also replacing getDisplayFormData by using a function defined in the class for getting a string-representation of its data, etc.). I also thought about having different types of groups be different classes, and kind of inplicitly included #345 in my thoughts. That would be a very large refactor though 😅. But this is definitely on the same track and a good step in the right direction!

[olemartinorg]

Ah, yup, sounds like we think much in the same way, then.. 😅 I think smaller steps at each point in time will be easier to implement (and test), so I also think this is just the beginning. I thought about starting the refactor to include getDisplayFormData last week, but I think that's next (and then moving on to Summary).

I'm also having (admittedly half-baked) thoughts about running nodesInLayout first, then passing each LayoutNode to GenericComponent instead - and in that process making (repeating) groups something more similar to a normal component (just rendering a table, but also making sure it can render child components). There's a lot of code in src/utils/formLayout.ts that does much of the same as the node hierarchy, so it would be nice to get rid of the duplication. That may be a practical route to complete #345, but that issue is spinning out in a direction where replacing Redux/Sagas seems to be on the table (at least in my head, and with my current understanding of the issue).

I'll open up this one for review, so that we can tackle each puzzle piece at a time (so not closing #377 quite yet).

[bjosttveit]

Sounds good! So I guess we are on the same page, except you actually have a plan to get there, I had no idea where to begin 😅

[sonarqubecloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
7 Code Smells

74.9% Coverage
0.0% Duplication

[bjosttveit]

🎖️