Make SelectDataTypesToSign required

Altinn · Jun 6, 2024 · bf6144a · bf6144a
1 parent 2c5c0a5
commit bf6144a
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 70 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -799,7 +799,7 @@
   "process_editor.configuration_panel_custom_receipt_textfield_label": "Navn på sidegruppe",
   "process_editor.configuration_panel_data_model_selection_description": "Velg en datamodell å knytte til prosessteget",
   "process_editor.configuration_panel_data_task": "Oppgave: Utfylling",
-  "process_editor.configuration_panel_data_types_to_sign_selection_description": "Du må minst velge en datatype",
+  "process_editor.configuration_panel_data_types_to_sign_required": "Du må minst velge en datatype",
   "process_editor.configuration_panel_element_not_supported_message": "Vi støtter foreløpig kun å se detaljer på oppgaver, ikke redigere. Velg en oppgave for å se detaljer.",
   "process_editor.configuration_panel_element_not_supported_title": "Valgt elementet er ikke støttet",
   "process_editor.configuration_panel_end_event": "Slutthendelse",
@@ -824,7 +824,6 @@
   "process_editor.configuration_panel_set_data_model": "Datamodell:",
   "process_editor.configuration_panel_set_data_model_link": "Legg til datamodell",
   "process_editor.configuration_panel_set_data_types_to_sign": "Datyper som skal signeres:",
-  "process_editor.configuration_panel_set_data_types_to_sign_link": "Legg til datatyper som skal signeres",
   "process_editor.configuration_panel_signing_task": "Oppgave: Signering",
   "process_editor.configuration_view_panel_id_label": "ID:",
   "process_editor.configuration_view_panel_name_label": "Navn: ",

diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.tsx
@@ -58,7 +58,7 @@ export const ConfigContent = (): React.ReactElement => {
           existingDataTypeForTask={existingDataTypeForTask}
         />
       )}
-      {bpmnDetails.taskType === 'signing' && <EditDataTypesToSign />}
+      {bpmnDetails.taskType === 'signing' && <EditDataTypesToSign key={bpmnDetails.id} />}
       <Accordion color='neutral'>
         <Accordion.Item>
           <Accordion.Header>

