Remove full reload of Preview (v4)

frontend/dashboard/hooks/useReposSearch/useRepoSearch.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import type { GridSortModel } from '@mui/x-data-grid';
 import { useSearchReposQuery } from '../queries';
 import type { SearchRepositoryResponse } from 'app-shared/types/api/SearchRepositoryResponse';
-import { useSearchParamsState } from '../useSearchParamsState';
+import { useSearchParamsState } from '../../../packages/shared/src/hooks/useSearchParamsState';
 import type { DATAGRID_PAGE_SIZE_TYPE } from '../../constants';
 import { DATAGRID_PAGE_SIZE_OPTIONS, DATAGRID_DEFAULT_PAGE_SIZE } from '../../constants';
 

frontend/packages/shared/src/api/paths.js

@@ -1,5 +1,5 @@
 import { stringify as s } from 'qs';
-import { APP_DEVELOPMENT_BASENAME } from '../constants';
+import { APP_DEVELOPMENT_BASENAME, PREVIEW_MOCK_PARTY_ID, PREVIEW_MOCK_INSTANCE_GUID, PREVIEW_MOCK_TASK_ID } from '../constants';
 
 // Base path
 const basePath = '/designer/api';
@@ -64,7 +64,7 @@ export const orgsListPath = () => `${basePath}/orgs`; // Get
 
 // Preview
 export const instanceIdForPreviewPath = (org, app) => `${basePath}/${org}/${app}/mock-instance-id`; // Get
-export const previewPage = (org, app, selectedLayoutSet) => `/app-specific-preview/${org}/${app}?${s({ selectedLayoutSet })}`;
+export const previewPage = (org, app, selectedLayout) => `/app-specific-preview/${org}/${app}#/instance/${PREVIEW_MOCK_PARTY_ID}/${PREVIEW_MOCK_INSTANCE_GUID}/${PREVIEW_MOCK_TASK_ID}/${selectedLayout}`;
 
 // Preview - SignalR Hub
 export const previewSignalRHubSubPath = () => `/previewHub`;

frontend/packages/shared/src/constants.js

@@ -12,3 +12,6 @@ export const DEFAULT_SELECTED_LAYOUT_NAME = 'default';
 export const TASKID_FOR_STATELESS_APPS = 'Task_1';
 export const MAX_NESTED_GROUP_LEVEL = 2;
 export const PROTECTED_TASK_NAME_CUSTOM_RECEIPT = 'CustomReceipt';
+export const PREVIEW_MOCK_PARTY_ID = '51001';
+export const PREVIEW_MOCK_INSTANCE_GUID = 'f1e23d45-6789-1bcd-8c34-56789abcdef0';
+export const PREVIEW_MOCK_TASK_ID = 'Task_1';

frontend/packages/ux-editor-v3/src/components/Preview/Preview.tsx

