Remove full reload of Preview (v4) (#12534)

* Invalidate queries of Preview instead of reloading it

* Revert v3 changes

* Refactor invalidate/refetch functions

* Move refetch to mutations

* Remove store & reducers

* Remove layout from storage

* New hook to handle selectedLayoutSetName

* Cleanup imports

* Refactoring

* Cleanup useSelectedFormLayoutSetName hook

* Remove warning

* Revert changes of useSelectedFormLayoutSetName

* Fix preview when updating layout name

* Remove redux

* Refactor preview path

* Fix tests

* Remove applicationMetadataSagas

* Fix unit tests

* Fix tests

* Fix tests

* Fix warnings

* Move useSelectedFromLayoutName in AppContext

* Cleanup

* Add tests for AppContext

* Add missing tests

* Add missing tests for AppContext

* Cleanup tests

* Fix Preview for v3

* Fix extra reloads

* Update landing page to open right layout

* Remove extra refetch

* Fix refetch/reload of preview when deleting a component

* Fix comments

* Remove removeSelectedFormLayoutSetName

* Fix unit tests

* Fix unit tests

* Changes after cr

* Add missing changes

* Add tests for TextResourceValueEditor

frontend/app-development/layout/PageHeader.tsx

@@ -10,6 +10,10 @@ import { TopBarMenu } from 'app-shared/enums/TopBarMenu';
 import type { User } from 'app-shared/types/Repository';
 import { PackagesRouter } from 'app-shared/navigation/PackagesRouter';
 import { RepositoryType } from 'app-shared/types/global';
+import {
+  useSelectedFormLayoutSetName,
+  useSelectedFormLayoutName,
+} from '../../packages/ux-editor/src/hooks';
 
 type SubMenuContentProps = {
   org: string;
@@ -30,14 +34,18 @@ export const subMenuContent = ({ org, app }: SubMenuContentProps) => {
   );
 };
 
-export const buttonActions = (org: string, app: string): AltinnButtonActionItem[] => {
+export const buttonActions = (
+  org: string,
+  app: string,
+  selectedFormLayoutName: string,
+): AltinnButtonActionItem[] => {
   const packagesRouter = new PackagesRouter({ org, app });
 
   const actions: AltinnButtonActionItem[] = [
     {
       title: 'top_menu.preview',
       menuKey: TopBarMenu.Preview,
-      to: packagesRouter.getPackageNavigationUrl('preview'),
+      to: `${packagesRouter.getPackageNavigationUrl('preview')}${selectedFormLayoutName ? `?layout=${selectedFormLayoutName}` : ''}`,
       isInverted: true,
     },
     {
@@ -69,6 +77,8 @@ export const PageHeader = ({
   const repoType = getRepositoryType(org, app);
   const repository = useAppSelector((state) => state.serviceInformation.repositoryInfo);
   const menuItems = getFilteredTopBarMenu(repoType);
+  const { selectedFormLayoutSetName } = useSelectedFormLayoutSetName();
+  const { selectedFormLayoutName } = useSelectedFormLayoutName(selectedFormLayoutSetName);
 
   return (
     <AltinnHeader
@@ -80,7 +90,7 @@ export const PageHeader = ({
       user={user}
       repository={repository}
       repoOwnerIsOrg={repoOwnerIsOrg}
-      buttonActions={!isRepoError && buttonActions(org, app)}
+      buttonActions={!isRepoError && buttonActions(org, app, selectedFormLayoutName)}
     />
   );
 };

frontend/app-development/reducers/index.ts

@@ -1,9 +1,7 @@
 import handleServiceInformationReducer from '../features/overview/handleServiceInformationSlice';
-import applicationMetadataReducer from '../sharedResources/applicationMetadata/applicationMetadataSlice';
 import userReducer from '../sharedResources/user/userSlice';
 
 export const rootReducer = {
   serviceInformation: handleServiceInformationReducer,
-  applicationMetadataState: applicationMetadataReducer,
   userState: userReducer,
 };

frontend/app-development/sagas/index.ts

@@ -9,7 +9,6 @@ import {
   watchHandleSaveServiceConfigSaga,
   watchHandleSaveServiceNameSaga,
 } from '../features/overview/handleServiceInformationSagas';
-import { applicationMetadataSagas } from '../sharedResources/applicationMetadata/applicationMetadataSagas';
 import userSagas from '../sharedResources/user/userSagas';
 
 function* root(): SagaIterator {
@@ -19,7 +18,6 @@ function* root(): SagaIterator {
   yield fork(watchHandleFetchInitialCommitSaga);
   yield fork(watchHandleFetchServiceConfigSaga);
   yield fork(watchHandleSaveServiceConfigSaga);
-  yield fork(applicationMetadataSagas);
   yield fork(userSagas);
 }
 

frontend/app-development/test/rootStateMock.ts

@@ -1,12 +1,7 @@
 import type { RootState } from '../store';
-import { applicationMetadataMock } from './applicationMetadataMock';
 import { repository } from 'app-shared/mocks/mocks';
 
 export const rootStateMock: RootState = {
-  applicationMetadataState: {
-    applicationMetadata: applicationMetadataMock,
-    error: null,
-  },
   serviceInformation: {
     repositoryInfo: repository,
     error: null,

frontend/app-preview/src/components/AppPreviewSubMenu.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { queryClientMock } from 'app-shared/mocks/queryClientMock';
-import { renderWithMockStore } from '../../../../frontend/packages/ux-editor/src/testing/mocks';
+import { renderWithProviders } from '../../../../frontend/packages/ux-editor/src/testing/mocks';
 import { layoutSetsMock } from '../../../../frontend/packages/ux-editor/src/testing/layoutMock';
 import type { AppPreviewSubMenuProps } from './AppPreviewSubMenu';
 import { AppPreviewSubMenu } from './AppPreviewSubMenu';
@@ -33,7 +33,7 @@ describe('AppPreviewSubMenu', () => {
 
   it('renders the component with desktop viewSize', () => {
     setQueryData(null);
-    renderWithMockStore()(<AppPreviewSubMenu {...props} />);
+    renderWithProviders(<AppPreviewSubMenu {...props} />);
     const desktopButton = screen.getByRole('button', { name: 'preview.view_size_desktop' });
     const mobileButton = screen.getByRole('button', { name: 'preview.view_size_mobile' });
     expect(desktopButton).toHaveAttribute('aria-pressed', 'true');
@@ -42,7 +42,7 @@ describe('AppPreviewSubMenu', () => {
 
   it('renders the component with mobile viewSize', () => {
     setQueryData(null);
-    renderWithMockStore()(<AppPreviewSubMenu {...props} viewSize='mobile' />);
+    renderWithProviders(<AppPreviewSubMenu {...props} viewSize='mobile' />);
     const desktopButton = screen.getByRole('button', { name: 'preview.view_size_desktop' });
     const mobileButton = screen.getByRole('button', { name: 'preview.view_size_mobile' });
     expect(desktopButton).toHaveAttribute('aria-pressed', 'false');
@@ -51,7 +51,7 @@ describe('AppPreviewSubMenu', () => {
 
   it('renders the component with layout sets in select list', async () => {
     setQueryData(layoutSetsMock);
-    renderWithMockStore()(<AppPreviewSubMenu {...props} />);
+    renderWithProviders(<AppPreviewSubMenu {...props} />);
     const layoutSetSelector = screen.getByRole('combobox');
     await act(() => user.click(layoutSetSelector));
     const options = screen.getAllByRole('option');