feat: instance contextual layout fetching

src/features/applicationMetadata/types.ts

@@ -52,4 +52,5 @@ export interface IPartyTypesAllowed {
 
 export interface IBackendFeaturesState {
   jsonObjectInDataResponse: boolean; // Extended attachment validation
+  addInstanceIdentifierToLayoutRequests: boolean; // Add instance identifier to layout requests
 }

src/features/form/layout/LayoutsContext.tsx

@@ -6,13 +6,14 @@ 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 { 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 { useLayoutSetIdFromUrl } from 'src/features/form/layoutSets/useCurrentLayoutSet';
-import { useInstanceDataQuery } from 'src/features/instance/InstanceContext';
+import { useInstanceDataQuery, useLaxInstanceId } from 'src/features/instance/InstanceContext';
 import { useProcessQuery } from 'src/features/instance/useProcessQuery';
 import { makeLikertChildId } from 'src/layout/Likert/Generator/makeLikertChildId';
 import type { QueryDefinition } from 'src/core/queries/usePrefetchQuery';
@@ -32,10 +33,16 @@ export function useLayoutQueryDef(
   layoutSetId?: string,
 ): QueryDefinition<LayoutContextValue> {
   const { fetchLayouts } = useAppQueries();
+  const instanceId = useLaxInstanceId();
+  const features = useApplicationMetadata().features ?? {};
+
   return {
     queryKey: ['formLayouts', layoutSetId, enabled],
     queryFn: layoutSetId
-      ? () => fetchLayouts(layoutSetId).then((layouts) => processLayouts(layouts, layoutSetId, defaultDataModelType))
+      ? () =>
+          fetchLayouts(layoutSetId, features.addInstanceIdentifierToLayoutRequests ? instanceId : undefined).then(
+            (layouts) => processLayouts(layouts, layoutSetId, defaultDataModelType),
+          )
       : skipToken,
     enabled: enabled && !!layoutSetId,
   };

src/queries/queries.ts

@@ -290,7 +290,8 @@ export const fetchFooterLayout = (): Promise<IFooterLayout | null> => httpGet(ge
 
 export const fetchLayoutSets = (): Promise<ILayoutSets> => httpGet(getLayoutSetsUrl());
 
-export const fetchLayouts = (layoutSetId: string): Promise<ILayoutCollection> => httpGet(getLayoutsUrl(layoutSetId));
+export const fetchLayouts = (layoutSetId: string, instanceId?: string): Promise<ILayoutCollection> =>
+  httpGet(getLayoutsUrl(layoutSetId, instanceId));
 
 export const fetchLayoutSettings = (layoutSetId: string): Promise<ILayoutSettings> =>
   httpGet(getLayoutSettingsUrl(layoutSetId));

src/utils/urls/appUrlHelper.test.ts

@@ -377,6 +377,11 @@ describe('Frontend urlHelper.ts', () => {
 
       expect(result).toBe('https://local.altinn.cloud/ttd/test/api/layouts/custom-layout.json');
     });
+
+    it('should include instance ID in layout URL when provided', () => {
+      const result = getLayoutsUrl('custom-layout.json', 'instanceId-1234');
+      expect(result).toBe('https://local.altinn.cloud/ttd/test/instances/instanceId-1234/layouts/custom-layout.json');
+    });
   });
 
   describe('getLayoutSettingsUrl', () => {

src/utils/urls/appUrlHelper.ts

@@ -185,7 +185,12 @@ export const getLayoutSettingsUrl = (layoutSetId: string) => `${appPath}/api/lay
 export const getLayoutSetsUrl = () => `${appPath}/api/layoutsets`;
 export const getFooterLayoutUrl = () => `${appPath}/api/v1/footer`;
 export const getFetchFormDynamicsUrl = (layoutSetId: string) => `${appPath}/api/ruleconfiguration/${layoutSetId}`;
-export const getLayoutsUrl = (layoutSetId: string) => `${appPath}/api/layouts/${layoutSetId}`;
+export const getLayoutsUrl = (layoutSetId: string, instanceId?: string) => {
+  if (instanceId) {
+    return `${appPath}/instances/${instanceId}/layouts/${layoutSetId}`;
+  }
+  return `${appPath}/api/layouts/${layoutSetId}`;
+};
 export const getRulehandlerUrl = (layoutSet: string) => `${appPath}/api/rulehandler/${layoutSet}`;
 export const getActiveInstancesUrl = (partyId: number) => `${appPath}/instances/${partyId}/active`;
 export const getInstanceUiUrl = (instanceId: string) => `${appPath}#/instance/${instanceId}`;