From 4024bf6751ebeb14b44737a1d53bd14375da0217 Mon Sep 17 00:00:00 2001
From: Viktor van Wijk <viktorvanwijk@hotmail.com>
Date: Tue, 17 Dec 2024 14:09:14 +0100
Subject: [PATCH] :truck: [#4908] Move relative api endpoint admin field to
 separate file

Will be easier to add new fields
---
 .../registrations/json/JSONOptionsForm.js     | 30 ++++---------------
 .../json/fields/RelativeAPIEndpoint.js        | 30 +++++++++++++++++++
 2 files changed, 35 insertions(+), 25 deletions(-)
 create mode 100644 src/openforms/js/components/admin/form_design/registrations/json/fields/RelativeAPIEndpoint.js

diff --git a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
index 0b573447bd..b1a0a458ff 100644
--- a/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
+++ b/src/openforms/js/components/admin/form_design/registrations/json/JSONOptionsForm.js
@@ -1,12 +1,8 @@
-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,
@@ -14,26 +10,10 @@ import {
   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,
 };
diff --git a/src/openforms/js/components/admin/form_design/registrations/json/fields/RelativeAPIEndpoint.js b/src/openforms/js/components/admin/form_design/registrations/json/fields/RelativeAPIEndpoint.js
new file mode 100644
index 0000000000..66ea4a3c1b
--- /dev/null
+++ b/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;