[#4267] Improve UI of V2 Objects API registrations form

package.json

@@ -56,6 +56,7 @@
     "react-formio": "^4.3.0",
     "react-intl": "^6.4.2",
     "react-modal": "^3.16.1",
+    "react-select": "^5.8.0",
     "react-tabs": "^6.0.2",
     "react-use": "^17.2.4",
     "state-pool": "^0.7.1",
@@ -114,6 +115,7 @@
     "postcss": "^8.0.8",
     "postcss-loader": "^4.0.1",
     "prettier": "^3.3.0",
+    "react-select-event": "^5.5.1",
     "sass": "^1.32.12",
     "sass-loader": "^12.3.0",
     "semver": "^7.3.7",

src/openforms/forms/tests/e2e_tests/test_registration_backend_conf.py

@@ -238,9 +238,14 @@ def collect_requests(request):
                 await page.get_by_role(
                     "combobox", name="Select registration backend"
                 ).select_option(label="Objects API registration")
-                await page.get_by_label("Objects API group").select_option(
-                    label="Group 1"
-                )
+
+                group_dropdown = page.get_by_label("Objects API group")
+                await group_dropdown.focus()
+                await page.keyboard.press("ArrowDown")
+                option = page.get_by_text("Group 1", exact=True)
+                await option.scroll_into_view_if_needed()
+                await option.click()
+                await group_dropdown.blur()
 
             with phase("Configure upload component"):
                 await page.get_by_role("tab", name="Steps and fields").click()
@@ -254,9 +259,14 @@ def collect_requests(request):
                 await page.get_by_role(
                     "combobox", name="Select registration backend"
                 ).select_option(label="Objects API registration")
-                await page.get_by_label("Objects API group").select_option(
-                    label="Group 2"
-                )
+
+                group_dropdown = page.get_by_label("Objects API group")
+                await group_dropdown.focus()
+                await page.keyboard.press("ArrowDown")
+                option = page.get_by_text("Group 2", exact=True)
+                await option.scroll_into_view_if_needed()
+                await option.click()
+                await group_dropdown.blur()
 
             with phase("Reopen the upload component"):
                 await page.get_by_role("tab", name="Steps and fields").click()

src/openforms/js/compiled-lang/en.json

@@ -265,6 +265,12 @@
       "value": "Service fetch configuration"
     }
   ],
+  "27HfWj": [
+    {
+      "type": 0,
+      "value": "Catalog"
+    }
+  ],
   "294MCM": [
     {
       "type": 0,
@@ -597,6 +603,12 @@
       "value": "length"
     }
   ],
+  "5p7PF0": [
+    {
+      "type": 0,
+      "value": "Omschrijving of the INFORMATIEOBJECTTYPE in the Catalogi API to be used for the submission report CSV"
+    }
+  ],
   "5uaKBM": [
     {
       "type": 0,
@@ -2245,6 +2257,12 @@
       "value": "Prefill attribute"
     }
   ],
+  "NDd+JC": [
+    {
+      "type": 0,
+      "value": "Which Catalog to use."
+    }
+  ],
   "NE5h2q": [
     {
       "type": 0,
@@ -3097,12 +3115,6 @@
       "value": "In case that multiple identifiers are returned (in the case of eHerkenning bewindvoering and DigiD Machtigen), should the prefill data related to the main identifier be used, or that related to the authorised person?"
     }
   ],
-  "WnKF/i": [
-    {
-      "type": 0,
-      "value": "URL that points to the INFORMATIEOBJECTTYPE in the Catalogi API to be used for the submission attachments"
-    }
-  ],
   "Wz5QZo": [
     {
       "type": 0,
@@ -3295,12 +3307,6 @@
       "value": "Select the plugin to use for the prefill functionality."
     }
   ],
-  "Yyvvx1": [
-    {
-      "type": 0,
-      "value": "URL that points to the INFORMATIEOBJECTTYPE in the Catalogi API to be used for the submission report CSV"
-    }
-  ],
   "YzLSHY": [
     {
       "type": 0,
@@ -3847,12 +3853,6 @@
       "value": "Manage process variables"
     }
   ],
-  "eBtStW": [
-    {
-      "type": 0,
-      "value": "URL that points to the INFORMATIEOBJECTTYPE in the Catalogi API to be used for the submission report PDF"
-    }
-  ],
   "eJEu3L": [
     {
       "type": 0,
@@ -4625,6 +4625,12 @@
       "value": "Manage process variables"
     }
   ],
+  "n/+OWz": [
+    {
+      "type": 0,
+      "value": "Omschrijving of the INFORMATIEOBJECTTYPE in the Catalogi API to be used for the submission report PDF"
+    }
+  ],
   "n4Y2ex": [
     {
       "type": 0,
@@ -5616,5 +5622,11 @@
       "type": 0,
       "value": "Use logic rules to determine the price"
     }
+  ],
+  "zxaohJ": [
+    {
+      "type": 0,
+      "value": "Omschrijving of the INFORMATIEOBJECTTYPE in the Catalogi API to be used for the submission attachments"
+    }
   ]
 }

src/openforms/js/compiled-lang/nl.json

@@ -265,6 +265,12 @@
       "value": "Servicebevraging instellen"
     }
   ],
