Fixing Summary2 + Subform with option-components (#3022)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>
Altinn · Feb 18, 2025 · fe418e7 · fe418e7
1 parent d76d1d5
commit fe418e7
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 55 deletions.
diff --git a/src/core/loading/LoadingRegistry.tsx b/src/core/loading/LoadingRegistry.tsx
@@ -25,7 +25,7 @@ function initialCreateStore() {
   }));
 }
 
-const { Provider, useShallowSelector, useStaticSelector } = createZustandContext({
+const { Provider, useShallowSelector, useStaticSelector, useHasProvider } = createZustandContext({
   name: 'LoadingRegistry',
   required: true,
   initialCreateStore,
@@ -63,6 +63,13 @@ export function BlockUntilAllLoaded({ children }: PropsWithChildren) {
  * the form can be rendered.
  */
 export function useMarkAsLoading(key: (string | number)[], value: boolean) {
+  const hasProvider = useHasProvider();
+  if (!hasProvider) {
+    throw new Error(
+      'useMarkAsLoading must be used within a LoadingRegistryProvider (currently only supported inside a FormProvider)',
+    );
+  }
+
   const keyStr = key.join('/');
   const setLoadingState = useStaticSelector((state) => state.setLoadingState);
 

diff --git a/src/features/form/FormContext.tsx b/src/features/form/FormContext.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 
 import { ContextNotProvided, createContext } from 'src/core/contexts/context';
-import { BlockUntilAllLoaded } from 'src/core/loading/LoadingRegistry';
+import { BlockUntilAllLoaded, LoadingRegistryProvider } from 'src/core/loading/LoadingRegistry';
 import { DataModelsProvider } from 'src/features/datamodel/DataModelsProvider';
 import { DynamicsProvider } from 'src/features/form/dynamics/DynamicsContext';
 import { LayoutsProvider } from 'src/features/form/layout/LayoutsContext';
@@ -61,7 +61,7 @@ export function FormProvider({ children }: React.PropsWithChildren) {
 
 function Outer({ children }: React.PropsWithChildren) {
   return (
-    <>
+    <LoadingRegistryProvider>
       <FormPrefetcher />
       <LayoutsProvider>
         <CodeListsProvider>
@@ -88,7 +88,7 @@ function Outer({ children }: React.PropsWithChildren) {
           </DataModelsProvider>
         </CodeListsProvider>
       </LayoutsProvider>
-    </>
+    </LoadingRegistryProvider>
   );
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -22,7 +22,6 @@ import { ViewportWrapper } from 'src/components/ViewportWrapper';
 import { KeepAliveProvider } from 'src/core/auth/KeepAliveProvider';
 import { AppQueriesProvider } from 'src/core/contexts/AppQueriesProvider';
 import { TaskStoreProvider } from 'src/core/contexts/taskStoreContext';
-import { LoadingRegistryProvider } from 'src/core/loading/LoadingRegistry';
 import { ApplicationMetadataProvider } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { ApplicationSettingsProvider } from 'src/features/applicationSettings/ApplicationSettingsProvider';
 import { UiConfigProvider } from 'src/features/form/layout/UiConfigContext';
@@ -66,20 +65,18 @@ document.addEventListener('DOMContentLoaded', () => {
   root?.render(
     <AppQueriesProvider {...queries}>
       <ErrorBoundary>
-        <LoadingRegistryProvider>
-          <AppPrefetcher />
-          <AppWrapper>
-            <LanguageProvider>
-              <LangToolsStoreProvider>
-                <ViewportWrapper>
-                  <UiConfigProvider>
-                    <RouterProvider router={router} />
-                  </UiConfigProvider>
-                </ViewportWrapper>
-              </LangToolsStoreProvider>
-            </LanguageProvider>
-          </AppWrapper>
-        </LoadingRegistryProvider>
+        <AppPrefetcher />
+        <AppWrapper>
+          <LanguageProvider>
+            <LangToolsStoreProvider>
+              <ViewportWrapper>
+                <UiConfigProvider>
+                  <RouterProvider router={router} />
+                </UiConfigProvider>
+              </ViewportWrapper>
+            </LangToolsStoreProvider>
+          </LanguageProvider>
+        </AppWrapper>
       </ErrorBoundary>
     </AppQueriesProvider>,
   );

diff --git a/src/test/renderWithProviders.tsx b/src/test/renderWithProviders.tsx
@@ -24,7 +24,6 @@ import { getTextResourcesMock } from 'src/__mocks__/getTextResourcesMock';
 import { AppQueriesProvider } from 'src/core/contexts/AppQueriesProvider';
 import { DataLoadingProvider } from 'src/core/contexts/dataLoadingContext';
 import { TaskStoreProvider } from 'src/core/contexts/taskStoreContext';
-import { LoadingRegistryProvider } from 'src/core/loading/LoadingRegistry';
 import { RenderStart } from 'src/core/ui/RenderStart';
 import { ApplicationMetadataProvider } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { ApplicationSettingsProvider } from 'src/features/applicationSettings/ApplicationSettingsProvider';
@@ -284,41 +283,39 @@ function DefaultProviders({ children, queries, queryClient, Router = DefaultRout
       {...queries}
       queryClient={queryClient}
     >
-      <LoadingRegistryProvider>
-        <LanguageProvider>
-          <DataLoadingProvider>
-            <TaskStoreProvider>
-              <LangToolsStoreProvider>
-                <UiConfigProvider>
-                  <PageNavigationProvider>
-                    <Router>
-                      <AppRoutingProvider>
-                        <ApplicationMetadataProvider>
-                          <GlobalFormDataReadersProvider>
-                            <OrgsProvider>
-                              <ApplicationSettingsProvider>
-                                <LayoutSetsProvider>
-                                  <ProfileProvider>
-                                    <PartyProvider>
-                                      <TextResourcesProvider>
-                                        <InstantiationProvider>{children}</InstantiationProvider>
-                                      </TextResourcesProvider>
-                                    </PartyProvider>
-                                  </ProfileProvider>
-                                </LayoutSetsProvider>
-                              </ApplicationSettingsProvider>
-                            </OrgsProvider>
-                          </GlobalFormDataReadersProvider>
-                        </ApplicationMetadataProvider>
-                      </AppRoutingProvider>
-                    </Router>
-                  </PageNavigationProvider>
-                </UiConfigProvider>
-              </LangToolsStoreProvider>
-            </TaskStoreProvider>
-          </DataLoadingProvider>
-        </LanguageProvider>
-      </LoadingRegistryProvider>
+      <LanguageProvider>
+        <DataLoadingProvider>
+          <TaskStoreProvider>
+            <LangToolsStoreProvider>
+              <UiConfigProvider>
+                <PageNavigationProvider>
+                  <Router>
+                    <AppRoutingProvider>
+                      <ApplicationMetadataProvider>
+                        <GlobalFormDataReadersProvider>
+                          <OrgsProvider>
+                            <ApplicationSettingsProvider>
+                              <LayoutSetsProvider>
+                                <ProfileProvider>
+                                  <PartyProvider>
+                                    <TextResourcesProvider>
+                                      <InstantiationProvider>{children}</InstantiationProvider>
+                                    </TextResourcesProvider>
+                                  </PartyProvider>
+                                </ProfileProvider>
+                              </LayoutSetsProvider>
+                            </ApplicationSettingsProvider>
+                          </OrgsProvider>
+                        </GlobalFormDataReadersProvider>
+                      </ApplicationMetadataProvider>
+                    </AppRoutingProvider>
+                  </Router>
+                </PageNavigationProvider>
+              </UiConfigProvider>
+            </LangToolsStoreProvider>
+          </TaskStoreProvider>
+        </DataLoadingProvider>
+      </LanguageProvider>
     </AppQueriesProvider>
   );
 }

diff --git a/test/e2e/integration/subform-test/subform.ts b/test/e2e/integration/subform-test/subform.ts
@@ -94,6 +94,65 @@ describe('Subform test', () => {
       cy.wrap($toast).should('contain', 'Maks antall moped oppføringer har blitt nådd');
       cy.wrap($toast).should('have.class', 'Toastify__toast--error');
     });
+
+    cy.get('#Input-Age').type('30');
+    cy.get(appFrontend.errorReport).should('not.exist');
+
+    // Delete the last two mopeds (those with errors)
+    cy.get('#subform-subform-mopeder-table tbody tr').should('have.length', 3);
+    cy.get('#subform-subform-mopeder-table tbody tr').eq(1).findByText('Slett').clickAndGone();
+    cy.get('#subform-subform-mopeder-table tbody tr').should('have.length', 2);
+    cy.get('#subform-subform-mopeder-table tbody tr').eq(1).findByText('Slett').clickAndGone();
+    cy.get('#subform-subform-mopeder-table tbody tr').should('have.length', 1);
+    cy.get('[data-testid="NavigationButtons"] button.fds-btn--primary').clickAndGone();
+
+    // Verify summary fields
+    cy.get('[data-testid=summary-single-value-component]').eq(0).should('contain.text', name);
+    cy.get('[data-testid=summary-single-value-component]').eq(1).should('contain.text', '30 år');
+    cy.get('#label-attachment-summary2-attachments')
+      .next()
+      .should('contain.text', 'Du har ikke lagt inn informasjon her');
+
+    cy.get('#form-content-subform-mopeder table tbody tr').should('have.length', 1);
+    cy.get('#form-content-subform-mopeder table tbody tr').within(() => {
+      cy.get('td').eq(0).should('have.text', regno);
+      cy.get('td').eq(1).should('have.text', merke);
+      cy.get('td').eq(2).should('have.text', extrainfo);
+    });
+
+    cy.get('#label-subform-boker').next().should('contain.text', 'Du har ikke lagt inn informasjon her');
+
+    cy.findByRole('button', { name: 'Vis Summary2 for hele steget' }).clickAndGone();
+
+    cy.get('.fds-paragraph')
+      .eq(0)
+      .should(
+        'contain.text',
+        'Subform komponentene finner du nederst på denne siden, under et par felter med personalia.',
+      );
+    cy.get('[data-testid=summary-single-value-component]').eq(0).should('contain.text', name);
+    cy.get('[data-testid=summary-single-value-component]').eq(1).should('contain.text', '30 år');
+    cy.get('#label-attachment-summary2-attachments')
+      .next()
+      .should('contain.text', 'Du har ikke lagt inn informasjon her');
+
+    // There is probably room for improvement in the way Summary generates ids here, and we probably want
+    // to change the subform title to something other than the data model UUID.
+    cy.get('#label-undefined').should('contain.text', 'Dine mopeder');
+    cy.get('#label-undefined')
+      .next()
+      .invoke('text')
+      .should('match', /^[a-f0-9-]+$/);
+
+    cy.get('[data-testid=summary-single-value-component]').eq(2).should('contain.text', regno);
+    cy.get('[data-testid=summary-single-value-component]').eq(3).should('contain.text', merke);
+    cy.get('[data-testid=summary-single-value-component]').eq(4).should('contain.text', model);
+    cy.get('[data-testid=summary-single-value-component]').eq(5).should('contain.text', 'Har du ekstra info?');
+    cy.get('[data-testid=summary-single-value-component]').eq(5).should('contain.text', 'Ja');
+    cy.get('[data-testid=summary-single-value-component]').eq(6).should('contain.text', extrainfo);
+    cy.get('[data-testid=summary-single-value-component]').eq(7).should('contain.text', year);
+
+    cy.get('#label-subform-boker').next().should('contain.text', 'Du har ikke lagt inn informasjon her');
   });
 
   it('subform validation', () => {