From ff2234967676b449989b78f464bfb22f6299109a Mon Sep 17 00:00:00 2001
From: Jonas Dyrlie <jonas.dyrlie@gmail.com>
Date: Wed, 12 Feb 2025 12:31:28 +0100
Subject: [PATCH 1/3] feat(summary2): add new props to overrides

Adds a new property to overrides for RepeatingGroup and Subform
`display`.
This property has a default value dependent on which component is
targeted. RepeatingGroup is `full` and Subform is `table` (see
layout.schema.v1.json)

commit-id:a7e89d34
---
 frontend/language/src/nb.json                 |  3 +
 .../src/types/ComponentSpecificConfig.ts      | 11 +--
 .../OverrideFields/CompactViewSwitch.tsx      | 19 +----
 .../Summary2OverrideDisplaySelect.tsx         | 41 ++++++++++
 .../Summary2OverrideDisplayType.tsx           | 19 +----
 .../Override/Summary2Override.test.tsx        | 78 ++++++++++++++++---
 .../Override/Summary2OverrideEntry.tsx        | 71 ++++++++++++++---
 .../Summary2/Override/utils.test.tsx          |  6 +-
 .../Summary2/Override/utils.ts                |  4 +-
 .../ux-editor/src/testing/layoutMock.ts       |  9 +++
 10 files changed, 198 insertions(+), 63 deletions(-)
 create mode 100644 frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplaySelect.tsx

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index d8049c8a7c7..b817258ef7d 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -1489,6 +1489,9 @@
   "ux_editor.component_properties.summary.add_override": "Lag en ny overstyring",
   "ux_editor.component_properties.summary.override.choose_component": "Velg komponent",
   "ux_editor.component_properties.summary.override.description": "Overstyringer per komponent for oppsummeringen",
+  "ux_editor.component_properties.summary.override.display": "Visningstype",
+  "ux_editor.component_properties.summary.override.display.full": "Fullstendig",
+  "ux_editor.component_properties.summary.override.display.table": "Tabell",
   "ux_editor.component_properties.summary.override.display_type": "Visningstype",
   "ux_editor.component_properties.summary.override.display_type.list": "Liste",
   "ux_editor.component_properties.summary.override.display_type.string": "Tekst",
diff --git a/frontend/packages/shared/src/types/ComponentSpecificConfig.ts b/frontend/packages/shared/src/types/ComponentSpecificConfig.ts
index 4070d791908..3a1f1b898c4 100644
--- a/frontend/packages/shared/src/types/ComponentSpecificConfig.ts
+++ b/frontend/packages/shared/src/types/ComponentSpecificConfig.ts
@@ -105,10 +105,6 @@ type SummarizableComponentProps = {
   renderAsSummary?: BooleanExpression;
 };
 
-export type SummaryTargetType = 'page' | 'layoutSet' | 'component';
-
-export type SummaryCustomTargetType = 'list' | 'string';
-
 type LabeledComponentProps = {
   labelSettings?: LabelSettings;
 };
@@ -136,14 +132,19 @@ type PageValidation = {
   show: AllowedValidationMasks;
 };
 
+export type OverrideDisplayType = 'list' | 'string';
+export type OverrideDisplay = 'table' | 'full';
 export type Summary2OverrideConfig = {
   componentId: string;
   hidden?: boolean;
   emptyFieldText?: string;
   isCompact?: boolean;
-  displayType?: SummaryCustomTargetType;
+  displayType?: OverrideDisplayType;
+  display?: OverrideDisplay;
 };
 
