fix: tablecolumns saving/deleting a column affects other columns (#14561

)
Altinn · Feb 6, 2025 · cbb2bc2 · cbb2bc2
1 parent 3a5eb29
commit cbb2bc2
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 240 deletions.
diff --git a/...or/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx b/...or/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import { ColumnElement, type ColumnElementProps } from './ColumnElement';
 import { textMock } from '@studio/testing/mocks/i18nMock';
-import { renderWithProviders } from 'dashboard/testing/mocks';
+import { renderWithProviders } from '../../../../testing/mocks';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 import { queriesMock } from 'app-shared/mocks/queriesMock';
 import userEvent from '@testing-library/user-event';
-import { type TableColumn } from '../types/TableColumn';
+import type { TableColumn } from '../types/TableColumn';
 import { layoutSet3SubformNameMock } from '../../../../testing/layoutSetsMock';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { app, org } from '@studio/testing/testids';
@@ -30,21 +30,25 @@ const defaultProps: ColumnElementProps = {
   columnNumber: columnNumberMock,
   isInitialOpenForEdit: false,
   onDeleteColumn: jest.fn(),
-  onEdit: jest.fn(),
+  onChange: jest.fn(),
   subformLayout: layoutSet3SubformNameMock,
 };
 
 describe('ColumnElement', () => {
-  afterEach(() => {
+  beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should call onEdit with updated header content when click on save button', async () => {
-    const onEditMock = jest.fn();
+  it('should call onChange with component values when selecting component', async () => {
+    const onChangeMock = jest.fn();
 
     const user = userEvent.setup();
     renderColumnElement({
-      onEdit: onEditMock,
+      onChange: onChangeMock,
+      tableColumn: {
+        headerContent: subformLayoutMock.component4.textResourceBindings.title,
+        cellContent: { query: subformLayoutMock.component4.dataModelBindings.address },
+      },
     });
 
     const editButton = screen.getByRole('button', {
@@ -58,35 +62,18 @@ describe('ColumnElement', () => {
 
     await user.click(componentSelect);
     await user.click(
-      screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component3Id}`) }),
-    );
-
-    await screen.findByText(
-      textMock(
-        'ux_editor.properties_panel.subform_table_columns.column_multiple_data_model_bindings_label',
-      ),
-    );
-
-    await user.click(
-      await screen.findByText(
-        textMock('ux_editor.properties_panel.subform_table_columns.column_title_unedit'),
-      ),
-    );
-    await user.type(
-      screen.getByText(
-        textMock('ux_editor.properties_panel.subform_table_columns.column_title_edit'),
-      ),
-      'New Title',
+      screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component4Id}`) }),
     );
 
     const saveButton = await screen.findByRole('button', { name: textMock('general.save') });
     await user.click(saveButton);
 
-    expect(onEditMock).toHaveBeenCalledTimes(1);
-    expect(onEditMock).toHaveBeenCalledWith({
+    expect(onChangeMock).toHaveBeenCalledWith({
       ...mockTableColumn,
-      headerContent: expect.stringContaining('subform_table_column_title_'),
-      cellContent: { query: subformLayoutMock.component3.dataModelBindings.simpleBinding },
+      cellContent: {
+        query: subformLayoutMock.component4.dataModelBindings.address,
+      },
+      headerContent: subformLayoutMock.component4.textResourceBindings.title,
     });
   });
 
@@ -133,6 +120,7 @@ const renderColumnElement = (props: Partial<ColumnElementProps> = {}) => {
     [QueryKey.FormLayouts, org, app, layoutSet3SubformNameMock],
     subformLayoutMock.layoutSet,
   );
+
   return renderWithProviders(<ColumnElement {...defaultProps} {...props} />, {
     ...queriesMock,
     queryClient,

diff --git a/...-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.tsx b/...-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.tsx
@@ -1,50 +1,50 @@
 import React, { useState, type ReactElement } from 'react';
 import classes from './ColumnElement.module.css';
-import { type TableColumn } from '../types/TableColumn';
+import type { TableColumn } from '../types/TableColumn';
 import { useTranslation } from 'react-i18next';
 import { StudioProperty } from '@studio/components';
 import { EditColumnElement } from './EditColumnElement';
 import { useTextResourcesQuery } from 'app-shared/hooks/queries';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { textResourceByLanguageAndIdSelector } from '../../../../selectors/textResourceSelectors';
+import { DEFAULT_LANGUAGE } from 'app-shared/constants';
 
 export type ColumnElementProps = {
   subformLayout: string;
   tableColumn: TableColumn;
   columnNumber: number;
   isInitialOpenForEdit: boolean;
   onDeleteColumn: () => void;
-  onEdit: (tableColumn: TableColumn) => void;
+  onChange: (tableColumn: TableColumn) => void;
 };
 
 export const ColumnElement = ({
   tableColumn,
   columnNumber,
   isInitialOpenForEdit,
   onDeleteColumn,
-  onEdit,
+  onChange,
   subformLayout,
 }: ColumnElementProps): ReactElement => {
   const { t } = useTranslation();
   const [editing, setEditing] = useState(isInitialOpenForEdit);
   const { org, app } = useStudioEnvironmentParams();
   const { data: textResources } = useTextResourcesQuery(org, app);
 
-  const textKeyValue = textResourceByLanguageAndIdSelector(
-    'nb',
-    tableColumn.headerContent,
-  )(textResources)?.value;
+  const textKeyValue =
+    textResourceByLanguageAndIdSelector(DEFAULT_LANGUAGE, tableColumn?.headerContent)(textResources)
+      ?.value || tableColumn?.headerContent;
 
   if (editing) {
     return (
       <EditColumnElement
         subformLayout={subformLayout}
-        sourceColumn={tableColumn}
+        tableColumn={tableColumn}
         columnNumber={columnNumber}
         onDeleteColumn={onDeleteColumn}
-        onEdit={(col) => {
+        onChange={onChange}
+        onClose={() => {
           setEditing(false);
-          onEdit(col);
         }}
       />
     );