[#4267] Auto select Objects API group if only one available

open-formulieren · Jun 19, 2024 · c13808f · c13808f
1 parent 39c46dc
commit c13808f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 11 deletions.
diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {useIntl} from 'react-intl';
 
 import {CustomFieldTemplate} from 'components/admin/RJSFWrapper';
@@ -32,6 +32,14 @@ const LegacyConfigFields = ({index, name, schema, formData, onChange}) => {
     return rawErrors ? getErrorMarkup(rawErrors) : null;
   };
 
+  useEffect(() => {
+    if (schema.properties.objectsApiGroup.enum.length === 1) {
+      onChange({
+        target: {name: 'objectsApiGroup', value: schema.properties.objectsApiGroup.enum[0]},
+      });
+    }
+  }, []);
+
   return (
     <>
       <CustomFieldTemplate
@@ -44,17 +52,17 @@ const LegacyConfigFields = ({index, name, schema, formData, onChange}) => {
           description: 'Objects API group selection',
           defaultMessage: 'Which Objects API group to use.',
         })}
-        rawErrors={null}
-        errors={null}
+        rawErrors={getFieldErrors(name, index, validationErrors, 'objectsApiGroup')}
+        errors={buildErrorsComponent('objectsApiGroup')}
         displayLabel
         required
       >
         <Select
           id="root_objectsApiGroup"
           name="objectsApiGroup"
           choices={getChoicesFromSchema(
-            schema?.properties?.objectsApiGroup?.enum,
-            schema?.properties?.objectsApiGroup?.enumNames
+            schema.properties.objectsApiGroup.enum,
+            schema.properties.objectsApiGroup.enumNames
           )}
           value={objectsApiGroup}
           onChange={onChange}

diff --git a/...ponents/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js b/...ponents/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js
@@ -10,10 +10,10 @@ import ObjectsApiOptionsFormFields from './ObjectsApiOptionsFormFields';
 import {mockObjecttypeVersionsGet, mockObjecttypesError, mockObjecttypesGet} from './mocks';
 
 // WARNING
-// The `render` function will mutate args, meaning interactions can't be run twice
+// The `render*` functions will mutate args, meaning interactions can't be run twice
 // Be sure to refresh the page and remove the args in the query parameters
 
-const render = ({index, label, name}) => {
+const renderMultipleGroups = ({index, label, name}) => {
   const [{formData}, updateArgs] = useArgs();
   const onChange = newValues => {
     updateArgs({formData: newValues});
@@ -45,10 +45,42 @@ const render = ({index, label, name}) => {
   );
 };
 
+const renderSingleGroup = ({index, label, name}) => {
+  const [{formData}, updateArgs] = useArgs();
+  const onChange = newValues => {
+    updateArgs({formData: newValues});
+  };
+
+  return (
+    <Fieldset>
+      <FormRow>
+        <Field name={name} label={label}>
+          <ObjectsApiOptionsFormFields
+            index={index}
+            name={name}
+            schema={{
+              type: 'object',
+              properties: {
+                objectsApiGroup: {
+                  type: 'integer',
+                  enum: [1],
+                  enumNames: ['Single Objects API group'],
+                },
+              },
+            }}
+            formData={formData}
+            onChange={onChange}
+          />
+        </Field>
+      </FormRow>
+    </Fieldset>
+  );
+};
+
 export default {
   title: 'Form design/Registration/Objects API',
   decorators: [FormDecorator],
-  render,
+  render: renderMultipleGroups,
   args: {
     formData: {},
   },
@@ -183,6 +215,19 @@ export const SwitchToV2NonExisting = {
   },
 };
 
+export const AutoSelectApiGroup = {
+  render: renderSingleGroup,
+  play: async ({canvasElement}) => {
+    window.confirm = fn(() => true);
+    const canvas = within(canvasElement);
+
+    const v2Tab = canvas.getByRole('tab', {selected: false});
+    await userEvent.click(v2Tab);
+
+    expect(canvas.getByLabelText('Objects API group')).toHaveValue('1');
+  },
+};
+
 export const APIFetchError = {
   parameters: {
     msw: {

diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useContext} from 'react';
+import React, {useContext, useEffect} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import {CustomFieldTemplate} from 'components/admin/RJSFWrapper';
@@ -49,6 +49,14 @@ const V2ConfigFields = ({index, name, schema, formData, onChange}) => {
     );
   }
 
+  useEffect(() => {
+    if (schema.properties.objectsApiGroup.enum.length === 1) {
+      onChange({
+        target: {name: 'objectsApiGroup', value: schema.properties.objectsApiGroup.enum[0]},
+      });
+    }
+  }, []);
+
   return (
     <>
       <CustomFieldTemplate
@@ -61,8 +69,8 @@ const V2ConfigFields = ({index, name, schema, formData, onChange}) => {
           description: 'Objects API group selection',
           defaultMessage: 'Which Objects API group to use.',
         })}
-        rawErrors={null}
-        errors={null}
+        rawErrors={getFieldErrors(name, index, validationErrors, 'objectsApiGroup')}
+        errors={buildErrorsComponent('objectsApiGroup')}
         displayLabel
       >
         <Select