✨ [#4693] Add copy button for Objects API prefill config

that allows the user to copy the configuration used by the Form's registration backend

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

@@ -626,6 +626,96 @@ 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 () => {
+      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);
+
+      // Wait until the API call to retrieve the prefillAttributes is done
+      await waitFor(async () => {
+        const apiGroup = await modal.findByLabelText('API-groep');
+        expect(apiGroup).toHaveValue(1);
+
+        const objecttype = modal.getByRole('input', {name: 'prefillOptions.objecttypeUuid'});
+        expect(objecttype).toHaveValue('2c77babf-a967-4057-9969-0200320d23f1');
+
+        const version = await modal.findByLabelText('Versie');
+        expect(version).toHaveValue('2');
+
+        const prefillPropertySelect = await screen.findByLabelText(
+          'Selecteer een attribuut uit het objecttype'
+        );
+        expect(prefillPropertySelect).toBeVisible();
+        expect(prefillPropertySelect).toHaveValue(serializeValue(['height']));
+      });
+    });
+  },
+};
+
 export const WithValidationErrors = {
   args: {
     variables: [

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,30 @@ const ObjectsAPIFields = ({errors}) => {
             objectTypeFieldName="prefillOptions.objecttypeUuid"
           />
         </ErrorBoundary>
+
+        {backend ? (
+          <button
+            type="button"
+            className="button"
+            onClick={e => {
+              e.preventDefault();
+              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