Feature/4798 custom confirmation modal

.storybook/preview.js

@@ -1,5 +1,6 @@
 import '../src/openforms/scss/screen.scss';
 import '../src/openforms/scss/admin/admin_overrides.scss';
+import {withModalDecorator} from 'components/admin/form_design/story-decorators';
 import {initialize, mswDecorator, mswLoader} from 'msw-storybook-addon';
 import {reactIntl} from './reactIntl.js';
 import ReactModal from 'react-modal';
@@ -14,7 +15,7 @@ initialize({
 ReactModal.setAppElement(document.getElementById('storybook-root'));
 
 export default {
-  decorators: [mswDecorator],
+  decorators: [mswDecorator, withModalDecorator],
   parameters: {
     controls: {
       matchers: {

src/openforms/forms/tests/e2e_tests/test_form_designer.py

@@ -1112,10 +1112,10 @@ def setUpTestData():
             await page.get_by_role("button", name="Confirm").click()
 
             # Delete initial form definition
-            page.on("dialog", lambda dialog: dialog.accept())
             sidebar = page.locator("css=.edit-panel__nav").get_by_role("list")
             bin_icon = sidebar.get_by_role("listitem").nth(0).get_by_title("Delete")
             await bin_icon.click()
+            await page.get_by_role("button", name="Confirm").click()
 
             await expect(page.get_by_text("Form definition 1")).not_to_be_visible()
 
@@ -1164,10 +1164,10 @@ def setUpTestData():
             await page.get_by_role("tab", name="Steps and fields").click()
 
             # Delete the second step
-            page.on("dialog", lambda dialog: dialog.accept())
             sidebar = page.locator("css=.edit-panel__nav").get_by_role("list")
             bin_icon = sidebar.get_by_role("listitem").nth(1).get_by_title("Delete")
             await bin_icon.click()
+            await page.get_by_role("button", name="Confirm").click()
 
             await page.get_by_role("tab", name="Logic").click()
 
@@ -1801,12 +1801,12 @@ def setUpTestData():
             await expect(selectbox).not_to_contain_text("FORM DEFINITION #3")
 
             # Close model
-            await page.get_by_title("Sluiten").click()
+            await page.get_by_role("button", name="Sluiten").click()
 
             # Delete the second step
-            page.on("dialog", lambda dialog: dialog.accept())
             sidebar = page.locator("css=.edit-panel__nav").get_by_role("list")
             await sidebar.get_by_role("listitem").nth(1).get_by_title("Delete").click()
+            await page.get_by_role("button", name="Confirm").click()
 
             # Select third form step and open selectbox
             await sidebar.get_by_role("listitem").nth(1).get_by_text(

src/openforms/forms/tests/e2e_tests/test_service_fetch.py

@@ -214,7 +214,7 @@ def setUpTestData():
             ).to_be_visible()
             await page.get_by_role("button", name="Configure").click()
             await check_service_fetch_form_values(page, data)
-            await page.get_by_title("Sluiten").click()
+            await page.get_by_role("button", name="Sluiten").click()
 
             await page.get_by_text("Save and continue editing").click()
             await page.get_by_role("tab", name="Logic").click()
@@ -297,7 +297,7 @@ def setUpTestData():
             ).to_be_visible()
             await page.get_by_role("button", name="Configure").click()
             await check_service_fetch_form_values(page, data)
-            await page.get_by_title("Sluiten").click()
+            await page.get_by_role("button", name="Sluiten").click()
 
             await page.get_by_text("Save and continue editing").click()
             await page.get_by_role("tab", name="Logic").click()
@@ -427,7 +427,7 @@ def setUpTestData():
                     mapping_expression=".bar",
                 ),
             )
-            await page.get_by_title("Sluiten").click()
+            await page.get_by_role("button", name="Sluiten").click()
 
             await page.get_by_text("Save and continue editing").click()
             await page.get_by_role("tab", name="Logic").click()
@@ -565,7 +565,7 @@ def setUpTestData():
                     mapping_expression=".bar",
                 ),
             )
-            await page.get_by_title("Sluiten").click()
+            await page.get_by_role("button", name="Sluiten").click()
 
             await page.get_by_text("Save and continue editing").click()
             await page.get_by_role("tab", name="Logic").click()

src/openforms/js/compiled-lang/en.json

@@ -2499,6 +2499,12 @@
       "value": "Change text"
     }
   ],
+  "M9JbDC": [
+    {
+      "type": 0,
+      "value": "Cancel"
+    }
+  ],
   "MEkGHD": [
     {
       "type": 0,
@@ -4601,6 +4607,12 @@
       "value": "."
     }
   ],
+  "gpiYPI": [
+    {
+      "type": 0,
+      "value": "Confirm"
+    }
+  ],
   "gqVGbb": [
     {
       "type": 0,

src/openforms/js/compiled-lang/nl.json

@@ -2520,6 +2520,12 @@
       "value": "'Wijzigen' tekst"
     }
   ],
+  "M9JbDC": [
+    {
+      "type": 0,
+      "value": "Annuleren"
+    }
+  ],
   "MEkGHD": [
     {
       "type": 0,
@@ -4623,6 +4629,12 @@
       "value": "."
     }
   ],
