♻️ [#4908] Use VariableSelection component

Now supports multi selection, so we can use it here

src/openforms/js/components/admin/form_design/registrations/json_dump/JSONDumpOptionsForm.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import {FormContext} from 'components/admin/form_design/Context';
 import Fieldset from 'components/admin/forms/Fieldset';
 import ModalOptionsConfiguration from 'components/admin/forms/ModalOptionsConfiguration';
 import {
@@ -12,23 +11,12 @@ import {
 } from 'components/admin/forms/ValidationErrors';
 import {getChoicesFromSchema} from 'utils/json-schema';
 
-import {FormVariablesSelect, Path, ServiceSelect} from './fields';
+import {Variables, Path, ServiceSelect} from './fields';
 
 const JSONDumpOptionsForm = ({name, label, schema, formData, onChange}) => {
   const validationErrors = useContext(ValidationErrorContext);
   const relevantErrors = filterErrors(name, validationErrors);
 
-  // Get form variables and create form variable options
-  const formContext = useContext(FormContext);
-  const formVariables = formContext.formVariables ?? [];
-  const staticVariables = formContext.staticVariables ?? [];
-  const allVariables = staticVariables.concat(formVariables);
-
-  const variableOptions = [];
-  for (const variable of allVariables) {
-    variableOptions.push({value: variable.key, label: variable.name});
-  }
-
   // Create service options
   const {service} = schema.properties;
   const serviceOptions = getChoicesFromSchema(service.enum, service.enumNames).map(
@@ -53,13 +41,13 @@ const JSONDumpOptionsForm = ({name, label, schema, formData, onChange}) => {
         ...formData,
       }}
       onSubmit={values => onChange({formData: values})}
-      modalSize="medium"
+      modalSize="large"
     >
       <ValidationErrorsProvider errors={relevantErrors}>
         <Fieldset>
           <ServiceSelect options={serviceOptions} />
           <Path />
-          <FormVariablesSelect options={variableOptions} />
+          <Variables />
         </Fieldset>
       </ValidationErrorsProvider>
     </ModalOptionsConfiguration>

src/openforms/js/components/admin/form_design/registrations/json_dump/JSONDumpVariableConfigurationEditor.js

@@ -37,7 +37,7 @@ const JSONDumpVariableConfigurationEditor = ({variable}) => {
             const newVariables = shouldBeIncluded
               ? [...variables, variable.key] // add the variable to the array
               : variables.filter(key => key !== variable.key); // remove the variable from the array
-            setFieldValue('variables', variables);
+            setFieldValue('variables', newVariables);
           }}
         />
       </Field>

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

@@ -0,0 +1,43 @@
+import {useField} from 'formik';
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+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');
+
+  return (
+    <FormRow>
+      <Field
+        name="variables"
+        label={
+          <FormattedMessage
+            description="JSON registration options 'variables' label"
+            defaultMessage="Variables"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="JSON registration options 'variables' helpText"
+            defaultMessage="Which variables to include in the data to be sent"
+          />
+        }
+        required
+        noManageChildProps
+      >
+        <VariableSelection
+          {...fieldProps}
+          isMulti
+          required
+          closeMenuOnSelect={false}
+          includeStaticVariables={true}
+        />
+      </Field>
+    </FormRow>
+  );
+};
+
+export default Variables;

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

@@ -1,5 +1,5 @@
-import FormVariablesSelect from './FormVariablesSelect';
+import Variables from './Variables';
 import Path from './Path';
 import ServiceSelect from './ServiceSelect';
 
-export {FormVariablesSelect, Path, ServiceSelect};
+export {Path, ServiceSelect, Variables};