🚚 [#4908] Move relative api endpoint admin field to separate file

Will be easier to add new fields

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

@@ -1,39 +1,19 @@
-import {useField} from 'formik';
 import PropTypes from 'prop-types';
 import React, {useContext} from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Field from 'components/admin/forms/Field';
 import Fieldset from 'components/admin/forms/Fieldset';
-import FormRow from 'components/admin/forms/FormRow';
-import {TextInput} from 'components/admin/forms/Inputs';
 import ModalOptionsConfiguration from 'components/admin/forms/ModalOptionsConfiguration';
 import {
   ValidationErrorContext,
   ValidationErrorsProvider,
   filterErrors,
 } from 'components/admin/forms/ValidationErrors';
 
-
-const RelativeAPIEndpoint = () => {
-  // TODO-4098: is this the serializer name?
-  const [fieldProps] = useField('relativeApiEndpoint');
-  return (
-    <FormRow>
-      <Field
-        name="relativeApiEndpoint"
-        label={
-          <FormattedMessage
-            description="JSON registration options 'relativeApiEndpoint' label"
-            defaultMessage="Relative API Endpoint"
-          />
-        }
-      >
-        <TextInput id="id_relativeApiEndpoint" {...fieldProps} />
-      </Field>
-    </FormRow>
-  );
-};
+// 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 RelativeAPIEndpoint from './fields/RelativeAPIEndpoint';
 
 
 const JSONOptionsForm = ({name, label, formData, onChange}) => {
@@ -67,7 +47,7 @@ JSONOptionsForm.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
   formData: PropTypes.shape({
-    apiEndpoint: PropTypes.string,
+    relativeApiEndpoint: PropTypes.string,
   }),
   onChange: PropTypes.func.isRequired,
 };

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

@@ -0,0 +1,30 @@
+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 {TextInput} from 'components/admin/forms/Inputs';
+
+
+const RelativeAPIEndpoint = () => {
+  // TODO-4098: is this the serializer name?
+  const [fieldProps] = useField('relativeApiEndpoint');
+  return (
+    <FormRow>
+      <Field
+        name="relativeApiEndpoint"
+        label={
+          <FormattedMessage
+            description="JSON registration options 'relativeApiEndpoint' label"
+            defaultMessage="Relative API Endpoint"
+          />
+        }
+      >
+        <TextInput id="id_relativeApiEndpoint" {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+export default RelativeAPIEndpoint;