Merge pull request #5113 from open-formulieren/feature/4990-improve-r…

…egistration-variables-table-in-admin Change when plugin fieldset is hidden in registration variables table
open-formulieren · Feb 21, 2025 · f46fe6e · f46fe6e
2 parents a4e2c38 + 1bb5d45
commit f46fe6e
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 2 deletions.
diff --git a/src/openforms/js/components/admin/form_design/variables/RegistrationVariables.js b/src/openforms/js/components/admin/form_design/variables/RegistrationVariables.js
@@ -45,6 +45,12 @@ const RegistrationVariables = ({onFieldChange}) => {
       plugin.pluginVariables.length
   );
 
+  // A plugin fieldset will not be included if there is only one registration backend configured,
+  // or if all configured backends are the same type
+  const hidePluginFieldset =
+    registrationBackends.length === 1 ||
+    new Set(registrationBackends.map(b => b.backend)).size === 1;
+
   const headColumns = (
     <>
       <HeadColumn content="" />
@@ -85,7 +91,7 @@ const RegistrationVariables = ({onFieldChange}) => {
           />
         );
 
-        if (registrationPluginsVariables.length === 1) return pluginVariables;
+        if (hidePluginFieldset) return pluginVariables;
 
         return (
           <Fieldset title={registrationPlugin.pluginVerboseName} key={index}>

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
@@ -371,7 +371,7 @@ export const WithObjectsAPIRegistrationBackends = {
     const pdfUrl = canvas.getByRole('cell', {name: 'pdf_url'});
     expect(pdfUrl).toBeVisible();
 
-    // With a single backend, the heading shouldn't display:
+    // With all backends of the same type, the heading shouldn't display
     const objectsApiTitle = canvas.queryByRole('heading', {name: 'Objects API registration'});
     expect(objectsApiTitle).toBeNull();
   },
@@ -462,6 +462,23 @@ export const FilesMappingAndObjectAPIRegistration = {
       {
         pluginIdentifier: 'objects_api',
         pluginVerboseName: 'Objects API registration',
+        pluginVariables: [
+          {
+            form: null,
+            formDefinition: null,
+            name: 'PDF Url',
+            key: 'pdf_url',
+            source: '',
+            prefillPlugin: '',
+            prefillAttribute: '',
+            prefillIdentifierRole: 'main',
+            dataType: 'string',
+            dataFormat: '',
+            isSensitiveData: false,
+            serviceFetchConfiguration: undefined,
+            initialValue: '',
+          },
+        ],
       },
     ],
   },
@@ -652,6 +669,21 @@ export const WithObjectsAPIAndTestRegistrationBackends = {
       ],
     },
   },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const registrationTab = canvas.getByRole('tab', {name: 'Registratie'});
+    await userEvent.click(registrationTab);
+
+    // With multiple backends configured, and two of them introduce registration variables,
+    // the plugin headings should be visible.
+    expect(canvas.getByRole('heading', {name: 'Objects API registration'})).toBeVisible();
+    expect(canvas.getByRole('heading', {name: 'Test plugin'})).toBeVisible();
+
+    // Navigate back to component tab for visual regression testing
+    const componentTab = canvas.getByRole('tab', {name: /Component/});
+    await componentTab.click(componentTab);
+  },
 };
 
 export const WithJSONDumpRegistrationBackend = {
@@ -1326,3 +1358,55 @@ export const AddressNLMappingSpecificTargetsDeriveAddress = {
     expect(streetNameSelect).not.toBeDisabled();
   },
 };
+
+export const TwoBackendsWhereOnlyOneIntroducesRegistrationVariables = {
+  args: {
+    registrationBackends: [
+      {
+        backend: 'objects_api',
+        key: 'objects_api_1',
+        name: 'Example Objects API reg.',
+        options: {},
+      },
+      {
+        backend: 'testPlugin',
+        key: 'test_backend',
+        name: 'Example test registration',
+        options: {},
+      },
+    ],
+    registrationPluginsVariables: [
+      {
+        pluginIdentifier: 'objects_api',
+        pluginVerboseName: 'Objects API registration',
+        pluginVariables: [
+          {
+            form: null,
+            formDefinition: null,
+            name: 'PDF Url',
+            key: 'pdf_url',
+            source: '',
+            prefillPlugin: '',
+            prefillAttribute: '',
+            prefillIdentifierRole: 'main',
+            dataType: 'string',
+            dataFormat: '',
+            isSensitiveData: false,
+            serviceFetchConfiguration: undefined,
+            initialValue: '',
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    const registrationTab = canvas.getByRole('tab', {name: 'Registratie'});
+    await userEvent.click(registrationTab);
+
+    // With multiple backends configured, but only one of them introduces registration variables,
+    // the plugin heading should be visible.
+    expect(canvas.getByRole('heading', {name: 'Objects API registration'})).toBeVisible();
+  },
+};