feat: Subform table hide component selector when column has already one copied

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

@@ -12,16 +12,13 @@ import { QueryKey } from 'app-shared/types/QueryKey';
 import { app, org } from '@studio/testing/testids';
 import { subformLayoutMock } from '../../../../testing/subformLayoutMock';
 
-const headerContentMock: string = 'Header';
-const cellContentQueryMock: string = 'Query';
-const cellContentDefaultMock: string = 'Default';
 const columnNumberMock: number = 1;
 
 const mockTableColumn: TableColumn = {
-  headerContent: headerContentMock,
+  headerContent: '',
   cellContent: {
-    query: cellContentQueryMock,
-    default: cellContentDefaultMock,
+    query: '',
+    default: '',
   },
 };
 

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

@@ -4,9 +4,63 @@ import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
 import { subformLayoutMock } from '../../../../../testing/subformLayoutMock';
 import {
+  EditColumnElement,
   EditColumnElementComponentSelect,
+  type EditColumnElementProps,
   type EditColumnElementComponentSelectProps,
 } from './EditColumnElement';
+import { renderWithProviders } from '@altinn/ux-editor/testing/mocks';
+import { queryClientMock } from 'app-shared/mocks/queryClientMock';
+import { QueryKey } from 'app-shared/types/QueryKey';
+import { app, org } from '@studio/testing/testids';
+
+const defaultEditColumnProps: EditColumnElementProps = {
+  sourceColumn: {
+    cellContent: {
+      query: '',
+    },
+    headerContent: '',
+  },
+  columnNumber: 1,
+  onDeleteColumn: jest.fn(),
+  onEdit: jest.fn(),
+  subformLayout: 'subform_layout_id',
+};
+
+const textResources = {
+  nb: [{ id: 'subform_table_column_title_123', value: 'title' }],
+};
+
+describe('EditColumnElement.tsx', () => {
+  it('should render component selector when component not selected', async () => {
+    renderEditColumnElement();
+    const componentSelector = screen.getByRole('combobox', {
+      name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+    });
+    expect(componentSelector).toBeInTheDocument();
+  });
+
+  it('should not render component selector when component already selected and saved', async () => {
+    renderEditColumnElement({
+      sourceColumn: {
+        cellContent: {
+          query: 'test',
+        },
+        headerContent: 'subform_table_column_title_3152',
+      },
+    });
+
+    const componentSelector = screen.queryByRole('combobox', {
+      name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+    });
+    expect(componentSelector).not.toBeInTheDocument();
+  });
+});
+
+const renderEditColumnElement = (props: Partial<EditColumnElementProps> = {}) => {
+  queryClientMock.setQueryData([QueryKey.TextResources, org, app], textResources);
+  return renderWithProviders(<EditColumnElement {...defaultEditColumnProps} {...props} />);
+};
 
 const defaultComponents = [
   {
@@ -28,53 +82,22 @@ describe('EditColumnElementComponentSelect', () => {
   });
 
   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();
+    await selectComponentSelector();
+    expect(screen.getByText(noComponentsMessage)).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();
+    await selectComponentSelector();
+    expect(screen.queryByRole('option', { name: noComponentsMessage })).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);
+    await selectComponentSelector();
     expect(
       screen.getByRole('option', {
         name: new RegExp(`${subformLayoutMock.component1Id}`),
@@ -88,6 +111,19 @@ describe('EditColumnElementComponentSelect', () => {
   });
 });
 
+const selectComponentSelector = async () => {
+  const user = userEvent.setup();
+  const componentSelector = screen.getByRole('combobox', {
+    name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+  });
+  expect(componentSelector).toBeInTheDocument();
+  await user.click(componentSelector);
+};
+
+const noComponentsMessage = textMock(
+  'ux_editor.properties_panel.subform_table_columns.no_components_available_message',
+);
+
 const renderEditColumnElementComponentSelect = (
   props: Partial<EditColumnElementComponentSelectProps> = {},
 ) => {

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

@@ -26,7 +26,7 @@ import {
 import { convertDataBindingToInternalFormat } from '../../../../../utils/dataModelUtils';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
 
-export type ColumnElementProps = {
+export type EditColumnElementProps = {
   sourceColumn: TableColumn;
   columnNumber: number;
   onDeleteColumn: () => void;
@@ -40,7 +40,7 @@ export const EditColumnElement = ({
   onDeleteColumn,
   onEdit,
   subformLayout,
-}: ColumnElementProps): ReactElement => {
+}: EditColumnElementProps): ReactElement => {
   const { t } = useTranslation();
   const { org, app } = useStudioEnvironmentParams();
   const { data: textResources } = useTextResourcesQuery(org, app);
@@ -88,15 +88,17 @@ export const EditColumnElement = ({
   const subformDefaultDataModel = getDefaultDataModel(layoutSets, subformLayout);
   const availableComponents = getComponentsForSubformTable(formLayouts, subformDefaultDataModel);
   const isSaveButtonDisabled = !tableColumn.headerContent || !title?.trim();
-
+  const isComponentCopySaved = Boolean(sourceColumn.headerContent);
   return (
     <StudioCard className={classes.wrapper}>
       <EditColumnElementHeader columnNumber={columnNumber} />
       <StudioCard.Content className={classes.content}>
-        <EditColumnElementComponentSelect
-          components={availableComponents}
-          onSelectComponent={selectComponent}
-        />
+        {!isComponentCopySaved && (
+          <EditColumnElementComponentSelect
+            components={availableComponents}
+            onSelectComponent={selectComponent}
+          />
+        )}
         {tableColumn.headerContent && (
           <EditColumnElementContent
             cellContent={tableColumn.cellContent.query}

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

@@ -81,10 +81,10 @@ describe('EditSubformTableColumns', () => {
     });
     await user.click(editButton);
 
-    await user.click(getComponentSelector());
-    await user.click(
-      screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component1Id}`) }),
+    const columnTitleElement = screen.getByText(
+      textMock('ux_editor.properties_panel.subform_table_columns.column_title_unedit'),
     );
+    await user.type(columnTitleElement, 'New Title');
 
     const saveButton = await screen.findByRole('button', { name: textMock('general.save') });
     await user.click(saveButton);