From 6198cb75a62cc4433c068d8d82c437d8c1bb79b9 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah <90609090+JamalAlabdullah@users.noreply.github.com> Date: Wed, 13 Nov 2024 07:57:43 +0100 Subject: [PATCH] feat: 13956 inform user when a linked component in subform table is invalid (#13987) Co-authored-by: Jamal Alabdullah --- frontend/language/src/nb.json | 2 + .../ColumnElement/ColumnElement.test.tsx | 16 +++ .../EditColumnElement.test.tsx | 101 ++++++++++++++++++ .../EditColumnElement/EditColumnElement.tsx | 33 ++++-- 4 files changed, 144 insertions(+), 8 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.test.tsx diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 28869c7f0bf..bf080d6cab9 100644 --- a/frontend/language/src/nb.json +++ b/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", 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 c3952d77a97..9b322732287 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 @@ -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(); 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 new file mode 100644 index 00000000000..631535c2ba0 --- /dev/null +++ b/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 = {}, +) => { + return render( + , + ); +}; 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 a3a7904fcfa..d5f4331f598 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 @@ -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 = ({ void; }; -const EditColumnElementComponentSelect = ({ +export const EditColumnElementComponentSelect = ({ components, onSelectComponent, }: EditColumnElementComponentSelectProps) => { const { t } = useTranslation(); + + const subformComponentOptions = + components.length > 0 ? ( + components.map((comp: FormItem) => ( + + {comp.id} + + )) + ) : ( + + {t('ux_editor.properties_panel.subform_table_columns.no_components_available_message')} + + ); + return ( - {components.map((comp: FormItem) => ( - - {comp.id} - - ))} + {subformComponentOptions} ); };