+  "27HfWj": [
+    {
+      "type": 0,
+      "value": "Catalog"
+    }
+  ],
   "294MCM": [
     {
       "type": 0,
@@ -597,6 +603,12 @@
       "value": "length"
     }
   ],
+  "5p7PF0": [
+    {
+      "type": 0,
+      "value": "Omschrijving naar het INFORMATIEOBJECTTYPE in een Catalogi API die wordt gebruikt voor het CSV-document"
+    }
+  ],
   "5uaKBM": [
     {
       "type": 0,
@@ -2266,6 +2278,12 @@
       "value": "Prefill-attribuut"
     }
   ],
+  "NDd+JC": [
+    {
+      "type": 0,
+      "value": "Which Catalog to use."
+    }
+  ],
   "NE5h2q": [
     {
       "type": 0,
@@ -3114,12 +3132,6 @@
       "value": "Indien meerdere unieke identificaties beschikbaar zijn (bijvoorbeeld bij eHerkenning Bewindvoering en DigiD Machtigen), welke prefill-gegevens moeten dan opgehaald worden? Deze voor de machtiger of de gemachtigde?"
     }
   ],
-  "WnKF/i": [
-    {
-      "type": 0,
-      "value": "URL naar het INFORMATIEOBJECTTYPE in een Catalogi API die wordt gebruikt voor de bijlagen."
-    }
-  ],
   "Wz5QZo": [
     {
       "type": 0,
@@ -3312,12 +3324,6 @@
       "value": "Selecteer de plugin om te gebruiken voor prefill."
     }
   ],
-  "Yyvvx1": [
-    {
-      "type": 0,
-      "value": "URL naar het INFORMATIEOBJECTTYPE in een Catalogi API die wordt gebruikt voor het CSV-document."
-    }
-  ],
   "YzLSHY": [
     {
       "type": 0,
@@ -3869,12 +3875,6 @@
       "value": "Beheer procesvariabelen"
     }
   ],
-  "eBtStW": [
-    {
-      "type": 0,
-      "value": "URL naar het INFORMATIEOBJECTTYPE in een Catalogi API die wordt gebruikt voor het PDF-document."
-    }
-  ],
   "eJEu3L": [
     {
       "type": 0,
@@ -4647,6 +4647,12 @@
       "value": "Beheer procesvariabelen"
     }
   ],
+  "n/+OWz": [
+    {
+      "type": 0,
+      "value": "Omschrijving naar het INFORMATIEOBJECTTYPE in een Catalogi API die wordt gebruikt voor het PDF-document"
+    }
+  ],
   "n4Y2ex": [
     {
       "type": 0,
@@ -5638,5 +5644,11 @@
       "type": 0,
       "value": "Gebruik prijsregels om de prijs te bepalen"
     }
+  ],
+  "zxaohJ": [
+    {
+      "type": 0,
+      "value": "Omschrijving naar het INFORMATIEOBJECTTYPE in een Catalogi API die wordt gebruikt voor de bijlagen"
+    }
   ]
 }

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

@@ -1,6 +1,8 @@
 export const FORM_ENDPOINT = '/api/v2/forms';
 export const FORM_DEFINITIONS_ENDPOINT = '/api/v2/form-definitions';
 export const REGISTRATION_BACKENDS_ENDPOINT = '/api/v2/registration/plugins';
+export const REGISTRATION_OBJECTS_API_CATALOGI_ENDPOINT =
+  '/api/v2/registration/plugins/objects-api/catalogi';
 export const REGISTRATION_OBJECTTYPES_ENDPOINT =
   '/api/v2/registration/plugins/objects-api/object-types';
 export const REGISTRATION_OBJECTS_TARGET_PATHS =

src/openforms/js/components/admin/form_design/registrations/CatalogiSelect.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import ReactSelect from 'components/admin/forms/ReactSelect';
+
+const CatalogiSelect = ({
+  name,
+  htmlId,
+  availableCatalogiState,
+  catalogusDomein,
+  catalogusRsin,
+  onChange,
+  isClearable = true,
+}) => {
+  const {loading, availableCatalogi, error} = availableCatalogiState;
+
+  const onCatalogChange = event => {
+    const {value} = event.target;
+    if (value === '') {
+      onChange({catalogusDomein: '', catalogusRsin: ''});
+    } else {
+      const splitValue = value.split('-');
+      onChange({catalogusDomein: splitValue[0], catalogusRsin: splitValue[1]});
+    }
+  };
+
+  const options =
+    loading || error
+      ? []
+      : availableCatalogi.map(({domein, rsin, label}) => {
+          return {value: `${domein}-${rsin}`, label};
+        });
+
+  return (
+    <ReactSelect
+      name={name}
+      value={`${catalogusDomein}-${catalogusRsin}`}
+      options={options}
+      htmlId={htmlId}
+      onChange={onCatalogChange}
+      emptyValue=""
+      isClearable={isClearable}
+    />
+  );
+};
+
+CatalogiSelect.propTypes = {
+  name: PropTypes.string.isRequired,
+  availableCatalogiState: PropTypes.object.isRequired,
+  catalogusDomein: PropTypes.string.isRequired,
+  catalogusRsin: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  isClearable: PropTypes.bool,
+};
+
+export default CatalogiSelect;