♻️ [#4606] Implement ZGW config fields as Formik fields

There are some slight tweaks in literals here and there, and the
selects are now react-selects that can be searched, but other than that
they're pretty much equivalent to what we had before.

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

@@ -0,0 +1,39 @@
+import {useField} from 'formik';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import {TextInput} from 'components/admin/forms/Inputs';
+
+/**
+ * @todo - convert to omschrijving & use URL-based field as legacy/deprecated option
+ */
+const CaseType = () => {
+  const [fieldProps] = useField('zaaktype');
+  return (
+    <FormRow>
+      <Field
+        name="zaaktype"
+        required
+        label={
+          <FormattedMessage
+            description="ZGW APIs registration options 'CaseType' label"
+            defaultMessage="Case type"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="ZGW APIs registration options 'CaseType' help text"
+            defaultMessage="Case type API resource URL in the Catalogi API."
+          />
+        }
+      >
+        <TextInput id="id_zaaktype" required {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+CaseType.propTypes = {};
+
+export default CaseType;

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

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import ReactSelect from 'components/admin/forms/ReactSelect';
+
+const ConfidentialityLevel = ({options}) => (
+  <FormRow>
+    <Field
+      name="zaakVertrouwelijkheidaanduiding"
+      label={
+        <FormattedMessage
+          description="ZGW APIs registration options 'zaakVertrouwelijkheidaanduiding' label"
+          defaultMessage="Confidentiality"
+        />
+      }
+      helpText={
+        <FormattedMessage
+          description="ZGW APIs registration options 'zaakVertrouwelijkheidaanduiding' help text"
+          defaultMessage={`Indication of the level to which extent the case is meant
+          to be public. The value selected here will override the default configured on the case type.`}
+        />
+      }
+    >
+      <ReactSelect
+        name="zaakVertrouwelijkheidaanduiding"
+        options={options.map(([value, label]) => ({
+          value,
+          label,
+        }))}
+        isClearable
+      />
+    </Field>
+  </FormRow>
+);
+
+ConfidentialityLevel.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+};
+
+export default ConfidentialityLevel;

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

@@ -0,0 +1,39 @@
+import {useField} from 'formik';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import {TextInput} from 'components/admin/forms/Inputs';
+
+/**
+ * @todo - convert to omschrijving & use URL-based field as legacy/deprecated option
+ */
+const DocumentType = () => {
+  const [fieldProps] = useField('informatieobjecttype');
+  return (
+    <FormRow>
+      <Field
+        name="informatieobjecttype"
+        required
+        label={
+          <FormattedMessage
+            description="ZGW APIs registration options 'DocumentType' label"
+            defaultMessage="Document type"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="ZGW APIs registration options 'DocumentType' help text"
+            defaultMessage="Document type API resource URL in the Catalogi API."
+          />
+        }
+      >
+        <TextInput id="id_informatieobjecttype" required {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+DocumentType.propTypes = {};
+
+export default DocumentType;

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

@@ -0,0 +1,36 @@
+import {useField} from 'formik';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import {TextInput} from 'components/admin/forms/Inputs';
+
+const MedewerkerRoltype = () => {
+  const [fieldProps] = useField('medewerkerRoltype');
+  return (
+    <FormRow>
+      <Field
+        name="medewerkerRoltype"
+        label={
+          <FormattedMessage
+            description="Objects API registration options 'medewerkerRoltype' label"
+            defaultMessage="Medewerker roltype"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="Objects API registration options 'medewerkerRoltype' help text"
+            defaultMessage={`Description (omschrijving) of the ROLTYPE to use for
+            employees filling in a form for a citizen/company.`}
+          />
+        }
+      >
+        <TextInput id="id_medewerkerRoltype" {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+MedewerkerRoltype.propTypes = {};
+
+export default MedewerkerRoltype;

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

@@ -0,0 +1,40 @@
+import {useField} from 'formik';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import {TextInput} from 'components/admin/forms/Inputs';
+
+/**
+ * @todo - deprecate in favour of dropdown like in the objects API
+ */
+const ObjectType = () => {
+  const [fieldProps] = useField('objecttype');
+  return (
+    <FormRow>
+      <Field
+        name="objecttype"
+        label={
+          <FormattedMessage
+            description="ZGW APIs registration options 'objecttype' label"
+            defaultMessage="Objecttype"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="ZGW APIs registration options 'objecttype' help text"
+            defaultMessage={`URL to the object type in the objecttypes API.
+            If provided, an object will be created and a case object relation will be
+            added to the case.`}
+          />
+        }
+      >
+        <TextInput id="id_objecttype" {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+ObjectType.propTypes = {};
+
+export default ObjectType;

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

@@ -0,0 +1,33 @@
+import {useField} from 'formik';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import {NumberInput} from 'components/admin/forms/Inputs';
+
+/**
+ * @todo - deprecate in favour of dropdown like in the objects API
+ * @todo - make required if an object type is selected?
+ */
+const ObjectTypeVersion = () => {
+  const [fieldProps] = useField('objecttypeVersion');
+  return (
+    <FormRow>
+      <Field
+        name="objecttypeVersion"
+        label={
+          <FormattedMessage
+            description="ZGW APIs registration options 'objecttypeVersion' label"
+            defaultMessage="Version"
+          />
+        }
+      >
+        <NumberInput id="id_objecttype" min="1" step="1" {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+ObjectTypeVersion.propTypes = {};
+
+export default ObjectTypeVersion;

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

@@ -0,0 +1,35 @@
+import {useField} from 'formik';
+import {FormattedMessage} from 'react-intl';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import {TextInput} from 'components/admin/forms/Inputs';
+
+const OrganisationRSIN = () => {
+  const [fieldProps] = useField('organisatieRsin');
+  return (
+    <FormRow>
+      <Field
+        name="organisatieRsin"
+        label={
+          <FormattedMessage
+            description="ZGW APIs registration options 'organisationRSIN' label"
+            defaultMessage="Organisation RSIN"
+          />
+        }
+        helpText={
+          <FormattedMessage
+            description="ZGW APIs registration options 'organisationRSIN' help text"
+            defaultMessage="RSIN of the organization, which creates and owns the case and documents."
+          />
+        }
+      >
+        <TextInput id="id_organisatieRsin" {...fieldProps} />
+      </Field>
+    </FormRow>
+  );
+};
+
+OrganisationRSIN.propTypes = {};
+
+export default OrganisationRSIN;

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

@@ -0,0 +1,73 @@
+import {useField, useFormikContext} from 'formik';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+import {useUpdateEffect} from 'react-use';
+
+import Field from 'components/admin/forms/Field';
+import FormRow from 'components/admin/forms/FormRow';
+import ReactSelect from 'components/admin/forms/ReactSelect';
+
+const ZGWAPIGroup = ({apiGroupChoices, onChangeCheck}) => {
+  const [{onChange: onChangeFormik, ...fieldProps}, , {setValue}] = useField('zgwApiGroup');
+  const {setValues} = useFormikContext();
+  const {value} = fieldProps;
+
+  // reset the zaaktype/objecttype specific-configuration whenever the API group changes
+  useUpdateEffect(() => {
+    setValues(prevValues => ({
+      ...prevValues,
+      zaaktype: '',
+      informatieobjecttype: '',
+      medewerkerRoltype: '',
+      propertyMappings: [],
+      // objects API integration
+      objecttype: undefined,
+      objecttypeVersion: undefined,
+      contentJson: undefined,
+    }));
+  }, [setValues, value]);
+
+  const options = apiGroupChoices.map(([value, label]) => ({value, label}));
+  return (
+    <FormRow>
+      <Field
+        name="zgwApiGroup"
+        required
+        label={
+          <FormattedMessage description="ZGW APIs group field label" defaultMessage="API group" />
+        }
+        helpText={
+          <FormattedMessage
+            description="ZGW APIs group field help text"
+            defaultMessage="The API group specifies which ZGW services to use."
+          />
+        }
+        noManageChildProps
+      >
+        <ReactSelect
+          name="zgwApiGroup"
+          options={options}
+          required
+          onChange={selectedOption => {
+            const okToProceed = onChangeCheck === undefined || onChangeCheck();
+            if (okToProceed) setValue(selectedOption.value);
+          }}
+        />
+      </Field>
+    </FormRow>
+  );
+};
+
+ZGWAPIGroup.propTypes = {
+  apiGroupChoices: PropTypes.arrayOf(
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.number, // value
+        PropTypes.string, // label
+      ])
+    )
+  ).isRequired,
+  onChangeCheck: PropTypes.func,
+};
+
+export default ZGWAPIGroup;

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

@@ -0,0 +1,8 @@
+export {default as ZGWAPIGroup} from './ZGWAPIGroup';
+export {default as CaseType} from './CaseType';
+export {default as DocumentType} from './DocumentType';
+export {default as OrganisationRSIN} from './OrganisationRSIN';
+export {default as ConfidentialityLevel} from './ConfidentialityLevel';
+export {default as MedewerkerRoltype} from './MedewerkerRoltype';
+export {default as ObjectType} from './ObjectType';
+export {default as ObjectTypeVersion} from './ObjectTypeVersion';