feat: 14732 set up a new navigation page

frontend/app-development/router/routes.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
-import { routerRoutes } from './routes';
+import { render, screen, waitFor } from '@testing-library/react';
+import { routerRoutes, UiEditor } from './routes';
 import { RoutePaths } from '../enums/RoutePaths';
 import React from 'react';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
@@ -13,6 +13,8 @@ import { PreviewContextProvider } from '../contexts/PreviewContext';
 import { AppDevelopmentContextProvider } from '../contexts/AppDevelopmentContext';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import type { QueryClient } from '@tanstack/react-query';
+import { LayoutContext } from 'app-development/contexts/LayoutContext/LayoutContext';
+import { SubApp as UiEditorLatest } from '@altinn/ux-editor/SubApp';
 
 // Mocks:
 jest.mock('@altinn/ux-editor-v3/SubApp', () => ({
@@ -22,8 +24,67 @@ jest.mock('@altinn/ux-editor/SubApp', () => ({
   SubApp: () => <div data-testid='latest version' />,
 }));
 
+jest.mock('@altinn/ux-editor/SubApp', () => ({
+  SubApp: ({ onLayoutSetNameChange }: { onLayoutSetNameChange: (name: string) => void }) => {
+    React.useEffect(() => {
+      onLayoutSetNameChange('test-layout');
+    }, [onLayoutSetNameChange]);
+    return <div data-testid='latest version' />;
+  },
+}));
+
+const renderWithProviders = (
+  ui: React.ReactElement,
+  queryClient: QueryClient,
+  layoutContextValue?: any,
+) => {
+  return render(
+    <ServicesContextProvider {...queriesMock} client={queryClient}>
+      <SettingsModalContextProvider>
+        <PreviewContextProvider>
+          <AppDevelopmentContextProvider>
+            <LayoutContext.Provider value={layoutContextValue}>{ui}</LayoutContext.Provider>
+          </AppDevelopmentContextProvider>
+        </PreviewContextProvider>
+      </SettingsModalContextProvider>
+    </ServicesContextProvider>,
+  );
+};
+
 describe('routes', () => {
   describe(RoutePaths.UIEditor, () => {
+    it('calls setSelectedLayoutSetName when onLayoutSetNameChange is triggered', () => {
+      const setSelectedLayoutSetName = jest.fn();
+      const queryClient = createQueryClientMock();
+      const appVersion: AppVersion = {
+        frontendVersion: '4.0.0',
+        backendVersion: '7.0.0',
+      };
+      queryClient.setQueryData([QueryKey.AppVersion, org, app], appVersion);
+      const { rerender } = renderWithProviders(<UiEditor />, queryClient, {
+        setSelectedLayoutSetName,
+      });
+      const layoutSetName = 'test-layout';
+      const onLayoutSetNameChange = jest.fn();
+      rerender(
+        <UiEditorLatest
+          shouldReloadPreview={false}
+          previewHasLoaded={undefined}
+          onLayoutSetNameChange={onLayoutSetNameChange}
+        />,
+      );
+      onLayoutSetNameChange(layoutSetName);
+      expect(setSelectedLayoutSetName).toHaveBeenCalledWith(layoutSetName);
+    });
+
+    it('Returns null when there is no AppVersion', async () => {
+      const queryClient = createQueryClientMock();
+      queryClient.setQueryData([QueryKey.AppVersion, org, app], null);
+      renderUiEditor(queryClient);
+      expect(screen.queryByTestId('version 3')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('latest version')).not.toBeInTheDocument();
+    });
+
     type FrontendVersion = null | '3.0.0' | '4.0.0';
     type PackageVersion = 'version 3' | 'latest version';
     type TestCase = [PackageVersion, FrontendVersion];
@@ -36,18 +97,25 @@ describe('routes', () => {
 
     it.each(testCases)(
       'Renders the %s schema editor page when the app frontend version is %s',
-      (expectedPackage, frontendVersion) => {
+      async (expectedPackage, frontendVersion) => {
         const appVersion: AppVersion = {
           frontendVersion,
           backendVersion: '7.0.0',
         };
         const queryClient = createQueryClientMock();
         queryClient.setQueryData([QueryKey.AppVersion, org, app], appVersion);
         renderUiEditor(queryClient);
-        expect(screen.getByTestId(expectedPackage)).toBeInTheDocument();
+        expect(await screen.findByTestId(expectedPackage)).toBeInTheDocument();
       },
     );
 
+    it('renders a loading spinner', async () => {
+      renderUiEditor();
+      await waitFor(() => {
+        expect(screen.getByTestId('studio-spinner-test-id')).toBeInTheDocument();
+      });
+    });
+
     it('renders a loading spinner while fetching frontend version', () => {
       renderUiEditor();
       expect(screen.getByText(textMock('ux_editor.loading_page'))).toBeInTheDocument();

frontend/app-development/router/routes.tsx

@@ -12,9 +12,12 @@ import { useAppVersionQuery } from 'app-shared/hooks/queries';
 import React from 'react';
 import { usePreviewContext } from '../contexts/PreviewContext';
 import { useLayoutContext } from '../contexts/LayoutContext';
-import { StudioPageSpinner } from '@studio/components';
+import { StudioPageSpinner, useLocalStorage } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { AppContentLibrary } from 'app-development/features/appContentLibrary';
+import { FormDesignerNavigation } from '@altinn/ux-editor/containers/FormDesignNavigation';
+import { FeatureFlag, shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
+import { useAppConfigQuery } from 'app-development/hooks/queries';
 
 interface IRouteProps {
   headerTextKey?: string;
@@ -39,28 +42,44 @@ const latestFrontendVersion = '4';
 const isLatestFrontendVersion = (version: AppVersion): boolean =>
   version?.frontendVersion?.startsWith(latestFrontendVersion);
 
-const UiEditor = () => {
+export const UiEditor = () => {
   const { org, app } = useStudioEnvironmentParams();
   const { t } = useTranslation();
   const { data: version, isPending: fetchingVersionIsPending } = useAppVersionQuery(org, app);
   const { shouldReloadPreview, previewHasLoaded } = usePreviewContext();
   const { setSelectedLayoutSetName } = useLayoutContext();
+  const [selectedFormLayoutSetName] = useLocalStorage<string>('layoutSet/' + app);
+  const isTaskNavigationEnabled = shouldDisplayFeature(FeatureFlag.TaskNavigation);
+
+  const { data: appConfigData } = useAppConfigQuery(org, app, {
+    hideDefaultError: true,
+  });
 
   if (fetchingVersionIsPending) {
     return <StudioPageSpinner spinnerTitle={t('ux_editor.loading_page')} />;
   }
 
   if (!version) return null;
 
-  return isLatestFrontendVersion(version) ? (
-    <UiEditorLatest
-      shouldReloadPreview={shouldReloadPreview}
-      previewHasLoaded={previewHasLoaded}
-      onLayoutSetNameChange={(layoutSetName) => setSelectedLayoutSetName(layoutSetName)}
-    />
-  ) : (
-    <UiEditorV3 />
-  );
+  const renderUiEditorContent = () => {
+    if (isTaskNavigationEnabled && !selectedFormLayoutSetName && appConfigData) {
+      return <FormDesignerNavigation appConfig={appConfigData.serviceName} />;
+    }
+
+    const handleLayoutSetNameChange = (layoutSetName: string) => {
+      setSelectedLayoutSetName(layoutSetName);
+    };
+
+    return (
+      <UiEditorLatest
+        shouldReloadPreview={shouldReloadPreview}
+        previewHasLoaded={previewHasLoaded}
+        onLayoutSetNameChange={handleLayoutSetNameChange}
+      />
+    );
+  };
+
+  return isLatestFrontendVersion(version) ? renderUiEditorContent() : <UiEditorV3 />;
 };
 
 export const routerRoutes: RouterRoute[] = [

frontend/packages/shared/src/utils/featureToggleUtils.test.ts

@@ -27,6 +27,16 @@ describe('featureToggle localStorage', () => {
   it('should return false if feature is not enabled in the localStorage', () => {
     expect(shouldDisplayFeature(FeatureFlag.ShouldOverrideAppLibCheck)).toBeFalsy();
   });
+
+  it('should return true if TaskNavigation is enabled in the localStorage', () => {
+    typedLocalStorage.setItem<string[]>('featureFlags', ['taskNavigation']);
+    expect(shouldDisplayFeature(FeatureFlag.TaskNavigation)).toBeTruthy();
+  });
+
+  it('should return false if TaskNavigation is not enabled in the localStorage', () => {
+    typedLocalStorage.setItem<string[]>('featureFlags', ['demo']);
+    expect(shouldDisplayFeature(FeatureFlag.TaskNavigation)).toBeFalsy();
+  });
 });
 
 describe('featureToggle url', () => {
@@ -69,6 +79,16 @@ describe('featureToggle url', () => {
     ]);
     expect(typedLocalStorage.getItem<string[]>('featureFlags')).toBeNull();
   });
+
+  it('should return true if TaskNavigation is enabled in the url', () => {
+    window.history.pushState({}, 'PageUrl', '/?featureFlags=taskNavigation');
+    expect(shouldDisplayFeature(FeatureFlag.TaskNavigation)).toBeTruthy();
+  });
+
+  it('should return false if TaskNavigation is not enabled in the url', () => {
+    window.history.pushState({}, 'PageUrl', '/?featureFlags=demo');
+    expect(shouldDisplayFeature(FeatureFlag.TaskNavigation)).toBeFalsy();
+  });
 });
 
 describe('addFeatureToLocalStorage', () => {
@@ -89,6 +109,11 @@ describe('addFeatureToLocalStorage', () => {
       'shouldOverrideAppLibCheck',
     ]);
   });
+
+  it('should add TaskNavigation to local storage', () => {
+    addFeatureFlagToLocalStorage(FeatureFlag.TaskNavigation);
+    expect(typedLocalStorage.getItem<string[]>('featureFlags')).toEqual(['taskNavigation']);
+  });
 });
 
 describe('removeFeatureFromLocalStorage', () => {

frontend/packages/shared/src/utils/featureToggleUtils.ts

@@ -11,6 +11,7 @@ export enum FeatureFlag {
   MainConfig = 'mainConfig',
   OptionListEditor = 'optionListEditor',
   ShouldOverrideAppLibCheck = 'shouldOverrideAppLibCheck',
+  TaskNavigation = 'taskNavigation',
 }
 
 /*

frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.module.css

@@ -0,0 +1,33 @@
+.wrapper {
+  background-color: #e6eff8;
+}
+
+.container {
+  margin: auto;
+  padding: var(--fds-spacing-6);
+  position: relative;
+}
+
+.header {
+  font-size: var(--fds-sizing-6);
+}
+
+.panel {
+  background-color: white;
+  border-radius: var(--fds-border_radius-medium);
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
+  padding: var(--fds-spacing-10);
+  position: relative;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fds-spacing-10);
+}
+
+.footer {
+  border-top: 2px solid #efefef;
+  margin-top: var(--fds-spacing-10);
+  padding-top: var(--fds-spacing-8);
+}

frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { FormDesignerNavigation, type FormDesignerNavigationProps } from './FormDesignerNavigation';
+import { renderWithProviders } from 'app-development/test/mocks';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+
+const defaultProps = {
+  appConfig: 'test',
+};
+
+describe('FormDesignerNavigation', () => {
+  it('renders the component with heading text test', () => {
+    render({ appConfig: 'test' });
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
+  it('renders the contact link', () => {
+    render();
+    expect(screen.getByRole('link', { name: textMock('general.contact') })).toBeInTheDocument();
+  });
+});
+
+const render = (props: Partial<FormDesignerNavigationProps> = {}) =>
+  renderWithProviders()(<FormDesignerNavigation {...defaultProps} {...props} />);

frontend/packages/ux-editor/src/containers/FormDesignNavigation/FormDesignerNavigation.tsx

@@ -0,0 +1,26 @@
+import { Link } from '@digdir/designsystemet-react';
+import React from 'react';
+import classes from './FormDesignerNavigation.module.css';
+import { useTranslation } from 'react-i18next';
+
+export type FormDesignerNavigationProps = {
+  appConfig: string;
+};
+
+export const FormDesignerNavigation = ({ appConfig }: FormDesignerNavigationProps) => {
+  const { t } = useTranslation();
+  return (
+    <div className={classes.wrapper}>
+      <main className={classes.container}>
+        <div className={classes.panel}>
+          <div className={classes.content}>
+            <div className={classes.header}>{appConfig}</div>
+          </div>
+          <footer className={classes.footer}>
+            <Link href='/contact'>{t('general.contact')}</Link>
+          </footer>
+        </div>
+      </main>
+    </div>
+  );
+};

frontend/packages/ux-editor/src/containers/FormDesignNavigation/index.ts

@@ -0,0 +1 @@
+export { FormDesignerNavigation } from './FormDesignerNavigation';