[#4267] Add Catalog select component

Author: Viicos

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

@@ -3,6 +3,7 @@ export const FORM_DEFINITIONS_ENDPOINT = '/api/v2/form-definitions';
 export const REGISTRATION_BACKENDS_ENDPOINT = '/api/v2/registration/plugins';
 export const REGISTRATION_OBJECTTYPES_ENDPOINT =
   '/api/v2/registration/plugins/objects-api/object-types';
+export const REGISTRATION_CATALOGUS_ENDPOINT = '/api/v2/registration/catalogus';
 export const REGISTRATION_OBJECTS_TARGET_PATHS =
   '/api/v2/registration/plugins/objects-api/target-paths';
 export const AUTH_PLUGINS_ENDPOINT = '/api/v2/authentication/plugins';

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

@@ -0,0 +1,79 @@
+import {produce} from 'immer';
+import PropTypes from 'prop-types';
+import React, {useEffect} from 'react';
+
+import ReactSelect from 'components/admin/forms/ReactSelect';
+
+const CatalogSelect = ({
+  name,
+  htmlId,
+  availableCatalogsState,
+  catalogDomein,
+  catalogRsin,
+  onChange,
+  isClearable = true,
+}) => {
+  const {loading, availableCatalogs, error} = availableCatalogsState;
+
+  const onCatalogChange = event => {
+    const {name, value} = event.target;
+    const splitValue = value.split('-');
+    onChange(
+      produce(formData, draft => {
+        draft.catalogDomein = splitValue[0];
+        draft.catalogRsin = splitValue[1];
+      })
+    );
+  };
+
+  const options =
+    loading || error
+      ? []
+      : availableCatalogs.map(({domein, rsin}) => {
+          return {value: `${domein}-${rsin}`, label: `${domein} (RSIN: ${rsin})`};
+        });
+
+  // ensure that if no valid value is present, the first possible option is set (
+  // synchronize the UI state back to the form state)
+  useEffect(() => {
+    // do nothing if no options have been loaded
+    if (loading || !availableCatalogs.length) return;
+
+    // check if a valid option is selected, if this is the case -> do nothing
+    const isOptionPresent = availableCatalogs.find(
+      catalog => catalog.domein === catalogDomein && catalog.rsin === catalogRsin
+    );
+    if (isOptionPresent) return;
+
+    // otherwise select the first possible option and persist that back into the state
+    onChange(
+      produce(formData, draft => {
+        draft.catalogDomein = availableCatalogs[0].domein;
+        draft.catalogRsin = availableCatalogs[0].rsin;
+      })
+    );
+  }, []);
+
+  return (
+    <ReactSelect
+      name={name}
+      value={`${catalogDomein}-${catalogRsin}`}
+      options={options}
+      htmlId={htmlId}
+      onChange={onCatalogChange}
+      emptyValue=""
+      isClearable={isClearable}
+    />
+  );
+};
+
+CatalogSelect.propTypes = {
+  name: PropTypes.string.isRequired,
+  availableCatalogsState: PropTypes.object.isRequired,
+  catalogDomein: PropTypes.string.isRequired,
+  catalogRsin: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  isClearable: PropTypes.bool,
+};
+
+export default CatalogSelect;

src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js

@@ -13,7 +13,11 @@ import ErrorMessage from 'components/errors/ErrorMessage';
 import InformatieObjecttypeSelect from '../InformatieObjecttypeSelect';
 import ObjectTypeSelect from './ObjectTypeSelect';
 import ObjectTypeVersionSelect from './ObjectTypeVersionSelect';
-import {useGetAvailableInformatieObjecttypen, useGetAvailableObjectTypes} from './hooks';
+import {
+  useGetAvailableCatalogs,
+  useGetAvailableInformatieObjecttypen,
+  useGetAvailableObjectTypes,
+} from './hooks';
 import {getErrorMarkup, getFieldErrors, getOptionsFromSchema} from './utils';
 
 const V2ConfigFields = ({index, name, schema, formData, onFieldChange, onChange}) => {
@@ -35,6 +39,7 @@ const V2ConfigFields = ({index, name, schema, formData, onFieldChange, onChange}
   // Track available object types and versions in this component so the state can be
   // shared.
   const availableObjectTypesState = useGetAvailableObjectTypes(objectsApiGroup);
+  const availableCatalogsState = useGetAvailableCatalogs(objectsApiGroup);
   const availableInformatieObjecttypenState = useGetAvailableInformatieObjecttypen(objectsApiGroup);
 
   const buildErrorsComponent = field => {

src/openforms/js/components/admin/form_design/registrations/objectsapi/hooks.js

@@ -1,6 +1,9 @@
 import useAsync from 'react-use/esm/useAsync';
 
-import {REGISTRATION_OBJECTTYPES_ENDPOINT} from 'components/admin/form_design/constants';
+import {
+  REGISTRATION_CATALOGUS_ENDPOINT,
+  REGISTRATION_OBJECTTYPES_ENDPOINT,
+} from 'components/admin/form_design/constants';
 import {getInformatieObjectTypen} from 'components/form/file';
 import {get} from 'utils/fetch';
 
@@ -27,6 +30,29 @@ export const useGetAvailableObjectTypes = objectsApiGroup => {
   };
 };
 
+export const useGetAvailableCatalogs = objectsApiGroup => {
+  const {
+    loading,
+    value: availableCatalogs = [],
+    error,
+  } = useAsync(async () => {
+    if (!objectsApiGroup) return [];
+    const response = await get(REGISTRATION_CATALOGUS_ENDPOINT, {
+      objects_api_group: objectsApiGroup,
+    });
+    if (!response.ok) {
+      throw new Error('Loading available catalogs failed');
+    }
+    return response.data;
+  }, [objectsApiGroup]);
+
+  return {
+    loading,
+    availableCatalogs,
+    error,
+  };
+};
+
 export const useGetAvailableInformatieObjecttypen = objectsApiGroup => {
   const {
     loading,