Bugfix/duplicate validation messages shown (#187)

* only show first validation message in message array

* dont run updateFormLayout while unsaved data has been saved

* change format of conditional rendering

* remove console logging

* use flag in layoutsettings to toggle workaround

* update component tests with new state

* re-resolve merge conflict

* change ternary operation for if

* formatting

* add test for watchUpdateCurrentViewSaga

* test: fixed testt + a little refactor

* test watchUpdateCurrentViewSaga no unsaved changes

* typo

* resolve merge conflicts

* revert message rendering changes

* require regex match to start with whole component-id

* update regex and add regressiontests

Co-authored-by: EKEBERG Steffen <[email protected]>

Author: Magnusrm

src/altinn-app-frontend/src/components/advanced/AddressComponent.test.tsx

@@ -60,9 +60,9 @@ const render = (props: Partial<IAddressComponentProps> = {}) => {
   const mockStore = createStore({ language: { language: mockLanguage } });
 
   rtlRender(
-  <Provider store={mockStore}>
-    <AddressComponent {...allProps} />
-  </Provider>);
+    <Provider store={mockStore}>
+      <AddressComponent {...allProps} />
+    </Provider>);
 };
 
 const getField = ({ method, regex }) =>

src/altinn-app-frontend/src/components/base/FileUpload/FileUploadWithTag/EditWindowComponent.tsx

@@ -186,7 +186,11 @@ export function EditWindowComponent(props: EditWindowProps): JSX.Element {
             whiteSpace: 'pre-wrap',
           }}
         >
-          {renderValidationMessages(props.attachmentValidations.filter((i) => i.id === props.attachment.id).map((e) => { return e.message; }), `attachment-error-${props.attachment.id}`, 'error')}
+          {renderValidationMessages(
+            props.attachmentValidations.filter((i) => i.id === props.attachment.id).map((e) => { return e.message; }),
+           `attachment-error-${props.attachment.id}`,
+            'error',
+          )}
         </div>
         : undefined
       }

src/altinn-app-frontend/src/components/base/LikertComponent.tsx

