fix: 14472 should show the value of selector in properties config

frontend/language/src/nb.json

@@ -1446,6 +1446,7 @@
   "ux_editor.component_properties.select_all_attachments": "Alle vedlegg",
   "ux_editor.component_properties.select_attachments": "Velg vedlegg",
   "ux_editor.component_properties.select_pdf": "Inkluder skjemagenerert pdf",
+  "ux_editor.component_properties.selected_validations": "Valideringstyper",
   "ux_editor.component_properties.sender": "Den som har sendt inn skjemaet",
   "ux_editor.component_properties.severity": "Alvorlighetsgrad",
   "ux_editor.component_properties.showAddButton": "Vis Legg til-knapp",

frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css

@@ -14,6 +14,7 @@
 
 .gridButton {
   padding: 0;
+  margin-bottom: var(--fds-spacing-0);
 }
 
 .gridHeader {

frontend/packages/ux-editor/src/components/config/FormComponentConfig.test.tsx

@@ -6,7 +6,7 @@ import { componentMocks } from '../../testing/componentMocks';
 import InputSchema from '../../testing/schemas/json/component/Input.schema.v1.json';
 import DatepickerSchema from '../../testing/schemas/json/component/Datepicker.schema.v1.json';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
-import { screen } from '@testing-library/react';
+import { screen, waitFor } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
 import userEvent from '@testing-library/user-event';
@@ -160,7 +160,7 @@ describe('FormComponentConfig', () => {
     expect(screen.queryByText('unsupportedProperty')).not.toBeInTheDocument();
   });
 
-  it('should render CollapsiblePropertyEditor for the "sortOrder" property', async () => {
+  it('should render property text for the "sortOrder" property', async () => {
     const user = userEvent.setup();
     render({
       props: {
@@ -187,7 +187,7 @@ describe('FormComponentConfig', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render CollapsiblePropertyEditor for the "showValidations" property and EditStringValue for other properties', () => {
+  it('should render property text for the "showValidations" property', () => {
     render({
       props: {
         schema: {
@@ -217,7 +217,7 @@ describe('FormComponentConfig', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render CollapsiblePropertyEditor for "preselectedOptionIndex" and EditNumberValue for other properties', () => {
+  it('should render property text for "preselectedOptionIndex" and EditNumberValue for other properties', () => {
     render({
       props: {
         schema: {
@@ -281,6 +281,93 @@ describe('FormComponentConfig', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('should call handleComponentUpdate and setSelectedValue when array property is updated', async () => {
+    const user = userEvent.setup();
+    const handleComponentUpdateMock = jest.fn();
+    const propertyKey = 'supportedArrayProperty';
+    renderWithProviders(
+      <FormComponentConfig
+        schema={{
+          properties: {
+            [propertyKey]: {
+              type: 'array',
+              items: {
+                type: 'string',
+                enum: ['option1', 'option2'],
+              },
+            },
+          },
+        }}
+        editFormId=''
+        component={componentMocks.Input}
+        handleComponentUpdate={handleComponentUpdateMock}
+        hideUnsupported={false}
+      />,
+    );
+    const arrayPropertyButton = screen.getByRole('button', {
+      name: textMock(`ux_editor.component_properties.${propertyKey}`),
+    });
+    await user.click(arrayPropertyButton);
+
+    const combobox = screen.getByRole('combobox', {
+      name: textMock(`ux_editor.component_properties.${propertyKey}`),
+    });
+    await user.click(combobox);
+
+    const option1 = screen.getByRole('option', {
+      name: textMock('ux_editor.component_properties.enum_option1'),
+    });
+    await user.click(option1);
+
+    await waitFor(() => {
+      expect(handleComponentUpdateMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          [propertyKey]: ['option1'],
+        }),
+      );
+    });
+
+    const selectedValueDisplay = screen.getByRole('option', {
+      name: textMock('ux_editor.component_properties.enum_option1'),
+    });
+    expect(selectedValueDisplay).toBeInTheDocument();
+  });
+
+  it('should return undefined when an error occurs in memoizedSelectedStringPropertiesDisplay', async () => {
+    const propertyKey = 'invalidPropertyKey';
+    const handleComponentUpdateMock = jest.fn();
+    const user = userEvent.setup();
+    render({
+      props: {
+        schema: {
+          properties: {
+            [propertyKey]: {
+              type: 'array',
+              items: {
+                type: 'string',
+                enum: ['option1', 'option2'],
+              },
+            },
+          },
+        },
+        handleComponentUpdate: handleComponentUpdateMock,
+      },
+    });
+    const arrayPropertyButton = screen.getByRole('button', {
+      name: textMock(`ux_editor.component_properties.${propertyKey}`),
+    });
+    await user.click(arrayPropertyButton);
+    const combobox = screen.getByRole('combobox', {
+      name: textMock(`ux_editor.component_properties.${propertyKey}`),
+    });
+    await user.click(combobox);
+    const option1 = screen.getByRole('option', {
+      name: textMock('ux_editor.component_properties.enum_option1'),
+    });
+    await user.click(option1);
+    expect(handleComponentUpdateMock).not.toHaveBeenCalled();
+  });
+
   it('should show description text for objects if key is defined', () => {
     render({
       props: {
@@ -442,6 +529,40 @@ describe('FormComponentConfig', () => {
     );
   });
 
+  it('should render array properties with enum values correctly', async () => {
+    const user = userEvent.setup();
+    const propertyKey = 'supportedArrayProperty';
+    const enumValues = ['option1', 'option2'];
+    render({
+      props: {
+        schema: {
+          properties: {
+            [propertyKey]: {
+              type: 'array',
+              items: {
+                type: 'string',
+                enum: enumValues,
+              },
+            },
+          },
+        },
+        component: {
+          ...componentMocks.Input,
+          [propertyKey]: enumValues,
+        },
+      },
+    });
+    const arrayPropertyButton = screen.getByRole('button', {
+      name: textMock(`ux_editor.component_properties.${propertyKey}`),
+    });
+    await user.click(arrayPropertyButton);
+    for (const dataType of enumValues) {
+      expect(
+        screen.getByText(textMock(`ux_editor.component_properties.enum_${dataType}`)),
+      ).toBeInTheDocument();
+    }
+  });
+
   it('should call handleComponentUpdate with updated component when hasCustomFileEndings is true', async () => {
     const handleComponentUpdateMock = jest.fn();
     render({