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

docs/developers/frontend/index.rst

@@ -145,3 +145,42 @@ This script can handle current and future NPM packages published in the
 .. _FormatJS: https://formatjs.github.io/
 .. _react-intl: https://formatjs.github.io/docs/getting-started/installation
 .. _react-intl storybook addon: https://storybook.js.org/addons/storybook-react-intl
+
+Admin styling
+=============
+Custom styling of admin components can be realized by adding/updating .scss files,
+which are located in ``path/to/open-forms/src/openforms/scss``.
+
+Adding a custom style
+---------------------
+See below for an example on adding custom styling for a ``div`` component in the admin:
+
+.. code-block:: html
+
+    <div className="json-dump-variables json-dump-variables--horizontal">
+        ...
+    </div>
+
+1. Create a file called ``_json-dump-variables.scss`` in ``../scss/components/admin``
+
+2. Add styling, for example:
+
+   .. code-block:: scss
+
+       .json-dump-variables {
+         display: flex;
+
+         &--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 (in this case ``../scss/components/admin/_index.scss``):
+
+   .. code-block:: scss
+
+       ...
+       @import './json-dump-variables';
+       ...

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

@@ -2305,6 +2305,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

@@ -2326,6 +2326,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

@@ -1029,7 +1029,7 @@ export const JSONDump = {
         options: {
           service: 1,
           path: 'example/endpoint',
-          variables: [],
+          variables: ['firstName', 'lastName'],
         },
       },
     ],
@@ -1039,7 +1039,7 @@ export const JSONDump = {
         formDefinition: null,
         name: 'First name',
         key: 'firstName',
-        source: 'user_defined',
+        source: 'component',
         prefillPlugin: '',
         prefillAttribute: '',
         prefillIdentifierRole: '',
@@ -1055,7 +1055,7 @@ export const JSONDump = {
         formDefinition: null,
         name: 'Last name',
         key: 'lastName',
-        source: 'user_defined',
+        source: 'component',
         prefillPlugin: '',
         prefillAttribute: '',
         prefillIdentifierRole: '',
@@ -1071,7 +1071,7 @@ export const JSONDump = {
         formDefinition: null,
         name: 'Attachment',
         key: 'attachment',
-        source: 'user_defined',
+        source: 'component',
         prefillPlugin: '',
         prefillAttribute: '',
         prefillIdentifierRole: '',
@@ -1082,6 +1082,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: [
       {

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

@@ -1,13 +1,17 @@
 import {useField} from 'formik';
-import React from 'react';
+import React, {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {FormContext} from 'components/admin/form_design/Context';
+import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
 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 [fieldProps, , {setValue}] = useField('variables');
+
+  const {formVariables} = useContext(FormContext);
 
   return (
     <FormRow>
@@ -28,16 +32,34 @@ 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
+          />
+
+          <button
+            type="button"
+            className="button button--padded"
+            onClick={() => onAddAllComponentVariables(formVariables, setValue)}
+          >
+            <FormattedMessage
+              description="JSON registration options 'add all form variables' label"
+              defaultMessage="Add all form variables"
+            />
+          </button>
+        </div>
       </Field>
     </FormRow>
   );
 };
 
+function onAddAllComponentVariables(formVariables, setValue) {
+  const componentVariables = formVariables.filter(v => v.source === VARIABLE_SOURCES.component);
+  setValue(componentVariables.map(v => v.key));
+}
+
 export default Variables;

src/openforms/js/lang/en.json

@@ -1084,6 +1084,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

@@ -1093,6 +1093,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,8 @@
+.json-dump-variables {
+  display: flex;
+
+  &--horizontal {
+    align-items: center;
+    gap: 0.5em;
+  }
+}