feat: instance contextual layout settings

src/features/form/layout/LayoutsContext.tsx

@@ -16,7 +16,6 @@ import { useLayoutSetIdFromUrl } from 'src/features/form/layoutSets/useCurrentLa
 import { useInstanceDataQuery, useLaxInstanceId } from 'src/features/instance/InstanceContext';
 import { useProcessQuery } from 'src/features/instance/useProcessQuery';
 import { makeLikertChildId } from 'src/layout/Likert/Generator/makeLikertChildId';
-import { fetchLayoutsForInstance } from 'src/queries/queries';
 import type { QueryDefinition } from 'src/core/queries/usePrefetchQuery';
 import type { CompExternal, ILayoutCollection, ILayouts } from 'src/layout/layout';
 import type { IExpandedWidthLayouts, IHiddenLayoutsExternal } from 'src/types';
@@ -33,7 +32,7 @@ export function useLayoutQueryDef(
   defaultDataModelType: string,
   layoutSetId?: string,
 ): QueryDefinition<LayoutContextValue> {
-  const { fetchLayouts } = useAppQueries();
+  const { fetchLayouts, fetchLayoutsForInstance } = useAppQueries();
   const instanceId = useLaxInstanceId();
   const features = useApplicationMetadata().features ?? {};
 

src/features/form/layoutSettings/LayoutSettingsContext.tsx

@@ -1,24 +1,38 @@
 import { useEffect } from 'react';
 
-import { useQuery } from '@tanstack/react-query';
+import { skipToken, useQuery } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 
 import { useAppQueries } from 'src/core/contexts/AppQueriesProvider';
 import { ContextNotProvided } from 'src/core/contexts/context';
 import { delayedContext } from 'src/core/contexts/delayedContext';
 import { createQueryContext } from 'src/core/contexts/queryContext';
+import { useApplicationMetadata } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { useLaxGlobalUISettings } from 'src/features/form/layoutSets/LayoutSetsProvider';
 import { useLayoutSetIdFromUrl } from 'src/features/form/layoutSets/useCurrentLayoutSet';
+import { useLaxInstanceId } from 'src/features/instance/InstanceContext';
 import { useShallowMemo } from 'src/hooks/useShallowMemo';
 import type { QueryDefinition } from 'src/core/queries/usePrefetchQuery';
 import type { GlobalPageSettings, ILayoutSettings, NavigationPageGroup } from 'src/layout/common.generated';
 
 // Also used for prefetching @see formPrefetcher.ts
 export function useLayoutSettingsQueryDef(layoutSetId?: string): QueryDefinition<ProcessedLayoutSettings> {
-  const { fetchLayoutSettings } = useAppQueries();
+  const { fetchLayoutSettings, fetchLayoutSettingsForInstance } = useAppQueries();
+  const instanceId = useLaxInstanceId();
+  const features = useApplicationMetadata().features ?? {};
+
   return {
     queryKey: ['layoutSettings', layoutSetId],
-    queryFn: async () => processData(layoutSetId ? await fetchLayoutSettings(layoutSetId) : null),
+    queryFn: layoutSetId
+      ? async () => {
+          const shouldUseInstanceEndpoint = features.addInstanceIdentifierToLayoutRequests && instanceId;
+          const layoutSettings = shouldUseInstanceEndpoint
+            ? await fetchLayoutSettingsForInstance(layoutSetId, instanceId)
+            : await fetchLayoutSettings(layoutSetId);
+
+          return processData(layoutSettings);
+        }
+      : skipToken,
   };
 }
 

src/queries/queries.ts

@@ -27,6 +27,7 @@ import {
   getFileUploadUrl,
   getFileUploadUrlOld,
   getFooterLayoutUrl,
+  getInstanceLayoutSettingsUrl,
   getInstanceLayoutsUrl,
   getInstantiateUrl,
   getJsonSchemaUrl,
@@ -299,6 +300,9 @@ export const fetchLayoutsForInstance = (layoutSetId: string, instanceId: string)
 export const fetchLayoutSettings = (layoutSetId: string): Promise<ILayoutSettings> =>
   httpGet(getLayoutSettingsUrl(layoutSetId));
 
+export const fetchLayoutSettingsForInstance = (layoutSetId: string, instanceId: string): Promise<ILayoutSettings> =>
+  httpGet(getInstanceLayoutSettingsUrl(layoutSetId, instanceId));
+
 export const fetchOptions = (url: string): Promise<AxiosResponse<IRawOption[]> | null> => httpGetRaw<IRawOption[]>(url);
 
 export const fetchDataList = (url: string): Promise<IDataList> => httpGet(url);

src/test/renderWithProviders.tsx

@@ -151,6 +151,7 @@ const defaultQueryMocks: AppQueries = {
   fetchAppLanguages: async () => [{ language: 'nb' }, { language: 'nn' }, { language: 'en' }],
   fetchPostPlace: async () => ({ valid: true, result: 'OSLO' }),
   fetchLayoutSettings: async () => ({ pages: { order: [] } }),
+  fetchLayoutSettingsForInstance: async () => ({ pages: { order: [] } }),
   fetchLayouts: () => Promise.reject(new Error('fetchLayouts not mocked')),
   fetchLayoutsForInstance: () => Promise.reject(new Error('fetchLayoutsForInstance not mocked')),
   fetchBackendValidations: async () => [],

src/utils/urls/appUrlHelper.ts

@@ -182,6 +182,8 @@ export const redirectToUpgrade = (reqAuthLevel: string) => {
 export const getJsonSchemaUrl = () => `${appPath}/api/jsonschema/`;
 export const getCustomValidationConfigUrl = (dataTypeId: string) => `${appPath}/api/validationconfig/${dataTypeId}`;
 export const getLayoutSettingsUrl = (layoutSetId: string) => `${appPath}/api/layoutsettings/${layoutSetId}`;
+export const getInstanceLayoutSettingsUrl = (layoutSetId: string, instanceId: string) =>
+  `${appPath}/instances/${instanceId}/layoutsettings/${layoutSetId}`;
 export const getLayoutSetsUrl = () => `${appPath}/api/layoutsets`;
 export const getFooterLayoutUrl = () => `${appPath}/api/v1/footer`;
 export const getFetchFormDynamicsUrl = (layoutSetId: string) => `${appPath}/api/ruleconfiguration/${layoutSetId}`;