Merge pull request #4902 from open-formulieren/issue/4859-prefill-cop…

…y-button

"Fix" prefill copy button

src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js

@@ -32,6 +32,15 @@ const onApiGroupChange = prevValues => ({
   authAttributePath: undefined,
 });
 
+/**
+ * Callback to invoke when the Object Type changes - used to reset the dependent fields.
+ */
+const onObjectTypeChange = prevValues => ({
+  ...prevValues,
+  objecttypeVersion: undefined,
+  authAttributePath: undefined,
+});
+
 const LegacyConfigFields = ({apiGroupChoices}) => {
   const {
     values: {
@@ -68,6 +77,7 @@ const LegacyConfigFields = ({apiGroupChoices}) => {
                 defaultMessage="The registration result will be an object from the selected type."
               />
             }
+            onObjectTypeChange={onObjectTypeChange}
           />
           <ObjectTypeVersionSelect
             label={

src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsFormFields.stories.js

@@ -1,5 +1,6 @@
 import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
 import {Form, Formik} from 'formik';
+import selectEvent from 'react-select-event';
 
 import {
   FeatureFlagsDecorator,
@@ -80,57 +81,41 @@ export default {
 export const Default = {};
 
 export const SwitchToV2Empty = {
-  play: async ({canvasElement}) => {
+  play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
 
-    const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
-    await userEvent.click(v2Tab);
-
-    await waitFor(async () => {
+    await step('Activate v2 tab', async () => {
+      const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
+      await userEvent.click(v2Tab);
       // Close the confirmation modal
       await userEvent.click(
-        within(await canvas.findByRole('dialog')).getByRole('button', {
-          name: 'Accepteren',
-        })
+        within(await canvas.findByRole('dialog')).getByRole('button', {name: 'Accepteren'})
       );
-
-      // Expect v2Tab to be the selected tab
-      expect(v2Tab).toHaveAttribute('aria-selected', 'true');
+      // Wait for v2Tab to be the selected tab
+      await waitFor(() => {
+        expect(v2Tab).toHaveAttribute('aria-selected', 'true');
+      });
     });
 
     const groupSelect = canvas.getByLabelText('API-groep');
     await rsSelect(groupSelect, 'Objects API group 1');
 
-    const testForm = await canvas.findByTestId('test-form');
+    const objectTypeSelect = canvas.getByLabelText('Objecttype');
     await waitFor(() => {
-      expect(testForm).toHaveFormValues({
-        objecttype: '2c77babf-a967-4057-9969-0200320d23f1',
-        objecttypeVersion: '2',
-      });
+      expect(objectTypeSelect).toBeVisible();
     });
-    expect(canvas.getByText('Tree (open)')).toBeVisible();
-    expect(canvas.getByText('2 (draft)')).toBeVisible();
-
-    const v1Tab = canvas.getByRole('tab', {name: 'Verouderd (sjabloon)'});
-    await userEvent.click(v1Tab);
+    await rsSelect(objectTypeSelect, 'Tree (open)');
 
-    await waitFor(async () => {
-      // Close the confirmation modal
-      await userEvent.click(
-        within(await canvas.findByRole('dialog')).getByRole('button', {
-          name: 'Accepteren',
-        })
-      );
-
-      // Expect v1Tab to be the selected tab
-      expect(v1Tab).toHaveAttribute('aria-selected', 'true');
+    const objectTypeVersionSelect = canvas.getByLabelText('Versie');
+    await waitFor(() => {
+      expect(objectTypeVersionSelect).toBeVisible();
     });
+    await rsSelect(objectTypeVersionSelect, '2 (draft)');
 
-    await waitFor(() => {
-      expect(testForm).toHaveFormValues({
-        objecttype: '2c77babf-a967-4057-9969-0200320d23f1',
-        objecttypeVersion: '2',
-      });
+    const testForm = await canvas.findByTestId('test-form');
+    expect(testForm).toHaveFormValues({
+      objecttype: '2c77babf-a967-4057-9969-0200320d23f1',
+      objecttypeVersion: '2',
     });
   },
 };
@@ -206,53 +191,27 @@ export const SwitchToV2NonExisting = {
       objecttypeVersion: 1,
     },
   },
-  play: async ({canvasElement}) => {
+  play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
 
-    const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
-    await userEvent.click(v2Tab);
-
-    await waitFor(async () => {
+    await step('Activate v2 tab', async () => {
+      const v2Tab = canvas.getByRole('tab', {name: 'Variabelekoppelingen'});
+      await userEvent.click(v2Tab);
       // Close the confirmation modal
       await userEvent.click(
-        within(await canvas.findByRole('dialog')).getByRole('button', {
-          name: 'Accepteren',
-        })
+        within(await canvas.findByRole('dialog')).getByRole('button', {name: 'Accepteren'})
       );
-
-      // Expect v2Tab to be the selected tab
-      expect(v2Tab).toHaveAttribute('aria-selected', 'true');
-    });
-
-    const testForm = await canvas.findByTestId('test-form');
-    await waitFor(() => {
-      expect(testForm).toHaveFormValues({
-        objecttype: '2c77babf-a967-4057-9969-0200320d23f1',
-        objecttypeVersion: '2',
+      // Wait for v2Tab to be the selected tab
+      await waitFor(() => {
+        expect(v2Tab).toHaveAttribute('aria-selected', 'true');
       });
     });
-    expect(canvas.getByText('Tree (open)')).toBeVisible();
-    expect(canvas.getByText('2 (draft)')).toBeVisible();
-
-    const v1Tab = canvas.getByRole('tab', {name: 'Verouderd (sjabloon)'});
-    await userEvent.click(v1Tab);
-
-    await waitFor(async () => {
-      // Close the confirmation modal
-      await userEvent.click(
-        within(await canvas.findByRole('dialog')).getByRole('button', {
-          name: 'Accepteren',
-        })
-      );
-
-      // Expect v2Tab to be the selected tab
-      expect(v1Tab).toHaveAttribute('aria-selected', 'true');
-    });
 
+    const testForm = await canvas.findByTestId('test-form');
     await waitFor(() => {
       expect(testForm).toHaveFormValues({
-        objecttype: '2c77babf-a967-4057-9969-0200320d23f1',
-        objecttypeVersion: '2',
+        objecttype: '',
+        objecttypeVersion: '',
       });
     });
   },

src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js

@@ -31,6 +31,15 @@ const onApiGroupChange = prevValues => ({
   variablesMapping: [],
 });
 
+/**
+ * Callback to invoke when the Object Type changes - used to reset the dependent fields.
+ */
+const onObjectTypeChange = prevValues => ({
+  ...prevValues,
+  objecttypeVersion: undefined,
+  authAttributePath: undefined,
+});
+
 const V2ConfigFields = ({apiGroupChoices}) => {
   const {
     values: {
@@ -96,6 +105,7 @@ const V2ConfigFields = ({apiGroupChoices}) => {
               setFieldValue('variablesMapping', []);
               return true;
             }}
+            onObjectTypeChange={onObjectTypeChange}
           />
         </ErrorBoundary>
 

src/openforms/js/components/admin/form_design/registrations/objectsapi/mocks.js

@@ -6,9 +6,12 @@ export const mockObjecttypesGet = objecttypes =>
   http.get(`${API_BASE_URL}/api/v2/objects-api/object-types`, () => HttpResponse.json(objecttypes));
 
 export const mockObjecttypeVersionsGet = versions =>
-  http.get(`${API_BASE_URL}/api/v2/objects-api/object-types/:uuid/versions`, () =>
-    HttpResponse.json(versions)
-  );
+  http.get(`${API_BASE_URL}/api/v2/objects-api/object-types/:uuid/versions`, ({params}) => {
+    if (params.uuid === 'a-non-existing-uuid') {
+      return HttpResponse.json([]);
+    }
+    return HttpResponse.json(versions);
+  });
 
 export const mockObjecttypesError = () =>
   http.all(`${API_BASE_URL}/api/v2/*`, () =>

src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js

@@ -192,6 +192,20 @@ export default {
                 {targetPath: ['species'], jsonSchema: {type: 'string', description: 'Species'}},
               ],
             },
+            '209e0341-834d-4060-bd19-a3419d19ed74': {
+              1: [
+                {
+                  targetPath: ['path', 'to.the', 'target'],
+                  jsonSchema: {type: 'string', description: 'Path to the target'},
+                },
+              ],
+              2: [
+                {
+                  targetPath: ['path', 'to.the', 'target'],
+                  jsonSchema: {type: 'string', description: 'Path to the target'},
+                },
+              ],
+            },
           }),
         ],
         objectsAPIPrefill: [
@@ -210,6 +224,13 @@ export default {
               namePlural: 'Persons',
               dataClassification: 'open',
             },
+            {
+              url: 'https://objecttypen.nl/api/v1/objecttypes/209e0341-834d-4060-bd19-a3419d19ed74',
+              uuid: '209e0341-834d-4060-bd19-a3419d19ed74',
+              name: 'Other objecttype',
+              namePlural: 'Other objecttypes',
+              dataClassification: 'open',
+            },
           ]),
           mockObjecttypeVersionsGet([
             {version: 1, status: 'published'},
@@ -711,6 +732,7 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = {
           objectsApiGroup: 1,
           objecttype: '209e0341-834d-4060-bd19-a3419d19ed74',
           objecttypeVersion: 2,
+          authAttributePath: ['path', 'to', 'bsn'],
           variablesMapping: [
             {
               variableKey: 'formioComponent',
@@ -751,7 +773,7 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = {
       expect(copyButton).toBeDisabled();
       const copyDropdown = await modal.findByLabelText('Registratie-instellingen overnemen');
       expect(copyDropdown).toBeVisible();
-      await rsSelect(copyDropdown, 'Example Objects API reg.');
+      await rsSelect(copyDropdown, 'Other Objects API registration with a long name');
 
       expect(copyButton).toBeVisible();
       expect(copyButton).not.toBeDisabled();
@@ -764,9 +786,7 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = {
 
       const modalForm = await canvas.findByTestId('modal-form');
       expect(modalForm).toBeVisible();
-      const propertyDropdowns = await modal.findAllByLabelText(
-        'Selecteer een attribuut uit het objecttype'
-      );
+      await modal.findAllByLabelText('Selecteer een attribuut uit het objecttype');
 
       // Wait until the API call to retrieve the prefillAttributes is done
       await modal.findByText('path > to > bsn', undefined, {timeout: 2000});
@@ -775,11 +795,10 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = {
         () => {
           expect(modalForm).toHaveFormValues({
             'options.objectsApiGroup': '1',
-            'options.objecttypeUuid': '2c77babf-a967-4057-9969-0200320d23f1',
+            'options.objecttypeUuid': '209e0341-834d-4060-bd19-a3419d19ed74',
             'options.objecttypeVersion': '2',
             'options.authAttributePath': JSON.stringify(['path', 'to', 'bsn']),
-            'options.variablesMapping.0.targetPath': serializeValue(['height']),
-            'options.variablesMapping.1.targetPath': serializeValue(['species']),
+            'options.variablesMapping.0.targetPath': serializeValue(['path', 'to.the', 'target']),
           });
         },
         {timeout: 5000}

src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js

@@ -1,6 +1,5 @@
 import {Formik} from 'formik';
 import PropTypes from 'prop-types';
-import {useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import {SubmitAction} from 'components/admin/forms/ActionButton';
@@ -51,19 +50,10 @@ const PrefillConfigurationForm = ({
       }}
     >
       {({handleSubmit, values}) => {
-        const PluginFormComponent =
-          PLUGIN_COMPONENT_MAPPING[values.plugin]?.component ??
-          PLUGIN_COMPONENT_MAPPING.default.component;
-        const ToggleCopyComponent =
-          PLUGIN_COMPONENT_MAPPING[values.plugin]?.toggleCopyComponent ??
-          PLUGIN_COMPONENT_MAPPING.default.toggleCopyComponent;
-
-        const [showCopyButton, setShowCopyButton] = useState(false);
-
-        const handleToggle = event => {
-          event.preventDefault();
-          setShowCopyButton(!showCopyButton);
-        };
+        const pluginConfiguration =
+          PLUGIN_COMPONENT_MAPPING[values.plugin] ?? PLUGIN_COMPONENT_MAPPING.default;
+        const {component: PluginFormComponent, pluginFieldExtra: PluginFieldExtra = null} =
+          pluginConfiguration;
 
         return (
           <>
@@ -80,22 +70,17 @@ const PrefillConfigurationForm = ({
                 >
                   <>
                     <PluginField />
-                    {ToggleCopyComponent ? (
+                    {PluginFieldExtra && (
                       <div style={{marginLeft: '10px', marginTop: '5px'}}>
-                        <ToggleCopyComponent handleToggle={handleToggle} />
+                        <PluginFieldExtra />
                       </div>
-                    ) : null}
+                    )}
                   </>
                 </Field>
               </FormRow>
             </Fieldset>
 
-            <PluginFormComponent
-              {...(ToggleCopyComponent && {
-                showCopyButton: showCopyButton,
-                setShowCopyButton: setShowCopyButton,
-              })}
-            />
+            <PluginFormComponent />
 
             <SubmitRow>
               <SubmitAction

src/openforms/js/components/admin/form_design/variables/prefill/constants.js

@@ -3,8 +3,14 @@ import ObjectsAPIFields from './objects_api/ObjectsAPIFields';
 import ToggleCopyButton from './objects_api/ToggleCopyButton';
 
 const PLUGIN_COMPONENT_MAPPING = {
-  objects_api: {component: ObjectsAPIFields, toggleCopyComponent: ToggleCopyButton},
-  default: {component: DefaultFields, toggleCopyComponent: null},
+  objects_api: {
+    component: ObjectsAPIFields,
+    pluginFieldExtra: ToggleCopyButton,
+  },
+  default: {
+    component: DefaultFields,
+    pluginFieldExtra: null,
+  },
 };
 
 export default PLUGIN_COMPONENT_MAPPING;