🚧 [#4908] Add Service and FormVariablesSelect fields

src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js

@@ -13,12 +13,21 @@ import {
 // TODO-4098: maybe create separate file (JSONOptionsFormFields) for all the fields?
 //  Though, no need to use multiple FieldSets, so adding the fields to the form is pretty
 //  straightforward.
+import FormVariablesSelect from './fields/FormVariablesSelect';
 import RelativeAPIEndpoint from './fields/RelativeAPIEndpoint';
+// import Service from './fields/Service';
 
 
 const JSONOptionsForm = ({name, label, formData, onChange}) => {
   const validationErrors = useContext(ValidationErrorContext);
   const relevantErrors = filterErrors(name, validationErrors);
+
+  const formVariableOptions = [
+    {value: "1", label: "One"},
+    {value: "2", label: "Two"},
+    {value: "3", label: "Three"},
+  ]
+
   return (
     <ModalOptionsConfiguration
       name={name}
@@ -36,7 +45,9 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => {
     >
       <ValidationErrorsProvider errors={relevantErrors}>
         <Fieldset>
+          {/*<Service />*/}
           <RelativeAPIEndpoint />
+          <FormVariablesSelect options={formVariableOptions}/>
         </Fieldset>
       </ValidationErrorsProvider>
     </ModalOptionsConfiguration>
@@ -48,6 +59,7 @@ JSONOptionsForm.propTypes = {
   label: PropTypes.node.isRequired,
   formData: PropTypes.shape({
     relativeApiEndpoint: PropTypes.string,
+    formVariables: PropTypes.arrayOf(PropTypes.string),
   }),
   onChange: PropTypes.func.isRequired,
 };

src/openforms/js/components/admin/form_design/registrations/json/fields/FormVariablesSelect.js

@@ -0,0 +1,60 @@
+import {useField} from 'formik';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import ReactSelect from 'components/admin/forms/ReactSelect';
+
+const FormVariablesSelect = ({options}) => {
+  const [fieldProps, , fieldHelpers] = useField('formVariables');
+  const {setValue} = fieldHelpers;
+
+  // TODO-4098: what does this do?
+  const values = [];
+  if (fieldProps.value && fieldProps.value.length) {
+    fieldProps.value.forEach(item => {
+      const selectedOption = options.find(option => option.value === item);
+      if (selectedOption) {
+        values.push(selectedOption);
+      }
+    });
+  }
+
+  return (
+    <FormRow>
+      <Field
+        name="formVariables"
+        label={
+          <FormattedMessage
+            description="JSON registration options 'formVariables' label"
+            defaultMessage="Form variables"
+          />
+        }
+      >
+        <ReactSelect
+          name="formVariables"
+          options={options}
+          isMulti
+          required
+          value={values}
+          // TODO-4098: what does this do?
+          onChange={newValue => {
+            setValue(newValue.map(item => item.value));
+          }}
+        />
+      </Field>
+    </FormRow>
+  );
+};
+
+FormVariablesSelect.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.node.isRequired,
+    })
+  ).isRequired,
+};
+
+export default FormVariablesSelect;

src/openforms/js/components/admin/form_design/registrations/json/fields/Service.js

@@ -0,0 +1,5 @@
+const Service = () => {
+  return "asdf"
+}
+
+export default Service