feat: 13526 support component specific overrides in summary2

frontend/language/src/nb.json

@@ -1244,6 +1244,11 @@
   "ux_editor.component_properties.optionsId": "Kodeliste",
   "ux_editor.component_properties.overrides": "Overstyringer",
   "ux_editor.component_properties.overrides_description": "Overstyringer per komponent for oppsummeringen",
+  "ux_editor.component_properties.overrides_is_compact": "Kompakt visning",
+  "ux_editor.component_properties.overrides_list": "Liste",
+  "ux_editor.component_properties.overrides_not_set": "Ikke satt",
+  "ux_editor.component_properties.overrides_string": "Tekst",
+  "ux_editor.component_properties.overrides_type": "Vis type",
   "ux_editor.component_properties.pageBreak": "PDF-innstillinger (pageBreak)",
   "ux_editor.component_properties.pageRef": "Navnet til siden det gjelder (pageRef)",
   "ux_editor.component_properties.pagination": "Paginering",

frontend/packages/shared/src/types/ComponentSpecificConfig.ts

@@ -106,6 +106,8 @@ type SummarizableComponentProps = {
 
 export type SummaryTargetType = 'page' | 'layoutSet' | 'component';
 
+export type SummaryCustomTargetType = 'list' | 'string' | 'notSet';
+
 type LabeledComponentProps = {
   labelSettings?: LabelSettings;
 };
@@ -139,6 +141,8 @@ export type Summary2OverrideConfig = {
   forceShow?: boolean;
   emptyFieldText?: string;
   hideEmptyFields?: boolean;
+  isCompact?: boolean;
+  displayType?: SummaryCustomTargetType;
 };
 
 export type Summary2TargetConfig = {

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.test.tsx

@@ -5,7 +5,12 @@ import { Summary2Override, type Summary2OverrideProps } from './Summary2Override
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { app, org } from '@studio/testing/testids';
 import userEvent from '@testing-library/user-event';
-import { component1IdMock, layout1NameMock, layoutMock } from '../../../../../testing/layoutMock';
+import {
+  component1IdMock,
+  container1IdMock,
+  layout1NameMock,
+  layoutMock,
+} from '../../../../../testing/layoutMock';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { layoutSet1NameMock } from '../../../../../testing/layoutSetsMock';
 import { renderWithProviders } from '../../../../../testing/mocks';
@@ -32,11 +37,41 @@ describe('Summary2Override', () => {
     expect(defaultProps.onChange).toHaveBeenCalledWith([]);
   });
 
+  it('should be able to show "vis type" comobox when componenetId is checkbox', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'Checkboxes' }] });
+    await user.click(addNewOverrideButton());
+    expect(
+      screen.getByRole('combobox', {
+        name: textMock('ux_editor.component_properties.overrides_type'),
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('should be able to show "vis type" comobox when componenetId is multipleSelect', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'MultipleSelect' }] });
+    await user.click(addNewOverrideButton());
+    expect(
+      screen.getByRole('combobox', {
+        name: textMock('ux_editor.component_properties.overrides_type'),
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('should not show "vis type" comobox when componenetId is not checkbox or multipleSelect', async () => {
+    render({ overrides: [{ componentId: '1' }] });
+    await userEvent.click(addNewOverrideButton());
+    expect(
+      screen.queryByRole('combobox', {
+        name: textMock('ux_editor.component_properties.overrides_type'),
+      }),
+    ).not.toBeInTheDocument();
+  });
+
   it('should be able to change override componentId', async () => {
     const user = userEvent.setup();
-    render({
-      overrides: [{ componentId: '1' }],
-    });
+    render({ overrides: [{ componentId: '1' }] });
     const componentId = component1IdMock;
     await user.click(overrideComponentSelect());
     await user.click(
@@ -51,9 +86,7 @@ describe('Summary2Override', () => {
 
   it('should be able to change override hidden', async () => {
     const user = userEvent.setup();
-    render({
-      overrides: [{ componentId: '1' }],
-    });
+    render({ overrides: [{ componentId: '1' }] });
     await user.click(
       screen.getByRole('checkbox', {
         name: textMock('ux_editor.component_properties.summary.override.hidden'),
@@ -68,9 +101,7 @@ describe('Summary2Override', () => {
 
   it('should be able to change override forceShow', async () => {
     const user = userEvent.setup();
-    render({
-      overrides: [{ componentId: '1' }],
-    });
+    render({ overrides: [{ componentId: '1' }] });
     await user.click(
       screen.getByRole('checkbox', {
         name: textMock('ux_editor.component_properties.summary.override.force_show'),
@@ -85,9 +116,7 @@ describe('Summary2Override', () => {
 
   it('should be able to change override hideEmptyFields', async () => {
     const user = userEvent.setup();
-    render({
-      overrides: [{ componentId: '1' }],
-    });
+    render({ overrides: [{ componentId: '1' }] });
     await user.click(
       screen.getByRole('checkbox', {
         name: textMock('ux_editor.component_properties.summary.override.hide_empty_fields'),
@@ -100,6 +129,186 @@ describe('Summary2Override', () => {
     );
   });
 
+  it('"isCompact" checkbox should not be checked when isCompact is false', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: container1IdMock, isCompact: false }] });
+    const compactCheckbox = screen.getByRole('checkbox', {
+      name: textMock('ux_editor.component_properties.overrides_is_compact'),
+    });
+    expect(compactCheckbox).toBeInTheDocument();
+    expect(compactCheckbox).not.toBeChecked();
+    await user.click(compactCheckbox);
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: container1IdMock, isCompact: true }]),
+      ),
+    );
+  });
+
+  it('"isCompact" checkbox Should be checked when isCompact is true', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: container1IdMock, isCompact: true }] });
+    const compactCheckbox = screen.getByRole('checkbox', {
+      name: textMock('ux_editor.component_properties.overrides_is_compact'),
+    });
+    expect(compactCheckbox).toBeInTheDocument();
+    expect(compactCheckbox).toBeChecked();
+    await user.click(compactCheckbox);
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: container1IdMock, isCompact: false }]),
+      ),
+    );
+  });
+
+  it('should render the list of custom types', async () => {
+    render({ overrides: [{ componentId: 'MultipleSelect' }] });
+    await userEvent.click(addNewOverrideButton());
+    expect(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_list'),
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_string'),
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_not_set'),
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('should be able to change override displayType when choosing list and componentId is MultipleSelect', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'MultipleSelect', displayType: 'list' }] });
+    await user.click(addNewOverrideButton());
+    await user.click(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_list'),
+      }),
+    );
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'MultipleSelect', displayType: 'list' }]),
+      ),
+    );
+  });
+
+  it('should be able to change override displayType when choosing string and componentId is MultipleSelect', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'MultipleSelect', displayType: 'string' }] });
+    await user.click(addNewOverrideButton());
+    await user.click(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_string'),
+      }),
+    );
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'MultipleSelect', displayType: 'string' }]),
+      ),
+    );
+  });
+
+  it('should be able to change override displayType when choosing notSet and componentId is MultipleSelect', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'MultipleSelect', displayType: 'notSet' }] });
+    await user.click(addNewOverrideButton());
+    await user.click(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_not_set'),
+      }),
+    );
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'MultipleSelect', displayType: 'notSet' }]),
+      ),
+    );
+  });
+
+  it('should be able to change override displayType when choosing list and componentId is Checkboxes', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'Checkboxes', displayType: 'list' }] });
+    await user.click(addNewOverrideButton());
+    await user.click(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_list'),
+      }),
+    );
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'list' }]),
+      ),
+    );
+  });
+
+  it('should be able to change override displayType when choosing string and componentId is Checkboxes', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'Checkboxes', displayType: 'string' }] });
+    await user.click(addNewOverrideButton());
+    await user.click(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_string'),
+      }),
+    );
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'string' }]),
+      ),
+    );
+  });
+
+  it('should be able to change override displayType when choosing notSet and componentId is Checkboxes', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'Checkboxes', displayType: 'notSet' }] });
+    await user.click(addNewOverrideButton());
+    await user.click(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_not_set'),
+      }),
+    );
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'notSet' }]),
+      ),
+    );
+  });
+
+  it('should displayType have a new option value when user select a new option.', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'Checkboxes', displayType: 'string' }] });
+    await user.click(addNewOverrideButton());
+    await user.click(
+      screen.getByRole('option', {
+        name: textMock('ux_editor.component_properties.overrides_string'),
+      }),
+    );
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'string' }]),
+      ),
+    );
+  });
+
+  it('should handle custom type change', async () => {
+    const user = userEvent.setup();
+    render({ overrides: [{ componentId: 'Checkboxes' }] });
+    await user.click(addNewOverrideButton());
+
+    const select = screen.getByRole('combobox', {
+      name: textMock('ux_editor.component_properties.overrides_type'),
+    });
+    await user.selectOptions(select, 'list');
+    await waitFor(() =>
+      expect(defaultProps.onChange).toHaveBeenCalledWith(
+        expect.arrayContaining([{ componentId: 'Checkboxes', displayType: 'list' }]),
+      ),
+    );
+  });
+
   it('should be able to change override emptyFieldText', async () => {
     const user = userEvent.setup();
     render({

frontend/packages/ux-editor/src/components/config/componentSpecificContent/Summary2/Override/Summary2OverrideDisplayType.tsx

@@ -0,0 +1,49 @@
+import React, { type ReactElement } from 'react';
+import { StudioCard, StudioNativeSelect } from '@studio/components';
+import type {
+  Summary2OverrideConfig,
+  SummaryCustomTargetType,
+} from 'app-shared/types/ComponentSpecificConfig';
+import { type CustomConfigType, useCustomConfigType } from './hook/useCustomConfigType';
+import { useTranslation } from 'react-i18next';
+import { mapSelectedTypeToConfig } from './utils';
+
+export type Summary2OverrideDisplayTypeProps = {
+  override: Summary2OverrideConfig;
+  onChange: (override: Summary2OverrideConfig) => void;
+};
+
+export const Summary2OverrideDisplayType = ({
+  override,
+  onChange,
+}: Summary2OverrideDisplayTypeProps) => {
+  const { t } = useTranslation();
+
+  const handleCustomTypeChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+    const newSelectedType = event.target.value as SummaryCustomTargetType;
+    const summary2OverrideConfig = mapSelectedTypeToConfig(newSelectedType, override.componentId);
+    onChange(summary2OverrideConfig);
+  };
+
+  return (
+    <StudioCard.Content>
+      <StudioNativeSelect
+        size='sm'
+        label={t('ux_editor.component_properties.overrides_type')}
+        onChange={handleCustomTypeChange}
+        value={override.displayType || 'string'}
+      >
+        <CustomConfigTypeOptions />
+      </StudioNativeSelect>
+    </StudioCard.Content>
+  );
+};
+
+const CustomConfigTypeOptions = (): ReactElement[] => {
+  const customConfigTypes: CustomConfigType[] = useCustomConfigType();
+  return customConfigTypes.map((type: CustomConfigType) => (
+    <option key={type.value} value={type.value}>
+      {type.label}
+    </option>
+  ));
+};