Chore/1491 remove tracks functionality (#1645)

* refactor: remove tracks functionality

* refactor: use reselct selectors for selectors returning new object references

* test: fix e2e-tests after refactoring code

* fix: summary e2e-tests

src/__mocks__/uiConfigStateMock.ts

@@ -2,7 +2,7 @@ import type { IUiConfig } from 'src/types';
 
 export const getUiConfigStateMock = (customStates?: Partial<IUiConfig>): IUiConfig => ({
   focus: null,
-  tracks: {
+  pageOrderConfig: {
     hidden: [],
     hiddenExpr: {},
     order: ['FormLayout'],
@@ -23,7 +23,6 @@ export const getUiConfigStateMock = (customStates?: Partial<IUiConfig>): IUiConf
     },
   },
   currentView: 'FormLayout',
-  navigationConfig: {},
   excludePageFromPdf: [],
   excludeComponentFromPdf: [],
   ...customStates,

src/codegen/Common.ts

@@ -35,14 +35,11 @@ const common = {
               .setDescription('Expression that will hide the page/form layout if true')
               .optional({ default: false }),
           ),
-          new CG.prop('navigation', CG.common('ILayoutNavigation').optional()),
         ),
       ),
     )
       .setTitle('Altinn layout')
       .setDescription('Schema that describes the layout configuration for Altinn applications.'),
