🚸 [#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/components/admin/form_design/registrations/zgw/OptionalOptionsFieldset.js

@@ -31,7 +31,7 @@ const OptionalOptionsFieldset = ({confidentialityLevelChoices, catalogueUrl}) =>
       </div>
       <OrganisationRSIN />
       <ConfidentialityLevel options={confidentialityLevelChoices} />
-      <MedewerkerRoltype />
+      <MedewerkerRoltype catalogueUrl={catalogueUrl} />
 
       <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',