Add button to quickly include all form variables in JSON dump plugin

docs/developers/frontend/admin-styling.rst

@@ -0,0 +1,41 @@
+
+Admin styling
+=============
+Custom styling of admin components can be realized by adding/updating .scss files,
+which are located in ``src/openforms/scss``.
+
+Adding a custom style
+---------------------
+The steps below describe how to add custom styling for a component in the admin, with the
+help of an example ``div`` component:
+
+.. code-block:: html
+
+    <div className="json-dump-variables json-dump-variables--horizontal">
+        ...
+    </div>
+
+1. Create a new file called ``_component-file-name.scss`` in ``src/openforms/scss/components/admin``,
+   where ``component-file-name`` reflects the class name of the component. For example: ``_json-dump-variables.scss``
+
+2. Add the custom styling. For example:
+
+   .. code-block:: scss
+
+       .json-dump-variables {
+         display: flex;
+
+         @include bem.modifier('horizontal') {
+           align-items: center;
+           gap: 0.5em;
+         }
+       }
+
+3. To ensure it gets picked up, add an import of the file name (without underscore) to the ``_index.scss``
+   file of the parent directory. For example, in ``src/openforms/scss/components/admin/_index.scss``):
+
+   .. code-block:: scss
+
+       ...
+       @import './json-dump-variables';
+       ...

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

@@ -2311,6 +2311,12 @@
       "value": "Text with (embedded) form field(s)"
     }
   ],
+  "Is9K3/": [
+    {
+      "type": 0,
+      "value": "Add all form variables"
+    }
+  ],
   "ItH6EY": [
     {
       "type": 0,

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

@@ -2332,6 +2332,12 @@
       "value": "Tekst met (ingesloten) formulierveldwaarde(n)"
     }
   ],