-  ILayoutNavigation: () =>
-    new CG.obj(new CG.prop('next', new CG.str().optional()), new CG.prop('previous', new CG.str().optional())),
 
   ILabelSettings: () =>
     new CG.obj(
@@ -109,7 +106,6 @@ const common = {
   Triggers: () =>
     new CG.enum(
       'validation',
-      'calculatePageOrder',
       'validatePage',
       'validateCurrentAndPreviousPages',
       'validateAllPages',

src/components/message/ErrorReport.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Panel, PanelVariant } from '@altinn/altinn-design-system';
 import { Grid } from '@material-ui/core';
+import { createSelector } from 'reselect';
 
 import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper';
 import classes from 'src/components/message/ErrorReport.module.css';
@@ -15,7 +16,9 @@ import { LayoutNodeForGroup } from 'src/layout/Group/LayoutNodeForGroup';
 import { AsciiUnitSeparator } from 'src/utils/attachment';
 import { useExprContext } from 'src/utils/layout/ExprContext';
 import { getMappedErrors, getUnmappedErrors } from 'src/utils/validation/validation';
+import type { IRuntimeState } from 'src/types';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
+import type { IValidations } from 'src/utils/validation/types';
 import type { FlatError } from 'src/utils/validation/validation';
 
 export interface IErrorReportProps {
@@ -27,13 +30,17 @@ const ArrowForwardSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24
 </svg>`;
 const listStyleImg = `url("data:image/svg+xml,${encodeURIComponent(ArrowForwardSvg)}")`;
 
+const selectValidations = (state: IRuntimeState) => state.formValidations.validations;
+const createMappedAndUnmappedErrors = (validations: IValidations): [FlatError[], string[]] => [
+  getMappedErrors(validations),
+  getUnmappedErrors(validations),
+];
+const selectMappedUnmappedErrors = createSelector(selectValidations, createMappedAndUnmappedErrors);
+
 export const ErrorReport = ({ nodes }: IErrorReportProps) => {
   const dispatch = useAppDispatch();
   const currentView = useAppSelector((state) => state.formLayout.uiConfig.currentView);
-  const [errorsMapped, errorsUnmapped] = useAppSelector((state) => [
-    getMappedErrors(state.formValidations.validations),
-    getUnmappedErrors(state.formValidations.validations),
-  ]);
+  const [errorsMapped, errorsUnmapped] = useAppSelector(selectMappedUnmappedErrors);
   const allNodes = useExprContext();
   const hasErrors = errorsUnmapped.length > 0 || errorsMapped.length > 0;
   const { lang } = useLanguage();

src/components/presentation/Header.test.tsx

@@ -47,8 +47,8 @@ describe('Header', () => {
             ...mockFormLayout.uiConfig,
             showProgress: true,
             currentView: '3',
-            tracks: {
-              ...mockFormLayout.uiConfig.tracks,
+            pageOrderConfig: {
+              ...mockFormLayout.uiConfig.pageOrderConfig,
               order: ['1', '2', '3', '4', '5', '6'],
             },
           },
@@ -67,8 +67,8 @@ describe('Header', () => {
             ...mockFormLayout.uiConfig,
             showProgress: true,
             currentView: '3',
-            tracks: {
-              ...mockFormLayout.uiConfig.tracks,
+            pageOrderConfig: {
+              ...mockFormLayout.uiConfig.pageOrderConfig,
               order: ['1', '2', '3', '4', '5', '6'],
             },
           },

src/components/wrappers/Presentation.tsx

@@ -12,10 +12,9 @@ import { FormLayoutActions } from 'src/features/layout/formLayoutSlice';
 import { useAppDispatch } from 'src/hooks/useAppDispatch';
 import { useAppSelector } from 'src/hooks/useAppSelector';
 import { useLanguage } from 'src/hooks/useLanguage';
-import { getLayoutOrderFromTracks } from 'src/selectors/getLayoutOrder';
+import { selectPreviousAndNextPage } from 'src/selectors/getLayoutOrder';
 import { AltinnAppTheme } from 'src/theme/altinnAppTheme';
 import { PresentationType, ProcessTaskType } from 'src/types';
-import { getNextView } from 'src/utils/formLayout';
 import { httpGet } from 'src/utils/network/networking';
 import { getRedirectUrl } from 'src/utils/urls/appUrlHelper';
 import { returnUrlFromQueryParameter, returnUrlToMessagebox } from 'src/utils/urls/urlHelper';
@@ -34,16 +33,8 @@ export const PresentationComponent = (props: IPresentationProvidedProps) => {
   const instance = useAppSelector((state) => state.instanceData?.instance);
   const userParty = useAppSelector((state) => state.profile.profile?.party);
   const { expandedWidth } = useAppSelector((state) => state.formLayout.uiConfig);
+  const { previous } = useAppSelector(selectPreviousAndNextPage);
 
-  const previousFormPage: string = useAppSelector((state) =>
-    getNextView(
-      state.formLayout.uiConfig.navigationConfig &&
-        state.formLayout.uiConfig.navigationConfig[state.formLayout.uiConfig.currentView],
-      getLayoutOrderFromTracks(state.formLayout.uiConfig.tracks),
-      state.formLayout.uiConfig.currentView,
-      true,
-    ),
-  );
   const returnToView = useAppSelector((state) => state.formLayout.uiConfig.returnToView);
 
   const handleBackArrowButton = () => {
@@ -53,10 +44,13 @@ export const PresentationComponent = (props: IPresentationProvidedProps) => {
           newView: returnToView,
         }),
       );
-    } else if (props.type === ProcessTaskType.Data || props.type === PresentationType.Stateless) {
+    } else if (
+      previous !== undefined &&
+      (props.type === ProcessTaskType.Data || props.type === PresentationType.Stateless)
+    ) {
       dispatch(
         FormLayoutActions.updateCurrentView({
-          newView: previousFormPage,
+          newView: previous,
         }),
       );
     }
@@ -105,7 +99,7 @@ export const PresentationComponent = (props: IPresentationProvidedProps) => {
           handleClose={handleModalCloseButton}
           handleBack={handleBackArrowButton}
           showBackArrow={
-            !!previousFormPage && (props.type === ProcessTaskType.Data || props.type === PresentationType.Stateless)
+            !!previous && (props.type === ProcessTaskType.Data || props.type === PresentationType.Stateless)
           }
         />
         <section

src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx

@@ -10,18 +10,18 @@ import { useAppSelector } from 'src/hooks/useAppSelector';
 import { useExprContext } from 'src/utils/layout/ExprContext';
 
 export const DevNavigationButtons = () => {
-  const { currentView, tracks } = useAppSelector((state) => state.formLayout.uiConfig);
+  const { currentView, pageOrderConfig } = useAppSelector((state) => state.formLayout.uiConfig);
   const ctx = useExprContext();
   const dispatch = useDispatch();
-  const order = tracks?.order ?? [];
+  const order = pageOrderConfig?.order ?? [];
   const allPages = ctx?.allPageKeys() || [];
 
   function handleChange(newView: string) {
     dispatch(FormLayoutActions.updateCurrentView({ newView, allowNavigationToHidden: true }));
   }
 
   function isHidden(page: string) {
-    return tracks?.hidden.includes(page);
+    return pageOrderConfig?.hidden.includes(page);
   }
 
   function isHiddenLegacy(page: string) {

src/features/expressions/ExprContext.ts

@@ -31,7 +31,7 @@ export interface PrettyErrorsOptions {
 }
 
 /**
- * The expression context object is passed around when executing/evaluating a expression, and is
+ * The expression context object is passed around when executing/evaluating an expression, and is
  * a toolbox for expressions to resolve lookups in data sources, getting the current node, etc.
  */
 export class ExprContext {

src/features/layout/fetch/fetchFormLayoutSagas.test.ts

@@ -89,7 +89,6 @@ describe('fetchFormLayoutSagas', () => {
         .put(
           FormLayoutActions.fetchFulfilled({
             layouts: { page1: [] },
-            navigationConfig: { page1: undefined },
             hiddenLayoutsExpressions: { ...hiddenExprPage1 },
             layoutSetId: null,
           }),
@@ -115,7 +114,6 @@ describe('fetchFormLayoutSagas', () => {
         .put(
           FormLayoutActions.fetchFulfilled({
             layouts: { FormLayout: [] },
-            navigationConfig: {},
             hiddenLayoutsExpressions: { FormLayout: hiddenExprPage1['page1'] },
             layoutSetId: null,
           }),
@@ -161,7 +159,6 @@ describe('fetchFormLayoutSagas', () => {
         .put(
           FormLayoutActions.fetchFulfilled({
             layouts: { page1: [], page2: [] },
-            navigationConfig: { page1: undefined, page2: undefined },
             hiddenLayoutsExpressions: {
               ...hiddenExprPage1,
               page2: undefined,
@@ -193,7 +190,6 @@ describe('fetchFormLayoutSagas', () => {
         .put(
           FormLayoutActions.fetchFulfilled({
             layouts: { page1: [], page2: [] },
-            navigationConfig: { page1: undefined, page2: undefined },
             hiddenLayoutsExpressions: {
               ...hiddenExprPage1,
               ...hiddenExprPage2,
@@ -222,7 +218,6 @@ describe('fetchFormLayoutSagas', () => {
         .put(
           FormLayoutActions.fetchFulfilled({
             layouts: { page1: [] },
-            navigationConfig: { page1: undefined },
             hiddenLayoutsExpressions: { ...hiddenExprPage1 },
             layoutSetId: null,
           }),
@@ -248,7 +243,6 @@ describe('fetchFormLayoutSagas', () => {
         .put(
           FormLayoutActions.fetchFulfilled({
             layouts: { page1: [] },
-            navigationConfig: { page1: undefined },
             hiddenLayoutsExpressions: { ...hiddenExprPage1 },
             layoutSetId: null,
           }),

src/features/layout/fetch/fetchFormLayoutSagas.ts

@@ -56,7 +56,6 @@ export function* fetchLayoutSaga(): SagaIterator {
       getLayoutsUrl(layoutSetId || null),
     );
     const layouts: ILayouts = {};
-    const navigationConfig: any = {};
     const hiddenLayoutsExpressions: IHiddenLayoutsExternal = {};
     let firstLayoutKey: string;
     if ('data' in layoutResponse && 'layout' in layoutResponse.data && layoutResponse.data.layout) {
@@ -81,7 +80,6 @@ export function* fetchLayoutSaga(): SagaIterator {
         const file: ILayoutFileExternal = layoutResponse[key];
         layouts[key] = cleanLayout(file.data.layout);
         hiddenLayoutsExpressions[key] = file.data.hidden;
-        navigationConfig[key] = file.data.navigation;
       });
     }
 
@@ -100,7 +98,6 @@ export function* fetchLayoutSaga(): SagaIterator {
     yield put(
       FormLayoutActions.fetchFulfilled({
         layouts,
-        navigationConfig,
         hiddenLayoutsExpressions,
         layoutSetId: layoutSetId ?? null,
       }),

src/features/layout/formLayoutSlice.test.ts

@@ -6,23 +6,20 @@ describe('layoutSlice', () => {
 
   describe('fetchLayoutFulfilled', () => {
     const layouts = {};
-    const navigationConfig = {};
     const hiddenLayoutsExpressions = {};
 
     it('should set layout state accordingly', () => {
       const nextState = slice.reducer(
         initialState,
         FormLayoutActions.fetchFulfilled({
           layouts,
-          navigationConfig,
           hiddenLayoutsExpressions,
           layoutSetId: null,
         }),
       );
 
       expect(nextState.layouts).toEqual(layouts);
-      expect(nextState.uiConfig.tracks.order).toEqual(Object.keys(layouts));
-      expect(nextState.uiConfig.navigationConfig).toEqual(navigationConfig);
+      expect(nextState.uiConfig.pageOrderConfig.order).toEqual(Object.keys(layouts));
     });
 
     it('should reset repeatingGroups if set', () => {
@@ -41,7 +38,6 @@ describe('layoutSlice', () => {
         stateWithRepGroups,
         FormLayoutActions.fetchFulfilled({
           layouts,
-          navigationConfig,
           hiddenLayoutsExpressions,
           layoutSetId: null,
         }),
@@ -59,7 +55,6 @@ describe('layoutSlice', () => {
         stateWithError,
         FormLayoutActions.fetchFulfilled({
           layouts,
-          navigationConfig,
           hiddenLayoutsExpressions,
           layoutSetId: null,
         }),

src/features/layout/formLayoutSlice.ts

@@ -12,10 +12,9 @@ import { repGroupAddRowSaga } from 'src/features/layout/repGroups/repGroupAddRow
 import { repGroupDeleteRowSaga } from 'src/features/layout/repGroups/repGroupDeleteRowSaga';
 import { updateRepeatingGroupEditIndexSaga } from 'src/features/layout/repGroups/updateRepeatingGroupEditIndexSaga';
 import {
-  calculatePageOrderAndMoveToNextPageSaga,
   findAndMoveToNextVisibleLayout,
+  moveToNextPageSaga,
   updateCurrentViewSaga,
-  watchInitialCalculatePageOrderAndMoveToNextPageSaga,
 } from 'src/features/layout/update/updateFormLayoutSagas';
 import { createSagaSlice } from 'src/redux/sagaSlice';
 import type * as LayoutTypes from 'src/features/layout/formLayoutTypes';
@@ -41,8 +40,7 @@ export const initialState: ILayoutState = {
     repeatingGroups: null,
     receiptLayoutName: undefined,
     currentView: 'FormLayout',
-    navigationConfig: {},
-    tracks: {
+    pageOrderConfig: {
       hidden: [],
       hiddenExpr: {},
       order: null,
@@ -76,18 +74,16 @@ export const formLayoutSlice = () => {
     return {
       name: 'formLayout',
       initialState,
-      extraSagas: [watchInitialCalculatePageOrderAndMoveToNextPageSaga],
       actions: {
         fetch: mkAction<void>({
           saga: () => watchFetchFormLayoutSaga,
         }),
         fetchFulfilled: mkAction<LayoutTypes.IFetchLayoutFulfilled>({
           reducer: (state, action) => {
-            const { layouts, navigationConfig, hiddenLayoutsExpressions, layoutSetId } = action.payload;
+            const { layouts, hiddenLayoutsExpressions, layoutSetId } = action.payload;
             state.layouts = layouts;
-            state.uiConfig.navigationConfig = navigationConfig;
-            state.uiConfig.tracks.order = Object.keys(layouts);
-            state.uiConfig.tracks.hiddenExpr = hiddenLayoutsExpressions;
+            state.uiConfig.pageOrderConfig.order = Object.keys(layouts);
+            state.uiConfig.pageOrderConfig.hiddenExpr = hiddenLayoutsExpressions;
             state.error = null;
             state.uiConfig.repeatingGroups = null;
             state.layoutSetId = layoutSetId;
@@ -121,7 +117,7 @@ export const formLayoutSlice = () => {
               updateCommonPageSettings(state, settings.pages);
               const order = settings.pages.order;
               if (order) {
-                state.uiConfig.tracks.order = order;
+                state.uiConfig.pageOrderConfig.order = order;
                 if (state.uiConfig.currentViewCacheKey) {
                   let currentView: string;
                   const lastVisitedPage = localStorage.getItem(state.uiConfig.currentViewCacheKey);
@@ -241,21 +237,24 @@ export const formLayoutSlice = () => {
             }
           },
         }),
-        calculatePageOrderAndMoveToNextPage: mkAction<LayoutTypes.ICalculatePageOrderAndMoveToNextPage>({
-          takeEvery: calculatePageOrderAndMoveToNextPageSaga,
+        moveToNextPage: mkAction<LayoutTypes.IMoveToNextPage>({
+          takeEvery: moveToNextPageSaga,
         }),
-        calculatePageOrderAndMoveToNextPageFulfilled:
-          mkAction<LayoutTypes.ICalculatePageOrderAndMoveToNextPageFulfilled>({
-            reducer: (state, action) => {
-              const { order } = action.payload;
-              state.uiConfig.tracks.order = order;
-            },
-          }),
-        calculatePageOrderAndMoveToNextPageRejected: genericReject,
+        /**
+         * This action (setPageOrder) is used by the e2e-tests
+         * in summary.ts. It is not used in the application.
+         */
+        setPageOrder: mkAction<{ order: string[] }>({
+          reducer: (state, action) => {
+            const { order } = action.payload;
+            state.uiConfig.pageOrderConfig.order = order;
+          },
+        }),
+        moveToNextPageRejected: genericReject,
         updateHiddenLayouts: mkAction<LayoutTypes.IHiddenLayoutsUpdate>({
           takeEvery: findAndMoveToNextVisibleLayout,
           reducer: (state, action) => {
-            state.uiConfig.tracks.hidden = action.payload.hiddenLayouts;
+            state.uiConfig.pageOrderConfig.hidden = action.payload.hiddenLayouts;
           },
         }),
         initRepeatingGroups: mkAction<LayoutTypes.IInitRepeatingGroups>({