+export type SummaryTargetType = 'page' | 'layoutSet' | 'component';
+
 export type Summary2TargetConfig = {
   type?: SummaryTargetType;
   id?: string;
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/CompactViewSwitch.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/CompactViewSwitch.tsx
index 2fd55c70706..b2a113d28a8 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/CompactViewSwitch.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/CompactViewSwitch.tsx
@@ -2,32 +2,15 @@ import React, { type ChangeEvent } from 'react';
 import type { Summary2OverrideConfig } from 'app-shared/types/ComponentSpecificConfig';
 import { StudioSwitch } from '@studio/components';
 import { useTranslation } from 'react-i18next';
-import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { useAppContext } from '../../../../../../hooks';
-import { useFormLayoutsQuery } from '../../../../../../hooks/queries/useFormLayoutsQuery';
-import { getAllLayoutComponents } from '../../../../../../utils/formLayoutUtils';
-import { ComponentType } from 'app-shared/types/ComponentType';
 
 type CompactViewSwitchProps = {
   onChange: (updatedOverride: Summary2OverrideConfig) => void;
   override: Summary2OverrideConfig;
 };
 
-export const CompactViewSwitch = ({ onChange, override }: CompactViewSwitchProps) => {
+export const Summary2OverrideCompactSwitch = ({ onChange, override }: CompactViewSwitchProps) => {
   const { t } = useTranslation();
-  const { org, app } = useStudioEnvironmentParams();
-  const { selectedFormLayoutSetName } = useAppContext();
-  const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedFormLayoutSetName);
 
-  const components = Object.values(formLayoutsData).flatMap((layout) =>
-    getAllLayoutComponents(layout),
-  );
-  const component = components.find((comp) => comp.id === override.componentId);
-  const isGroupComponent = component?.type === (ComponentType.Group as ComponentType);
-
-  if (!isGroupComponent) {
-    return null;
-  }
   return (
     <StudioSwitch
       position='right'
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplaySelect.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplaySelect.tsx
new file mode 100644
index 00000000000..5f911ad7f07
--- /dev/null
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplaySelect.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import type {
+  OverrideDisplay,
+  Summary2OverrideConfig,
+} from 'app-shared/types/ComponentSpecificConfig';
+import { StudioNativeSelect } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+
+type Summary2OverrideDisplaySelectProps = {
+  onChange: (override: Summary2OverrideConfig) => void;
+  override: Summary2OverrideConfig;
+};
+
+export const Summary2OverrideDisplaySelect = ({
+  onChange,
+  override,
+}: Summary2OverrideDisplaySelectProps) => {
+  const { t } = useTranslation();
+
+  const options = [
+    { value: 'table', text: t('ux_editor.component_properties.summary.override.display.table') },
+    { value: 'full', text: t('ux_editor.component_properties.summary.override.display.full') },
+  ];
+
+  return (
+    <StudioNativeSelect
+      size='sm'
+      label={t('ux_editor.component_properties.summary.override.display')}
+      value={override.display}
+      onChange={(event) => {
+        onChange({ ...override, display: event.target.value as OverrideDisplay });
+      }}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.text}
+        </option>
+      ))}
+    </StudioNativeSelect>
+  );
+};
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx
index 734167bd50a..d59c738911e 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx
@@ -2,39 +2,26 @@ import React from 'react';
 import { StudioCard, StudioNativeSelect } from '@studio/components';
 import type {
   Summary2OverrideConfig,
-  SummaryCustomTargetType,
+  OverrideDisplayType,
 } from 'app-shared/types/ComponentSpecificConfig';
 import { type CustomConfigType, useCustomConfigType } from '../hook/useCustomConfigType';
 import { useTranslation } from 'react-i18next';
 import { mapSelectedTypeToConfig } from '../utils';
