bug: selected value from option from redux not shown in summary (#247)

* bug: options from redux now displays data in rep group table + summary * code smells Co-authored-by: EKEBERG Steffen <[email protected]>
Altinn · Jun 27, 2022 · 22e2952 · 22e2952
1 parent 3a39055
commit 22e2952
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 38 deletions.
diff --git a/src/altinn-app-frontend/src/components/hooks/index.ts b/src/altinn-app-frontend/src/components/hooks/index.ts
@@ -1,11 +1,10 @@
 import type { IInstanceContext, IDataSources } from "altinn-shared/types";
-import { replaceTextResourceParams } from "altinn-shared/utils";
 import { buildInstanceContext } from "altinn-shared/utils/instanceContext";
 import { useState, useEffect } from "react";
 import { shallowEqual } from "react-redux";
 import { useAppSelector } from "src/common/hooks";
 import type { IMapping, IOptionSource, IOption } from "src/types";
-import { getOptionLookupKey, getRelevantFormDataForOptionSource, replaceOptionDataField } from "src/utils/options";
+import { getOptionLookupKey, getRelevantFormDataForOptionSource, setupSourceOptions } from "src/utils/options";
 
 interface IUseGetOptionsParams {
   optionsId: string;
@@ -39,24 +38,13 @@ export const useGetOptions = ({ optionsId, mapping, source }: IUseGetOptionsPara
       instanceContext: instanceContext
     };
 
-    const replacedOptionLabels =
-      replaceTextResourceParams([relevantTextResource], dataSources, repeatingGroups);
-
-    const repGroup = Object.values(repeatingGroups).find((group) => {
-      return group.dataModelBinding === source.group;
-    });
-
-
-    const newOptions: IOption[] = [];
-    for (let i = 0; i <= repGroup.index; i++) {
-      const option: IOption = {
-        label: replacedOptionLabels[i + 1].value,
-        value: replaceOptionDataField(relevantFormData, source.value, i),
-      };
-      newOptions.push(option);
-    }
-
-    setOptions(newOptions);
+    setOptions(setupSourceOptions({
+      source,
+      relevantTextResource,
+      relevantFormData,
+      repeatingGroups,
+      dataSources
+    }));
 
   }, [applicationSettings, relevantFormData, instance, mapping, optionState, optionsId, repeatingGroups, source, relevantTextResource]);
 

diff --git a/src/altinn-app-frontend/src/components/summary/SummaryComponent.tsx b/src/altinn-app-frontend/src/components/summary/SummaryComponent.tsx
@@ -110,6 +110,7 @@ export function SummaryComponent({ id, grid, ...summaryProps }: ISummaryComponen
         formComponent as ILayoutComponent,
         state.textResources.resources,
         state.optionState.options,
+        state.formLayout.uiConfig.repeatingGroups,
         true,
       )
     );

