♻️ Allow passing group/type/version names to Objects API fields

previously it was only possible to specify a prefix and the objecttype, objecttypeVersion and objectsApiGroup names were fixed. Now those are configurable and the prefix has been removed
open-formulieren · Oct 1, 2024 · 237dae0 · 237dae0
1 parent 15412ef
commit 237dae0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 25 deletions.
diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js
@@ -274,7 +274,8 @@ const ObjectsAPIPrefillFields = ({values, errors}) => {
         {/* TODO copied from V2ConfigFields, should probably be reused */}
         <ObjectsAPIGroup
           prefix="prefillOptions"
-          errors={errors['prefillOptions.apiGroup']}
+          apiGroupName="prefillOptions.objectsApiGroup"
+          errors={errors['prefillOptions.objectsApiGroup']}
           apiGroupChoices={apiGroups}
           onChangeCheck={() => {
             if (values.prefillOptions.variablesMapping.length === 0) return true;
@@ -300,7 +301,9 @@ const ObjectsAPIPrefillFields = ({values, errors}) => {
           }
         >
           <ObjectTypeSelect
-            prefix="prefillOptions"
+            objectTypeName="prefillOptions.objecttype"
+            objectTypeVersionName="prefillOptions.objecttypeVersion"
+            apiGroupName="prefillOptions.objectsApiGroup"
             onChangeCheck={() => {
               if (values.prefillOptions.variablesMapping.length === 0) return true;
               const confirmSwitch = window.confirm(
@@ -326,7 +329,11 @@ const ObjectsAPIPrefillFields = ({values, errors}) => {
             />
           }
         >
-          <ObjectTypeVersionSelect prefix="prefillOptions" />
+          <ObjectTypeVersionSelect
+            objectTypeName="prefillOptions.objecttype"
+            objectTypeVersionName="prefillOptions.objecttypeVersion"
+            apiGroupName="prefillOptions.objectsApiGroup"
+          />
         </ErrorBoundary>
       </Fieldset>
 

diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js
@@ -20,16 +20,20 @@ const getAvailableObjectTypes = async apiGroupID => {
   return response.data;
 };
 
-const ObjectTypeSelect = ({onChangeCheck, prefix = undefined}) => {
-  const namePrefix = prefix ? `${prefix}.` : '';
-  const [fieldProps, , fieldHelpers] = useField(`${namePrefix}objecttype`);
+const ObjectTypeSelect = ({
+  onChangeCheck,
+  objectTypeName = 'objecttype',
+  objectTypeVersionName = 'objecttypeVersion',
+  apiGroupName = 'objectsApiGroup',
+}) => {
+  const [fieldProps, , fieldHelpers] = useField(objectTypeName);
   const {
     values,
     setFieldValue,
     getFieldProps,
     initialValues: {objecttype: initialObjecttype},
   } = useFormikContext();
-  const objectsApiGroup = getFieldProps(`${namePrefix}objectsApiGroup`).value ?? null;
+  const objectsApiGroup = getFieldProps(apiGroupName).value ?? null;
   const {value} = fieldProps;
   const {setValue} = fieldHelpers;
 
@@ -51,21 +55,21 @@ const ObjectTypeSelect = ({onChangeCheck, prefix = undefined}) => {
       ]);
   const options = choices.map(([value, label]) => ({value, label}));
 
-  useSynchronizeSelect(`${namePrefix}objecttype`, loading, choices);
+  useSynchronizeSelect(objectTypeName, loading, choices);
 
   const previousValue = usePrevious(value);
 
   // when a different object type is selected, ensure that the version is reset
   useUpdateEffect(() => {
     if (loading) return;
     if (value === initialObjecttype || value === previousValue) return;
-    setFieldValue(`${namePrefix}objecttypeVersion`, undefined); // clears the value
+    setFieldValue(objectTypeVersionName, undefined); // clears the value
   }, [loading, value]);
 
   return (
     <FormRow>
       <Field
-        name={`${namePrefix}objecttype`}
+        name={objectTypeName}
         required
         label={
           <FormattedMessage
@@ -82,7 +86,7 @@ const ObjectTypeSelect = ({onChangeCheck, prefix = undefined}) => {
         noManageChildProps
       >
         <ReactSelect
-          name={`${namePrefix}objecttype`}
+          name={objectTypeName}
           options={options}
           isLoading={loading}
           isDisabled={!objectsApiGroup}

diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js
@@ -25,11 +25,14 @@ const getAvailableVersions = async (uuid, apiGroupID) => {
   return versions.sort((v1, v2) => v2.version - v1.version);
 };
 
-const ObjectTypeVersionSelect = ({prefix = undefined}) => {
-  const namePrefix = prefix ? `${prefix}.` : '';
+const ObjectTypeVersionSelect = ({
+  objectTypeName = 'objecttype',
+  objectTypeVersionName = 'objecttypeVersion',
+  apiGroupName = 'objectsApiGroup',
+}) => {
   const {values} = useFormikContext();
-  const objectsApiGroup = _.get(values, `${namePrefix}objectsApiGroup`, null);
-  const objecttype = _.get(values, `${namePrefix}objecttype`, '');
+  const objectsApiGroup = _.get(values, apiGroupName, null);
+  const objecttype = _.get(values, objectTypeName, '');
 
   const {
     loading,
@@ -45,13 +48,13 @@ const ObjectTypeVersionSelect = ({prefix = undefined}) => {
     ? []
     : versions.map(version => [version.version, `${version.version} (${version.status})`]);
 
-  useSynchronizeSelect(`${namePrefix}objecttypeVersion`, loading, choices);
+  useSynchronizeSelect(objectTypeVersionName, loading, choices);
 
   const options = choices.map(([value, label]) => ({value, label}));
   return (
     <FormRow>
       <Field
-        name={`${namePrefix}objecttypeVersion`}
+        name={objectTypeVersionName}
         required
         label={
           <FormattedMessage
@@ -62,7 +65,7 @@ const ObjectTypeVersionSelect = ({prefix = undefined}) => {
         noManageChildProps
       >
         <ReactSelect
-          name={`${namePrefix}objecttypeVersion`}
+          name={objectTypeVersionName}
           required
           options={options}
           isLoading={loading}

diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectsAPIGroup.js b/src/openforms/js/components/admin/forms/objects_api/ObjectsAPIGroup.js
@@ -8,11 +8,13 @@ import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
 import ReactSelect from 'components/admin/forms/ReactSelect';
 
-const ObjectsAPIGroup = ({apiGroupChoices, onChangeCheck, prefix = undefined}) => {
-  const namePrefix = prefix ? `${prefix}.` : '';
-  const [{onChange: onChangeFormik, ...fieldProps}, , {setValue}] = useField(
-    `${namePrefix}objectsApiGroup`
-  );
+const ObjectsAPIGroup = ({
+  apiGroupChoices,
+  onChangeCheck,
+  apiGroupName = 'objectsApiGroup',
+  prefix = undefined,
+}) => {
+  const [{onChange: onChangeFormik, ...fieldProps}, , {setValue}] = useField(apiGroupName);
   const {setValues} = useFormikContext();
   const {value} = fieldProps;
 
@@ -34,7 +36,7 @@ const ObjectsAPIGroup = ({apiGroupChoices, onChangeCheck, prefix = undefined}) =
   return (
     <FormRow>
       <Field
-        name={`${namePrefix}objectsApiGroup`}
+        name={apiGroupName}
         required
         label={
           <FormattedMessage
@@ -51,7 +53,7 @@ const ObjectsAPIGroup = ({apiGroupChoices, onChangeCheck, prefix = undefined}) =
         noManageChildProps
       >
         <ReactSelect
-          name={`${namePrefix}objectsApiGroup`}
+          name={apiGroupName}
           options={options}
           required
           onChange={selectedOption => {