feat: 13956 inform user when a linked component in subform table is i…

…nvalid (#13987)

Co-authored-by: Jamal Alabdullah <jamalalabdullah@Jamals-MacBook-Pro.local>

frontend/language/src/nb.json

@@ -1737,10 +1737,12 @@
   "ux_editor.properties_panel.subform_table_columns.cell_content_default_label": "Default",
   "ux_editor.properties_panel.subform_table_columns.cell_content_query_label": "Query",
   "ux_editor.properties_panel.subform_table_columns.choose_component": "Velg komponenten fra underskjemaet som skal vises her",
+  "ux_editor.properties_panel.subform_table_columns.choose_component_description": "Listen viser bare de komponentene der det er lagt til ledetekster",
   "ux_editor.properties_panel.subform_table_columns.column_header": "Kolonne {{columnNumber}}",
   "ux_editor.properties_panel.subform_table_columns.delete_column": "Slett kolonne {{columnNumber}}",
   "ux_editor.properties_panel.subform_table_columns.header_content_label": "Header Content",
   "ux_editor.properties_panel.subform_table_columns.heading": "Valg for tabell",
+  "ux_editor.properties_panel.subform_table_columns.no_components_available_message": "Du har ingen komponenter med ledetekst og knyttet til datamodell",
   "ux_editor.properties_panel.texts.loading": "Laster inn tekster",
   "ux_editor.properties_panel.texts.no_properties": "Det er ingen tekster å konfigurere for denne komponenten.",
   "ux_editor.properties_panel.texts.sub_title_images": "Valg for bilde",

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx

@@ -76,6 +76,22 @@ describe('ColumnElement', () => {
     });
   });
 
+  it('should render combobox with description', async () => {
+    const user = userEvent.setup();
+    renderColumnElement();
+
+    const editButton = screen.getByRole('button', {
+      name: /ux_editor.properties_panel.subform_table_columns.column_header/,
+    });
+    await user.click(editButton);
+
+    const componentSelect = screen.getByRole('combobox', {
+      name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+    });
+
+    expect(componentSelect).toBeInTheDocument();
+  });
+
   it('should call onDeleteColumn when delete button is clicked', async () => {
     const onDeleteColumnMock = jest.fn();
 

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import userEvent from '@testing-library/user-event';
+import { subformLayoutMock } from '../../../../../testing/subformLayoutMock';
+import {
+  EditColumnElementComponentSelect,
+  type EditColumnElementComponentSelectProps,
+} from './EditColumnElement';
+
+const defaultComponents = [
+  {
+    id: subformLayoutMock.component1Id,
+    type: subformLayoutMock.component1.type,
+    itemType: subformLayoutMock.component1.itemType,
+    dataModelBindings: subformLayoutMock.component1.dataModelBindings,
+  },
+  {
+    id: subformLayoutMock.component2Id,
+    type: subformLayoutMock.component2.type,
+    itemType: subformLayoutMock.component2.itemType,
+  },
+];
+
+describe('EditColumnElementComponentSelect', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render combobox with no components message when no components are available', async () => {
+    const user = userEvent.setup();
+    renderEditColumnElementComponentSelect({
+      components: [],
+    });
+
+    const componentSelect = screen.getByRole('combobox', {
+      name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+    });
+
+    expect(componentSelect).toBeInTheDocument();
+    await user.click(componentSelect);
+    expect(
+      screen.getByText(
+        textMock(
+          'ux_editor.properties_panel.subform_table_columns.no_components_available_message',
+        ),
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should not render no components message when components are available', async () => {
+    const user = userEvent.setup();
+    renderEditColumnElementComponentSelect();
+    const componentSelect = screen.getByRole('combobox', {
+      name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+    });
+
+    expect(componentSelect).toBeInTheDocument();
+    await user.click(componentSelect);
+    expect(
+      screen.queryByRole('option', {
+        name: textMock(
+          'ux_editor.properties_panel.subform_table_columns.no_components_available_message',
+        ),
+      }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should render just components with labels', async () => {
+    const user = userEvent.setup();
+    renderEditColumnElementComponentSelect();
+    const componentSelect = screen.getByRole('combobox', {
+      name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+    });
+
+    expect(componentSelect).toBeInTheDocument();
+    await user.click(componentSelect);
+    expect(
+      screen.getByRole('option', {
+        name: new RegExp(`${subformLayoutMock.component1Id}`),
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('option', {
+        name: new RegExp(`${subformLayoutMock.component2Id}`),
+      }),
+    ).toBeInTheDocument();
+  });
+});
+
+const renderEditColumnElementComponentSelect = (
+  props: Partial<EditColumnElementComponentSelectProps> = {},
+) => {
+  return render(
+    <EditColumnElementComponentSelect
+      components={defaultComponents}
+      onSelectComponent={jest.fn()}
+      {...props}
+    />,
+  );
+};

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx

@@ -51,6 +51,10 @@ export const EditColumnElement = ({
       })
     : [];
 
+  const componentsWithLabelAndDataModel = components.filter(
+    (comp) => comp.textResourceBindings?.title && comp.dataModelBindings.simpleBinding,
+  );
+
   const selectComponent = (values: string[]) => {
     const selectedComponentId = values[0];
     const selectedComponent = components.find((comp) => comp.id === selectedComponentId);
@@ -68,7 +72,7 @@ export const EditColumnElement = ({
       <EditColumnElementHeader columnNumber={columnNumber} />
       <StudioCard.Content className={classes.content}>
         <EditColumnElementComponentSelect
-          components={components}
+          components={componentsWithLabelAndDataModel}
           onSelectComponent={selectComponent}
         />
         <StudioTextfield
@@ -112,27 +116,40 @@ const EditColumnElementHeader = ({ columnNumber }: EditColumnElementHeaderProps)
   );
 };
 
-type EditColumnElementComponentSelectProps = {
+export type EditColumnElementComponentSelectProps = {
   components: FormItem[];
   onSelectComponent: (values: string[]) => void;
 };
-const EditColumnElementComponentSelect = ({
+export const EditColumnElementComponentSelect = ({
   components,
   onSelectComponent,
 }: EditColumnElementComponentSelectProps) => {
   const { t } = useTranslation();
+
+  const subformComponentOptions =
+    components.length > 0 ? (
+      components.map((comp: FormItem) => (
+        <StudioCombobox.Option key={comp.id} value={comp.id} description={comp.type}>
+          {comp.id}
+        </StudioCombobox.Option>
+      ))
+    ) : (
+      <StudioCombobox.Empty key={'noComponentsWithLabel'}>
+        {t('ux_editor.properties_panel.subform_table_columns.no_components_available_message')}
+      </StudioCombobox.Empty>
+    );
+
   return (
     <StudioCombobox
       label={t('ux_editor.properties_panel.subform_table_columns.choose_component')}
+      description={t(
+        'ux_editor.properties_panel.subform_table_columns.choose_component_description',
+      )}
       size='sm'
       onValueChange={onSelectComponent}
       id='columncomponentselect'
     >
-      {components.map((comp: FormItem) => (
-        <StudioCombobox.Option key={comp.id} value={comp.id} description={comp.type}>
-          {comp.id}
-        </StudioCombobox.Option>
-      ))}
+      {subformComponentOptions}
     </StudioCombobox>
   );
 };