From 606018effa472aa2415ec1412ea252152dd2fb88 Mon Sep 17 00:00:00 2001 From: Nina Kylstad Date: Fri, 1 Nov 2024 08:47:49 +0100 Subject: [PATCH] chore(process): Inform user of consequences of switching layoutset default data model (#13794) --- frontend/language/src/nb.json | 1 + .../EditDataTypes/EditDataTypes.test.tsx | 4 ++- .../SelectDataTypes.module.css | 5 +++ .../SelectDataTypes/SelectDataTypes.test.tsx | 36 +++++++++++++++++++ .../SelectDataTypes/SelectDataTypes.tsx | 28 +++++++++------ 5 files changed, 63 insertions(+), 11 deletions(-) diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index 6e8882e039f..d3aa32e9ac1 100644 --- a/frontend/language/src/nb.json +++ b/frontend/language/src/nb.json @@ -651,6 +651,7 @@ "process_editor.configuration_panel_custom_receipt_spinner_title": "Laster inn kvittering", "process_editor.configuration_panel_custom_receipt_textfield_label": "Navn på kvittering", "process_editor.configuration_panel_data_model_selection_description": "Velg en datamodell å knytte til prosessteget", + "process_editor.configuration_panel_data_model_selection_description_existing_model": "Du har allerede valgt en datamodell. Hvis du har brukt denne datamodellen i et skjema, kan du få ugyldige knytninger til datamodellfelt i skjemaet. Du får en feilmelding om hvilke felter det gjelder, i forhåndsvisningen", "process_editor.configuration_panel_data_task": "Oppgave: Utfylling", "process_editor.configuration_panel_data_types_to_sign_required": "Du må velge minst én datatype", "process_editor.configuration_panel_design_title": "Utforming", diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.test.tsx index 57c834d10f5..00cc4e903bc 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.test.tsx @@ -89,7 +89,9 @@ describe('EditDataTypes', () => { }); await user.click(updateDataTypeButton); const description = screen.getByText( - textMock('process_editor.configuration_panel_data_model_selection_description'), + textMock( + 'process_editor.configuration_panel_data_model_selection_description_existing_model', + ), ); expect(description).toBeInTheDocument(); diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.module.css index 8e5fefaec03..32dfe8335bb 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.module.css +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.module.css @@ -8,6 +8,11 @@ flex: 1; } +.root { + display: flex; + flex-direction: column; +} + .dataTypeSelectAndButtons { display: flex; flex-direction: row; diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx index 6b7e693ed55..4164656d2f7 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx @@ -132,6 +132,42 @@ describe('SelectDataTypes', () => { expect(mutateDataTypesMock).not.toHaveBeenCalled(); expect(mockOnClose).toHaveBeenCalled(); }); + + it('should show selected value in combobox when data type is selected', () => { + const existingDataType = 'dataModel0'; + const dataModelIds = [existingDataType, 'dataModel1', 'dataModel2']; + renderSelectDataTypes({ + existingDataType, + dataModelIds, + }); + const combobox = screen.getByRole('combobox', { + name: textMock('process_editor.configuration_panel_set_data_model_label'), + }); + expect(combobox).toHaveValue(existingDataType); + }); + + it('should show default description text when no data type is selected', () => { + renderSelectDataTypes(); + const description = screen.getByText( + textMock('process_editor.configuration_panel_data_model_selection_description'), + ); + expect(description).toBeInTheDocument(); + }); + + it('should show extended description text when data type is already selected', () => { + const existingDataType = 'dataModel0'; + const dataModelIds = [existingDataType, 'dataModel1', 'dataModel2']; + renderSelectDataTypes({ + existingDataType: 'dataModel0', + dataModelIds, + }); + const description = screen.getByText( + textMock( + 'process_editor.configuration_panel_data_model_selection_description_existing_model', + ), + ); + expect(description).toBeInTheDocument(); + }); }); const renderSelectDataTypes = ( diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx index fafa80cb87d..1f701991108 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx +++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Combobox } from '@digdir/designsystemet-react'; -import { StudioButton, StudioDeleteButton } from '@studio/components'; +import { StudioButton, StudioCombobox, StudioDeleteButton } from '@studio/components'; import { useBpmnApiContext } from '../../../../../contexts/BpmnApiContext'; import { useTranslation } from 'react-i18next'; import { XMarkIcon } from '@studio/icons'; @@ -42,28 +41,37 @@ export const SelectDataTypes = ({ ? [...new Set([...dataModelIds, existingDataType])] : dataModelIds; + const descriptionText = existingDataType + ? t('process_editor.configuration_panel_data_model_selection_description_existing_model') + : t('process_editor.configuration_panel_data_model_selection_description'); + + const value = + existingDataType && dataModelOptionsToDisplay.includes(existingDataType) + ? currentValue + : undefined; + return (
- - + {t('process_editor.configuration_panel_no_data_model_to_select')} - + {dataModelOptionsToDisplay.map((option) => ( - handleChangeDataModel([option])} > {option} - + ))} - +
}