Skip to content

Rebuilding hideEmptyFields in Summary2 #3336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 51 commits into
base: main
Choose a base branch
from

Conversation

olemartinorg
Copy link
Contributor

@olemartinorg olemartinorg commented May 5, 2025

Description

Summary2 naively treated components with no data in any dataModelBinding as 'empty', but that's not the case for, for example, Group (which has no support for data model bindings, but contains other components that aren't necessarily empty). This implements empty-checking for every component type that properly handles the differences between components.

It's recommended to ignore whitespaces when reading the diffs here, as every Summary2 component render has been wrapped in the Summary2Flex component in this PR, so some files show quite large diffs that are primarily whitespace-only changes.

List of changes in this PR (trying to follow the natural listing as when reviewing the PR):

  • To make each component say if they are empty or not, every Summary2 rendering now always renders out <SummaryFlex /> or a variant of it first. This was previously automatically rendered out in <ComponentSummary />, but by moving it we get a better chance to control these things in the component themselves.
  • Checkboxes and MultipleSelect now use the useMultipleValuesForSummary() to get their values and pass them on to MultipleValueSummary. This way the components themselves can tell <SummaryFlex /> if they are empty or not.
  • Grid gets a new override, hideEmptyRows that hides empty rows (Toggle for å automatisk skjule tomme rader i oppsummeringselement #2471)
  • The <EmptyChildrenBoundary /> context has been introduced to register and control visibility when all children in a container are reported as empty. Grid uses some extra trickery to make sure header-rows are also hidden if every child component in the Grid reports as being empty.
  • Some components, like Paragraph and Header are marked as 'presentational', so not strictly empty nor 'contentful'. If you for example have a Group with a Header and Paragraph inside, but all the Input fields also inside the Group are empty, the Group itself is also hidden in Summary2 when using hideEmptyFields: true (solves Summary2: Støtte for komponenten "Group" #3159)
  • Adding some memoization, such as in SubformSummaryComponent2.tsx, to prevent the entire Summary2 for a subform to re-render (and re-generate nodes) when (for example) settings are changed in DevTools.
  • PageSummary now renders more then just its own children directly, so that 'empty' pages are treated just like empty Group components. To make this look like it did before, I had to do some trickery with the Flex component.
  • Adding page-level overrides (currently only supporting the 'hidden' property). This makes it possible to summarize an entire layoutSet, but hide certain pages from that summary without having to group them or having to override every component on those pages.

Related Issue(s)

Verification/QA

  • Manual functionality testing
    • I have tested these changes manually
    • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
    • No testing done/necessary
  • Automated tests
    • Unit test(s) have been added/updated
    • Cypress E2E test(s) have been added/updated
    • No automatic tests are needed here (no functional changes/additions)
    • I want someone to help me make some tests
  • UU/WCAG (follow these guidelines until we have our own)
    • I have tested with a screen reader/keyboard navigation/automated wcag validator
    • No testing done/necessary (no DOM/visual changes)
    • I want someone to help me perform accessibility testing
  • User documentation @ altinn-studio-docs
    • Has been added/updated
  • 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
    • I don't have permissions to do that, please help me out
  • Labels
    • I have added a kind/* and backport* label to this PR for proper release notes grouping
    • I don't have permissions to add labels, please help me out

@olemartinorg olemartinorg added kind/bug Something isn't working backport-ignore This PR is a new feature and should not be cherry-picked onto release branches labels May 5, 2025
@olemartinorg
Copy link
Contributor Author

/publish

Copy link
Contributor

github-actions bot commented May 5, 2025

PR release:

  • <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1273.summary2-groups-hidden.02ec88f6/altinn-app-frontend.css">
  • <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1273.summary2-groups-hidden.02ec88f6/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

@olemartinorg
Copy link
Contributor Author

/publish

Copy link
Contributor

github-actions bot commented May 6, 2025

PR release:

  • <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1275.summary2-groups-hidden.a0697193/altinn-app-frontend.css">
  • <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1275.summary2-groups-hidden.a0697193/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

@olemartinorg olemartinorg force-pushed the bug/summary2-groups-hidden branch from a069719 to 406c666 Compare May 8, 2025 15:52
@olemartinorg
Copy link
Contributor Author

/publish

Copy link
Contributor

github-actions bot commented May 13, 2025

PR release:

  • <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1300.summary2-groups-hidden.122c8f3f/altinn-app-frontend.css">
  • <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1300.summary2-groups-hidden.122c8f3f/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

Ole Martin Handeland added 21 commits May 14, 2025 13:48
…r not in Summary2, when using 'hideEmptyFields'
…re not empty so that repeating group summaries only render their header/title when there is data in one or more child rows.
…d Summary2 components. This should in theory be better, but it's ending up toggling states back and forth. I'll have to look into how to make this another way, so committing this now before going back to the drawing board.
… same components and never changing the DOM hierarchy.
…out, so that each renderer can render it. Then making sure to conditionally show it, so that we don't end up with empty padding-only flex elements when the rendered component is empty.
…the inline styles overrode my 'display' CSS property. This wasn't really needed, a div is display:block already, and the container class already has display: flex.
Ole Martin Handeland added 6 commits May 14, 2025 21:47
…at groups with a Header inside will be hidden if all the _other_ components inside the Group are empty.
…ll always just be a boolean. Removing that fixes some grid rows that were mistakenly shown even though they were empty. Adding some debugging info in GridSummary cells as well, since I found one case where a reference to a Header component was used. This works, but it's counted as 'not empty' even though it's just showing the header text (which seems weird, as other text-cells are considered empty). This debug info can be useful if we get reports about this.
@olemartinorg
Copy link
Contributor Author

/publish

Copy link
Contributor

github-actions bot commented May 16, 2025

PR release:

  • <link rel="stylesheet" type="text/css" href="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1317.summary2-groups-hidden.8639250d/altinn-app-frontend.css">
  • <script src="https://altinncdn.no/toolkits/altinn-app-frontend/4.19.0-pr.1317.summary2-groups-hidden.8639250d/altinn-app-frontend.js"></script>

⚙️ Building...
✅ Done!

Ole Martin Handeland added 10 commits May 16, 2025 12:47
…within are considered empty (thus treating them as groups). Refactoring a bit in ComponentSummary.tsx.
…asily tell which page is which in the DOM.
…options here, but turns out I didn't need them after all. Still keeping this, though.
…in Grid, so adding that as a property. Also, the SummaryInternalRow component was not really needed, so removing that.
@olemartinorg olemartinorg marked this pull request as ready for review May 20, 2025 13:43
@olemartinorg olemartinorg changed the title WIP: Reworking hideEmptyFields in Summary2 Rebuilding hideEmptyFields in Summary2 May 21, 2025
Ole Martin Handeland added 2 commits May 23, 2025 11:16
…t-in means each component can't decide on their own if they're required or not (i.e. RepeatingGroup and FileUpload minCount properties). Leaving the old code so that it triggers an error if called incorrectly.
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
7.8% Duplication on New Code (required ≤ 3%)
C Reliability Rating on New Code (required ≥ A)
34.51% Condition Coverage on New Code (required ≥ 45%)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport-ignore This PR is a new feature and should not be cherry-picked onto release branches kind/bug Something isn't working
Projects
None yet
2 participants