@@ -62,7 +62,6 @@ const NoSelectedPageMessage = () => {
 const PreviewFrame = () => {
   const { org, app } = useStudioUrlParams();
   const [viewportToSimulate, setViewportToSimulate] = useState<SupportedView>('desktop');
-  const { selectedLayoutSet } = useAppContext();
   const { t } = useTranslation();
   const { previewIframeRef } = useAppContext();
   const layoutName = useSelector(selectedLayoutNameSelector);
@@ -80,7 +79,7 @@ const PreviewFrame = () => {
             ref={previewIframeRef}
             className={cn(classes.iframe, classes[viewportToSimulate])}
             title={t('ux_editor.preview')}
-            src={previewPage(org, app, selectedLayoutSet)}
+            src={previewPage(org, app, layoutName)}
           />
         </div>
         <PreviewLimitationsInfo />

frontend/packages/ux-editor/package.json

@@ -5,7 +5,6 @@
   "author": "Altinn",
   "dependencies": {
     "@mui/material": "5.15.13",
-    "@reduxjs/toolkit": "1.9.7",
     "@studio/icons": "workspace:^",
     "axios": "1.6.8",
     "classnames": "2.5.1",
@@ -14,15 +13,12 @@
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
     "react-modal": "3.16.1",
-    "react-redux": "8.1.3",
     "react-select": "5.8.0",
-    "redux": "4.2.1",
     "reselect": "4.1.8",
     "typescript": "5.4.2",
     "uuid": "9.0.1"
   },
   "devDependencies": {
-    "@redux-devtools/extension": "3.3.0",
     "jest": "29.7.0"
   },
   "license": "3-Clause BSD",

frontend/packages/ux-editor/src/App.test.tsx

@@ -5,13 +5,12 @@ import { App } from './App';
 import { textMock } from '../../../testing/mocks/i18nMock';
 import { typedLocalStorage } from 'app-shared/utils/webStorage';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
-import { appStateMock } from './testing/stateMocks';
 import type { AppContextProps } from './AppContext';
 import ruleHandlerMock from './testing/ruleHandlerMock';
-import { layoutSetsMock } from './testing/layoutMock';
+import { layoutSetsMock, layout1NameMock } from './testing/layoutMock';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 
-const { selectedLayoutSet } = appStateMock.formDesigner.layout;
+const selectedLayoutSet = layout1NameMock;
 const mockQueries: Partial<ServicesContextProps> = {
   getInstanceIdForPreview: jest.fn().mockImplementation(() => Promise.resolve('test')),
   getRuleModel: jest.fn().mockImplementation(() => Promise.resolve(ruleHandlerMock)),

frontend/packages/ux-editor/src/App.tsx

@@ -1,16 +1,13 @@
 import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import { FormDesigner } from './containers/FormDesigner';
-import { useText } from './hooks';
+import { useText, useAppContext, useSelectedFormLayoutName } from './hooks';
 import { StudioPageSpinner } from '@studio/components';
 import { ErrorPage } from './components/ErrorPage';
 import { useDatamodelMetadataQuery } from './hooks/queries/useDatamodelMetadataQuery';
-import { selectedLayoutNameSelector } from './selectors/formLayoutSelectors';
 import { useWidgetsQuery } from './hooks/queries/useWidgetsQuery';
 import { useTextResourcesQuery } from 'app-shared/hooks/queries/useTextResourcesQuery';
 import { useLayoutSetsQuery } from './hooks/queries/useLayoutSetsQuery';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
-import { useAppContext } from './hooks/useAppContext';
 import { FormItemContextProvider } from './containers/FormItemContext';
 
 /**
@@ -22,27 +19,26 @@ import { FormItemContextProvider } from './containers/FormItemContext';
 export function App() {
   const t = useText();
   const { org, app } = useStudioUrlParams();
-  const selectedLayout = useSelector(selectedLayoutNameSelector);
-  const { selectedLayoutSet, setSelectedLayoutSet, removeSelectedLayoutSet } = useAppContext();
+  const { selectedFormLayoutSetName, removeFormSelectedLayoutSetName } = useAppContext();
+  const { selectedFormLayoutName } = useSelectedFormLayoutName();
   const { data: layoutSets, isSuccess: areLayoutSetsFetched } = useLayoutSetsQuery(org, app);
   const { isSuccess: areWidgetsFetched, isError: widgetFetchedError } = useWidgetsQuery(org, app);
   const { isSuccess: isDatamodelFetched, isError: dataModelFetchedError } =
-    useDatamodelMetadataQuery(org, app, selectedLayoutSet);
+    useDatamodelMetadataQuery(org, app, selectedFormLayoutSetName);
   const { isSuccess: areTextResourcesFetched } = useTextResourcesQuery(org, app);
 
   useEffect(() => {
     if (
       areLayoutSetsFetched &&
-      selectedLayoutSet &&
-      (!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSet))
+      selectedFormLayoutSetName &&
+      (!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedFormLayoutSetName))
     )
-      removeSelectedLayoutSet();
+      removeFormSelectedLayoutSetName();
   }, [
     areLayoutSetsFetched,
     layoutSets,
-    selectedLayoutSet,
-    setSelectedLayoutSet,
-    removeSelectedLayoutSet,
+    selectedFormLayoutSetName,
+    removeFormSelectedLayoutSetName,
   ]);
 
   const componentIsReady =
@@ -69,13 +65,6 @@ export function App() {
     return createErrorMessage(t('general.unknown_error'));
   };
 
-  useEffect(() => {
-    if (selectedLayoutSet === null && layoutSets) {
-      // 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]);
-
   if (componentHasError) {
     const mappedError = mapErrorToDisplayError();
     return <ErrorPage title={mappedError.title} message={mappedError.message} />;
@@ -84,7 +73,10 @@ export function App() {
   if (componentIsReady) {
     return (
       <FormItemContextProvider>
-        <FormDesigner selectedLayout={selectedLayout} selectedLayoutSet={selectedLayoutSet} />
+        <FormDesigner
+          selectedLayout={selectedFormLayoutName}
+          selectedLayoutSet={selectedFormLayoutSetName}
+        />
       </FormItemContextProvider>
     );
   }

frontend/packages/ux-editor/src/AppContext.tsx

@@ -0,0 +1,97 @@
+import type { MutableRefObject } from 'react';
+import React, { useMemo, useRef, createContext, useCallback } from 'react';
+import type { QueryClient, QueryKey } from '@tanstack/react-query';
+import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useSelectedFormLayoutName, useSelectedFormLayoutSetName } from './hooks';
+import { previewPage } from 'app-shared/api/paths';
+
+export interface WindowWithQueryClient extends Window {
+  queryClient?: QueryClient;
+}
+
+export interface AppContextProps {
+  previewIframeRef: MutableRefObject<HTMLIFrameElement>;
+  selectedFormLayoutSetName: string;
+  setSelectedFormLayoutSetName: (layoutSet: string) => void;
+  removeFormSelectedLayoutSetName: () => void;
+  refetchLayouts: () => Promise<void>;
+  refetchLayoutSettings: () => Promise<void>;
+  refetchTexts: (language: string) => Promise<void>;
+  reloadPreview: (layoutName: string) => void;
+}
+
+export const AppContext = createContext<AppContextProps>(null);
+
+type AppContextProviderProps = {
+  children: React.ReactNode;
+};
+
+export const AppContextProvider = ({ children }: AppContextProviderProps): React.JSX.Element => {
+  const previewIframeRef = useRef<HTMLIFrameElement>(null);
+  const { org, app } = useStudioUrlParams();
+  const {
+    selectedFormLayoutSetName,
+    setSelectedFormLayoutSetName,
+    removeFormSelectedLayoutSetName,
+  } = useSelectedFormLayoutSetName();
+
+  const refetch = useCallback(async (queryKey: QueryKey): Promise<void> => {
+    const contentWindow: WindowWithQueryClient = previewIframeRef?.current?.contentWindow;
+
+    await contentWindow?.queryClient?.invalidateQueries({
+      queryKey,
+    });
+  }, []);
+
+  const refetchLayouts = useCallback(async (): Promise<void> => {
+    return await refetch(['formLayouts', selectedFormLayoutSetName]);
+  }, [refetch, selectedFormLayoutSetName]);
+
+  const refetchLayoutSettings = useCallback(async (): Promise<void> => {
+    return await refetch(['layoutSettings', selectedFormLayoutSetName]);
+  }, [refetch, selectedFormLayoutSetName]);
+
+  const refetchTexts = useCallback(
+    async (language: string): Promise<void> => {
+      return await refetch(['fetchTextResources', language]);
+    },
+    [refetch],
+  );
+
+  const reloadPreview = useCallback(
+    (layoutName: string) => {
+      if (previewIframeRef?.current?.contentWindow) {
+        previewIframeRef.current.contentWindow.window.location.href = previewPage(
+          org,
+          app,
+          layoutName,
+        );
+      }
+    },
+    [app, org],
+  );
+
+  const value = useMemo(
+    () => ({
+      previewIframeRef,
+      selectedFormLayoutSetName,
+      setSelectedFormLayoutSetName,
+      removeFormSelectedLayoutSetName,
+      refetchLayouts,
+      refetchLayoutSettings,
+      refetchTexts,
+      reloadPreview,
+    }),
+    [
+      selectedFormLayoutSetName,
+      setSelectedFormLayoutSetName,
+      removeFormSelectedLayoutSetName,
+      refetchLayouts,
+      refetchLayoutSettings,
+      refetchTexts,
+      reloadPreview,
+    ],
+  );
+
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};

frontend/packages/ux-editor/src/SubApp.tsx

@@ -1,32 +1,12 @@
-import React, { useRef } from 'react';
-import { Provider } from 'react-redux';
+import React from 'react';
 import { App } from './App';
-import { setupStore } from './store';
 import './styles/index.css';
-import { AppContext } from './AppContext';
-import { useReactiveLocalStorage } from 'app-shared/hooks/useReactiveLocalStorage';
-import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
-
-const store = setupStore();
+import { AppContextProvider } from './AppContext';
 
 export const SubApp = () => {
-  const previewIframeRef = useRef<HTMLIFrameElement>(null);
-  const { app } = useStudioUrlParams();
-  const [selectedLayoutSet, setSelectedLayoutSet, removeSelectedLayoutSet] =
-    useReactiveLocalStorage('layoutSet/' + app, null);
-
   return (
-    <Provider store={store}>
-      <AppContext.Provider
-        value={{
-          previewIframeRef,
-          selectedLayoutSet,
-          setSelectedLayoutSet,
-          removeSelectedLayoutSet,
-        }}
-      >
-        <App />
-      </AppContext.Provider>
-    </Provider>
+    <AppContextProvider>
+      <App />
+    </AppContextProvider>
   );
 };

frontend/packages/ux-editor/src/components/Elements/Elements.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { ConfPageToolbar } from './ConfPageToolbar';
 import { DefaultToolbar } from './DefaultToolbar';
 import { Heading, Paragraph } from '@digdir/design-system-react';
-import { useText } from '../../hooks';
-import { selectedLayoutNameSelector } from '../../selectors/formLayoutSelectors';
+import { useText, useAppContext, useSelectedFormLayoutName } from '../../hooks';
 import { LayoutSetsContainer } from './LayoutSetsContainer';
 
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import classes from './Elements.module.css';
-import { useAppContext } from '../../hooks/useAppContext';
+
 import { useCustomReceiptLayoutSetName } from 'app-shared/hooks/useCustomReceiptLayoutSetName';
 
 export const Elements = () => {
   const { org, app } = useStudioUrlParams();
-  const selectedLayout: string = useSelector(selectedLayoutNameSelector);
-  const { selectedLayoutSet } = useAppContext();
+  const { selectedFormLayoutName } = useSelectedFormLayoutName();
+  const { selectedFormLayoutSetName } = useAppContext();
   const existingCustomReceiptName: string | undefined = useCustomReceiptLayoutSetName(org, app);
 
-  const hideComponents = selectedLayout === 'default' || selectedLayout === undefined;
+  const hideComponents =
+    selectedFormLayoutName === 'default' || selectedFormLayoutName === undefined;
 
   const t = useText();
 
@@ -32,7 +31,7 @@ export const Elements = () => {
         <Paragraph className={classes.noPageSelected} size='small'>
           {t('left_menu.no_components_selected')}
         </Paragraph>
-      ) : existingCustomReceiptName === selectedLayoutSet ? (
+      ) : existingCustomReceiptName === selectedFormLayoutSetName ? (
         <ConfPageToolbar />
       ) : (
         <DefaultToolbar />

frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.test.tsx

@@ -4,21 +4,16 @@ import userEvent from '@testing-library/user-event';
 import { LayoutSetsContainer } from './LayoutSetsContainer';
 import { queryClientMock } from 'app-shared/mocks/queryClientMock';
 import { renderWithMockStore } from '../../testing/mocks';
-import { layoutSetsMock } from '../../testing/layoutMock';
+import { layoutSetsMock, layout1NameMock } from '../../testing/layoutMock';
 import type { AppContextProps } from '../../AppContext';
-import { appStateMock } from '../../testing/stateMocks';
 import { QueryKey } from 'app-shared/types/QueryKey';
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: jest.fn(),
-}));
 // Test data
 const org = 'org';
 const app = 'app';
 const layoutSetName1 = layoutSetsMock.sets[0].id;
 const layoutSetName2 = layoutSetsMock.sets[1].id;
-const { selectedLayoutSet } = appStateMock.formDesigner.layout;
+const selectedLayoutSet = layout1NameMock;
 const setSelectedLayoutSetMock = jest.fn();
 
 describe('LayoutSetsContainer', () => {
@@ -48,5 +43,5 @@ const render = () => {
     selectedLayoutSet: selectedLayoutSet,
     setSelectedLayoutSet: setSelectedLayoutSetMock,
   };
-  return renderWithMockStore({}, {}, undefined, appContextProps)(<LayoutSetsContainer />);
+  return renderWithMockStore({}, undefined, appContextProps)(<LayoutSetsContainer />);
 };