diff --git a/frontend/packages/ux-editor/src/App.test.tsx b/frontend/packages/ux-editor/src/App.test.tsx index 36b165fc13f..c47e173c9bb 100644 --- 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 index d4154033d21..18a91ed7e90 100644 --- 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();