Make sure selectedLayout is an existing one in layoutsets before rend…

…ering ux-editor
Altinn · Mar 21, 2024 · bd28f70 · bd28f70
1 parent 9f5e6bf
commit bd28f70
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/frontend/packages/ux-editor/src/App.test.tsx b/frontend/packages/ux-editor/src/App.test.tsx
@@ -46,16 +46,17 @@ describe('App', () => {
     await waitForLoadingToFinish();
   });
 
-  it('Removes the preview layout set from local storage if it does not exist', async () => {
-    const removeSelectedLayoutSetMock = jest.fn();
+  it('Sets a new initial layout set as selected if current does not exist', async () => {
+    const setSelectedLayoutSetMock = jest.fn();
     const layoutSetThatDoesNotExist = 'layout-set-that-does-not-exist';
     typedLocalStorage.setItem('selectedLayoutSet', layoutSetThatDoesNotExist);
     renderApp(mockQueries, {
       selectedLayoutSet: layoutSetThatDoesNotExist,
-      removeSelectedLayoutSet: removeSelectedLayoutSetMock,
+      setSelectedLayoutSet: setSelectedLayoutSetMock,
     });
     await waitForLoadingToFinish();
-    expect(removeSelectedLayoutSetMock).toHaveBeenCalledTimes(1);
+    expect(setSelectedLayoutSetMock).toHaveBeenCalledTimes(1);
+    expect(setSelectedLayoutSetMock).toHaveBeenCalledWith(layoutSetsMock.sets[0].id);
   });
 
   it('Does not remove the preview layout set from local storage if it exists', async () => {

diff --git a/frontend/packages/ux-editor/src/App.tsx b/frontend/packages/ux-editor/src/App.tsx
@@ -30,11 +30,15 @@ export function App() {
     useDatamodelMetadataQuery(org, app, selectedLayoutSet);
   const { isSuccess: areTextResourcesFetched } = useTextResourcesQuery(org, app);
 
+  const layoutSetsIncludesSelectedLayout = layoutSets?.sets
+    ?.map((set) => set.id)
+    .includes(selectedLayoutSet);
+
   useEffect(() => {
     if (
       areLayoutSetsFetched &&
       selectedLayoutSet &&
-      (!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSet))
+      (!layoutSets || !layoutSetsIncludesSelectedLayout)
     )
       removeSelectedLayoutSet();
   }, [
@@ -43,10 +47,14 @@ export function App() {
     selectedLayoutSet,
     setSelectedLayoutSet,
     removeSelectedLayoutSet,
+    layoutSetsIncludesSelectedLayout,
   ]);
 
   const componentIsReady =
-    areWidgetsFetched && isDatamodelFetched && areTextResourcesFetched && areLayoutSetsFetched;
+    areWidgetsFetched &&
+    isDatamodelFetched &&
+    areTextResourcesFetched &&
+    layoutSetsIncludesSelectedLayout;
 
   const componentHasError = dataModelFetchedError || widgetFetchedError;
 
@@ -70,11 +78,11 @@ export function App() {
   };
 
   useEffect(() => {
-    if (selectedLayoutSet === null && layoutSets) {
+    if (layoutSets && (selectedLayoutSet === null || !layoutSetsIncludesSelectedLayout)) {
       // Only set layout set if layout sets exists and there is no layout set selected yet
       setSelectedLayoutSet(layoutSets.sets[0].id);
     }
-  }, [setSelectedLayoutSet, selectedLayoutSet, layoutSets, app]);
+  }, [setSelectedLayoutSet, selectedLayoutSet, layoutSets, layoutSetsIncludesSelectedLayout, app]);
 
   if (componentHasError) {
     const mappedError = mapErrorToDisplayError();