diff --git a/...rocess-editor/src/components/ConfigPanel/EditDataTypesToSign/EditDataTypesToSign.test.tsx b/...rocess-editor/src/components/ConfigPanel/EditDataTypesToSign/EditDataTypesToSign.test.tsx
@@ -33,31 +33,30 @@ const existingDataTypesProps = {
 describe('EditDataTypesToSign', () => {
   afterEach(jest.clearAllMocks);
 
-  it('should display a button to add data types when task has no data type', () => {
+  it('should display a combobox with an error message when task has no data type', () => {
     renderEditDataType();
+
+    const combobox = screen.getByRole('combobox', {
+      name: textMock('process_editor.configuration_panel_set_data_types_to_sign'),
+    });
+    expect(combobox).toBeInvalid();
+
     expect(
-      screen.getByRole('button', {
-        name: textMock('process_editor.configuration_panel_set_data_types_to_sign_link'),
-      }),
+      screen.getByText(textMock('process_editor.configuration_panel_data_types_to_sign_required')),
     ).toBeInTheDocument();
+
+    const closeButton = screen.getByRole('button', { name: textMock('general.close') });
+    expect(closeButton).toBeDisabled();
   });
 
-  it('should display a combobox without value and a description that data types are missing when clicking "add data types" when there are no data types', async () => {
+  it('should display a combobox without value and a description that data types are missing when there are no data types', async () => {
     const user = userEvent.setup();
 
     renderEditDataType();
 
-    const addDataTypesButton = screen.getByRole('button', {
-      name: textMock('process_editor.configuration_panel_set_data_types_to_sign_link'),
-    });
-    await user.click(addDataTypesButton);
     const combobox = screen.getByRole('combobox', {
       name: textMock('process_editor.configuration_panel_set_data_types_to_sign'),
     });
-    const description = screen.getByText(
-      textMock('process_editor.configuration_panel_data_types_to_sign_selection_description'),
-    );
-    expect(description).toBeInTheDocument();
 
     await user.click(combobox);
     expect(combobox).not.toHaveValue();
@@ -114,10 +113,6 @@ describe('EditDataTypesToSign', () => {
       name: textMock('process_editor.configuration_panel_set_data_types_to_sign'),
     });
     await user.click(updateDataTypeButton);
-    const description = screen.getByText(
-      textMock('process_editor.configuration_panel_data_types_to_sign_selection_description'),
-    );
-    expect(description).toBeInTheDocument();
 
     const combobox = screen.getByRole('combobox', {
       name: textMock('process_editor.configuration_panel_set_data_types_to_sign'),
@@ -131,23 +126,6 @@ describe('EditDataTypesToSign', () => {
       expect(screen.getByRole('option', { name: dataType })).toBeInTheDocument(),
     );
   });
-
-  it('should display the button to add data types when clicking the close button after edit mode and task has no data type', async () => {
-    const user = userEvent.setup();
-    renderEditDataType();
-
-    const addDataTypesButton = screen.getByRole('button', {
-      name: textMock('process_editor.configuration_panel_set_data_types_to_sign_link'),
-    });
-    await user.click(addDataTypesButton);
-    const closeButton = screen.getByRole('button', { name: textMock('general.close') });
-    await user.click(closeButton);
-    expect(
-      screen.getByRole('button', {
-        name: textMock('process_editor.configuration_panel_set_data_types_to_sign_link'),
-      }),
-    ).toBeInTheDocument();
-  });
 });
 
 type RenderProps = {

diff --git a/...ges/process-editor/src/components/ConfigPanel/EditDataTypesToSign/EditDataTypesToSign.tsx b/...ges/process-editor/src/components/ConfigPanel/EditDataTypesToSign/EditDataTypesToSign.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useBpmnContext } from '../../../contexts/BpmnContext';
 import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
@@ -10,24 +10,15 @@ import { getSelectedDataTypes } from './DataTypesToSignUtils';
 export const EditDataTypesToSign = () => {
   const { t } = useTranslation();
   const { bpmnDetails } = useBpmnContext();
-  const [dataTypesToSignSelectVisible, setDataTypesToSignSelectVisible] = useState(false);
-
-  useEffect(() => {
-    setDataTypesToSignSelectVisible(false);
-  }, [bpmnDetails]);
-
   const selectedDataTypes = getSelectedDataTypes(bpmnDetails);
 
+  const [dataTypesToSignSelectVisible, setDataTypesToSignSelectVisible] = useState(
+    !selectedDataTypes.length,
+  );
+
   return (
     <>
-      {!selectedDataTypes.length && !dataTypesToSignSelectVisible ? (
-        <StudioProperty.Button
-          onClick={() => setDataTypesToSignSelectVisible(true)}
-          property={t('process_editor.configuration_panel_set_data_types_to_sign_link')}
-          size='small'
-          icon={<LinkIcon />}
-        />
-      ) : dataTypesToSignSelectVisible ? (
+      {dataTypesToSignSelectVisible ? (
         <SelectDataTypesToSign onClose={() => setDataTypesToSignSelectVisible(false)} />
       ) : (
         <StudioProperty.Button

diff --git a/...ts/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.module.css b/...ts/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.module.css
@@ -1,8 +1,7 @@
 .buttons {
   display: flex;
   gap: var(--fds-spacing-3);
-  margin-top: var(--fds-spacing-10);
-  padding-top: var(--fds-spacing-2);
+  margin-top: 30px;
 }
 
 .dataTypeSelect {

diff --git a/...ents/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.test.tsx b/...ents/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.test.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { textMock } from '../../../../../../../testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
+import type { BpmnApiContextProps } from '../../../../contexts/BpmnApiContext';
 import { BpmnApiContext } from '../../../../contexts/BpmnApiContext';
+import type { BpmnContextProps } from '../../../../contexts/BpmnContext';
 import { BpmnContext } from '../../../../contexts/BpmnContext';
 import type { SelectDataTypesToSignProps } from './SelectDataTypesToSign';
 import { SelectDataTypesToSign } from './SelectDataTypesToSign';
@@ -21,19 +23,32 @@ import {
 jest.useFakeTimers({ advanceTimers: true });
 createMock.mockImplementation((_, data) => data.dataType);
 
-const availableDataTypeIds = ['dataType1', 'dataType2', 'dataType3'];
-
 const defaultSelectDataTypeProps: SelectDataTypesToSignProps = {
   onClose: jest.fn(),
 };
 
+const availableDataTypeIds = ['dataType1', 'dataType2', 'dataType3'];
+const existingDataTypeIds = ['dataType1'];
+
+const element = getMockBpmnElementForTask('signing');
+
+const existingDataTypesProps = {
+  bpmnApiContextProps: { availableDataTypeIds },
+  bpmnContextProps: {
+    bpmnDetails: {
+      ...mockBpmnDetails,
+      element,
+    },
+  },
+};
+
 describe('SelectDataTypesToSign', () => {
   afterEach(jest.clearAllMocks);
 
   it('saves the new selection', async () => {
     const user = userEvent.setup();
 
-    renderSelectDataTypesToSign();
+    renderSelectDataTypesToSign(existingDataTypesProps);
 
     const combobox = screen.getByRole('combobox', {
       name: textMock('process_editor.configuration_panel_set_data_types_to_sign'),
@@ -49,25 +64,32 @@ describe('SelectDataTypesToSign', () => {
 
   it('calls onClose when clicking the close button', async () => {
     const user = userEvent.setup();
-    renderSelectDataTypesToSign();
-    const closeButton = screen.getByRole('button', {
-      name: textMock('general.close'),
-    });
+
+    element.businessObject.extensionElements.values[0].signatureConfig.dataTypesToSign.dataTypes =
+      existingDataTypeIds.map((dataTypeId) => ({ dataType: dataTypeId }));
+
+    renderSelectDataTypesToSign(existingDataTypesProps);
+
+    const closeButton = screen.getByRole('button', { name: textMock('general.close') });
     await user.click(closeButton);
     expect(defaultSelectDataTypeProps.onClose).toHaveBeenCalled();
   });
 });
 
-const renderSelectDataTypesToSign = () => {
+type RenderProps = {
+  bpmnApiContextProps: Partial<BpmnApiContextProps>;
+  bpmnContextProps: Partial<BpmnContextProps>;
+};
+
+const renderSelectDataTypesToSign = (props: Partial<RenderProps> = {}) => {
+  const { bpmnApiContextProps, bpmnContextProps } = props;
+
   return render(
-    <BpmnApiContext.Provider value={{ ...mockBpmnApiContextValue, availableDataTypeIds }}>
+    <BpmnApiContext.Provider value={{ ...mockBpmnApiContextValue, ...bpmnApiContextProps }}>
       <BpmnContext.Provider
         value={{
           ...mockBpmnContextValue,
-          bpmnDetails: {
-            ...mockBpmnDetails,
-            element: getMockBpmnElementForTask('signing'),
-          },
+          ...bpmnContextProps,
         }}
       >
         <BpmnConfigPanelFormContextProvider>

diff --git a/...omponents/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.tsx b/...omponents/ConfigPanel/EditDataTypesToSign/SelectDataTypesToSign/SelectDataTypesToSign.tsx
@@ -37,13 +37,11 @@ export const SelectDataTypesToSign = ({ onClose }: SelectDataTypesToSignProps) =
       <Combobox
         label={t('process_editor.configuration_panel_set_data_types_to_sign')}
         value={value}
-        description={t(
-          'process_editor.configuration_panel_data_types_to_sign_selection_description',
-        )}
         size='small'
         className={classes.dataTypeSelect}
         multiple
         onValueChange={handleValueChange}
+        error={!value.length && t('process_editor.configuration_panel_data_types_to_sign_required')}
       >
         <Combobox.Empty>
           {t('process_editor.configuration_panel_no_data_types_to_sign_to_select')}
@@ -63,6 +61,7 @@ export const SelectDataTypesToSign = ({ onClose }: SelectDataTypesToSignProps) =
           size='small'
           title={t('general.close')}
           variant='secondary'
+          disabled={!value.length}
         />
       </div>
     </div>