chore(process): Inform user of consequences of switching layoutset de…

…fault data model (#13794)
Altinn · Nov 1, 2024 · 606018e · 606018e
1 parent df8e50d
commit 606018e
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 11 deletions.
diff --git 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/...cess-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.test.tsx b/...cess-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/...onents/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.module.css b/...onents/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/...mponents/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.test.tsx b/...mponents/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/...rc/components/ConfigPanel/ConfigContent/EditDataTypes/SelectDataTypes/SelectDataTypes.tsx b/...rc/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 (
     <div className={classes.dataTypeSelectAndButtons}>
-      <Combobox
+      <StudioCombobox
         label={t('process_editor.configuration_panel_set_data_model_label')}
-        value={currentValue && dataModelIds.includes(existingDataType) ? currentValue : undefined}
-        description={t('process_editor.configuration_panel_data_model_selection_description')}
+        value={value}
+        description={descriptionText}
         size='small'
         className={classes.dataTypeSelect}
       >
-        <Combobox.Empty>
+        <StudioCombobox.Empty>
           {t('process_editor.configuration_panel_no_data_model_to_select')}
-        </Combobox.Empty>
+        </StudioCombobox.Empty>
         {dataModelOptionsToDisplay.map((option) => (
-          <Combobox.Option
+          <StudioCombobox.Option
             value={option}
             key={option}
             onClick={() => handleChangeDataModel([option])}
           >
             {option}
-          </Combobox.Option>
+          </StudioCombobox.Option>
         ))}
-      </Combobox>
+      </StudioCombobox>
       <div className={classes.buttons}>
         <StudioButton
           icon={<XMarkIcon />}