+  "gpiYPI": [
+    {
+      "type": 0,
+      "value": "Accepteren"
+    }
+  ],
   "gqVGbb": [
     {
       "type": 0,

src/openforms/js/components/admin/form_design/form-creation-form.js

@@ -61,6 +61,7 @@ import {
   initialFormTranslations,
   initialStepTranslations,
 } from './translations';
+import useConfirm from './useConfirm';
 import {
   checkKeyChange,
   findComponent,
@@ -1071,6 +1072,8 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl, outgoingRequestsUr
     }
   }, [loading]);
 
+  const {ConfirmationModal, confirmationModalProps, openConfirmationModal} = useConfirm();
+
   /**
    * Functions for handling events
    */
@@ -1255,17 +1258,7 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl, outgoingRequestsUr
     }
 
     // Check if the dataType change is intentional.
-    if (
-      propertyName === 'dataType' &&
-      !window.confirm(
-        intl.formatMessage({
-          description:
-            'Changing user variable data type and transforming initial value confirmation message',
-          defaultMessage:
-            'Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?',
-        })
-      )
-    ) {
+    if (propertyName === 'dataType' && !(await openConfirmationModal())) {
       return;
     }
 
@@ -1567,6 +1560,15 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl, outgoingRequestsUr
         </Tabs>
       </FormContext.Provider>
 
+      <ConfirmationModal
+        {...confirmationModalProps}
+        message={
+          <FormattedMessage
+            description="Changing user variable data type and transforming initial value confirmation message"
+            defaultMessage="Changing the data type requires the initial value to be changed. This will reset the initial value back to the empty value. Are you sure that you want to do this?"
+          />
+        }
+      />
       <FormSubmit onSubmit={onSubmit} displayActions={!state.newForm} />
     </ValidationErrorsProvider>
   );

src/openforms/js/components/admin/form_design/logic/actions/dmn/DMNActionConfig.stories.js

@@ -1,4 +1,4 @@
-import {expect, findByRole, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
+import {expect, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test';
 import selectEvent from 'react-select-event';
 
 import {
@@ -189,8 +189,6 @@ export const Empty = {
   },
   play: async ({canvasElement, step, args}) => {
     const canvas = within(canvasElement);
-    const originalConfirm = window.confirm;
-    window.confirm = () => true;
 
     const pluginDropdown = canvas.getByLabelText('Plugin');
     const decisionDefDropdown = canvas.getByLabelText('Beslisdefinitie-ID');
@@ -271,6 +269,12 @@ export const Empty = {
       const button = canvas.getByTitle('Verwijderen');
 
       await userEvent.click(button);
+      // Close the confirmation modal
+      await userEvent.click(
+        within(await canvas.findByRole('dialog')).getByRole('button', {
+          name: 'Accepteren',
+        })
+      );
 
       const varsDropdowns = within(
         document.querySelector('.logic-dmn__mapping-config')
@@ -282,8 +286,6 @@ export const Empty = {
       await expect(varsDropdowns.length).toBe(0);
       await expect(textInput.length).toBe(0);
     });
-
-    window.confirm = originalConfirm;
   },
 };
 

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.js

@@ -5,6 +5,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 import {TabList, TabPanel, Tabs} from 'react-tabs';
 
 import Tab from 'components/admin/form_design/Tab';
+import useConfirm from 'components/admin/form_design/useConfirm';
 import {
   ValidationErrorContext,
   ValidationErrorsProvider,
@@ -35,22 +36,33 @@ const ObjectsApiOptionsFormFields = ({name, apiGroupChoices}) => {
     description: 'Objects API registration backend: v2 switch warning message',
   });
 
-  const changeVersion = tabIndex => {
+  const {
+    ConfirmationModal: ConfirmationModalV1,
+    confirmationModalProps: confirmationModalV1Props,
+    openConfirmationModal: confirmUsingV1,
+  } = useConfirm();
+  const {
+    ConfirmationModal: ConfirmationModalV2,
+    confirmationModalProps: confirmationModalV2Props,
+    openConfirmationModal: confirmUsingV2,
+  } = useConfirm();
+
+  const changeVersion = async tabIndex => {
     const newVersion = tabIndex + 1;
 
     // change form fields values depending on the newly selected version
     const newValues = {...values, version: newVersion};
 
     switch (newVersion) {
       case 1: {
-        const confirmV1Switch = window.confirm(v1SwitchMessage);
+        const confirmV1Switch = await confirmUsingV1();
         if (!confirmV1Switch) return;
         delete newValues.variablesMapping;
         delete newValues.geometryVariableKey;
         break;
       }
       case 2: {
-        const confirmV2Switch = window.confirm(v2SwitchMessage);
+        const confirmV2Switch = await confirmUsingV2();
         if (!confirmV2Switch) return;
         newValues.variablesMapping = [];
         newValues.geometryVariableKey = '';
@@ -96,6 +108,8 @@ const ObjectsApiOptionsFormFields = ({name, apiGroupChoices}) => {
           <V2ConfigFields apiGroupChoices={apiGroupChoices} />
         </TabPanel>
       </Tabs>
+      <ConfirmationModalV1 {...confirmationModalV1Props} message={v1SwitchMessage} />
+      <ConfirmationModalV2 {...confirmationModalV2Props} message={v2SwitchMessage} />
     </ValidationErrorsProvider>
   );
 };