@@ -10,7 +10,6 @@ import {
 import { IRadioButtonsContainerProps } from 'src/components/base/RadioButtons/RadioButtonsContainerComponent';
 import { LayoutStyle } from 'src/types';
 
-
 export const LikertComponent = (props: IRadioButtonsContainerProps) => {
   const { layout } = props;
   const useRadioProps = useRadioButtons(props);

src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx

@@ -83,7 +83,9 @@ export function GroupContainer({
   const currentView = useAppSelector(
     (state) => state.formLayout.uiConfig.currentView,
   );
-  const language = useAppSelector((state) => state.language.language);
+  const language = useAppSelector(
+    (state) => state.language.language
+  );
   const repeatingGroups = useAppSelector(
     (state) => state.formLayout.uiConfig.repeatingGroups,
   );

src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.test.ts

@@ -1,16 +1,19 @@
 import { expectSaga, testSaga } from 'redux-saga-test-plan';
-import { select } from 'redux-saga/effects';
+import { actionChannel, call, select } from 'redux-saga/effects';
 
 import FormDataActions from 'src/features/form/data/formDataActions';
-import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 import { getInitialStateMock } from '__mocks__/initialStateMock';
 import * as sharedUtils from 'altinn-shared/utils';
 import {
   calculatePageOrderAndMoveToNextPageSaga,
   initRepeatingGroupsSaga,
   watchInitRepeatingGroupsSaga,
+  watchUpdateCurrentViewSaga,
+  updateCurrentViewSaga,
+  selectUnsavedChanges
 } from './updateFormLayoutSagas';
 import { IRuntimeState } from 'src/types';
+import { FormLayoutActions } from '../formLayoutSlice';
 
 jest.mock('altinn-shared/utils');
 
@@ -37,6 +40,75 @@ describe('updateLayoutSagas', () => {
     });
   });
 
+  describe('watchUpdateCurrentViewSaga', () => {
+    it('should save unsaved changes before updating from layout', () => {
+      const fakeChannel = {
+        take() { /* Intentionally empty */ },
+        flush() { /* Intentionally empty */ },
+        close() { /* Intentionally empty */},
+      };
+
+      const mockAction = FormLayoutActions.updateCurrentView({
+        newView: 'test'
+      });
+
+      const mockSaga = function*() { /* intentially empty */};
+
+      return expectSaga(watchUpdateCurrentViewSaga)
+        .provide([
+          [actionChannel(FormLayoutActions.updateCurrentView), fakeChannel],
+          [select(selectUnsavedChanges), true],
+          {
+            take({ channel }, next) {
+              if (channel === fakeChannel) {
+                return mockAction;
+              }
+              return next();
+            },
+          },
+          [call(updateCurrentViewSaga, mockAction), mockSaga]
+        ])
+        .dispatch(FormLayoutActions.updateCurrentView)
+        .dispatch(FormDataActions.submitFormDataFulfilled)
+        .take(fakeChannel)
+        .call(updateCurrentViewSaga, mockAction)
+        .run();
+    });
+    it('should not save unsaved changes before updating form layout when no unsaved changes', () => {
+      const fakeChannel = {
+        take() { /* Intentionally empty */ },
+        flush() { /* Intentionally empty */ },
+        close() { /* Intentionally empty */},
+      };
+
+      const mockAction = FormLayoutActions.updateCurrentView({
+        newView: 'test'
+      });
+
+      const mockSaga = function*() { /* intentially empty */};
+
+      return expectSaga(watchUpdateCurrentViewSaga)
+        .provide([
+          [actionChannel(FormLayoutActions.updateCurrentView), fakeChannel],
+          [select(selectUnsavedChanges), false],
+          {
+            take({ channel }, next) {
+              if (channel === fakeChannel) {
+                return mockAction;
+              }
+              return next();
+            },
+          },
+          [call(updateCurrentViewSaga, mockAction), mockSaga]
+        ])
+        .dispatch(FormLayoutActions.updateCurrentView)
+        .not.take(FormDataActions.submitFormDataFulfilled)
+        .take(fakeChannel)
+        .call(updateCurrentViewSaga, mockAction)
+        .run();
+    });
+  });
+
   describe('calculatePageOrderAndMoveToNextPageSaga', () => {
     const state = getInitialStateMock();
     const orderResponse = ['page-1', 'FormLayout', 'page-3'];

src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import { PayloadAction } from '@reduxjs/toolkit';
 import { SagaIterator } from 'redux-saga';
-import { all, call, put, select, take, takeEvery, takeLatest } from 'redux-saga/effects';
+import { actionChannel, all, call, put, select, take, takeEvery, takeLatest } from 'redux-saga/effects';
 import { IFileUploadersWithTag, IFormFileUploaderWithTagComponent, IRepeatingGroups, IRuntimeState, IValidationIssue, IValidations, Triggers } from 'src/types';
 import { getFileUploadersWithTag, getRepeatingGroups, removeRepeatingGroupFromUIConfig } from 'src/utils/formLayout';
 import { AxiosRequestConfig } from 'axios';
@@ -26,6 +26,7 @@ const selectFormLayoutState = (state: IRuntimeState): ILayoutState => state.form
 const selectFormData = (state: IRuntimeState): IFormDataState => state.formData;
 const selectFormLayouts = (state: IRuntimeState): ILayouts => state.formLayout.layouts;
 const selectAttachmentState = (state: IRuntimeState): IAttachmentState => state.attachments;
+export const selectUnsavedChanges = (state: IRuntimeState): boolean => state.formData.unsavedChanges;
 
 function* updateFocus({ payload: { currentComponentId, step } }: PayloadAction<IUpdateFocus>): SagaIterator {
   try {
@@ -292,7 +293,16 @@ export function* watchInitialCalculagePageOrderAndMoveToNextPageSaga(): SagaIter
 }
 
 export function* watchUpdateCurrentViewSaga(): SagaIterator {
-  yield takeEvery(FormLayoutActions.updateCurrentView, updateCurrentViewSaga);
+  const requestChan = yield actionChannel(FormLayoutActions.updateCurrentView);
+  while (true) {
+    yield take(FormLayoutActions.updateCurrentView);
+    const hasUnsavedChanges = yield select(selectUnsavedChanges);
+    if (hasUnsavedChanges) {
+      yield take(FormDataActions.submitFormDataFulfilled);
+    }
+    const value = yield take(requestChan);
+    yield call(updateCurrentViewSaga, value);
+  }
 }
 
 export function* watchUpdateFocusSaga(): SagaIterator {

src/altinn-app-frontend/src/utils/layout/index.test.tsx

@@ -1,5 +1,5 @@
 import { LayoutStyle } from 'src/types';
-import { shouldUseRowLayout } from './index';
+import { matchLayoutComponent, shouldUseRowLayout } from './index';
 
 describe('shouldUseRowLayout', () => {
   it('Should be false when layout is column', () => {
@@ -52,3 +52,58 @@ describe('shouldUseRowLayout', () => {
     ).toBe(false);
   });
 });
+
+describe('matchLayoutComponent', () => {
+  it('should not match a component id that partially contains the tested id', () => {
+    expect(
+      matchLayoutComponent(
+        'abc-183d0a1c-5313-45f9-9d02-4d1b0e50b1c8',
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8'
+      )
+    ).toBe(null);
+
+    expect(
+      matchLayoutComponent(
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8-abc',
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8'
+      )
+    ).toBe(null);
+
+    expect(
+      matchLayoutComponent(
+        '123-183d0a1c-5313-45f9-9d02-4d1b0e50b1c8',
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8'
+      )
+    ).toBe(null);
+
+    expect(
+      matchLayoutComponent(
+        '-183d0a1c-5313-45f9-9d02-4d1b0e50b1c8',
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8'
+      )
+    ).toBe(null);
+
+    expect(
+      matchLayoutComponent(
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8-',
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8'
+      )
+    ).toBe(null);
+  });
+
+  it('should match a component id that contains a postfix with an index in a repeating group', () => {
+    expect(
+      matchLayoutComponent(
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8-123',
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8'
+      )
+    ).toContain('183d0a1c-5313-45f9-9d02-4d1b0e50b1c8');
+
+    expect(
+      matchLayoutComponent(
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8-0',
+        '183d0a1c-5313-45f9-9d02-4d1b0e50b1c8'
+      )
+    ).toContain('183d0a1c-5313-45f9-9d02-4d1b0e50b1c8');
+  });
+});

src/altinn-app-frontend/src/utils/layout/index.tsx

@@ -54,7 +54,7 @@ export function getLayoutIdForComponent(id: string, layouts: ILayouts): string {
   when searching through formLayout for the component definition.
 */
 export function matchLayoutComponent(providedId: string, componentId: string) {
-  return providedId.match(`${componentId}(-[0-9]*)*$`);
+  return providedId.match(`^(${componentId})(-[0-9]+)*$`);
 }
 
 export function renderGenericComponent(