[#5039] Show nonFieldErrors on the top of the modal

Backport-of: #5098
open-formulieren · Feb 26, 2025 · 4b1ecdf · 4b1ecdf
1 parent 2df9ce1
commit 4b1ecdf
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js b/src/openforms/js/components/admin/form_design/RegistrationFields.stories.js
@@ -937,6 +937,51 @@ export const Email = {
   },
 };
 
+export const EmailValidationNonFieldErrors = {
+  args: {
+    configuredBackends: [
+      {
+        key: 'backend3',
+        name: 'Email',
+        backend: 'email',
+        options: {
+          toEmails: ['[email protected]'],
+          attachmentFormats: [],
+          paymentEmails: [],
+          attachFilesToEmail: false,
+          email_subject: '',
+          email_payment_subject: '',
+          email_content_template_html: '',
+          email_content_template_text: '',
+        },
+      },
+    ],
+    validationErrors: [
+      [
+        'form.registrationBackends.0.options.nonFieldErrors',
+        'Both email_content_template_html and email_content_template_text are required',
+      ],
+      ['form.registrationBackends.0.options.email_content_template_text', 'Specific field error'],
+    ],
+  },
+
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByRole('button', {name: 'Opties instellen'}));
+
+    const modalForm = await screen.findByTestId('modal-form');
+    await expect(modalForm).toBeVisible();
+    const modal = within(modalForm);
+
+    await expect(
+      modal.getByText(
+        'Both email_content_template_html and email_content_template_text are required'
+      )
+    ).toBeVisible();
+  },
+};
+
 export const STUFZDS = {
   name: 'StUF ZDS',
   args: {

diff --git a/src/openforms/js/components/admin/form_design/registrations/email/EmailOptionsFormFields.js b/src/openforms/js/components/admin/form_design/registrations/email/EmailOptionsFormFields.js
@@ -8,6 +8,7 @@ import {
   ValidationErrorsProvider,
   filterErrors,
 } from 'components/admin/forms/ValidationErrors';
+import ErrorMessage from 'components/errors/ErrorMessage';
 import {getChoicesFromSchema} from 'utils/json-schema';
 
 import EmailAttachmentFormatsSelect from './fields/EmailAttachmentFormatsSelect';
@@ -34,8 +35,17 @@ const EmailOptionsFormFields = ({name, schema}) => {
   ).map(([value, label]) => ({value, label}));
 
   const relevantErrors = filterErrors(name, validationErrors);
+  const nonFieldErrors = relevantErrors.filter(([field]) => field === 'nonFieldErrors');
+
   return (
     <ValidationErrorsProvider errors={relevantErrors}>
+      {nonFieldErrors && (
+        <>
+          {nonFieldErrors.map(([field, message], index) => (
+            <ErrorMessage key={`${field}-${index}`}>{message}</ErrorMessage>
+          ))}
+        </>
+      )}
       <Fieldset
         title={
           <FormattedMessage