+  "Is9K3/": [
+    {
+      "type": 0,
+      "value": "Add all form variables"
+    }
+  ],
   "ItH6EY": [
     {
       "type": 0,

src/openforms/js/components/admin/form_design/RegistrationFields.stories.js

@@ -1085,7 +1085,7 @@ export const JSONDump = {
         options: {
           service: 1,
           path: 'example/endpoint',
-          variables: [],
+          variables: ['firstName', 'lastName', 'foo'],
           fixedMetadataVariables: ['form_name', 'form_version', 'public_reference'],
           additionalMetadataVariables: ['auth_bsn'],
         },
@@ -1097,7 +1097,7 @@ export const JSONDump = {
         formDefinition: null,
         name: 'First name',
         key: 'firstName',
-        source: 'user_defined',
+        source: 'component',
         prefillPlugin: '',
         prefillAttribute: '',
         prefillIdentifierRole: '',
@@ -1113,7 +1113,7 @@ export const JSONDump = {
         formDefinition: null,
         name: 'Last name',
         key: 'lastName',
-        source: 'user_defined',
+        source: 'component',
         prefillPlugin: '',
         prefillAttribute: '',
         prefillIdentifierRole: '',
@@ -1129,7 +1129,7 @@ export const JSONDump = {
         formDefinition: null,
         name: 'Attachment',
         key: 'attachment',
-        source: 'user_defined',
+        source: 'component',
         prefillPlugin: '',
         prefillAttribute: '',
         prefillIdentifierRole: '',
@@ -1140,6 +1140,22 @@ export const JSONDump = {
         serviceFetchConfiguration: undefined,
         initialValue: '',
       },
+      {
+        form: null,
+        formDefinition: null,
+        name: 'Foo',
+        key: 'foo',
+        source: 'user_defined',
+        prefillPlugin: '',
+        prefillAttribute: '',
+        prefillIdentifierRole: '',
+        prefillOptions: {},
+        dataType: 'string',
+        dataFormat: '',
+        isSensitiveData: false,
+        serviceFetchConfiguration: undefined,
+        initialValue: 'Bar',
+      },
     ],
     availableStaticVariables: [
       {
@@ -1177,9 +1193,28 @@ export const JSONDump = {
     ],
   },
 
-  play: async ({canvasElement}) => {
+  play: async ({canvasElement, step}) => {
     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 step('Add form variables', async () => {
+      await expect(...modal.queryAllByText('Attachment')).toBeFalsy(); // Ensure component variable 'Attachment' IS NOT selected
+      await expect(modal.getByText('Foo')).toBeVisible(); // Ensure user-defined variable 'Foo' IS selected
+
+      await userEvent.click(modal.getByRole('button', {name: 'Add all form variables'}));
+      await expect(modal.getByText('Attachment')).toBeVisible(); // Ensure 'Attachment' IS selected
+      await expect(modal.getByText('Foo')).toBeVisible(); // Ensure user-defined variable 'Foo' IS STILL selected
+
+      // Close modal
+      await userEvent.click(modal.getByRole('button', {name: 'Opslaan'}));
+    });
+
+    // Re-open modal for visual regression testing
+    await userEvent.click(canvas.getByRole('button', {name: 'Opties instellen'}));
   },
 };

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js

@@ -1,13 +1,20 @@
 import {useField} from 'formik';
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import {useContext} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
 
+import {FormContext} from 'components/admin/form_design/Context';
+import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
+import ActionButton from 'components/admin/forms/ActionButton';
 import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
 import VariableSelection from 'components/admin/forms/VariableSelection';
 
 const Variables = () => {
-  const [fieldProps] = useField('variables');
+  const intl = useIntl();
+
+  const [fieldProps, , {setValue}] = useField('variables');
+
+  const {formVariables} = useContext(FormContext);
 
   return (
     <FormRow>
@@ -28,13 +35,31 @@ const Variables = () => {
         required
         noManageChildProps
       >
-        <VariableSelection
-          {...fieldProps}
-          isMulti
-          required
-          closeMenuOnSelect={false}
-          includeStaticVariables
-        />
+        <div className="json-dump-variables json-dump-variables--horizontal">
+          <VariableSelection
+            {...fieldProps}
+            isMulti
+            required
+            closeMenuOnSelect={false}
+            includeStaticVariables
+          />
+
+          <ActionButton
+            name="addAllFormVariables"
+            type="button"
+            text={intl.formatMessage({
+              description: "JSON registration options 'add all form variables' label",
+              defaultMessage: 'Add all form variables',
+            })}
+            onClick={() => {
+              const componentVariables = formVariables.filter(
+                v => v.source === VARIABLE_SOURCES.component
+              );
+              const newVariables = [...fieldProps.value, ...componentVariables.map(v => v.key)];
+              setValue([...new Set(newVariables)]); // Use a Set to ensure they are unique
+            }}
+          />
+        </div>
       </Field>
     </FormRow>
   );

src/openforms/js/lang/en.json

@@ -1089,6 +1089,11 @@
     "description": "JSON editor: \"interpolate\" variable source label",
     "originalDefault": "Text with (embedded) form field(s)"
   },
+  "Is9K3/": {
+    "defaultMessage": "Add all form variables",
+    "description": "JSON registration options 'add all form variables' label",
+    "originalDefault": "Add all form variables"
+  },
   "ItH6EY": {
     "defaultMessage": "Time",
     "description": "data type time",

src/openforms/js/lang/nl.json

@@ -1098,6 +1098,11 @@
     "description": "JSON editor: \"interpolate\" variable source label",
     "originalDefault": "Text with (embedded) form field(s)"
   },
+  "Is9K3/": {
+    "defaultMessage": "Add all form variables",
+    "description": "JSON registration options 'add all form variables' label",
+    "originalDefault": "Add all form variables"
+  },
   "ItH6EY": {
     "defaultMessage": "Tijd (time)",
     "description": "data type time",

src/openforms/scss/components/admin/_index.scss

@@ -19,6 +19,7 @@
 @import './column-field-value';
 @import './confirmation-email-template';
 @import './variablemapping';
+@import './json-dump-variables';
 
 // Form design UI
 @import './select';

src/openforms/scss/components/admin/_json-dump-variables.scss

@@ -0,0 +1,10 @@
+@use 'microscope-sass/lib/bem';
+
+.json-dump-variables {
+  display: flex;
+
+  @include bem.modifier('horizontal') {
+    align-items: center;
+    gap: 0.5em;
+  }
+}