Merge branch 'main' into fix/improveErrorHandlingOfAzureDevOpsIntegra…

…tion
Altinn · Jan 8, 2025 · e649d6b · e649d6b
2 parents 68d3e8c + 7b805ee
commit e649d6b
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 94 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1453,7 +1453,7 @@
   "ux_editor.component_properties.target": "Hva vil du vise i oppsummeringen?",
   "ux_editor.component_properties.target_description": "Her kan du velge hva som skal vises på oppsummeringssiden. Du kan for eksempel vise hele sidegrupper, utvalgte sider eller utvalgte komponenter",
   "ux_editor.component_properties.target_invalid": "Ugyldig mål",
-  "ux_editor.component_properties.target_taskId": "1. Oppsummer fra denne sidegruppen",
+  "ux_editor.component_properties.target_layoutSet_id": "1. Oppsummer fra denne sidegruppen",
   "ux_editor.component_properties.target_type": "2. Vis sidegruppe, side eller komponent",
   "ux_editor.component_properties.target_unit_component": "3. Komponent",
   "ux_editor.component_properties.target_unit_layout_set": "3. Sidegruppe",

diff --git a/...editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.test.tsx b/...editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.test.tsx
@@ -7,7 +7,11 @@ import { QueryKey } from 'app-shared/types/QueryKey';
 import React from 'react';
 import { componentMocks } from '../../../../testing/componentMocks';
 import { component1IdMock, layout1NameMock, layoutMock } from '../../../../testing/layoutMock';
-import { layoutSet1NameMock, layoutSetsMock } from '../../../../testing/layoutSetsMock';
+import {
+  layoutSet1NameMock,
+  layoutSet2NameMock,
+  layoutSetsMock,
+} from '../../../../testing/layoutSetsMock';
 import { renderWithProviders } from '../../../../testing/mocks';
 import type { IGenericEditComponent } from '../../componentConfig';
 import { Summary2Component } from './Summary2Component';
@@ -50,30 +54,18 @@ describe('Summary2ComponentTargetSelector', () => {
     expect(select).toHaveValue(layoutSetsMock.sets[1].tasks[0]);
   });
 
