refactored layouts url code

Author: Jondyr

src/features/form/layout/LayoutsContext.tsx

@@ -16,6 +16,7 @@ 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';
@@ -39,10 +40,14 @@ export function useLayoutQueryDef(
   return {
     queryKey: ['formLayouts', layoutSetId, enabled],
     queryFn: layoutSetId
-      ? () =>
-          fetchLayouts(layoutSetId, features.addInstanceIdentifierToLayoutRequests ? instanceId : undefined).then(
-            (layouts) => processLayouts(layouts, layoutSetId, defaultDataModelType),
-          )
+      ? async () => {
+          const shouldUseInstanceEndpoint = features.addInstanceIdentifierToLayoutRequests && instanceId;
+          const layouts = shouldUseInstanceEndpoint
+            ? await fetchLayoutsForInstance(layoutSetId, instanceId)
+            : await fetchLayouts(layoutSetId);
+
+          return processLayouts(layouts, layoutSetId, defaultDataModelType);
+        }
       : skipToken,
     enabled: enabled && !!layoutSetId,
   };

src/queries/queries.ts

@@ -27,6 +27,7 @@ import {
   getFileUploadUrl,
   getFileUploadUrlOld,
   getFooterLayoutUrl,
+  getInstanceLayoutsUrl,
   getInstantiateUrl,
   getJsonSchemaUrl,
   getLayoutSetsUrl,
@@ -290,8 +291,10 @@ export const fetchFooterLayout = (): Promise<IFooterLayout | null> => httpGet(ge
 
 export const fetchLayoutSets = (): Promise<ILayoutSets> => httpGet(getLayoutSetsUrl());
 
-export const fetchLayouts = (layoutSetId: string, instanceId?: string): Promise<ILayoutCollection> =>
-  httpGet(getLayoutsUrl(layoutSetId, instanceId));
+export const fetchLayouts = (layoutSetId: string): Promise<ILayoutCollection> => httpGet(getLayoutsUrl(layoutSetId));
+
+export const fetchLayoutsForInstance = (layoutSetId: string, instanceId: string): Promise<ILayoutCollection> =>
+  httpGet(getInstanceLayoutsUrl(layoutSetId, instanceId));
 
 export const fetchLayoutSettings = (layoutSetId: string): Promise<ILayoutSettings> =>
   httpGet(getLayoutSettingsUrl(layoutSetId));

src/test/renderWithProviders.tsx

@@ -152,6 +152,7 @@ const defaultQueryMocks: AppQueries = {
   fetchPostPlace: async () => ({ valid: true, result: 'OSLO' }),
   fetchLayoutSettings: async () => ({ pages: { order: [] } }),
   fetchLayouts: () => Promise.reject(new Error('fetchLayouts not mocked')),
+  fetchLayoutsForInstance: () => Promise.reject(new Error('fetchLayoutsForInstance not mocked')),
   fetchBackendValidations: async () => [],
   fetchBackendValidationsForDataElement: async () => [],
   fetchPaymentInformation: async () => paymentResponsePayload,

src/utils/urls/appUrlHelper.test.ts

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

src/utils/urls/appUrlHelper.ts

@@ -185,12 +185,9 @@ 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, instanceId?: string) => {
-  if (instanceId) {
-    return `${appPath}/instances/${instanceId}/layouts/${layoutSetId}`;
-  }
-  return `${appPath}/api/layouts/${layoutSetId}`;
-};
+export const getLayoutsUrl = (layoutSetId: string) => `${appPath}/api/layouts/${layoutSetId}`;
+export const getInstanceLayoutsUrl = (layoutSetId: string, instanceId: string) =>
+  `${appPath}/instances/${instanceId}/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}`;