adds layoutsets to appData

Author: cammiida

src/App.test.tsx

@@ -26,16 +26,6 @@ describe('App', () => {
     await screen.findByRole('heading', { level: 1, name: 'Ukjent feil' });
   });
 
-  test('should render unknown error when hasLayoutSetError', async () => {
-    await renderWithInstanceAndLayout({
-      renderer: () => <App />,
-      queries: {
-        fetchLayoutSets: () => Promise.reject(new Error('400 Bad Request')),
-      },
-    });
-    await screen.findByRole('heading', { level: 1, name: 'Ukjent feil' });
-  });
-
   test('should render unknown error when hasOrgsError', async () => {
     await renderWithInstanceAndLayout({
       renderer: () => <App />,

src/__mocks__/getLayoutSetsMock.ts

@@ -1,26 +1,24 @@
-import type { ILayoutSet, ILayoutSets } from 'src/layout/common.generated';
+import type { ILayoutSet } from 'src/layout/common.generated';
 
 export const defaultDataTypeMock = 'test-data-model';
 export const statelessDataTypeMock = 'stateless';
-export function getLayoutSetsMock(): ILayoutSets {
-  return {
-    sets: [
-      {
-        id: 'stateless',
-        dataType: statelessDataTypeMock,
-      },
-      {
-        id: 'stateless-anon',
-        dataType: 'stateless-anon',
-      },
-      {
-        id: 'some-data-task',
-        dataType: defaultDataTypeMock,
-        tasks: ['Task_1'],
-      },
-      getSubFormLayoutSetMock(),
-    ],
-  };
+export function getLayoutSetsMock(): ILayoutSet[] {
+  return [
+    {
+      id: 'stateless',
+      dataType: statelessDataTypeMock,
+    },
+    {
+      id: 'stateless-anon',
+      dataType: 'stateless-anon',
+    },
+    {
+      id: 'some-data-task',
+      dataType: defaultDataTypeMock,
+      tasks: ['Task_1'],
+    },
+    getSubFormLayoutSetMock(),
+  ];
 }
 
 export function getSubFormLayoutSetMock(): ILayoutSet {

src/features/appData/AppDataProvider.tsx

@@ -9,25 +9,35 @@ import { appDataQueries } from 'src/features/appData/AppDataService';
 import { VersionErrorOrChildren } from 'src/features/applicationMetadata/VersionErrorOrChildren';
 import { useNavigationParam } from 'src/features/routing/AppRoutingContext';
 import type { ApplicationMetadata } from 'src/features/applicationMetadata/types';
+import type { ILayoutSets } from 'src/layout/common.generated';
 
 type AppData = {
   appMetadata: ApplicationMetadata;
+  layoutSets: ILayoutSets;
 };
 
 export const AppDataContext = createContext<AppData | null>(null);
 export function AppDataContextProvider({ children }: PropsWithChildren) {
   const instanceGuid = useNavigationParam('instanceGuid');
   const appMetadataQuery = useQuery(appDataQueries.applicationMetadata(instanceGuid));
+  const layoutSetsQuery = useQuery(appDataQueries.layoutSets());
 
   if (appMetadataQuery.isPending) {
     return <Loader reason='fetching-applicationMetadata' />;
   }
   if (appMetadataQuery.isError) {
     return <DisplayError error={appMetadataQuery.error} />;
   }
+  if (layoutSetsQuery.isPending) {
+    return <Loader reason='fetching-layoutSets' />;
+  }
+
+  if (layoutSetsQuery.error) {
+    return <DisplayError error={layoutSetsQuery.error} />;
+  }
 
   return (
-    <AppDataContext.Provider value={{ appMetadata: appMetadataQuery.data }}>
+    <AppDataContext.Provider value={{ appMetadata: appMetadataQuery.data, layoutSets: layoutSetsQuery.data }}>
       <VersionErrorOrChildren>{children}</VersionErrorOrChildren>
     </AppDataContext.Provider>
   );

src/features/appData/AppDataService.ts

@@ -1,7 +1,8 @@
 import { queryOptions } from '@tanstack/react-query';
+import { v4 as uuidv4 } from 'uuid';
 
 import { MINIMUM_APPLICATION_VERSION } from 'src/features/applicationMetadata/minVersion';
-import { fetchApplicationMetadata } from 'src/queries/queries';
+import { fetchApplicationMetadata, fetchLayoutSets } from 'src/queries/queries';
 import { isAtLeastVersion } from 'src/utils/versionCompare';
 import type {
   ApplicationMetadata,
@@ -43,4 +44,21 @@ export const appDataQueries = {
         };
       },
     }),
+  layoutSets: () =>
+    queryOptions({
+      queryKey: ['layoutSets'],
+      queryFn: async () => {
+        const layoutSets = await fetchLayoutSets();
+        if (layoutSets?.uiSettings?.taskNavigation) {
+          return {
+            ...layoutSets,
+            uiSettings: {
+              ...layoutSets.uiSettings,
+              taskNavigation: layoutSets.uiSettings.taskNavigation.map((g) => ({ ...g, id: uuidv4() })),
+            },
+          };
+        }
+        return layoutSets;
+      },
+    }),
 } as const;

src/features/appData/hooks.ts

@@ -1,10 +1,10 @@
 import { useContext } from 'react';
 
 import { AppDataContext } from 'src/features/appData/AppDataProvider';
+import type { GlobalPageSettings } from 'src/layout/common.generated';
 
 function useAppDataContext() {
   const appDataContext = useContext(AppDataContext);
-
   if (!appDataContext) {
     throw new Error('No app data context');
   }
@@ -13,7 +13,13 @@ function useAppDataContext() {
 }
 
 export function useApplicationMetadata() {
-  const appDataContext = useAppDataContext();
+  return useAppDataContext().appMetadata;
+}
+
+export function useLayoutSets() {
+  return useAppDataContext().layoutSets.sets;
+}
 
-  return appDataContext.appMetadata;
+export function useGlobalUISettings(): GlobalPageSettings | undefined {
+  return useAppDataContext().layoutSets.uiSettings;
 }

src/features/datamodel/useBindingSchema.tsx

@@ -3,13 +3,12 @@ import { useCallback, useMemo } from 'react';
 import type { JSONSchema7 } from 'json-schema';
 
 import { useTaskStore } from 'src/core/contexts/taskStoreContext';
-import { useApplicationMetadata } from 'src/features/appData/hooks';
+import { useApplicationMetadata, useLayoutSets } from 'src/features/appData/hooks';
 import {
   getCurrentDataTypeForApplication,
   getCurrentTaskDataElementId,
 } from 'src/features/applicationMetadata/appMetadataUtils';
 import { DataModels } from 'src/features/datamodel/DataModelsProvider';
-import { useLayoutSets } from 'src/features/form/layoutSets/LayoutSetsProvider';
 import { useLaxInstanceData, useLaxInstanceId } from 'src/features/instance/InstanceContext';
 import { useProcessTaskId } from 'src/features/instance/useProcessTaskId';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';

src/features/expressions/shared-functions.test.tsx

@@ -10,7 +10,7 @@ import { getInstanceDataMock } from 'src/__mocks__/getInstanceDataMock';
 import { getSubFormLayoutSetMock } from 'src/__mocks__/getLayoutSetsMock';
 import { getProcessDataMock } from 'src/__mocks__/getProcessDataMock';
 import { getProfileMock } from 'src/__mocks__/getProfileMock';
-import { useApplicationMetadata } from 'src/features/appData/hooks';
+import { useApplicationMetadata, useLayoutSets } from 'src/features/appData/hooks';
 import { ApplicationMetadata } from 'src/features/applicationMetadata/types';
 import { type FunctionTestBase, getSharedTests, type SharedTestFunctionContext } from 'src/features/expressions/shared';
 import { ExprVal } from 'src/features/expressions/types';
@@ -329,6 +329,9 @@ describe('Expressions shared function tests', () => {
       jest.mocked(useApplicationMetadata).mockReturnValue(applicationMetadata);
       jest.mocked(useExternalApis).mockReturnValue(externalApis as ExternalApisResult);
       jest.mocked(fetchProcessState).mockImplementation(async () => process ?? getProcessDataMock());
+      jest
+        .mocked(useLayoutSets)
+        .mockReturnValue([{ id: 'layout-set', dataType: 'default', tasks: ['Task_1'] }, getSubFormLayoutSetMock()]);
 
       const renderFunc = stateless ? renderWithoutInstanceAndLayout : renderWithInstanceAndLayout;
       const { rerender } = await renderFunc({
@@ -341,9 +344,6 @@ describe('Expressions shared function tests', () => {
           />
         ),
         queries: {
-          fetchLayoutSets: async () => ({
-            sets: [{ id: 'layout-set', dataType: 'default', tasks: ['Task_1'] }, getSubFormLayoutSetMock()],
-          }),
           fetchLayouts: async () => layouts,
           fetchFormData,
           fetchInstanceData,

src/features/form/layout/LayoutsContext.tsx

@@ -7,11 +7,11 @@ import { ContextNotProvided } from 'src/core/contexts/context';
 import { delayedContext } from 'src/core/contexts/delayedContext';
 import { createQueryContext } from 'src/core/contexts/queryContext';
 import { useTaskStore } from 'src/core/contexts/taskStoreContext';
+import { useLayoutSets } from 'src/features/appData/hooks';
 import { useCurrentDataModelName } from 'src/features/datamodel/useBindingSchema';
 import { cleanLayout } from 'src/features/form/layout/cleanLayout';
 import { makeLayoutLookups } from 'src/features/form/layout/makeLayoutLookups';
 import { applyLayoutQuirks } from 'src/features/form/layout/quirks';
-import { useLayoutSets } from 'src/features/form/layoutSets/LayoutSetsProvider';
 import { useCurrentLayoutSetId } from 'src/features/form/layoutSets/useCurrentLayoutSet';
 import { useHasInstance } from 'src/features/instance/InstanceContext';
 import { useProcessQuery } from 'src/features/instance/useProcessQuery';

src/features/form/layoutSets/LayoutSetsProvider.tsx

@@ -1,8 +1,6 @@
-import { ContextNotProvided } from 'src/core/contexts/context';
 import { useTaskStore } from 'src/core/contexts/taskStoreContext';
-import { useApplicationMetadata } from 'src/features/appData/hooks';
+import { useApplicationMetadata, useLayoutSets } from 'src/features/appData/hooks';
 import { getCurrentLayoutSet } from 'src/features/applicationMetadata/appMetadataUtils';
-import { useLaxLayoutSets } from 'src/features/form/layoutSets/LayoutSetsProvider';
 import { useProcessTaskId } from 'src/features/instance/useProcessTaskId';
 
 export function useCurrentLayoutSetId() {
@@ -11,14 +9,10 @@ export function useCurrentLayoutSetId() {
 
 export function useCurrentLayoutSet() {
   const application = useApplicationMetadata();
-  const layoutSets = useLaxLayoutSets();
+  const layoutSets = useLayoutSets();
   const taskId = useProcessTaskId();
   const overriddenLayoutSetId = useTaskStore((state) => state.overriddenLayoutSetId);
 
-  if (layoutSets === ContextNotProvided) {
-    return undefined;
-  }
-
   if (overriddenLayoutSetId) {
     return layoutSets.find((set) => set.id === overriddenLayoutSetId);
   }