diff --git a/src/altinn-app-frontend/src/components/summary/SummaryGroupComponent.tsx b/src/altinn-app-frontend/src/components/summary/SummaryGroupComponent.tsx
@@ -245,6 +245,7 @@ function SummaryGroupComponent({
             componentDeepCopy,
             textResources,
             options,
+            repeatingGroups,
           );
 
           if (hiddenFields.find((field) => field === `${componentId}-${i}`)) {
@@ -315,6 +316,7 @@ function SummaryGroupComponent({
             groupComponent.dataModelBindings.group,
             textResources,
             options,
+            repeatingGroups,
           );
         }
         groupContainer.children.push(summaryId);

diff --git a/src/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx b/src/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx
@@ -159,6 +159,7 @@ export function RepeatingGroupTable({
       container.dataModelBindings.group,
       textResources,
       options,
+      repeatingGroups,
     );
   };
 

diff --git a/src/altinn-app-frontend/src/features/form/layout/index.ts b/src/altinn-app-frontend/src/features/form/layout/index.ts
@@ -1,5 +1,5 @@
 import { GridSize } from '@material-ui/core';
-import { IMapping, IOption, Triggers } from '../../../types';
+import { IMapping, IOption, IOptionSource, Triggers } from '../../../types';
 
 export interface ILayouts {
   [id: string]: ILayout;
@@ -98,6 +98,7 @@ export interface ISelectionComponentProps extends ILayoutComponent {
   optionsId?: string;
   mapping?: IMapping;
   secure?: boolean;
+  source?: IOptionSource;
 }
 
 export interface IGrid extends IGridStyling {

diff --git a/src/altinn-app-frontend/src/utils/formComponentUtils.test.ts b/src/altinn-app-frontend/src/utils/formComponentUtils.test.ts
@@ -1,6 +1,6 @@
 import parseHtmlToReact from 'html-react-parser';
 
-import type { IComponentBindingValidation, IComponentValidations, IOptions, ITextResource } from 'src/types';
+import type { IComponentBindingValidation, IComponentValidations, IOptions, ITextResource, IRepeatingGroups } from 'src/types';
 import type { IFormData } from 'src/features/form/data/formDataReducer';
 import type {
   ILayoutComponent,
@@ -36,6 +36,9 @@ describe('formComponentUtils', () => {
     mockBindingRadioButtonsWithMapping: 'mockOptionsWithMapping1',
     mockBindingLikert: 'optionValue1',
     mockBindingLikertWithMapping: 'mockOptionsWithMapping1',
+    mockBindingDropdownWithReduxOptions: 'mockReduxOptionValue',
+    'someGroup[0].fieldUsedAsValue': 'mockReduxOptionValue',
+    'someGroup[0].fieldUsedAsLabel': 'mockReduxOptionLabel',
     mockBindingAttachmentSingle: '12345',
     'mockBindingAttachmentMulti[0]': '123457',
     'mockBindingAttachmentMulti[1]': '123456',
@@ -61,6 +64,17 @@ describe('formComponentUtils', () => {
       id: 'repTextKey3',
       value: 'RepValue3',
     },
+    {
+      id: 'dropdown.label',
+      value: 'Label value: {0}',
+      unparsedValue: 'Label value: {0}',
+      variables: [
+        {
+          key: 'someGroup[{0}].fieldUsedAsLabel',
+          dataSource: 'dataModel.default'
+        },
+      ]
+    }
   ];
   const mockOptions: IOptions = {
     mockOption: {
@@ -149,6 +163,8 @@ describe('formComponentUtils', () => {
     },
   ];
 
+  const mockRepeatingGroups: IRepeatingGroups = {};
+
   describe('getDisplayFormData', () => {
     it('should return form data for a component', () => {
       const inputComponent = {
@@ -162,6 +178,7 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('test');
     });
@@ -179,6 +196,7 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('Value1, Value2');
     });
@@ -197,6 +215,7 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('Value Mapping 1, Value Mapping 2');
     });
@@ -214,6 +233,7 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
         true,
       );
       const expected = {
@@ -236,6 +256,7 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('Value1');
     })
@@ -254,10 +275,82 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('Value Mapping 1');
     })
 
+    it('should return text resource for radio button component', () => {
+      const radioButtonComponent = {
+        type: 'RadioButtons',
+        optionsId: 'mockOption',
+        id: 'some-id'
+      } as ISelectionComponentProps;
+      const result = getDisplayFormData(
+        'mockBindingRadioButtons',
+        radioButtonComponent,
+        radioButtonComponent.id,
+        mockAttachments,
+        mockFormData,
+        mockOptions,
+        mockTextResources,
+        mockRepeatingGroups,
+      );
+      expect(result).toEqual('Value1');
+    });
+
+    it('should return text resource for radio button component with mapping', () => {
+      const radioButtonComponentWithMapping = {
+        type: 'RadioButtons',
+        optionsId: 'mockOptionsWithMapping',
+        mapping: { someDataField: 'someUrlParam' },
+        id: 'some-id'
+      } as unknown as ISelectionComponentProps;
+      const result = getDisplayFormData(
+        'mockBindingRadioButtonsWithMapping',
+        radioButtonComponentWithMapping,
+        radioButtonComponentWithMapping.id,
+        mockAttachments,
+        mockFormData,
+        mockOptions,
+        mockTextResources,
+        mockRepeatingGroups,
+      );
+      expect(result).toEqual('Value Mapping 1');
+    });
+
+    it('should return correct label for dropdown setup with options from redux', () => {
+      const dropdownComponentWithReduxOptions = {
+        type: 'RadioButtons',
+        id: 'some-id',
+        source: {
+          group: 'someGroup',
+          label: 'dropdown.label',
+          value: 'someGroup[{0}].fieldUsedAsValue'
+        }
+      } as unknown as ISelectionComponentProps;
+
+      const repGroups: IRepeatingGroups = {
+        group1: {
+          index: 0,
+          dataModelBinding: 'someGroup'
+        },
+      };
+
+      const result = getDisplayFormData(
+        'mockBindingDropdownWithReduxOptions',
+        dropdownComponentWithReduxOptions,
+        dropdownComponentWithReduxOptions.id,
+        mockAttachments,
+        mockFormData,
+        mockOptions,
+        mockTextResources,
+        repGroups,
+      );
+
+      expect(result).toEqual('Label value: mockReduxOptionLabel');
+    });
+
     it('should return a single attachment name for a FileUpload component', () => {
       const component = {
         id: 'upload',
@@ -274,6 +367,7 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('mockNameAttachment1');
     });
@@ -294,13 +388,14 @@ describe('formComponentUtils', () => {
         mockFormData,
         mockOptions,
         mockTextResources,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('mockNameAttachment3, mockNameAttachment2');
     });
   });
 
   describe('getFormDataForComponentInRepeatingGroup', () => {
-    it('should return comma separated string of text resources for checkboxes with mulitiple values', () => {
+    it('should return comma separated string of text resources for checkboxes with multiple values', () => {
       const checkboxComponent = {
         type: 'Checkboxes',
         optionsId: 'mockRepOption',
@@ -316,6 +411,7 @@ describe('formComponentUtils', () => {
         'group',
         mockTextResources,
         mockOptions,
+        mockRepeatingGroups,
       );
       expect(result).toEqual('RepValue1, RepValue2, RepValue3');
     });