-import { ComponentType } from 'app-shared/types/ComponentType';
-import type { TargetComponentProps } from '../../Summary2Target/targetUtils';
 
 export type Summary2OverrideDisplayTypeProps = {
   override: Summary2OverrideConfig;
-  componentOptions: TargetComponentProps[];
   onChange: (override: Summary2OverrideConfig) => void;
 };
 
 export const Summary2OverrideDisplayType = ({
   override,
-  componentOptions,
   onChange,
 }: Summary2OverrideDisplayTypeProps) => {
   const { t } = useTranslation();
   const { displayType, componentId } = override;
-  const selectedComponentType = componentOptions?.find((comp) => comp.id === componentId)?.type;
   const customConfigTypes: CustomConfigType[] = useCustomConfigType();
 
-  const checkboxOrMultipleselect =
-    selectedComponentType?.includes(ComponentType.MultipleSelect) ||
-    selectedComponentType?.includes(ComponentType.Checkboxes);
-
-  if (!checkboxOrMultipleselect) {
-    return null;
-  }
-
-  const handleCustomTypeChange = (newDisplayType: SummaryCustomTargetType): void => {
+  const handleCustomTypeChange = (newDisplayType: OverrideDisplayType): void => {
     const summary2OverrideConfig = mapSelectedTypeToConfig({
       componentId,
       displayType: newDisplayType,
@@ -48,7 +35,7 @@ export const Summary2OverrideDisplayType = ({
         size='sm'
         label={t('ux_editor.component_properties.summary.override.display_type')}
         value={displayType || 'list'}
-        onChange={(e) => handleCustomTypeChange(e.target.value as SummaryCustomTargetType)}
+        onChange={(e) => handleCustomTypeChange(e.target.value as OverrideDisplayType)}
       >
         {customConfigTypes.map((type: CustomConfigType) => (
           <option key={type.label} value={type.value}>
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
index 9e79b088825..8714bd493df 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
@@ -12,18 +12,26 @@ import {
   componentWithMultipleSelectMock,
   layout1NameMock,
   layoutMock,
+  container2IdMock,
+  subformComponentMock,
 } from '../../../../../testing/layoutMock';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { layoutSet1NameMock, layoutSetsExtendedMock } from '../../../../../testing/layoutSetsMock';
 import { renderWithProviders } from '../../../../../testing/mocks';
+import type {
+  OverrideDisplay,
+  OverrideDisplayType,
+} from 'app-shared/types/ComponentSpecificConfig';
 
 const checkBoxId = componentWithOptionsMock.id;
 const multipleSelectId = componentWithMultipleSelectMock.id;
+const subformComponentId = subformComponentMock.id;
 const layoutMockWithMultipleSelect = {
   ...layoutMock,
   components: {
     ...layoutMock.components,
     [multipleSelectId]: componentWithMultipleSelectMock,
+    [subformComponentId]: subformComponentMock,
   },
 };
 
@@ -42,11 +50,12 @@ describe('Summary2Override', () => {
   });
 
   it('should be able to remove override', async () => {
+    const user = userEvent.setup();
     render({
       overrides: [{ componentId: '1' }],
     });
-    await userEvent.click(overrideCollapsedButton(1));
-    await userEvent.click(removeOverrideButton());
+    await user.click(overrideCollapsedButton(1));
+    await user.click(removeOverrideButton());
     expect(defaultProps.onChange).toHaveBeenCalledWith([]);
   });
 
@@ -57,7 +66,7 @@ describe('Summary2Override', () => {
       render({ overrides: [{ componentId }] });
 
       await user.click(overrideCollapsedButton(1));
-      await user.click(overrideTypeSelector());
+      await user.click(overrideDisplayTypeSelector());
       expect(renderedTypeOptions()).toBeTruthy();
     },
   );
@@ -143,7 +152,7 @@ describe('Summary2Override', () => {
     const user = userEvent.setup();
     render({ overrides: [{ componentId: multipleSelectId }] });
     await user.click(overrideCollapsedButton(1));
-    await user.selectOptions(overrideTypeSelector(), overrideSelectType('string'));
+    await user.selectOptions(overrideDisplayTypeSelector(), overrideDisplayType('string'));
 
     expect(defaultProps.onChange).toHaveBeenCalledWith(
       expect.arrayContaining([{ componentId: multipleSelectId, displayType: 'string' }]),
@@ -154,7 +163,7 @@ describe('Summary2Override', () => {
     const user = userEvent.setup();
     render({ overrides: [{ componentId: checkBoxId }] });
     await user.click(overrideCollapsedButton(1));
-    await user.selectOptions(overrideTypeSelector(), overrideSelectType('string'));
+    await user.selectOptions(overrideDisplayTypeSelector(), overrideDisplayType('string'));
 
     await waitFor(() =>
       expect(defaultProps.onChange).toHaveBeenCalledWith(
@@ -164,20 +173,61 @@ describe('Summary2Override', () => {
   });
 
   it('should collapse and uncollapse override', async () => {
+    const user = userEvent.setup();
     render({ overrides: [{ componentId: '1' }] });
-    await userEvent.click(overrideCollapsedButton(1));
+    await user.click(overrideCollapsedButton(1));
     expect(
       screen.queryByRole('button', {
         name: textMock('ux_editor.component_properties.summary.overrides.nth.*:1}'),
       }),
     ).not.toBeInTheDocument();
-    await userEvent.click(overrideCloseButton());
+    await user.click(overrideCloseButton());
     expect(
       screen.queryByRole('button', {
         name: textMock('ux_editor.component_properties.summary.overrides.nth.*:1}'),
       }),
     ).not.toBeInTheDocument();
   });
+
+  it('should render component specific overrides', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: container2IdMock }] });
+
+    await user.click(overrideCollapsedButton(1));
+    await user.selectOptions(overrideDisplaySelector(), overrideDisplaySelectType('table'));
+
+    expect(defaultProps.onChange).toHaveBeenCalledWith(
+      expect.arrayContaining([{ componentId: container2IdMock, display: 'table' }]),
+    );
+  });
+
+  it.each([
+    {
+      componentId: container2IdMock,
+      defaultProps: { componentId: container2IdMock, display: 'full' },
+    },
+    {
+      componentId: subformComponentId,
+      defaultProps: { componentId: subformComponentId, display: 'table' },
+    },
+  ])('should set default props for components', async (args) => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: component1IdMock }] });
+
+    await user.click(overrideCollapsedButton(1));
+    await user.click(overrideComponentSelect());
+    await user.click(
+      screen.getByRole('option', {
+        name: new RegExp(args.componentId),
+      }),
+    );
+
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining(args.defaultProps)]),
+      ),
+    );
+  });
 });
 
 const overrideCloseButton = () =>
@@ -202,12 +252,22 @@ const overrideComponentSelect = () =>
     name: textMock('ux_editor.component_properties.summary.override.choose_component'),
   });
 
