👌 [#4693] Process PR feedback

* remove unnecessary prefill prefix from options in javascript code * remove trailing comments * use variable for computed name in VariableMapping * add dropdown to select a registration backend instead of always picking first * also copy variablesmapping when clicking copy button
open-formulieren · Oct 29, 2024 · 0b8256e · 0b8256e
1 parent f9fda81
commit 0b8256e
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 74 deletions.
diff --git a/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js b/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js
@@ -1,4 +1,5 @@
 import {expect, fn, screen, userEvent, waitFor, within} from '@storybook/test';
+import selectEvent from 'react-select-event';
 
 import {
   mockObjectsAPIPrefillPropertiesGet,
@@ -641,11 +642,11 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = {
           variablesMapping: [
             {
               variableKey: 'formioComponent',
-              targetPath: ['path', 'to.the', 'target'],
+              targetPath: ['height'],
             },
             {
               variableKey: 'userDefined',
-              targetPath: ['other', 'path'],
+              targetPath: ['species'],
             },
           ],
         },
@@ -690,30 +691,33 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = {
       expect(pluginDropdown).toBeVisible();
       await userEvent.selectOptions(pluginDropdown, 'Objects API');
 
+      const copyDropdown = await modal.findByLabelText(
+        'Copy configuration from registration backend'
+      );
+      expect(copyDropdown).toBeVisible();
+      await selectEvent.select(copyDropdown, 'Example Objects API reg.');
+
       const copyButton = await modal.findByRole('button', {
-        name: 'Copy configuration from registration backend',
+        name: 'Copy',
       });
       expect(copyButton).toBeVisible();
       await userEvent.click(copyButton);
 
       const modalForm = await screen.findByTestId('modal-form');
       expect(modalForm).toBeVisible();
+      // Wait until the API call to retrieve the prefillAttributes is done
       await waitFor(async () => {
         expect(modalForm).toHaveFormValues({
-          'prefillOptions.objectsApiGroup': '1',
-          'prefillOptions.objecttypeUuid': '2c77babf-a967-4057-9969-0200320d23f1',
-          'prefillOptions.objecttypeVersion': '2',
+          'options.objectsApiGroup': '1',
+          'options.objecttypeUuid': '2c77babf-a967-4057-9969-0200320d23f1',
+          'options.objecttypeVersion': '2',
         });
-      });
 
-      // Wait until the API call to retrieve the prefillAttributes is done
-      await waitFor(async () => {
-        const prefillPropertySelect = await screen.findByLabelText(
+        const propertyDropdowns = await modal.findAllByLabelText(
           'Selecteer een attribuut uit het objecttype'
         );
-        expect(prefillPropertySelect).toBeVisible();
-        expect(prefillPropertySelect.options[1]).toHaveValue(serializeValue(['height']));
-        expect(prefillPropertySelect.options[2]).toHaveValue(serializeValue(['species']));
+        expect(propertyDropdowns[0]).toHaveValue(serializeValue(['height']));
+        expect(propertyDropdowns[1]).toHaveValue(serializeValue(['species']));
       });
     });
   },

diff --git a/src/openforms/js/components/admin/form_design/variables/VariablesTable.js b/src/openforms/js/components/admin/form_design/variables/VariablesTable.js
@@ -162,12 +162,12 @@ const EditableVariableRow = ({index, variable, onDelete, onChange, onFieldChange
           identifierRole={variable.prefillIdentifierRole}
           errors={variable.errors}
           options={variable.prefillOptions}
-          onChange={({plugin, attribute, identifierRole, prefillOptions}) =>
+          onChange={({plugin, attribute, identifierRole, options}) =>
             onChange(variable.key, '', {
               prefillPlugin: plugin,
               prefillAttribute: attribute,
               prefillIdentifierRole: identifierRole,
-              prefillOptions: prefillOptions,
+              prefillOptions: options,
             })
           }
         />

diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js b/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js
@@ -3,17 +3,17 @@
  *
  * Most other plugins can be configured with the generic form in `./DefaultFields`.
  */
-import {useFormikContext} from 'formik';
+import {useField, useFormikContext} from 'formik';
 import PropTypes from 'prop-types';
 import {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import useAsync from 'react-use/esm/useAsync';
 
 import {FormContext} from 'components/admin/form_design/Context';
-import ButtonContainer from 'components/admin/forms/ButtonContainer';
 import Field from 'components/admin/forms/Field';
 import Fieldset from 'components/admin/forms/Fieldset';
 import FormRow from 'components/admin/forms/FormRow';
+import ReactSelect from 'components/admin/forms/ReactSelect';
 import {LOADING_OPTION} from 'components/admin/forms/Select';
 import VariableMapping from 'components/admin/forms/VariableMapping';
 import {
@@ -34,8 +34,8 @@ const PLUGIN_ID = 'objects_api';
  */
 const onApiGroupChange = prevValues => ({
   ...prevValues,
-  prefillOptions: {
-    ...prevValues.prefillOptions,
+  options: {
+    ...prevValues.options,
     objecttypeUuid: '',
     objecttypeVersion: undefined,
     variablesMapping: [],
@@ -53,11 +53,91 @@ const getProperties = async (objectsApiGroup, objecttypeUuid, objecttypeVersion)
   return response.data.map(property => [property.targetPath, property.targetPath.join(' > ')]);
 };
 
+const CopyConfigurationFromRegistrationBackend = ({backends}) => {
+  const intl = useIntl();
+  const name = 'copyConfigurationFromBackend';
+  const {setFieldValue} = useFormikContext();
+  const options = backends.map(elem => ({value: elem.key, label: elem.name}));
+  const [fieldProps] = useField(name);
+  const {value} = fieldProps;
+  const selectedBackend = backends.find(elem => elem.key === value);
+  return (
+    <FormRow>
+      <Field
+        name={name}
+        label={
+          <FormattedMessage
+            description="Copy Objects API prefill configuration from registration backend label"
+            defaultMessage="Copy configuration from registration backend"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="Copy Objects API prefill configuration from registration backend help text"
+            defaultMessage="Select a registration backend and click the button to copy the configuration."
+          />
+        }
+        noManageChildProps
+      >
+        <ReactSelect
+          name={name}
+          options={options}
+          onChange={selectedOption => {
+            setFieldValue(name, selectedOption.value);
+          }}
+          maxMenuHeight="16em"
+          menuPlacement="bottom"
+        />
+
+        <button
+          type="button"
+          className="button"
+          onClick={e => {
+            e.preventDefault();
+            const confirmed = window.confirm(
+              intl.formatMessage({
+                description: `Objects API prefill configuration: warning message
+              when copying the config from registration backend`,
+                defaultMessage: `Copying the configuration from the registration
+            backend will clear the existing configuration. Are you sure you want to continue?`,
+              })
+            );
+            if (confirmed) {
+              setFieldValue('options.objectsApiGroup', selectedBackend.options.objectsApiGroup);
+              setFieldValue('options.objecttypeUuid', selectedBackend.options.objecttype);
+              setFieldValue('options.objecttypeVersion', selectedBackend.options.objecttypeVersion);
+              setFieldValue('options.variablesMapping', selectedBackend.options.variablesMapping);
+              // TODO fix this
+              // setValues(prevValues => ({
+              //   ...prevValues,
+              //   'options.objectsApiGroup': selectedBackend.options.objectsApiGroup,
+              //   'options.objecttypeUuid': selectedBackend.options.objecttype,
+              //   'options.objecttypeVersion': selectedBackend.options.objecttypeVersion,
+              // }));
+            }
+          }}
+          // admin style overrides...
+          style={{
+            marginLeft: '1em',
+            paddingInline: '15px',
+            paddingBlock: '10px',
+          }}
+        >
+          <FormattedMessage
+            description="Copy Objects API prefill configuration from registration backend button"
+            defaultMessage="Copy"
+          />
+        </button>
+      </Field>
+    </FormRow>
+  );
+};
+
 const ObjectsAPIFields = ({errors}) => {
   const {
     values: {
       plugin,
-      prefillOptions: {objecttypeUuid, objecttypeVersion, objectsApiGroup, variablesMapping},
+      options: {objecttypeUuid, objecttypeVersion, objectsApiGroup, variablesMapping},
     },
     setFieldValue,
   } = useFormikContext();
@@ -69,7 +149,7 @@ const ObjectsAPIFields = ({errors}) => {
   } = useContext(FormContext);
   const objectsPlugin = availablePrefillPlugins.find(elem => elem.id === PLUGIN_ID);
 
-  const backend = registrationBackends.find(elem => elem.backend === 'objects_api');
+  const backends = registrationBackends.filter(elem => elem.backend === 'objects_api');
   const {apiGroups} = objectsPlugin.configurationContext;
 
   const {
@@ -105,10 +185,10 @@ const ObjectsAPIFields = ({errors}) => {
               })
             );
             if (!confirmSwitch) return false;
-            setFieldValue('prefillOptions.variablesMapping', []);
+            setFieldValue('options.variablesMapping', []);
             return true;
           }}
-          name="prefillOptions.objectsApiGroup"
+          name="options.objectsApiGroup"
           onApiGroupChange={onApiGroupChange}
           selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
         />
@@ -124,9 +204,9 @@ const ObjectsAPIFields = ({errors}) => {
           }
         >
           <ObjectTypeSelect
-            name="prefillOptions.objecttypeUuid"
-            apiGroupFieldName="prefillOptions.objectsApiGroup"
-            versionFieldName="prefillOptions.objecttypeVersion"
+            name="options.objecttypeUuid"
+            apiGroupFieldName="options.objectsApiGroup"
+            versionFieldName="options.objecttypeVersion"
             selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
             onChangeCheck={() => {
               if (variablesMapping.length === 0) return true;
@@ -139,7 +219,7 @@ const ObjectsAPIFields = ({errors}) => {
                 })
               );
               if (!confirmSwitch) return false;
-              setFieldValue('prefillOptions.variablesMapping', []);
+              setFieldValue('options.variablesMapping', []);
               return true;
             }}
           />
@@ -156,49 +236,14 @@ const ObjectsAPIFields = ({errors}) => {
           }
         >
           <ObjectTypeVersionSelect
-            name="prefillOptions.objecttypeVersion"
-            apiGroupFieldName="prefillOptions.objectsApiGroup"
-            objectTypeFieldName="prefillOptions.objecttypeUuid"
+            name="options.objecttypeVersion"
+            apiGroupFieldName="options.objectsApiGroup"
+            objectTypeFieldName="options.objecttypeUuid"
             selectProps={{maxMenuHeight: '16em', menuPlacement: 'bottom'}}
           />
         </ErrorBoundary>
 
-        {backend ? (
-          <button
-            type="button"
-            className="button"
-            onClick={e => {
-              e.preventDefault();
-              const confirmed = window.confirm(
-                intl.formatMessage({
-                  description: `Objects API prefill configuration: warning message
-                    when copying the config from registration backend`,
-                  defaultMessage: `Copying the configuration from the registration
-                  backend will clear the existing configuration. Are you sure you want to continue?`,
-                })
-              );
-              if (confirmed) {
-                setFieldValue('prefillOptions.objectsApiGroup', backend.options.objectsApiGroup);
-                setFieldValue('prefillOptions.objecttypeUuid', backend.options.objecttype);
-                setFieldValue(
-                  'prefillOptions.objecttypeVersion',
-                  backend.options.objecttypeVersion
-                );
-              }
-            }}
-            // admin style overrides...
-            style={{
-              marginTop: '2em',
-              paddingInline: '15px',
-              paddingBlock: '10px',
-            }}
-          >
-            <FormattedMessage
-              description="Copy Objects API prefill configuration from registration backend"
-              defaultMessage="Copy configuration from registration backend"
-            />
-          </button>
-        ) : null}
+        {backends ? <CopyConfigurationFromRegistrationBackend backends={backends} /> : null}
       </Fieldset>
 
       <Fieldset
@@ -211,7 +256,7 @@ const ObjectsAPIFields = ({errors}) => {
       >
         <FormRow>
           <VariableMapping
-            name="prefillOptions.variablesMapping"
+            name="options.variablesMapping"
             loading={loading}
             directionIcon={<FAIcon icon="arrow-left-long" aria-hidden="true" />}
             variableName="variableKey"

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
@@ -23,7 +23,7 @@ const PrefillConfigurationForm = ({
   attribute = '',
   identifierRole = 'main',
   // TODO: find a better way to specify this based on the selected plugin
-  prefillOptions = {},
+  options = {},
   errors,
 }) => {
   const defaults = {
@@ -32,14 +32,14 @@ const PrefillConfigurationForm = ({
     objecttypeVersion: null,
     variablesMapping: [],
   };
-  prefillOptions = {...defaults, ...prefillOptions};
+  options = {...defaults, ...options};
   return (
     <Formik
       initialValues={{
         plugin,
         attribute,
         identifierRole,
-        prefillOptions,
+        options,
       }}
       onSubmit={(values, actions) => {
         onSubmit(values);

diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/PrefillSummary.js b/src/openforms/js/components/admin/form_design/variables/prefill/PrefillSummary.js
@@ -91,7 +91,7 @@ const PrefillSummary = ({
               plugin={plugin}
               attribute={attribute}
               identifierRole={identifierRole}
-              prefillOptions={options}
+              options={options}
               onSubmit={values => {
                 onChange(values);
                 setModalOpen(false);

diff --git a/src/openforms/js/components/admin/forms/ReactSelect.js b/src/openforms/js/components/admin/forms/ReactSelect.js
@@ -119,7 +119,6 @@ const SelectWithFormik = ({name, options, className, ...props}) => {
         }
       }}
       {...props}
-      // maxMenuHeight=""
     />
   );
 };

diff --git a/src/openforms/js/components/admin/forms/VariableMapping.js b/src/openforms/js/components/admin/forms/VariableMapping.js
@@ -51,6 +51,7 @@ const VariableMappingRow = ({
   const intl = useIntl();
   const {getFieldProps, setFieldValue} = useFormikContext();
 
+  const fullVariableName = `${prefix}.${variableName}`;
   const fullPropertyName = `${prefix}.${propertyName}`;
   const {value: propertyValue, ...propertyProps} = getFieldProps(fullPropertyName);
   const serializedPropertyValue = serializeValue(propertyValue);
@@ -67,10 +68,10 @@ const VariableMappingRow = ({
   return (
     <tr>
       <td>
-        <Field name={`${prefix}.${variableName}`}>
+        <Field name={fullVariableName}>
           <VariableSelection
             includeStaticVariables={includeStaticVariables}
-            {...getFieldProps(`${prefix}.${variableName}`)}
+            {...getFieldProps(fullVariableName)}
             aria-label={intl.formatMessage({
               description: 'Accessible label for (form) variable dropdown',
               defaultMessage: 'Form variable',