From b0cee0907724066ed72cde65865959b7d4857cd0 Mon Sep 17 00:00:00 2001 From: Jonas Dyrlie Date: Mon, 3 Feb 2025 08:15:38 +0100 Subject: [PATCH] fix: tablecolumns saving/deleting a column affects other columns Removes unecessary state, and dependence on custom text-key for custom labels commit-id:2ef223ec --- .../ColumnElement/ColumnElement.test.tsx | 85 +++++++++++++------ .../ColumnElement/ColumnElement.tsx | 20 ++--- .../EditColumnElement.test.tsx | 66 ++++++++------ .../EditColumnElement/EditColumnElement.tsx | 79 +++++------------ .../EditColumnElementContent.module.css | 16 +--- .../EditColumnElementContent.tsx | 54 ++++++------ .../EditSubformTableColumns.test.tsx | 4 +- .../EditSubformTableColumns.tsx | 2 +- 8 files changed, 167 insertions(+), 159 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx index 8c00a6e1ee4..02b650ecdda 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx +++ b/frontend/packages/ux-editor/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'; @@ -16,6 +16,8 @@ const headerContentMock: string = 'Header'; const cellContentQueryMock: string = 'Query'; const cellContentDefaultMock: string = 'Default'; const columnNumberMock: number = 1; +const textKeyMock = 'textkeymock1'; +const textValueMock = 'textkeymock1'; const mockTableColumn: TableColumn = { headerContent: headerContentMock, @@ -30,21 +32,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 +64,60 @@ describe('ColumnElement', () => { await user.click(componentSelect); await user.click( - screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component3Id}`) }), + screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component4Id}`) }), ); - await screen.findByText( - textMock( - 'ux_editor.properties_panel.subform_table_columns.column_multiple_data_model_bindings_label', - ), - ); + const saveButton = await screen.findByRole('button', { name: textMock('general.save') }); + await user.click(saveButton); + + expect(onChangeMock).toHaveBeenCalledWith({ + ...mockTableColumn, + cellContent: { + query: subformLayoutMock.component4.dataModelBindings.address, + }, + headerContent: subformLayoutMock.component4.textResourceBindings.title, + }); + }); + + it('should call onChange with updated header content on changing text key', async () => { + const onChangeMock = jest.fn(); + + const user = userEvent.setup(); + renderColumnElement({ + onChange: onChangeMock, + }); + + const editButton = screen.getByRole('button', { + name: /ux_editor.properties_panel.subform_table_columns.column_header/, + }); + await user.click(editButton); await user.click( - await screen.findByText( - textMock('ux_editor.properties_panel.subform_table_columns.column_title_unedit'), - ), + screen.getByRole('button', { + name: textMock('ux_editor.properties_panel.subform_table_columns.column_title_edit'), + }), ); - await user.type( - screen.getByText( - textMock('ux_editor.properties_panel.subform_table_columns.column_title_edit'), - ), - 'New Title', + await user.click( + screen.getByRole('tab', { + name: textMock('ux_editor.text_resource_binding_search'), + }), + ); + await user.selectOptions( + screen.getByRole('combobox', { name: textMock('ux_editor.search_text_resources_label') }), + textKeyMock, + ); + await user.click( + screen.getByRole('button', { + name: textMock('general.close'), + }), ); 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 }, + headerContent: textKeyMock, }); }); @@ -133,6 +164,10 @@ const renderColumnElement = (props: Partial = {}) => { [QueryKey.FormLayouts, org, app, layoutSet3SubformNameMock], subformLayoutMock.layoutSet, ); + queryClient.setQueryData([QueryKey.TextResources, org, app], { + nb: [{ id: textKeyMock, value: textValueMock }], + }); + return renderWithProviders(, { ...queriesMock, queryClient, diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.tsx index c7fe4ab654f..3a035833b9f 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.tsx @@ -1,12 +1,13 @@ 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; @@ -14,7 +15,7 @@ export type ColumnElementProps = { columnNumber: number; isInitialOpenForEdit: boolean; onDeleteColumn: () => void; - onEdit: (tableColumn: TableColumn) => void; + onChange: (tableColumn: TableColumn) => void; }; export const ColumnElement = ({ @@ -22,7 +23,7 @@ export const ColumnElement = ({ columnNumber, isInitialOpenForEdit, onDeleteColumn, - onEdit, + onChange, subformLayout, }: ColumnElementProps): ReactElement => { const { t } = useTranslation(); @@ -30,21 +31,20 @@ export const ColumnElement = ({ 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 ( { + onChange={onChange} + onClose={() => { setEditing(false); - onEdit(col); }} /> ); diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.test.tsx index 9010a0d6724..7b6bcccabe3 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { screen } from '@testing-library/react'; +import { act, screen } from '@testing-library/react'; import { textMock } from '@studio/testing/mocks/i18nMock'; import userEvent from '@testing-library/user-event'; import { subformLayoutMock } from '../../../../../testing/subformLayoutMock'; @@ -14,10 +14,11 @@ import { app, org } from '@studio/testing/testids'; const subformComponentMock = componentMocks[ComponentType.Subform]; const defaultProps: EditColumnElementProps = { - sourceColumn: subformComponentMock.tableColumns[0], + tableColumn: subformComponentMock.tableColumns[0], columnNumber: 1, onDeleteColumn: jest.fn(), - onEdit: jest.fn(), + onChange: jest.fn(), + onClose: jest.fn(), subformLayout: subformLayoutMock.layoutSetName, }; @@ -112,16 +113,21 @@ describe('EditColumnElementComponentSelect', () => { it('should render multiple data model bindings label when there are multiple data model bindings', async () => { const user = userEvent.setup(); - renderEditColumnElement(); + renderEditColumnElement({ + tableColumn: { + headerContent: subformLayoutMock.component4.textResourceBindings.title, + cellContent: { query: subformLayoutMock.component4.dataModelBindings.address }, + }, + }); const componentSelect = screen.getByRole('combobox', { name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'), }); expect(componentSelect).toBeInTheDocument(); await user.click(componentSelect); - const componentWitMultipleBindings = screen.getByRole('option', { - name: new RegExp(`${subformLayoutMock.component3Id}`), + const componentWithMultipleBindings = screen.getByRole('option', { + name: new RegExp(`${subformLayoutMock.component4Id}`), }); - await user.click(componentWitMultipleBindings); + await user.click(componentWithMultipleBindings); expect( await screen.findByText( textMock( @@ -133,7 +139,12 @@ describe('EditColumnElementComponentSelect', () => { it('should only render data model bindings that have a value', async () => { const user = userEvent.setup(); - renderEditColumnElement(); + renderEditColumnElement({ + tableColumn: { + headerContent: subformLayoutMock.component4.textResourceBindings.title, + cellContent: { query: subformLayoutMock.component4.dataModelBindings.address }, + }, + }); const componentSelect = screen.getByRole('combobox', { name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'), }); @@ -170,12 +181,12 @@ describe('EditColumnElementComponentSelect', () => { ).not.toBeInTheDocument(); }); - it('should call onEdit with updated query when selecting a simple data model binding and clicking on save button', async () => { + it('should call onChange with updated query when selecting a simple data model binding and clicking on save button', async () => { const user = userEvent.setup(); - const onEditMock = jest.fn(); + const onChangeMock = jest.fn(); renderEditColumnElement({ - onEdit: onEditMock, + onChange: onChangeMock, }); const componentSelect = screen.getByRole('combobox', { @@ -190,28 +201,31 @@ describe('EditColumnElementComponentSelect', () => { const saveButton = await screen.findByRole('button', { name: textMock('general.save') }); await user.click(saveButton); - expect(onEditMock).toHaveBeenCalledTimes(1); - expect(onEditMock).toHaveBeenCalledWith({ - headerContent: expect.stringContaining('subform_table_column_title_'), + expect(onChangeMock).toHaveBeenCalledTimes(1); + expect(onChangeMock).toHaveBeenCalledWith({ + headerContent: subformLayoutMock.component1.textResourceBindings.title, cellContent: { query: subformLayoutMock.component1.dataModelBindings.simpleBinding }, }); }); - it('should call onEdit with updated query when selecting a multiple data model binding and clicking on save button', async () => { + it('should call onChange with updated query when selecting a multiple data model binding and clicking on save button', async () => { const user = userEvent.setup(); - const onEditMock = jest.fn(); + const onChangeMock = jest.fn(); renderEditColumnElement({ - onEdit: onEditMock, + onChange: onChangeMock, + tableColumn: { + headerContent: subformLayoutMock.component4.textResourceBindings.title, + cellContent: { query: subformLayoutMock.component4.dataModelBindings.address }, + }, }); - const componentSelect = screen.getByRole('combobox', { name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'), }); await user.click(componentSelect); await user.click( - screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component3Id}`) }), + screen.getByRole('option', { name: new RegExp(`${subformLayoutMock.component4Id}`) }), ); const dataModelBindingsSelect = await screen.findByText( @@ -220,20 +234,22 @@ describe('EditColumnElementComponentSelect', () => { ), ); - await user.click(dataModelBindingsSelect); + await act(async () => { + await user.click(dataModelBindingsSelect); + }); await user.click( screen.getByRole('option', { - name: new RegExp(subformLayoutMock.component3.dataModelBindings.simpleBinding.toString()), + name: new RegExp(subformLayoutMock.component4.dataModelBindings.postPlace), }), ); const saveButton = await screen.findByRole('button', { name: textMock('general.save') }); await user.click(saveButton); - expect(onEditMock).toHaveBeenCalledTimes(1); - expect(onEditMock).toHaveBeenCalledWith({ - headerContent: expect.stringContaining('subform_table_column_title_'), - cellContent: { query: subformLayoutMock.component3.dataModelBindings.simpleBinding }, + expect(onChangeMock).toHaveBeenCalledTimes(2); + expect(onChangeMock).toHaveBeenCalledWith({ + headerContent: subformLayoutMock.component4.textResourceBindings.title, + cellContent: { query: subformLayoutMock.component4.dataModelBindings.postPlace }, }); }); }); diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx index a934b62ce90..cf40da0e922 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx @@ -1,6 +1,6 @@ import React, { useState, type ReactElement } from 'react'; import classes from './EditColumnElement.module.css'; -import { type TableColumn } from '../../types/TableColumn'; +import type { TableColumn } from '../../types/TableColumn'; import { useTranslation } from 'react-i18next'; import { StudioActionCloseButton, @@ -14,70 +14,38 @@ import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmen import { useFormLayoutsQuery } from '../../../../../hooks/queries/useFormLayoutsQuery'; import type { FormItem } from '../../../../../types/FormItem'; import { EditColumnElementContent } from './EditColumnElementContent'; -import { useTextResourcesQuery } from 'app-shared/hooks/queries'; -import { useUpsertTextResourceMutation } from 'app-shared/hooks/mutations'; -import { useTextIdMutation } from 'app-development/hooks/mutations'; import { getComponentsForSubformTable, getDefaultDataModel, - getTitleIdForColumn, - getValueOfTitleId, } from '../../utils/editSubformTableColumnsUtils'; import { convertDataBindingToInternalFormat } from '../../../../../utils/dataModelUtils'; import { DataModelBindingsCombobox } from './DataModelBindingsCombobox'; import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery'; export type EditColumnElementProps = { - sourceColumn: TableColumn; + tableColumn: TableColumn; columnNumber: number; onDeleteColumn: () => void; - onEdit: (tableColumn: TableColumn) => void; + onChange: (tableColumn: TableColumn) => void; + onClose: () => void; subformLayout: string; }; export const EditColumnElement = ({ - sourceColumn, + tableColumn, columnNumber, onDeleteColumn, - onEdit, + onChange, + onClose, subformLayout, }: EditColumnElementProps): ReactElement => { const { t } = useTranslation(); const { org, app } = useStudioEnvironmentParams(); - const { data: textResources } = useTextResourcesQuery(org, app); - - const [tableColumn, setTableColumn] = useState(sourceColumn); - - const [title, setTitle] = useState( - getValueOfTitleId(sourceColumn.headerContent, textResources), - ); - const [uniqueTitleId, _] = useState( - getTitleIdForColumn({ - titleId: tableColumn.headerContent, - subformId: subformLayout, - textResources, - }), - ); - const { mutate: upsertTextResource } = useUpsertTextResourceMutation(org, app); - const { mutate: textIdMutation } = useTextIdMutation(org, app); const { data: formLayouts } = useFormLayoutsQuery(org, app, subformLayout); const { data: layoutSets } = useLayoutSetsQuery(org, app); const [selectedComponentId, setSelectedComponentId] = useState(); - const handleSave = () => { - upsertTextResource({ language: 'nb', textId: uniqueTitleId, translation: title }); - onEdit({ - ...tableColumn, - headerContent: uniqueTitleId, - }); - }; - - const handleDelete = () => { - textIdMutation([{ oldId: uniqueTitleId }]); - onDeleteColumn(); - }; - const selectComponent = (values: string[]) => { const componentId = values[0]; setSelectedComponentId(componentId); @@ -88,29 +56,28 @@ export const EditColumnElement = ({ const binding = convertDataBindingToInternalFormat(selectedComponent, bindingKey); - setTableColumn((prev) => ({ - ...prev, + onChange({ + ...tableColumn, headerContent: selectedComponent.textResourceBindings?.title, cellContent: { query: binding.field }, - })); - - setTitle(getValueOfTitleId(selectedComponent.textResourceBindings.title, textResources)); + }); }; const handleBindingChange = (field: string) => { - setTableColumn((prev) => ({ - ...prev, + const updatedTableColumn = { + ...tableColumn, cellContent: { query: field }, - })); + }; + onChange(updatedTableColumn); }; const subformDefaultDataModel = getDefaultDataModel(layoutSets, subformLayout); const availableComponents = getComponentsForSubformTable(formLayouts, subformDefaultDataModel); - const isSaveButtonDisabled = - !tableColumn.headerContent || !title?.trim() || !tableColumn.cellContent?.query; + const isSaveButtonDisabled = !tableColumn.headerContent || !tableColumn.cellContent?.query; const component = availableComponents.find((comp) => comp.id === selectedComponentId); const hasMultipleDataModelBindings = Object.keys(component?.dataModelBindings ?? {}).length > 1; + const isTableColumnDefined = tableColumn.headerContent || tableColumn.cellContent?.query; return ( @@ -124,24 +91,24 @@ export const EditColumnElement = ({ )} - {tableColumn.headerContent && ( + {isTableColumnDefined && ( )}
- +
diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.module.css b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.module.css index cf09a9ec42f..bde3ad51ae1 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.module.css @@ -1,15 +1,7 @@ -.componentTitleButton, -.componentCellContent { - padding-left: var(--fds-spacing-1); -} - -.componentTitleButton > span:first-child { - display: flex; - gap: var(--fds-spacing-1); -} - -.componentTitleButton { - margin-bottom: var(--fds-spacing-1); +.textResource > button, +.textResource > fieldset { + margin-inline: 0px; + padding-inline: 0px; } .componentCellContent { diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.tsx index fc32ecebe82..4d9a065d250 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.tsx @@ -1,52 +1,48 @@ -import React, { useState } from 'react'; +import React from 'react'; -import { StudioCodeFragment, StudioProperty, StudioTextfield } from '@studio/components'; +import { StudioCodeFragment } from '@studio/components'; import { Trans, useTranslation } from 'react-i18next'; +import { TextResource } from '../../../../TextResource/TextResource'; +import type { TableColumn } from '../../types/TableColumn'; import classes from './EditColumnElementContent.module.css'; +import { generateRandomId } from 'app-shared/utils/generateRandomId'; type EditColumnElementContentProps = { - title: string; - setTitle: (title: string) => void; - cellContent: string; + subformLayout: string; + tableColumn: TableColumn; + onChange: (updatedTableColumn: TableColumn) => void; }; export const EditColumnElementContent = ({ - title, - setTitle, - cellContent, + subformLayout, + tableColumn, + onChange, }: EditColumnElementContentProps) => { - const [isEditingTitle, setIsEditingTitle] = useState(false); const { t } = useTranslation(); - const errorMessage = t('ux_editor.properties_panel.subform_table_columns.column_title_error'); - return ( -
- {isEditingTitle ? ( - +
+ setTitle(e.target.value)} - error={!title?.trim() && errorMessage} - /> - ) : ( - setIsEditingTitle(true)} - property={t('ux_editor.properties_panel.subform_table_columns.column_title_unedit')} - value={title} + textResourceId={tableColumn.headerContent} + handleIdChange={(newTextKey) => onChange({ ...tableColumn, headerContent: newTextKey })} + handleRemoveTextResource={() => onChange({ ...tableColumn, headerContent: '' })} + generateIdOptions={{ + layoutId: subformLayout, + componentId: 'tableColumn', + textResourceKey: generateRandomId(6), + }} /> - )} +
]} />
-
+ ); }; diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx index 5370f9f58ab..513384158bc 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.test.tsx @@ -91,7 +91,9 @@ describe('EditSubformTableColumns', () => { expect(handleComponentChangeMock).toHaveBeenCalledTimes(1); const columnTitleKey = getUpdatedTableColumns(handleComponentChangeMock)[0].headerContent; - expect(columnTitleKey).toEqual(expect.stringContaining('subform_table_column_title_')); + expect(columnTitleKey).toEqual( + expect.stringContaining(subformLayoutMock.component1.textResourceBindings.title), + ); }); it('should call handleComponentChange when a column is deleted', async () => { diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx index ed0bc6e787c..f87cdcd0d6e 100644 --- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/EditSubformTableColumns.tsx @@ -67,7 +67,7 @@ export const EditSubformTableColumns = ({ columnNumber={index + 1} isInitialOpenForEdit={newColumnNumber === index + 1} onDeleteColumn={() => deleteColumn(tableColumn, index)} - onEdit={(updatedTableColumn: TableColumn) => editColumn(updatedTableColumn, index)} + onChange={(updatedTableColumn: TableColumn) => editColumn(updatedTableColumn, index)} /> ))}