-const overrideTypeSelector = () =>
+const overrideDisplaySelector = () =>
+  screen.getByRole('combobox', {
+    name: textMock('ux_editor.component_properties.summary.override.display'),
+  });
+
+const overrideDisplaySelectType = (type: OverrideDisplay) =>
+  screen.getByRole('option', {
+    name: textMock(`ux_editor.component_properties.summary.override.display.${type}`),
+  });
+
+const overrideDisplayTypeSelector = () =>
   screen.getByRole('combobox', {
     name: textMock('ux_editor.component_properties.summary.override.display_type'),
   });
 
-const overrideSelectType = (type: string) =>
+const overrideDisplayType = (type: OverrideDisplayType) =>
   screen.getByRole('option', {
     name: textMock(`ux_editor.component_properties.summary.override.display_type.${type}`),
   });
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx
index e2154afc931..94c6a96e925 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   StudioAlert,
   StudioButton,
@@ -7,16 +6,19 @@ import {
   StudioDivider,
   StudioProperty,
 } from '@studio/components';
+import { CheckmarkIcon } from '@studio/icons';
 import type { Summary2OverrideConfig } from 'app-shared/types/ComponentSpecificConfig';
-import classes from './Summary2OverrideEntry.module.css';
+import { ComponentType } from 'app-shared/types/ComponentType';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Summary2ComponentReferenceSelector } from '../Summary2ComponentReferenceSelector';
-import { Summary2OverrideDisplayType } from './OverrideFields/Summary2OverrideDisplayType';
+import type { TargetComponentProps } from '../Summary2Target/targetUtils';
+import { Summary2OverrideCompactSwitch } from './OverrideFields/CompactViewSwitch';
 import { EmptyTextField } from './OverrideFields/EmptyTextField';
-import { CompactViewSwitch } from './OverrideFields/CompactViewSwitch';
-import { CheckmarkIcon } from '@studio/icons';
-import { type TargetComponentProps } from '../Summary2Target/targetUtils';
 import { OverrideShowComponentSwitch } from './OverrideFields/OverrideShowComponentSwitch';
