From 7a4e8712ff1bef20f0832c31ec81d321ac76bf46 Mon Sep 17 00:00:00 2001 From: Michael Queyrichon Date: Fri, 5 Apr 2024 12:12:22 +0200 Subject: [PATCH] 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 --- .../app-development/layout/PageHeader.tsx | 16 +- frontend/app-development/reducers/index.ts | 2 - frontend/app-development/sagas/index.ts | 2 - .../applicationMetadataSagas.ts | 9 - .../applicationMetadataSlice.ts | 72 -- .../get/getAppMetadataSagas.ts | 32 - .../put/putAppMetadataSagas.ts | 30 - .../selectors/applicationMetadata.test.ts | 24 - .../selectors/applicationMetadataSelector.ts | 15 - .../test/applicationMetadataMock.ts | 59 -- .../app-development/test/rootStateMock.ts | 5 - .../src/components/AppPreviewSubMenu.test.tsx | 8 +- .../src/views/LandingPage.test.tsx | 10 +- .../app-preview/src/views/LandingPage.tsx | 19 +- .../hooks/useReposSearch/useRepoSearch.ts | 2 +- .../hooks/useSearchParamsState/index.ts | 1 - frontend/packages/shared/src/api/paths.js | 5 +- frontend/packages/shared/src/constants.js | 2 + .../src/hooks}/useSearchParamsState.test.ts | 0 .../shared/src/hooks}/useSearchParamsState.ts | 0 .../src/components/Preview/Preview.tsx | 3 +- .../useAddAppAttachmentMetadataMutation.ts | 15 - .../useDeleteAppAttachmentMetadataMutation.ts | 9 - .../useUpdateAppAttachmentMetadataMutation.ts | 15 - frontend/packages/ux-editor/package.json | 4 - frontend/packages/ux-editor/src/App.test.tsx | 36 +- frontend/packages/ux-editor/src/App.tsx | 55 +- .../ux-editor/src/AppContext.test.tsx | 204 +++++ frontend/packages/ux-editor/src/AppContext.ts | 11 - .../packages/ux-editor/src/AppContext.tsx | 86 +++ .../packages/ux-editor/src/SubApp.test.tsx | 6 +- frontend/packages/ux-editor/src/SubApp.tsx | 30 +- .../src/components/Elements/Elements.tsx | 14 +- .../Elements/LayoutSetsContainer.test.tsx | 21 +- .../Elements/LayoutSetsContainer.tsx | 23 +- .../FormComponent/FormComponent.test.tsx | 13 +- .../FormComponent/FormComponent.tsx | 7 +- .../src/components/Preview/Preview.test.tsx | 69 +- .../src/components/Preview/Preview.tsx | 27 +- .../Properties/DataModelBindings.test.tsx | 5 + .../Properties/DataModelBindings.tsx | 8 +- .../components/Properties/Dynamics.test.tsx | 4 +- .../Properties/OldDynamicsInfo.test.tsx | 8 +- .../components/Properties/OldDynamicsInfo.tsx | 8 +- .../Properties/PageConfigPanel/EditPageId.tsx | 21 +- .../HiddenExpressionOnLayout.test.tsx | 22 +- .../HiddenExpressionOnLayout.tsx | 12 +- .../PageConfigPanel/PageConfigPanel.test.tsx | 20 +- .../PageConfigPanel/PageConfigPanel.tsx | 17 +- .../EditComponentIdRow.test.tsx | 9 +- .../EditComponentIdRow/EditComponentIdRow.tsx | 2 +- .../src/components/Properties/Text.test.tsx | 4 +- .../src/components/Properties/Text.tsx | 9 +- .../TextResource/TextResource.test.tsx | 5 +- .../TextResourceValueEditor.test.tsx | 82 ++ .../TextResourceValueEditor.tsx | 13 +- .../config/EditFormComponent.test.tsx | 21 +- .../components/config/EditFormComponent.tsx | 8 +- .../ExpressionContent.test.tsx | 7 +- .../ExpressionContent/ExpressionContent.tsx | 13 +- .../config/Expressions/Expressions.test.tsx | 7 +- .../config/FormComponentConfig.test.tsx | 4 +- .../config/SelectDataModelComponent.tsx | 6 +- .../Address/AddressComponent.test.tsx | 7 +- .../FileUpload/FileUploadComponent.test.tsx | 7 +- .../Image/ImageComponent.test.tsx | 7 +- .../Map/MapComponent.test.tsx | 7 +- .../Panel/PanelComponent.test.tsx | 21 +- .../RepeatingGroupComponent.test.tsx | 12 +- .../RepeatingGroupComponent.tsx | 17 +- .../EditCodeList/EditCodeList.test.tsx | 15 +- .../EditDataModelBindings.test.tsx | 14 +- .../EditDataModelBindings.tsx | 6 +- .../EditGridForGivenViewSize.test.tsx | 7 +- .../config/editModal/EditHeaderSize.test.tsx | 7 +- .../config/editModal/EditNumberValue.test.tsx | 7 +- .../config/editModal/EditOptions.test.tsx | 4 +- .../config/editModal/EditStringValue.test.tsx | 4 +- .../EditTextResourceBinding.test.tsx | 16 +- .../EditTextResourceBinding.tsx | 9 +- .../EditTextResourceBindings.test.tsx | 16 +- .../toolbar/ConditionalRenderingModal.tsx | 12 +- .../src/components/toolbar/RuleModal.tsx | 10 +- .../containers/DesignView/DesignView.test.tsx | 30 +- .../src/containers/DesignView/DesignView.tsx | 72 +- .../containers/DesignView/FormLayout.test.tsx | 4 +- .../FormItemTitle/useDeleteItem.test.ts | 14 +- .../FormItem/FormItemTitle/useDeleteItem.ts | 16 +- .../DesignView/FormTree/FormTree.test.tsx | 11 +- .../UnknownReferencedItem.test.tsx | 9 +- .../useDeleteUnknownComponentReference.ts | 7 +- .../NavigationMenu/NavigationMenu.test.tsx | 19 +- .../NavigationMenu/NavigationMenu.tsx | 32 +- .../PageAccordion/PageAccordion.test.tsx | 36 +- .../PageAccordion/PageAccordion.tsx | 30 +- .../PageAccordion/useDeleteLayout.ts | 9 - .../ReceiptContent/ReceiptContent.test.tsx | 19 +- .../src/containers/FormDesigner.test.tsx | 17 +- .../ux-editor/src/containers/FormDesigner.tsx | 73 +- .../src/containers/FormItemContext.test.tsx | 4 +- .../src/containers/FormItemContext.tsx | 29 +- .../formDesigner/formDesignerReducer.ts | 14 - .../formDesigner/formDesignerTypes.ts | 52 -- .../formLayout/formLayoutActions.ts | 20 - .../formLayout/formLayoutSlice.ts | 52 -- .../packages/ux-editor/src/hooks/index.ts | 13 +- ...seAddAppAttachmentMetadataMutation.test.ts | 6 +- .../useAddAppAttachmentMetadataMutation.ts | 15 - .../useAddFormContainerMutation.test.ts | 9 +- .../mutations/useAddFormContainerMutation.ts | 2 +- .../useAddItemToLayoutMutation.test.ts | 20 +- .../mutations/useAddItemToLayoutMutation.ts | 9 +- .../mutations/useAddLayoutMutation.test.ts | 29 +- .../hooks/mutations/useAddLayoutMutation.ts | 16 +- .../mutations/useAddWidgetMutation.test.ts | 13 +- .../hooks/mutations/useAddWidgetMutation.ts | 2 +- ...eleteAppAttachmentMetadataMutation.test.ts | 6 +- .../useDeleteAppAttachmentMetadataMutation.ts | 9 - .../useDeleteFormComponentMutation.test.ts | 10 +- .../useDeleteFormComponentMutation.ts | 8 +- .../useDeleteFormContainerMutation.test.ts | 21 +- .../useDeleteFormContainerMutation.ts | 2 +- .../mutations/useDeleteLayoutMutation.test.ts | 23 +- .../mutations/useDeleteLayoutMutation.ts | 28 +- .../mutations/useFormLayoutMutation.test.tsx | 37 +- .../hooks/mutations/useFormLayoutMutation.ts | 6 +- .../useFormLayoutSettingsMutation.test.ts | 8 +- .../useFormLayoutSettingsMutation.ts | 4 + .../mutations/useRuleConfigMutation.test.ts | 5 +- ...pdateAppAttachmentMetadataMutation.test.ts | 6 +- .../useUpdateAppAttachmentMetadataMutation.ts | 15 - .../useUpdateFormComponentMutation.test.ts | 20 +- .../useUpdateFormComponentMutation.ts | 9 +- ...seUpdateFormComponentOrderMutation.test.ts | 14 +- .../useUpdateFormComponentOrderMutation.ts | 2 +- .../useUpdateFormContainerMutation.test.ts | 22 +- .../useUpdateFormContainerMutation.ts | 2 +- .../useUpdateLayoutNameMutation.test.ts | 25 +- .../mutations/useUpdateLayoutNameMutation.ts | 12 +- .../useUpdateLayoutOrderMutation.test.ts | 18 +- .../queries/useFormLayoutSettingsQuery.ts | 1 + .../src/hooks/queries/useFormLayoutsQuery.ts | 8 +- .../queries/useFrontEndSettingsQuery.test.ts | 8 +- .../hooks/queries/useRuleModelQuery.test.ts | 15 +- .../src/hooks/queries/useWidgetsQuery.test.ts | 17 +- .../hooks/useComponentErrorMessage.test.ts | 4 +- .../ux-editor/src/hooks/useFormLayout.test.ts | 29 + .../ux-editor/src/hooks/useFormLayout.ts | 8 + .../src/hooks/useFormLayouts.test.ts | 31 + .../ux-editor/src/hooks/useFormLayouts.ts | 12 + .../src/hooks/useFormLayoutsSelector.test.ts | 56 -- .../src/hooks/useFormLayoutsSelector.ts | 34 - .../hooks/useItemTitle/useItemTitle.test.ts | 4 +- .../src/hooks/useSelectedFormLayout.test.ts | 28 + .../src/hooks/useSelectedFormLayout.ts | 7 + .../hooks/useSelectedFormLayoutName.test.tsx | 78 ++ .../src/hooks/useSelectedFormLayoutName.ts | 39 + .../useSelectedFormLayoutSetName.test.tsx | 69 ++ .../src/hooks/useSelectedFormLayoutSetName.ts | 36 + .../useSelectedFormLayoutWithName.test.ts | 33 + .../hooks/useSelectedFormLayoutWithName.ts | 11 + .../src/hooks/useSelectedTaskId.test.tsx | 84 +++ .../ux-editor/src/hooks/useSelectedTaskId.ts | 13 + .../ux-editor/src/hooks/useText.test.ts | 4 +- .../src/hooks/useValidateComponent.test.ts | 5 +- frontend/packages/ux-editor/src/index.tsx | 9 +- frontend/packages/ux-editor/src/reducers.ts | 16 - .../src/selectors/formLayoutSelectors.test.ts | 19 +- .../src/selectors/formLayoutSelectors.ts | 4 - frontend/packages/ux-editor/src/store.ts | 21 - .../ux-editor/src/testing/appContextMock.ts | 11 +- .../packages/ux-editor/src/testing/mocks.tsx | 124 +-- .../ux-editor/src/testing/stateMocks.ts | 18 - .../packages/ux-editor/src/types/global.ts | 5 - .../src/utils/formLayoutsUtils.test.ts | 4 +- .../ux-editor/src/utils/formLayoutsUtils.ts | 14 +- .../src/utils/localStorageUtils/index.ts | 1 - .../localStorageUtils/localStorageUtils.ts | 11 - yarn.lock | 705 +++++++++++++----- 179 files changed, 2183 insertions(+), 1909 deletions(-) delete mode 100644 frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSagas.ts delete mode 100644 frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSlice.ts delete mode 100644 frontend/app-development/sharedResources/applicationMetadata/get/getAppMetadataSagas.ts delete mode 100644 frontend/app-development/sharedResources/applicationMetadata/put/putAppMetadataSagas.ts delete mode 100644 frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadata.test.ts delete mode 100644 frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadataSelector.ts delete mode 100644 frontend/app-development/test/applicationMetadataMock.ts delete mode 100644 frontend/dashboard/hooks/useSearchParamsState/index.ts rename frontend/{dashboard/hooks/useSearchParamsState => packages/shared/src/hooks}/useSearchParamsState.test.ts (100%) rename frontend/{dashboard/hooks/useSearchParamsState => packages/shared/src/hooks}/useSearchParamsState.ts (100%) create mode 100644 frontend/packages/ux-editor/src/AppContext.test.tsx delete mode 100644 frontend/packages/ux-editor/src/AppContext.ts create mode 100644 frontend/packages/ux-editor/src/AppContext.tsx create mode 100644 frontend/packages/ux-editor/src/components/TextResource/TextResourceEditor/TextResourceValueEditor/TextResourceValueEditor.test.tsx delete mode 100644 frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/useDeleteLayout.ts delete mode 100644 frontend/packages/ux-editor/src/features/formDesigner/formDesignerReducer.ts delete mode 100644 frontend/packages/ux-editor/src/features/formDesigner/formDesignerTypes.ts delete mode 100644 frontend/packages/ux-editor/src/features/formDesigner/formLayout/formLayoutActions.ts delete mode 100644 frontend/packages/ux-editor/src/features/formDesigner/formLayout/formLayoutSlice.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useFormLayout.test.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useFormLayout.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useFormLayouts.test.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useFormLayouts.ts delete mode 100644 frontend/packages/ux-editor/src/hooks/useFormLayoutsSelector.test.ts delete mode 100644 frontend/packages/ux-editor/src/hooks/useFormLayoutsSelector.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayout.test.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayout.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutName.test.tsx create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutName.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutSetName.test.tsx create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutSetName.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutWithName.test.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutWithName.ts create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedTaskId.test.tsx create mode 100644 frontend/packages/ux-editor/src/hooks/useSelectedTaskId.ts delete mode 100644 frontend/packages/ux-editor/src/reducers.ts delete mode 100644 frontend/packages/ux-editor/src/store.ts delete mode 100644 frontend/packages/ux-editor/src/testing/stateMocks.ts delete mode 100644 frontend/packages/ux-editor/src/utils/localStorageUtils/index.ts delete mode 100644 frontend/packages/ux-editor/src/utils/localStorageUtils/localStorageUtils.ts diff --git a/frontend/app-development/layout/PageHeader.tsx b/frontend/app-development/layout/PageHeader.tsx index 54d7d1c2469..47c09d2b70b 100644 --- a/frontend/app-development/layout/PageHeader.tsx +++ b/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 ( ); }; diff --git a/frontend/app-development/reducers/index.ts b/frontend/app-development/reducers/index.ts index eb3d1c749e4..a8c2cdedc37 100644 --- a/frontend/app-development/reducers/index.ts +++ b/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, }; diff --git a/frontend/app-development/sagas/index.ts b/frontend/app-development/sagas/index.ts index 382c0e30b33..04054f1d6b3 100644 --- a/frontend/app-development/sagas/index.ts +++ b/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); } diff --git a/frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSagas.ts b/frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSagas.ts deleted file mode 100644 index aff602b2950..00000000000 --- a/frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSagas.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { SagaIterator } from 'redux-saga'; -import { fork } from 'redux-saga/effects'; -import { watchGetApplicationMetadataSaga } from './get/getAppMetadataSagas'; -import { watchPutApplicationMetadataSaga } from './put/putAppMetadataSagas'; - -export function* applicationMetadataSagas(): SagaIterator { - yield fork(watchGetApplicationMetadataSaga); - yield fork(watchPutApplicationMetadataSaga); -} diff --git a/frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSlice.ts b/frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSlice.ts deleted file mode 100644 index 60fccbfe818..00000000000 --- a/frontend/app-development/sharedResources/applicationMetadata/applicationMetadataSlice.ts +++ /dev/null @@ -1,72 +0,0 @@ -import type { PayloadAction } from '@reduxjs/toolkit'; -import { createAction, createSlice } from '@reduxjs/toolkit'; - -export interface IApplicationMetadataState { - applicationMetadata: any; - error: Error; -} - -const initialState: IApplicationMetadataState = { - applicationMetadata: {}, - error: null, -}; - -export interface IGetApplicationMetadataFulfilled { - applicationMetadata: any; -} - -export interface IApplicationMetadataActionRejected { - error: Error; -} - -export interface IPutApplicationMetadata { - applicationMetadata: any; -} - -const moduleName = 'applicationMetadata'; - -const applicationMetadataSlice = createSlice({ - name: moduleName, - initialState, - reducers: { - getApplicationMetadataFulfilled: ( - state, - action: PayloadAction, - ) => { - const { applicationMetadata } = action.payload; - state.applicationMetadata = applicationMetadata; - }, - getApplicationMetadataRejected: ( - state, - action: PayloadAction, - ) => { - const { error } = action.payload; - state.error = error; - }, - putApplicationMetadataFulfilled: (state, action: PayloadAction) => { - const { applicationMetadata } = action.payload; - state.applicationMetadata = applicationMetadata; - }, - putApplicationMetadataRejected: ( - state, - action: PayloadAction, - ) => { - const { error } = action.payload; - state.error = error; - }, - }, -}); - -const actions = { - getApplicationMetadata: createAction<{ org; app }>(`${moduleName}/getApplicationMetadata`), - putApplicationMetadata: createAction( - `${moduleName}/putApplicationMetadata`, - ), -}; - -export const ApplicationMetadataActions = { - ...actions, - ...applicationMetadataSlice.actions, -}; - -export default applicationMetadataSlice.reducer; diff --git a/frontend/app-development/sharedResources/applicationMetadata/get/getAppMetadataSagas.ts b/frontend/app-development/sharedResources/applicationMetadata/get/getAppMetadataSagas.ts deleted file mode 100644 index 53bf6ee87a2..00000000000 --- a/frontend/app-development/sharedResources/applicationMetadata/get/getAppMetadataSagas.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { SagaIterator } from 'redux-saga'; -import { call, put, takeLatest } from 'redux-saga/effects'; -import { get, post } from 'app-shared/utils/networking'; -import { appMetadataPath } from 'app-shared/api/paths'; -import { ApplicationMetadataActions } from '../applicationMetadataSlice'; -import type { PayloadAction } from '@reduxjs/toolkit'; - -function* getApplicationMetadataSaga({ payload }: PayloadAction<{ org; app }>): SagaIterator { - const { org, app } = payload; - try { - const result = yield call(get, appMetadataPath(org, app)); - yield put( - ApplicationMetadataActions.getApplicationMetadataFulfilled({ - applicationMetadata: result, - }), - ); - } catch (error) { - if (error.status === 404) { - // The application metadata does not exist, create one then fetch. - // This might happen for old services, which does not yet have a metadata file - const { org, app } = payload; - yield call(post, appMetadataPath(org, app)); - yield put(ApplicationMetadataActions.getApplicationMetadata()); - } else { - yield put(ApplicationMetadataActions.getApplicationMetadataRejected({ error })); - } - } -} - -export function* watchGetApplicationMetadataSaga(): SagaIterator { - yield takeLatest(ApplicationMetadataActions.getApplicationMetadata, getApplicationMetadataSaga); -} diff --git a/frontend/app-development/sharedResources/applicationMetadata/put/putAppMetadataSagas.ts b/frontend/app-development/sharedResources/applicationMetadata/put/putAppMetadataSagas.ts deleted file mode 100644 index b425ed6f7f7..00000000000 --- a/frontend/app-development/sharedResources/applicationMetadata/put/putAppMetadataSagas.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { SagaIterator } from 'redux-saga'; -import { call, put, takeLatest } from 'redux-saga/effects'; -import { put as axiosPut } from 'app-shared/utils/networking'; -import type { PayloadAction } from '@reduxjs/toolkit'; -import { ApplicationMetadataActions } from '../applicationMetadataSlice'; -import type { IPutApplicationMetadata } from '../applicationMetadataSlice'; -import { appMetadataPath } from 'app-shared/api/paths'; -import { _useParamsClassCompHack } from 'app-shared/utils/_useParamsClassCompHack'; - -export function* putApplicationMetadataSaga( - action: PayloadAction, -): SagaIterator { - const { applicationMetadata } = action.payload; - try { - // eslint-disable-next-line react-hooks/rules-of-hooks - const { org, app } = _useParamsClassCompHack(); - const result = yield call(axiosPut, appMetadataPath(org, app), applicationMetadata); - yield put( - ApplicationMetadataActions.putApplicationMetadataFulfilled({ - applicationMetadata: result, - }), - ); - } catch (error) { - yield put(ApplicationMetadataActions.putApplicationMetadataRejected({ error })); - } -} - -export function* watchPutApplicationMetadataSaga(): SagaIterator { - yield takeLatest(ApplicationMetadataActions.putApplicationMetadata, putApplicationMetadataSaga); -} diff --git a/frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadata.test.ts b/frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadata.test.ts deleted file mode 100644 index bdc00a612be..00000000000 --- a/frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadata.test.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { makeGetApplicationMetadata } from './applicationMetadataSelector'; - -describe('ApplicationMetadata', () => { - let mockApplicationMetadata: any; - let mockState: any; - - beforeEach(() => { - mockApplicationMetadata = { - mockContent: 'someContent', - mockNumber: 10, - }; - mockState = { - applicationMetadataState: { - applicationMetadata: mockApplicationMetadata, - error: null, - }, - }; - }); - - it('applicationMetadataSelector should return correct state', () => { - const applicationMetadata = makeGetApplicationMetadata(mockState); - expect(applicationMetadata).toBe(mockApplicationMetadata); - }); -}); diff --git a/frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadataSelector.ts b/frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadataSelector.ts deleted file mode 100644 index 38336b2726b..00000000000 --- a/frontend/app-development/sharedResources/applicationMetadata/selectors/applicationMetadataSelector.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { createSelector } from 'reselect'; -import type { RootState } from '../../../store'; - -const applicationMetadataSelector = (state: RootState) => { - return state.applicationMetadataState?.applicationMetadata; -}; - -const getApplicationMetadata = createSelector( - [applicationMetadataSelector], - (applicationMetadata) => { - return applicationMetadata; - }, -); - -export const makeGetApplicationMetadata = getApplicationMetadata; diff --git a/frontend/app-development/test/applicationMetadataMock.ts b/frontend/app-development/test/applicationMetadataMock.ts deleted file mode 100644 index db4cb74610d..00000000000 --- a/frontend/app-development/test/applicationMetadataMock.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type { ApplicationMetadata } from 'app-shared/types/ApplicationMetadata'; - -const applicationMetadataString = ` -{ - "id": "ttd/config", - "org": "ttd", - "title": { - "nb": "config" - }, - "dataTypes": [ - { - "id": "ref-data-as-pdf", - "allowedContentTypes": [ - "application/pdf" - ], - "maxCount": 0, - "minCount": 0, - "enablePdfCreation": true, - "enableFileScan": false, - "validationErrorOnPendingFileScan": false, - "enabledFileAnalysers": [], - "enabledFileValidators": [] - }, - { - "id": "model", - "allowedContentTypes": [ - "application/xml" - ], - "appLogic": { - "autoCreate": true, - "classRef": "Altinn.App.Models.model", - "allowAnonymousOnStateless": false, - "autoDeleteOnProcessEnd": false - }, - "taskId": "Task_1", - "maxCount": 1, - "minCount": 1, - "enablePdfCreation": true, - "enableFileScan": false, - "validationErrorOnPendingFileScan": false, - "enabledFileAnalysers": [], - "enabledFileValidators": [] - } - ], - "partyTypesAllowed": { - "bankruptcyEstate": false, - "organisation": false, - "person": false, - "subUnit": false - }, - "autoDeleteOnProcessEnd": false, - "created": "2023-06-09T07:51:11.5919102Z", - "createdBy": "nkylstad", - "lastChanged": "2023-06-09T07:51:11.5919147Z", - "lastChangedBy": "nkylstad" -} -`; - -export const applicationMetadataMock: ApplicationMetadata = JSON.parse(applicationMetadataString); diff --git a/frontend/app-development/test/rootStateMock.ts b/frontend/app-development/test/rootStateMock.ts index c604c01c40f..fb011595332 100644 --- a/frontend/app-development/test/rootStateMock.ts +++ b/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, diff --git a/frontend/app-preview/src/components/AppPreviewSubMenu.test.tsx b/frontend/app-preview/src/components/AppPreviewSubMenu.test.tsx index 87bec5a3dfb..2cdb9f1ca12 100644 --- a/frontend/app-preview/src/components/AppPreviewSubMenu.test.tsx +++ b/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()(); + renderWithProviders(); 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()(); + renderWithProviders(); 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()(); + renderWithProviders(); const layoutSetSelector = screen.getByRole('combobox'); await act(() => user.click(layoutSetSelector)); const options = screen.getAllByRole('option'); diff --git a/frontend/app-preview/src/views/LandingPage.test.tsx b/frontend/app-preview/src/views/LandingPage.test.tsx index c3f9961eb6a..553cc7613b4 100644 --- a/frontend/app-preview/src/views/LandingPage.test.tsx +++ b/frontend/app-preview/src/views/LandingPage.test.tsx @@ -2,29 +2,29 @@ import React from 'react'; import { act, screen, queryByAttribute, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { LandingPage } from './LandingPage'; -import { renderWithMockStore } from '../../../../frontend/packages/ux-editor/src/testing/mocks'; +import { renderWithProviders } from '../../../../frontend/packages/ux-editor/src/testing/mocks'; import { textMock } from '../../../testing/mocks/i18nMock'; describe('LandingPage', () => { it('should render an iframe', () => { - const { renderResult } = renderWithMockStore()(); + const { container } = renderWithProviders(); const getById = queryByAttribute.bind(null, 'id'); - const iframe = getById(renderResult.container, 'app-frontend-react-iframe'); + const iframe = getById(container, 'app-frontend-react-iframe'); expect(iframe).toBeInTheDocument(); }); // Fix this test when mock data is fixed, due to issue: #11692 it.skip('should render the information alert with preview being limited', () => { - renderWithMockStore()(); + renderWithProviders(); const previewLimitationsAlert = screen.getByText(textMock('preview.limitations_info')); expect(previewLimitationsAlert).toBeInTheDocument(); }); it('should render a popover with options for remembering closing-choice in session or not when clicking cross-button in alert', async () => { - renderWithMockStore()(); + renderWithProviders(); const user = userEvent.setup(); diff --git a/frontend/app-preview/src/views/LandingPage.tsx b/frontend/app-preview/src/views/LandingPage.tsx index 4ff8ab9f0fd..af3c9adac74 100644 --- a/frontend/app-preview/src/views/LandingPage.tsx +++ b/frontend/app-preview/src/views/LandingPage.tsx @@ -17,6 +17,11 @@ import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams'; import { previewPage } from 'app-shared/api/paths'; import type { TopBarMenuItem } from 'app-shared/types/TopBarMenuItem'; import { PreviewLimitationsInfo } from 'app-shared/components/PreviewLimitationsInfo/PreviewLimitationsInfo'; +import { + useSelectedFormLayoutName, + useSelectedFormLayoutSetName, + useSelectedTaskId, +} from '../../../packages/ux-editor/src/hooks'; export interface LandingPageProps { variant?: AltinnHeaderVariant; @@ -31,14 +36,14 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => { const { data: user } = useUserQuery(); const { data: repository } = useRepoMetadataQuery(org, app); const { data: instanceId } = useInstanceIdQuery(org, app); - const [selectedLayoutSet, setSelectedLayoutSet] = useLocalStorage( - 'layoutSet/' + app, - null, - ); + const { selectedFormLayoutSetName, setSelectedFormLayoutSetName } = + useSelectedFormLayoutSetName(); + const { selectedFormLayoutName } = useSelectedFormLayoutName(selectedFormLayoutSetName); const [previewViewSize, setPreviewViewSize] = useLocalStorage( 'viewSize', 'desktop', ); + const taskId = useSelectedTaskId(selectedFormLayoutSetName); const repoType = getRepositoryType(org, app); const menuItems: TopBarMenuItem[] = getTopBarAppPreviewMenu(org, app, repoType, t); @@ -46,7 +51,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => { input !== null && input.tagName === 'IFRAME'; const handleChangeLayoutSet = (layoutSet: string) => { - setSelectedLayoutSet(layoutSet); + setSelectedFormLayoutSetName(layoutSet); // might need to remove selected layout from local storage to make sure first page is selected window.location.reload(); }; @@ -80,7 +85,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => { } @@ -92,7 +97,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => {