🚧 [#4908] Add service configuration option

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

@@ -392,10 +392,14 @@ export default {
       },
       {
         id: 'json',
-        label: 'JSON',
+        label: 'JSON registration',
         schema: {
+          type: 'object',
           properties: {
-            // TODO-4098: update this with all properties
+            service: {
+              enum: [1, 2],
+            enumNames: ['Service 1', 'Service 2'],
+            },
             relativeApiEndpoint: {
               minLength: 1,
               title: 'Relative API endpoint',
@@ -408,10 +412,9 @@ export default {
                 type: 'string',
                 title: 'form variable',
                 minLength: 1,
-              }
+              },
             },
           },
-          type: 'object',
         },
       },
     ],
@@ -692,9 +695,9 @@ export const ConfiguredBackends = {
         name: 'JSON',
         backend: 'json',
         options: {
-          // TODO-4098: update this with all variables
+          service: 1,
           relativeApiEndpoint: 'Example endpoint',
-          formVariables: []
+          formVariables: [],
         },
       },
     ],
@@ -954,7 +957,7 @@ export const JSON = {
         name: 'JSON',
         backend: 'json',
         options: {
-          // TODO-4908: update this with all properties
+          service: 1,
           relativeApiEndpoint: 'We are checking.',
           formVariables: [],
         },

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

@@ -16,24 +16,31 @@ import {
 //  straightforward.
 import FormVariablesSelect from './fields/FormVariablesSelect';
 import RelativeAPIEndpoint from './fields/RelativeAPIEndpoint';
-// import Service from './fields/Service';
+import ServiceSelect from './fields/ServiceSelect';
+import {getChoicesFromSchema} from '../../../../../utils/json-schema';
 
 
-const JSONOptionsForm = ({name, label, formData, onChange}) => {
+const JSONOptionsForm = ({name, label, schema, formData, onChange}) => {
   const validationErrors = useContext(ValidationErrorContext);
   const relevantErrors = filterErrors(name, validationErrors);
 
-  // Get form variables
+  // Get form variables and create form variable options
   const formContext = useContext(FormContext)
   const formVariables = formContext.formVariables ?? [];
   const staticVariables = formContext.staticVariables ?? [];
   const allFormVariables = staticVariables.concat(formVariables);
 
   const formVariableOptions = [];
   for (const formVariable of allFormVariables) {
-    formVariableOptions.push({value: formVariable.key, label: formVariable.name})
+    formVariableOptions.push({value: formVariable.key, label: formVariable.name});
   }
 
+  // Create service options
+  const {service} = schema.properties;
+  const serviceOptions = getChoicesFromSchema(
+    service.enum, service.enumNames
+  ).map(([value, label]) => ({value, label}));
+
   return (
     <ModalOptionsConfiguration
       name={name}
@@ -51,7 +58,7 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => {
     >
       <ValidationErrorsProvider errors={relevantErrors}>
         <Fieldset>
-          {/*<Service />*/}
+          <ServiceSelect options={serviceOptions}/>
           <RelativeAPIEndpoint />
           <FormVariablesSelect options={formVariableOptions}/>
         </Fieldset>
@@ -63,7 +70,16 @@ const JSONOptionsForm = ({name, label, formData, onChange}) => {
 JSONOptionsForm.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
+  schema: PropTypes.shape({
+    properties: PropTypes.shape({
+      service: PropTypes.shape({
+        enum: PropTypes.arrayOf(PropTypes.number).isRequired,
+        enumNames: PropTypes.arrayOf(PropTypes.string).isRequired,
+      }).isRequired,
+    }).isRequired,
+  }).isRequired,
   formData: PropTypes.shape({
+    service: PropTypes.number,
     relativeApiEndpoint: PropTypes.string,
     // TODO-4098: might need to rename this to selectedFormVariables to avoid confusion or even
     //  naming conflicts

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

@@ -0,0 +1,39 @@
+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 ServiceSelect = ({options}) => {
+  return (
+    <FormRow>
+      <Field
+        name="serviceSelect"
+        label={
+          <FormattedMessage
+            description="JSON registration options 'serviceSelect' label"
+            defaultMessage="Service"
+          />
+        }
+      >
+        <ReactSelect
+          name="serviceSelect"
+          options={options}
+          required
+        />
+      </Field>
+    </FormRow>
+  );
+};
+
+ServiceSelect.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.node.isRequired,
+    })
+  ).isRequired,
+};
+
+export default ServiceSelect;