-  it('should allow selecting a task id', async () => {
+  it('should allow selecting a layout set', async () => {
     const user = userEvent.setup();
     render({
       component: { ...defaultProps.component, target: { type: 'component', id: component1IdMock } },
     });
 
-    await user.selectOptions(targetTaskIdSelect(), 'Task_2');
+    await user.selectOptions(targetTaskIdSelect(), layoutSet2NameMock);
     expect(defaultProps.handleComponentChange).toHaveBeenCalledWith(
       expect.objectContaining({ target: { taskId: 'Task_2', type: 'component', id: '' } }),
     );
   });
 
-  it('should remove the task id from the target if the task id is the same as the current layout set', async () => {
-    const user = userEvent.setup();
-    render({
-      component: { ...defaultProps.component, target: { type: 'component', id: component1IdMock } },
-    });
-
-    await user.selectOptions(targetTaskIdSelect(), 'Task_1');
-    expect(defaultProps.handleComponentChange).toHaveBeenCalledWith(
-      expect.objectContaining({ target: { type: 'component', id: '' } }),
-    );
-  });
-
   it('should defaults to page target and disabled target select', async () => {
     render();
     expect(targetTypeSelect()).toHaveValue('layoutSet');
@@ -164,7 +156,7 @@ describe('Summary2ComponentTargetSelector', () => {
 
 const targetTaskIdSelect = () =>
   screen.getByRole('combobox', {
-    name: textMock('ux_editor.component_properties.target_taskId'),
+    name: textMock('ux_editor.component_properties.target_layoutSet_id'),
   });
 
 const targetTypeSelect = () =>

diff --git a/...s/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.tsx b/...s/ux-editor/src/components/config/componentSpecificContent/Summary2/Summary2Component.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type { IGenericEditComponent } from '../../componentConfig';
 import type { ComponentType } from 'app-shared/types/ComponentType';
 import { Summary2Override } from './Override/Summary2Override';
-import { Summary2Target } from './Target/Summary2Target';
+import { Summary2Target } from './Summary2Target/Summary2Target';
 import type {
   Summary2OverrideConfig,
   Summary2TargetConfig,

diff --git a/...ontent/Summary2/Target/Summary2Target.tsx → ...ummary2/Summary2Target/Summary2Target.tsx b/...ontent/Summary2/Target/Summary2Target.tsx → ...ummary2/Summary2Target/Summary2Target.tsx
@@ -12,14 +12,12 @@ import type {
   Summary2TargetConfig,
   SummaryTargetType,
 } from 'app-shared/types/ComponentSpecificConfig';
-import { ComponentType } from 'app-shared/types/ComponentType';
 import { useTranslation } from 'react-i18next';
-import type { FormComponent } from '../../../../../types/FormComponent';
 import { useAppContext, useComponentTitle } from '../../../../../hooks';
 import { useFormLayoutsQuery } from '../../../../../hooks/queries/useFormLayoutsQuery';
-import { getAllLayoutComponents } from '../../../../../utils/formLayoutUtils';
 import { useTargetTypes } from './useTargetTypes';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
+import { getComponentOptions, getLayoutSetOptions, getPageOptions } from './targetUtils';
 
 type Summary2TargetProps = {
   target: Summary2TargetConfig;
@@ -31,64 +29,21 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => {
   const { org, app } = useStudioEnvironmentParams();
   const { selectedFormLayoutSetName, selectedFormLayoutName } = useAppContext();
   const { data: layoutSets } = useLayoutSetsQuery(org, app);
-
-  const tasks = [
-    ...new Set(
-      layoutSets.sets.reduce((acc, set) => {
-        return set.tasks ? acc.concat(set.tasks) : acc;
-      }, []),
-    ),
-  ];
-  const currentTaskId = layoutSets?.sets?.find((set) => set.id === selectedFormLayoutSetName)
-    .tasks?.[0];
-  const selectedLayoutSetName = target.taskId
+  const selectedLayoutSetTargetName = target.taskId
     ? layoutSets?.sets?.find((set) => set.tasks?.[0] === target.taskId).id
     : selectedFormLayoutSetName;
-
-  const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedLayoutSetName);
-
-  const targetTypes = useTargetTypes();
+  const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedLayoutSetTargetName);
   const getComponentTitle = useComponentTitle();
+  const targetTypes = useTargetTypes();
 
-  const excludedComponents = [
-    ComponentType.ActionButton,
-    ComponentType.Alert,
-    ComponentType.AttachmentList,
-    ComponentType.Button,
-    ComponentType.ButtonGroup,
-    ComponentType.CustomButton,
-    ComponentType.Grid,
-    ComponentType.Header,
-    ComponentType.IFrame,
-    ComponentType.Image,
-    ComponentType.InstantiationButton,
-    ComponentType.InstanceInformation,
-    ComponentType.Link,
-    ComponentType.NavigationBar,
-    ComponentType.NavigationButtons,
-    ComponentType.Panel,
-    ComponentType.Paragraph,
-    ComponentType.PrintButton,
-    ComponentType.Summary,
-    ComponentType.Summary2,
-  ];
-
-  const components = formLayoutsData
-    ? Object.values(formLayoutsData).flatMap((layout) =>
-        getAllLayoutComponents(layout, excludedComponents),
-      )
-    : [];
-  const componentOptions = components.map((formComponent: FormComponent) => ({
-    id: formComponent.id,
-    description: getComponentTitle(formComponent),
-  }));
+  const layoutSetOptions = getLayoutSetOptions(layoutSets);
+  const pageOptions = getPageOptions(formLayoutsData);
+  const componentOptions = getComponentOptions({ formLayoutsData, getComponentTitle });
 
-  const pageOptions = formLayoutsData
-    ? Object.keys(formLayoutsData).map((page) => ({
-        id: page,
-        description: undefined,
-      }))
-    : [];
+  const handleLayoutSetChange = (taskId: string) => {
+    const updatedTarget = { ...target, id: '', taskId };
+    onChange(updatedTarget);
+  };
 
   const handleTypeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newType = event.target.value as SummaryTargetType;
@@ -100,16 +55,6 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => {
     onChange(updatedTarget);
   };
 
-  const handleTaskIdChange = (taskId: string) => {
-    const updatedTarget = { ...target, id: '' };
-    if (taskId === currentTaskId) {
-      delete updatedTarget.taskId;
-    } else {
-      updatedTarget.taskId = taskId;
-    }
-    onChange(updatedTarget);
-  };
-
   const handleTargetIdChange = (value: string) => {
     const updatedTarget = { ...target };
     updatedTarget.id = value;
@@ -127,13 +72,13 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => {
       <StudioCard.Content>
         <StudioNativeSelect
           size='sm'
-          label={t('ux_editor.component_properties.target_taskId')}
-          value={target.taskId || currentTaskId}
-          onChange={(e) => handleTaskIdChange(e.target.value)}
+          label={t('ux_editor.component_properties.target_layoutSet_id')}
+          value={target.taskId}
+          onChange={(e) => handleLayoutSetChange(e.target.value)}
         >
-          {tasks.map((taskId) => (
-            <option key={taskId} value={taskId}>
-              {taskId}
+          {layoutSetOptions.map((layoutSet) => (
+            <option key={layoutSet.id} value={layoutSet.tasks[0]}>
+              {layoutSet.id}
             </option>
           ))}
         </StudioNativeSelect>
@@ -172,7 +117,7 @@ export const Summary2Target = ({ target, onChange }: Summary2TargetProps) => {
             key={target.id} // TODO: Remove the key when https://github.com/digdir/designsystemet/issues/2264 is fixed
             size='sm'
             label={t('ux_editor.component_properties.target_unit_layout_set')}
-            value={selectedLayoutSetName}
+            value={selectedLayoutSetTargetName}
             disabled={true}
           />
         )}

diff --git a/...tor/src/components/config/componentSpecificContent/Summary2/Summary2Target/targetUtils.ts b/...tor/src/components/config/componentSpecificContent/Summary2/Summary2Target/targetUtils.ts
@@ -0,0 +1,67 @@
+import type { IFormLayouts } from '@altinn/ux-editor/types/global';
+import type { FormComponent } from '@altinn/ux-editor/types/FormComponent';
+import { getAllLayoutComponents } from '../../../../../utils/formLayoutUtils';
+import { ComponentType } from 'app-shared/types/ComponentType';
+import type { LayoutSet, LayoutSets } from 'app-shared/types/api/LayoutSetsResponse';
+
+const excludedComponents = [
+  ComponentType.ActionButton,
+  ComponentType.Alert,
+  ComponentType.AttachmentList,
+  ComponentType.Button,
+  ComponentType.ButtonGroup,
+  ComponentType.CustomButton,
+  ComponentType.Grid,
+  ComponentType.Header,
+  ComponentType.IFrame,
+  ComponentType.Image,
+  ComponentType.InstantiationButton,
+  ComponentType.InstanceInformation,
+  ComponentType.Link,
+  ComponentType.NavigationBar,
+  ComponentType.NavigationButtons,
+  ComponentType.Panel,
+  ComponentType.Paragraph,
+  ComponentType.PrintButton,
+  ComponentType.Summary,
+  ComponentType.Summary2,
+];
+
+type GetComponentOptionsProps = {
+  formLayoutsData: IFormLayouts;
+  getComponentTitle: (formComponent: FormComponent) => string;
+};
+
+type TargetProps = {
+  id: string;
+  description: string;
+};
+
+export const getComponentOptions = ({
+  formLayoutsData,
+  getComponentTitle,
+}: GetComponentOptionsProps): TargetProps[] => {
+  const availableComponents = formLayoutsData
+    ? Object.values(formLayoutsData).flatMap((layout) =>
+        getAllLayoutComponents(layout, excludedComponents),
+      )
+    : [];
+
+  return availableComponents.map((formComponent: FormComponent) => ({
+    id: formComponent.id,
+    description: getComponentTitle(formComponent),
+  }));
+};
+
+export const getPageOptions = (formLayoutsData: IFormLayouts): TargetProps[] => {
+  return formLayoutsData
+    ? Object.keys(formLayoutsData).map((page) => ({
+        id: page,
+        description: undefined,
+      }))
+    : [];
+};
+
+export const getLayoutSetOptions = (layoutSets: LayoutSets): LayoutSet[] => {
+  return layoutSets?.sets.filter((set: LayoutSet) => set.tasks?.length > 0);
+};
diff --git a/...Content/Summary2/Target/useTargetTypes.ts → ...Summary2/Summary2Target/useTargetTypes.ts b/...Content/Summary2/Target/useTargetTypes.ts → ...Summary2/Summary2Target/useTargetTypes.ts
diff --git a/frontend/packages/ux-editor/src/data/formItemConfig.test.ts b/frontend/packages/ux-editor/src/data/formItemConfig.test.ts
@@ -14,9 +14,14 @@ describe('formItemConfig', () => {
     confOnScreenComponents,
   ];
   const allAvailableComponents = allAvailableLists.flat();
-  const excludedComponents = [ComponentType.Payment, ComponentType.Subform, ComponentType.Summary2];
+  const excludedComponents = [
+    ComponentType.Custom,
+    ComponentType.Payment,
+    ComponentType.Subform,
+    ComponentType.Summary2,
+  ];
 
-  /**  Test that all components, except Payment, Subform and Summary2 (since behind featureFlag), are available in one of the visible lists */
+  /**  Test that all components, except Custom, Payment, Subform and Summary2 (since behind featureFlag), are available in one of the visible lists */
   it.each(
     Object.values(ComponentType).filter(
       (componentType) => !excludedComponents.includes(componentType),

diff --git a/frontend/packages/ux-editor/src/data/formItemConfig.ts b/frontend/packages/ux-editor/src/data/formItemConfig.ts
@@ -504,7 +504,6 @@ export const advancedItems: FormItemConfigs[ComponentType][] = [
   formItemConfigs[ComponentType.Accordion],
   formItemConfigs[ComponentType.AccordionGroup],
   formItemConfigs[ComponentType.List],
-  formItemConfigs[ComponentType.Custom],
   formItemConfigs[ComponentType.RepeatingGroup],
   formItemConfigs[ComponentType.PaymentDetails],
   shouldDisplayFeature(FeatureFlag.Subform) && formItemConfigs[ComponentType.Subform],