🚸 [#4606] Present available role types in a dropdown

Instead of having to enter the values in a text box, you can now
select them in a dropdown.

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

@@ -1237,6 +1237,12 @@
       "value": "Confidentiality"
     }
   ],
+  "AdyBdF": [
+    {
+      "type": 0,
+      "value": "Something went wrong while retrieving the available role types defined in the selected case. Please check that the services in the selected API group are configured correctly."
+    }
+  ],
   "AtBVAV": [
     {
       "type": 0,

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

@@ -1241,6 +1241,12 @@
       "value": "Vertrouwelijkheidaanduiding"
     }
   ],
+  "AdyBdF": [
+    {
+      "type": 0,
+      "value": "Something went wrong while retrieving the available role types defined in the selected case. Please check that the services in the selected API group are configured correctly."
+    }
+  ],
   "AtBVAV": [
     {
       "type": 0,

src/openforms/js/components/admin/form_design/RegistrationFields.stories.js

@@ -9,8 +9,10 @@ import {
 } from 'components/admin/form_design/registrations/objectsapi/mocks';
 import {
   mockCaseTypesGet,
-  mockProductsGet,
   mockCataloguesGet as mockZGWApisCataloguesGet,
+  mockDocumenTypesGet as mockZGWApisDocumenTypesGet,
+  mockProductsGet as mockZGWApisProductsGet,
+  mockRoleTypesGet as mockZGWApisRoleTypesGet,
 } from 'components/admin/form_design/registrations/zgw/mocks';
 import {
   FormDecorator,
@@ -511,7 +513,13 @@ export default {
           mockObjectsApiCataloguesGet(),
           mockDocumentTypesGet(),
         ],
-        zgwMocks: [mockZGWApisCataloguesGet(), mockCaseTypesGet(), mockProductsGet()],
+        zgwMocks: [
+          mockZGWApisCataloguesGet(),
+          mockCaseTypesGet(),
+          mockZGWApisDocumenTypesGet(),
+          mockZGWApisRoleTypesGet(),
+          mockZGWApisProductsGet(),
+        ],
         camundaMocks: [mockProcessDefinitionsGet()],
       },
     },

src/openforms/js/components/admin/form_design/registrations/zgw/OptionalOptionsFieldset.js

@@ -31,7 +31,19 @@ const OptionalOptionsFieldset = ({confidentialityLevelChoices, catalogueUrl}) =>
       </div>
       <OrganisationRSIN />
       <ConfidentialityLevel options={confidentialityLevelChoices} />
-      <MedewerkerRoltype />
+
+      <ErrorBoundary
+        errorMessage={
+          <FormattedMessage
+            description="ZGW APIs registrations options: role type error"
+            defaultMessage={`Something went wrong while retrieving the available
+            role types defined in the selected case. Please check that the services in
+            the selected API group are configured correctly.`}
+          />
+        }
+      >
+        <MedewerkerRoltype catalogueUrl={catalogueUrl} />
+      </ErrorBoundary>
 
       <ErrorBoundary
         errorMessage={

src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js

@@ -15,6 +15,7 @@ import {
   mockCataloguesGetError,
   mockDocumenTypesGet,
   mockProductsGet,
+  mockRoleTypesGet,
 } from './mocks';
 
 const NAME = 'form.registrationBackends.0.options';
@@ -83,6 +84,7 @@ export default {
         catalogues: [mockCataloguesGet()],
         caseTypes: [mockCaseTypesGet()],
         documentTypes: [mockDocumenTypesGet()],
+        roleTypes: [mockRoleTypesGet()],
         products: [mockProductsGet()],
       },
     },

src/openforms/js/components/admin/form_design/registrations/zgw/fields/MedewerkerRoltype.js

@@ -1,12 +1,53 @@
-import {useField} from 'formik';
+import {useField, useFormikContext} from 'formik';
+import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
+import useAsync from 'react-use/esm/useAsync';
 
 import Field from 'components/admin/forms/Field';
 import FormRow from 'components/admin/forms/FormRow';
-import {TextInput} from 'components/admin/forms/Inputs';
+import ReactSelect from 'components/admin/forms/ReactSelect';
+import {get} from 'utils/fetch';
+
+// Data fetching
+
+const ROLE_TYPES_ENDPOINT = '/api/v2/registration/plugins/zgw-api/role-types';
+
+const getAvailableRoleTypes = async (apiGroupID, catalogueUrl, caseTypeIdentification) => {
+  const response = await get(ROLE_TYPES_ENDPOINT, {
+    zgw_api_group: apiGroupID,
+    catalogue_url: catalogueUrl,
+    case_type_identification: caseTypeIdentification,
+  });
+  if (!response.ok) {
+    throw new Error('Loading available object types failed');
+  }
+  const roleTypes = response.data.sort((a, b) => a.description.localeCompare(b.description));
+  return roleTypes.map(({description, descriptionGeneric}) => ({
+    value: description,
+    label: description,
+    descriptionGeneric: descriptionGeneric, // omschrijvingGeneriek, which is an enum
+  }));
+};
+
+// Components
+
+const MedewerkerRoltype = ({catalogueUrl = ''}) => {
+  const {
+    values: {zgwApiGroup = null, caseTypeIdentification = ''},
+  } = useFormikContext();
+  const [, , fieldHelpers] = useField('medewerkerRoltype');
+  const {setValue} = fieldHelpers;
+
+  const {
+    loading,
+    value: roleTypes = [],
+    error,
+  } = useAsync(async () => {
+    if (!zgwApiGroup || !catalogueUrl || !caseTypeIdentification) return [];
+    return await getAvailableRoleTypes(zgwApiGroup, catalogueUrl, caseTypeIdentification);
+  }, [zgwApiGroup, catalogueUrl, caseTypeIdentification]);
+  if (error) throw error;
 
-const MedewerkerRoltype = () => {
-  const [fieldProps] = useField('medewerkerRoltype');
   return (
     <FormRow>
       <Field
@@ -24,13 +65,26 @@ const MedewerkerRoltype = () => {
             employees filling in a form for a citizen/company.`}
           />
         }
+        noManageChildProps
       >
-        <TextInput id="id_medewerkerRoltype" {...fieldProps} />
+        <ReactSelect
+          name="medewerkerRoltype"
+          options={roleTypes}
+          isLoading={loading}
+          isDisabled={!zgwApiGroup || !caseTypeIdentification}
+          required={false}
+          isClearable
+          onChange={selectedOption => {
+            setValue(selectedOption ? selectedOption.value : '');
+          }}
+        />
       </Field>
     </FormRow>
   );
 };
 
-MedewerkerRoltype.propTypes = {};
+MedewerkerRoltype.propTypes = {
+  catalogueUrl: PropTypes.string,
+};
 
 export default MedewerkerRoltype;

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

@@ -146,6 +146,23 @@ export const mockDocumenTypesGet = () =>
     return HttpResponse.json(match);
   });
 
+// The backend must filter out the 'initiator' as there can only be one.
+const ROLE_TYPES = [
+  {
+    description: 'Baliemedewerker',
+    descriptionGeneric: 'klantcontacter',
+  },
+  {
+    description: 'Belanghebbende',
+    descriptionGeneric: 'belanghebbende',
+  },
+];
+
+export const mockRoleTypesGet = () =>
+  http.get(`${API_BASE_URL}/api/v2/registration/plugins/zgw-api/role-types`, () =>
+    HttpResponse.json(ROLE_TYPES)
+  );
+
 const PRODUCTS = [
   {
     url: 'https://example.com/product/1234',

src/openforms/js/lang/en.json

@@ -554,6 +554,11 @@
     "description": "ZGW APIs registration options 'zaakVertrouwelijkheidaanduiding' label",
     "originalDefault": "Confidentiality"
   },
+  "AdyBdF": {
+    "defaultMessage": "Something went wrong while retrieving the available role types defined in the selected case. Please check that the services in the selected API group are configured correctly.",
+    "description": "ZGW APIs registrations options: role type error",
+    "originalDefault": "Something went wrong while retrieving the available role types defined in the selected case. Please check that the services in the selected API group are configured correctly."
+  },
   "AtBVAV": {
     "defaultMessage": "Confirm",
     "description": "Form definition select confirm button",

src/openforms/js/lang/nl.json

@@ -559,6 +559,11 @@
     "description": "ZGW APIs registration options 'zaakVertrouwelijkheidaanduiding' label",
     "originalDefault": "Confidentiality"
   },
+  "AdyBdF": {
+    "defaultMessage": "Something went wrong while retrieving the available role types defined in the selected case. Please check that the services in the selected API group are configured correctly.",
+    "description": "ZGW APIs registrations options: role type error",
+    "originalDefault": "Something went wrong while retrieving the available role types defined in the selected case. Please check that the services in the selected API group are configured correctly."
+  },
   "AtBVAV": {
     "defaultMessage": "Bevestigen",
     "description": "Form definition select confirm button",