+import { Summary2OverrideDisplaySelect } from './OverrideFields/Summary2OverrideDisplaySelect';
+import { Summary2OverrideDisplayType } from './OverrideFields/Summary2OverrideDisplayType';
+import classes from './Summary2OverrideEntry.module.css';
 
 type Summary2OverrideEntryProps = {
   index: number;
@@ -56,6 +58,25 @@ export const Summary2OverrideEntry = ({
     );
   }
 
+  const defaultOverrideConfig = (
+    componentType: ComponentType,
+  ): Omit<Summary2OverrideConfig, 'componentId'> => {
+    switch (componentType) {
+      case ComponentType.RepeatingGroup:
+        return { display: 'full' };
+      case ComponentType.Subform:
+        return { display: 'table' };
+      default:
+        return {};
+    }
+  };
+
+  const onChangeTarget = (value: string) => {
+    const componentType = componentOptions.find((comp) => comp.id === value)?.type;
+    const defaults = defaultOverrideConfig(componentType);
+    onChange({ componentId: value, ...defaults });
+  };
+
   return (
     <StudioCard className={classes.card}>
       <StudioCard.Content className={classes.content}>
@@ -63,7 +84,7 @@ export const Summary2OverrideEntry = ({
           label={t('ux_editor.component_properties.summary.override.choose_component')}
           value={override.componentId}
           options={componentOptions}
-          onValueChange={(value) => onChange({ componentId: value })}
+          onValueChange={(value) => onChangeTarget(value)}
         ></Summary2ComponentReferenceSelector>
 
         <OverrideShowComponentSwitch onChange={onChange} override={override} />
@@ -74,11 +95,10 @@ export const Summary2OverrideEntry = ({
         ) : (
           <>
             <StudioDivider className={classes.divider} />
-            <CompactViewSwitch onChange={onChange} override={override} />
-            <Summary2OverrideDisplayType
+            <Summary2OverrideComponentSpecificConfig
+              componentOptions={componentOptions}
               onChange={onChange}
               override={override}
-              componentOptions={componentOptions}
             />
             <EmptyTextField onChange={onChange} override={override} />
           </>
@@ -99,3 +119,34 @@ export const Summary2OverrideEntry = ({
     </StudioCard>
   );
 };
+
+type Summary2OverrideComponentSpecificConfigProps = {
+  componentOptions: TargetComponentProps[];
+  onChange: (override: Summary2OverrideConfig) => void;
+  override: Summary2OverrideConfig;
+};
+
+const Summary2OverrideComponentSpecificConfig = ({
+  onChange,
+  override,
+  componentOptions,
+}: Summary2OverrideComponentSpecificConfigProps) => {
+  const selectedComponent = componentOptions?.find((comp) => comp.id === override.componentId);
+
+  if (!selectedComponent) {
+    return null;
+  }
+
+  switch (selectedComponent.type) {
+    case ComponentType.RepeatingGroup:
+    case ComponentType.Subform:
+      return <Summary2OverrideDisplaySelect onChange={onChange} override={override} />;
+    case ComponentType.Checkboxes:
+    case ComponentType.MultipleSelect:
+      return <Summary2OverrideDisplayType onChange={onChange} override={override} />;
+    case ComponentType.Group:
+      return <Summary2OverrideCompactSwitch onChange={onChange} override={override} />;
+    default:
+      return null;
+  }
+};
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.test.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.test.tsx
index a89c6da9767..d7952d8ce8f 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.test.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.test.tsx
@@ -1,12 +1,12 @@
 import { mapSelectedTypeToConfig } from './utils';
 import {
   type Summary2OverrideConfig,
-  type SummaryCustomTargetType,
+  type OverrideDisplayType,
 } from 'app-shared/types/ComponentSpecificConfig';
 
 //Test data
-const stringSelectedType: SummaryCustomTargetType = 'string';
-const listSelectedType: SummaryCustomTargetType = 'list';
+const stringSelectedType: OverrideDisplayType = 'string';
+const listSelectedType: OverrideDisplayType = 'list';
 const componentId = 'component123';
 
 describe('mapSelectedTypeToConfig', () => {
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.ts b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.ts
index e747c049127..d9083377990 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.ts
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/utils.ts
@@ -1,11 +1,11 @@
 import {
   type Summary2OverrideConfig,
-  type SummaryCustomTargetType,
+  type OverrideDisplayType,
 } from 'app-shared/types/ComponentSpecificConfig';
 
 type SelectedTypeProps = {
   componentId: string;
-  displayType: SummaryCustomTargetType;
+  displayType: OverrideDisplayType;
 };
 
 export const mapSelectedTypeToConfig = ({
diff --git a/frontend/packages/ux-editor/src/testing/layoutMock.ts b/frontend/packages/ux-editor/src/testing/layoutMock.ts
index c9ddd012395..e6cad066cb0 100644
--- a/frontend/packages/ux-editor/src/testing/layoutMock.ts
+++ b/frontend/packages/ux-editor/src/testing/layoutMock.ts
@@ -63,6 +63,15 @@ export const componentWithMultipleSelectMock: FormComponent = {
   propertyPath: 'definitions/multipleSelectComponent',
 };
 
+export const subformComponentMock: FormComponent = {
+  id: 'SubformComponent',
+  type: ComponentType.Subform,
+  dataModelBindings: { simpleBinding: 'some-path' },
+  itemType: 'COMPONENT',
+  pageIndex: null,
+  propertyPath: 'definitions/subformComponent',
+};
+
 export const container1IdMock = 'Container-1';
 export const container2IdMock = 'Container-2';
 export const customRootPropertiesMock: KeyValuePairs = {

From 2a213da8c297d6c77f0e9a5358e1fc7e044abee9 Mon Sep 17 00:00:00 2001
From: Jonas Dyrlie <jonas.dyrlie@gmail.com>
Date: Thu, 13 Feb 2025 10:42:42 +0100
Subject: [PATCH 2/3] refactor(summary2): move displayType default to shared
 default logic

Moves default value for displayType from the nativeselect component to
the shared default config when selecting components to override.

commit-id:3b4f4086

Co-authored-by: Lars <74791975+lassopicasso@users.noreply.github.com>
---
 .../OverrideFields/Summary2OverrideDisplayType.tsx  |  2 +-
 .../Summary2/Override/Summary2Override.test.tsx     | 13 +++++++++----
 .../Summary2/Override/Summary2OverrideEntry.tsx     |  3 +++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx
index d59c738911e..3037e9b6bc3 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/OverrideFields/Summary2OverrideDisplayType.tsx
@@ -34,7 +34,7 @@ export const Summary2OverrideDisplayType = ({
       <StudioNativeSelect
         size='sm'
         label={t('ux_editor.component_properties.summary.override.display_type')}
-        value={displayType || 'list'}
+        value={displayType}
         onChange={(e) => handleCustomTypeChange(e.target.value as OverrideDisplayType)}
       >
         {customConfigTypes.map((type: CustomConfigType) => (
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
index 8714bd493df..29eb93ad685 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
@@ -26,6 +26,7 @@ import type {
 const checkBoxId = componentWithOptionsMock.id;
 const multipleSelectId = componentWithMultipleSelectMock.id;
 const subformComponentId = subformComponentMock.id;
+const repeatingGroupComponentId = container2IdMock;
 const layoutMockWithMultipleSelect = {
   ...layoutMock,
   components: {
@@ -191,25 +192,29 @@ describe('Summary2Override', () => {
 
   it('should render component specific overrides', async () => {
     const user = userEvent.setup();
-    render({ overrides: [{ componentId: container2IdMock }] });
+    render({ overrides: [{ componentId: repeatingGroupComponentId }] });
 
     await user.click(overrideCollapsedButton(1));
     await user.selectOptions(overrideDisplaySelector(), overrideDisplaySelectType('table'));
 
     expect(defaultProps.onChange).toHaveBeenCalledWith(
-      expect.arrayContaining([{ componentId: container2IdMock, display: 'table' }]),
+      expect.arrayContaining([{ componentId: repeatingGroupComponentId, display: 'table' }]),
     );
   });
 
   it.each([
     {
-      componentId: container2IdMock,
-      defaultProps: { componentId: container2IdMock, display: 'full' },
+      componentId: repeatingGroupComponentId,
+      defaultProps: { componentId: repeatingGroupComponentId, display: 'full' },
     },
     {
       componentId: subformComponentId,
       defaultProps: { componentId: subformComponentId, display: 'table' },
     },
+    {
+      componentId: multipleSelectId,
+      defaultProps: { componentId: multipleSelectId, displayType: 'list' },
+    },
   ])('should set default props for components', async (args) => {
     const user = userEvent.setup();
     render({ overrides: [{ componentId: component1IdMock }] });
diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx
index 94c6a96e925..76a0925d20d 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.tsx
@@ -66,6 +66,9 @@ export const Summary2OverrideEntry = ({
         return { display: 'full' };
       case ComponentType.Subform:
         return { display: 'table' };
+      case ComponentType.Checkboxes:
+      case ComponentType.MultipleSelect:
+        return { displayType: 'list' };
       default:
         return {};
     }

From a357afd26a97703d4d06aa8d99f56edc650fd9d3 Mon Sep 17 00:00:00 2001
From: Jonas Dyrlie <jonas.dyrlie@gmail.com>
Date: Fri, 14 Feb 2025 14:47:42 +0100
Subject: [PATCH 3/3] Update Summary2Override.test.tsx

fix merge accident
---
 .../Summary2/Override/Summary2Override.test.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
index 5e92bedf7d7..29eb93ad685 100644
--- a/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
+++ b/frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx
@@ -198,7 +198,7 @@ describe('Summary2Override', () => {
     await user.selectOptions(overrideDisplaySelector(), overrideDisplaySelectType('table'));
 
     expect(defaultProps.onChange).toHaveBeenCalledWith(
-      expect.arrayContaining([{ componentId: repeatingGroupComponentId, display: 'full' }]),
+      expect.arrayContaining([{ componentId: repeatingGroupComponentId, display: 'table' }]),
     );
   });