From 6a7f4d19af4bc8833b85aff4738af9a08788a099 Mon Sep 17 00:00:00 2001
From: Steven Bal <steven@maykinmedia.nl>
Date: Tue, 29 Oct 2024 10:39:21 +0100
Subject: [PATCH] :sparkles: [#4693] Add copy button for Objects API prefill
 config

that allows the user to copy the configuration used by the Form's registration backend
---
 .../variables/VariablesEditor.stories.js      | 93 +++++++++++++++++++
 .../variables/prefill/ObjectsAPIFields.js     | 40 ++++++++
 2 files changed, 133 insertions(+)

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
index 6ce83969c2..d69956899d 100644
--- a/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js
+++ b/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js
@@ -626,6 +626,99 @@ export const ConfigurePrefillObjectsAPI = {
   },
 };
 
+export const ConfigurePrefillObjectsAPIWithCopyButton = {
+  args: {
+    registrationBackends: [
+      {
+        backend: 'objects_api',
+        key: 'objects_api_1',
+        name: 'Example Objects API reg.',
+        options: {
+          version: 2,
+          objectsApiGroup: 1,
+          objecttype: '2c77babf-a967-4057-9969-0200320d23f1',
+          objecttypeVersion: 2,
+          variablesMapping: [
+            {
+              variableKey: 'formioComponent',
+              targetPath: ['path', 'to.the', 'target'],
+            },
+            {
+              variableKey: 'userDefined',
+              targetPath: ['other', 'path'],
+            },
+          ],
+        },
+      },
+      {
+        backend: 'objects_api',
+        key: 'objects_api_2',
+        name: 'Other Objects API registration with a long name',
+        options: {
+          version: 2,
+          objectsApiGroup: 1,
+          objecttype: '209e0341-834d-4060-bd19-a3419d19ed74',
+          objecttypeVersion: 2,
+          variablesMapping: [
+            {
+              variableKey: 'formioComponent',
+              targetPath: ['path', 'to.the', 'target'],
+            },
+          ],
+        },
+      },
+    ],
+  },
+  play: async ({canvasElement, step}) => {
+    const canvas = within(canvasElement);
+
+    await step('Open configuration modal', async () => {
+      const userDefinedVarsTab = await canvas.findByRole('tab', {name: 'Gebruikersvariabelen'});
+      expect(userDefinedVarsTab).toBeVisible();
+      await userEvent.click(userDefinedVarsTab);
+
+      // open modal for configuration
+      const editIcon = canvas.getByTitle('Prefill instellen');
+      await userEvent.click(editIcon);
+      expect(await screen.findByRole('dialog')).toBeVisible();
+    });
+
+    await step('Configure Objects API prefill with copy button', async () => {
+      window.confirm = () => true;
+      const modal = within(await screen.findByRole('dialog'));
+      const pluginDropdown = await screen.findByLabelText('Plugin');
+      expect(pluginDropdown).toBeVisible();
+      await userEvent.selectOptions(pluginDropdown, 'Objects API');
+
+      const copyButton = await modal.findByRole('button', {
+        name: 'Copy configuration from registration backend',
+      });
+      expect(copyButton).toBeVisible();
+      await userEvent.click(copyButton);
+
+      const modalForm = await screen.findByTestId('modal-form');
+      expect(modalForm).toBeVisible();
+      await waitFor(async () => {
+        expect(modalForm).toHaveFormValues({
+          'prefillOptions.objectsApiGroup': '1',
+          'prefillOptions.objecttypeUuid': '2c77babf-a967-4057-9969-0200320d23f1',
+          'prefillOptions.objecttypeVersion': '2',
+        });
+      });
+
+      // Wait until the API call to retrieve the prefillAttributes is done
+      await waitFor(async () => {
+        const prefillPropertySelect = await screen.findByLabelText(
+          'Selecteer een attribuut uit het objecttype'
+        );
+        expect(prefillPropertySelect).toBeVisible();
+        expect(prefillPropertySelect.options[1]).toHaveValue(serializeValue(['height']));
+        expect(prefillPropertySelect.options[2]).toHaveValue(serializeValue(['species']));
+      });
+    });
+  },
+};
+
 export const WithValidationErrors = {
   args: {
     variables: [
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
index e2aedbaf9c..93edc5b3dc 100644
--- a/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js
+++ b/src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js
@@ -10,6 +10,7 @@ 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';
@@ -64,9 +65,11 @@ const ObjectsAPIFields = ({errors}) => {
 
   const {
     plugins: {availablePrefillPlugins},
+    registrationBackends,
   } = useContext(FormContext);
   const objectsPlugin = availablePrefillPlugins.find(elem => elem.id === PLUGIN_ID);
 
+  const backend = registrationBackends.find(elem => elem.backend === 'objects_api');
   const {apiGroups} = objectsPlugin.configurationContext;
 
   const {
@@ -156,6 +159,43 @@ const ObjectsAPIFields = ({errors}) => {
             objectTypeFieldName="prefillOptions.objecttypeUuid"
           />
         </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}
       </Fieldset>
 
       <Fieldset