chore: Select first page by default

src/Designer/frontend/packages/ux-editor/src/containers/DesignView/DesignView.test.tsx

@@ -26,6 +26,7 @@ import type { ILayoutSettings } from 'app-shared/types/global';
 import type { FormLayoutsResponse } from 'app-shared/types/api';
 import { AppContext } from '@altinn/ux-editor/AppContext';
 import type { PagesModel } from 'app-shared/types/api/dto/PagesModel';
+import { ItemType } from '../../components/Properties/ItemType';
 
 const mockSelectedLayoutSet = layoutSet1NameMock;
 const mockPageName1: string = layout1NameMock;
@@ -180,6 +181,73 @@ describe('DesignView', () => {
     expect(appContextMock.setSelectedFormLayoutName).toHaveBeenCalledTimes(1);
     expect(appContextMock.setSelectedFormLayoutName).toHaveBeenCalledWith(undefined);
   });
+
+  describe('Auto-select first page', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    const renderDesignViewWithAutoSelect = (pagesModel: PagesModel) => {
+      const mockSetSelectedFormLayoutName = jest.fn();
+      const mockSetSelectedItem = jest.fn();
+      const appContextWithoutSelection = {
+        ...appContextMock,
+        selectedFormLayoutName: undefined,
+        setSelectedFormLayoutName: mockSetSelectedFormLayoutName,
+        setSelectedItem: mockSetSelectedItem,
+        setSelectedGroupName: jest.fn(),
+      };
+
+      const queryClient = createQueryClientMock();
+      queryClient.setQueryData(
+        [QueryKey.FormLayouts, org, app, mockSelectedLayoutSet],
+        convertExternalLayoutsToInternalFormat(externalLayoutsMock),
+      );
+      queryClient.setQueryData([QueryKey.Pages, org, app, mockSelectedLayoutSet], pagesModel);
+      queryClient.setQueryData(
+        [QueryKey.FormLayoutSettings, org, app, mockSelectedLayoutSet],
+        formLayoutSettingsMock,
+      );
+
+      renderWithProviders(
+        <StudioDragAndDrop.Provider rootId={BASE_CONTAINER_ID} onMove={jest.fn()} onAdd={jest.fn()}>
+          <FormItemContextProvider>
+            <AppContext.Provider value={appContextWithoutSelection}>
+              <DesignView />
+            </AppContext.Provider>
+          </FormItemContextProvider>
+        </StudioDragAndDrop.Provider>,
+        {
+          queryClient,
+        },
+      );
+
+      return { mockSetSelectedFormLayoutName, mockSetSelectedItem };
+    };
+
+    it('automatically selects the first page when no page is selected and pages are available (without groups)', () => {
+      const { mockSetSelectedFormLayoutName, mockSetSelectedItem } = renderDesignViewWithAutoSelect(
+        { pages: [{ id: layout1NameMock }, { id: layout2NameMock }] },
+      );
+      expect(mockSetSelectedFormLayoutName).toHaveBeenCalledWith(layout1NameMock);
+      expect(mockSetSelectedItem).toHaveBeenCalledWith({
+        type: ItemType.Page,
+        id: layout1NameMock,
+      });
+    });
+
+    it('automatically selects the first page from the first group when no page is selected (with groups)', () => {
+      const { mockSetSelectedFormLayoutName, mockSetSelectedItem } =
+        renderDesignViewWithAutoSelect(groupsPagesModelMock);
+      const firstGroup = groupsPagesModelMock.groups?.[0];
+      const firstPageId = firstGroup?.order?.[0]?.id;
+      expect(mockSetSelectedFormLayoutName).toHaveBeenCalledWith(firstPageId);
+      expect(mockSetSelectedItem).toHaveBeenCalledWith({
+        type: ItemType.Page,
+        id: firstPageId,
+      });
+    });
+  });
 });
 
 type renderDesignViewParams = {

src/Designer/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import classes from './DesignView.module.css';
 import { useTranslation } from 'react-i18next';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
@@ -118,6 +118,31 @@ export const DesignView = (): ReactNode => {
     [layouts],
   );
 
+  const firstPageId = useMemo(() => {
+    if (!pagesModel) return undefined;
+    if (isPagesModelWithGroups(pagesModel)) {
+      const firstGroup = pagesModel.groups?.[0];
+      return firstGroup?.order?.[0]?.id;
+    }
+    return pagesModel.pages?.[0]?.id;
+  }, [pagesModel]);
+
+  useEffect(() => {
+    if (!pagesQueryPending && firstPageId && !selectedFormLayoutName) {
+      setSelectedFormLayoutName(firstPageId);
+      setSelectedItem({
+        type: ItemType.Page,
+        id: firstPageId,
+      });
+    }
+  }, [
+    pagesQueryPending,
+    firstPageId,
+    selectedFormLayoutName,
+    setSelectedFormLayoutName,
+    setSelectedItem,
+  ]);
+
   if (pagesQueryPending) return <StudioSpinner aria-label={t('general.loading')} />;
 
   /**

src/Designer/frontend/testing/playwright/tests/ui-editor/ui-editor-data-model-binding-and-gitea.spec.ts

@@ -119,7 +119,7 @@ test('That it is possible to navigate back to ui-editor page and add the data mo
   await header.verifyNoGeneralErrorMessage();
   await header.clickOnNavigateToPageInTopMenuHeader('create');
   await uiEditorPage.clickOnUxEditorButton();
-  await uiEditorPage.verifyUiEditorPage(LAYOUT_SET);
+  await uiEditorPage.verifyUiEditorPage(LAYOUT_SET, pageName);
   await uiEditorPage.clickOnPageAccordion(pageName);
   await uiEditorPage.verifyUiEditorPage(LAYOUT_SET, pageName);
   await uiEditorPage.clickOnTreeItem(newInputLabel);