From 1540ab48f89820cddd680e66d852712fb5b462e0 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 28 Nov 2024 16:34:22 +0100 Subject: [PATCH] :recycle: [#4606] Refactor ZGW options components structure Refactored the components and hooks so we can lift up the retrieval of available catalogues in a ZGW API group. The parent component is now responsible for fetching the available catalogues and relays the loading/error state from useAsync. It also encapsulated the derived catalogueUrl when a valid value is available and selected, which other components need to look up related objects (like case types, document types, products and the future role types). I've opted to pass down the error into a component that just throws for the existing error boundary behaviour and location, as it's important that you can still change the API group to trigger a new attempt and we want to keep the code nicely organised. Finally, some more fieldsets were abstracted into their own components for readability reasons. --- src/openforms/js/compiled-lang/en.json | 12 +- src/openforms/js/compiled-lang/nl.json | 18 +-- .../registrations/zgw/BasicOptionsFieldset.js | 98 ++++-------- .../zgw/LegacyOptionsFieldset.js | 35 +++++ .../zgw/ObjectsAPIOptionsFieldset.js | 62 ++++++++ .../zgw/OptionalOptionsFieldset.js | 30 +--- .../registrations/zgw/ZGWOptionsForm.js | 24 +-- .../registrations/zgw/ZGWOptionsFormFields.js | 146 ++++++------------ .../zgw/ZGWOptionsFormFields.stories.js | 32 +++- .../form_design/registrations/zgw/mocks.js | 11 +- .../registrations/zgw/useCatalogueOptions.js | 90 +++++++++++ .../admin/forms/zgw/CatalogueSelect.js | 26 ++-- .../js/components/admin/forms/zgw/index.js | 1 + src/openforms/js/lang/en.json | 10 +- src/openforms/js/lang/nl.json | 10 +- 15 files changed, 358 insertions(+), 247 deletions(-) create mode 100644 src/openforms/js/components/admin/form_design/registrations/zgw/LegacyOptionsFieldset.js create mode 100644 src/openforms/js/components/admin/form_design/registrations/zgw/ObjectsAPIOptionsFieldset.js create mode 100644 src/openforms/js/components/admin/form_design/registrations/zgw/useCatalogueOptions.js diff --git a/src/openforms/js/compiled-lang/en.json b/src/openforms/js/compiled-lang/en.json index f0f116a9aa..56c6b49f27 100644 --- a/src/openforms/js/compiled-lang/en.json +++ b/src/openforms/js/compiled-lang/en.json @@ -2517,6 +2517,12 @@ "value": "Add variable" } ], + "LbiXCA": [ + { + "type": 0, + "value": "Something went wrong while retrieving the available products defined in the selected case. Please check that the services in the selected API group are configured correctly." + } + ], "LeVpdf": [ { "type": 0, @@ -5337,12 +5343,6 @@ "value": "Add item" } ], - "ln2iyc": [ - { - "type": 0, - "value": "Something went wrong while retrieving the available catalogues or products defined in the selected case. Please check that the services in the selected API group are configured correctly." - } - ], "ln72CJ": [ { "type": 0, diff --git a/src/openforms/js/compiled-lang/nl.json b/src/openforms/js/compiled-lang/nl.json index 6e50fb8430..5adf4e2df3 100644 --- a/src/openforms/js/compiled-lang/nl.json +++ b/src/openforms/js/compiled-lang/nl.json @@ -2538,6 +2538,12 @@ "value": "Variabele toevoegen" } ], + "LbiXCA": [ + { + "type": 0, + "value": "Er ging iets fout bij het ophalen van de beschikbare producten binnen het geselecteerde zaaktype. Controleer of de services in de geselecteerde API-groep goed ingesteld zijn." + } + ], "LeVpdf": [ { "type": 0, @@ -5109,12 +5115,6 @@ "value": "optie 2: € 15,99" } ], - "jtWzSW": [ - { - "type": 0, - "value": "optie 2: € 15,99" - } - ], "jy1jTd": [ { "offset": 0, @@ -5365,12 +5365,6 @@ "value": "Item toevoegen" } ], - "ln2iyc": [ - { - "type": 0, - "value": "Er ging iets fout bij het ophalen van de beschikbare catalogi of geselecteerde zaak producten. Controleer of de services in de geselecteerde API-groep goed ingesteld zijn." - } - ], "ln72CJ": [ { "type": 0, diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js b/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js index 3744042439..fe15b86074 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/BasicOptionsFieldset.js @@ -1,19 +1,23 @@ import {useFormikContext} from 'formik'; import PropTypes from 'prop-types'; -import {FormattedMessage, useIntl} from 'react-intl'; -import {useAsync, usePrevious, useUpdateEffect} from 'react-use'; +import {FormattedMessage} from 'react-intl'; import useConfirm from 'components/admin/form_design/useConfirm'; import Fieldset from 'components/admin/forms/Fieldset'; -import {getCatalogueOption} from 'components/admin/forms/zgw'; +import {CatalogueSelectOptions} from 'components/admin/forms/zgw'; import ErrorBoundary from 'components/errors/ErrorBoundary'; import {CaseTypeSelect, CatalogueSelect, DocumentTypeSelect, ZGWAPIGroup} from './fields'; -import {getCatalogues} from './utils'; // Components -const BasicOptionsFieldset = ({apiGroupChoices}) => { +const BasicOptionsFieldset = ({ + apiGroupChoices, + loadingCatalogues, + catalogueOptionGroups = [], + cataloguesError = undefined, + catalogueUrl = '', +}) => { const { values: { caseTypeIdentification, @@ -61,7 +65,10 @@ const BasicOptionsFieldset = ({apiGroupChoices}) => { /> } > - + + + + { - const { - values: { - zgwApiGroup = null, - catalogue = undefined, - caseTypeIdentification = '', - documentTypeDescription = '', - productUrl = '', - }, - setFieldValue, - } = useFormikContext(); - - const previousCatalogue = usePrevious(catalogue); - const previousCaseTypeIdentification = usePrevious(caseTypeIdentification); - - // fetch available catalogues and re-use the result - const { - loading: loadingCatalogues, - value: catalogueOptionGroups = [], - error: cataloguesError, - } = useAsync(async () => { - if (!zgwApiGroup) return []; - return await getCatalogues(zgwApiGroup); - }, [zgwApiGroup]); - if (cataloguesError) throw cataloguesError; - - const catalogueValue = getCatalogueOption(catalogueOptionGroups, catalogue || {}); - const catalogueUrl = catalogueValue?.url; - - // Synchronize dependent fields when dependencies change. - // 1. Clear case type when catalogue changes. - useUpdateEffect(() => { - const catalogueChanged = catalogue !== previousCatalogue; - if (previousCatalogue && catalogueChanged && caseTypeIdentification) { - setFieldValue('caseTypeIdentification', ''); - } - }, [setFieldValue, previousCatalogue, catalogue, caseTypeIdentification]); - - // 2. Clear document type when case type changes - useUpdateEffect(() => { - const caseTypeChanged = caseTypeIdentification !== previousCaseTypeIdentification; - if (previousCaseTypeIdentification && caseTypeChanged && documentTypeDescription) { - setFieldValue('documentTypeDescription', ''); - } - }, [ - setFieldValue, - previousCaseTypeIdentification, - caseTypeIdentification, - documentTypeDescription, - ]); - - // 3. Clear selected product when case type changes - useUpdateEffect(() => { - const caseTypeChanged = caseTypeIdentification !== previousCaseTypeIdentification; - if (previousCaseTypeIdentification && caseTypeChanged && productUrl) { - setFieldValue('productUrl', ''); - } - }, [setFieldValue, previousCaseTypeIdentification, caseTypeIdentification, productUrl]); +/** + * Component that only throws an error if it's not undefined, intended to trigger a + * parent error boundary. + */ +const MaybeThrowError = ({error = undefined}) => { + if (error) throw error; + return null; +}; - return ( - <> - - - - - ); +MaybeThrowError.propTypes = { + error: PropTypes.any, }; export default BasicOptionsFieldset; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/LegacyOptionsFieldset.js b/src/openforms/js/components/admin/form_design/registrations/zgw/LegacyOptionsFieldset.js new file mode 100644 index 0000000000..62d818e748 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/LegacyOptionsFieldset.js @@ -0,0 +1,35 @@ +import {FormattedMessage} from 'react-intl'; + +import Fieldset from 'components/admin/forms/Fieldset'; + +import {LegacyCaseType, LegacyDocumentType} from './fields'; + +/** + * @deprecated + */ +const LegacyOptionsFieldset = () => ( +
+ } + fieldNames={['zaaktype', 'informatieobjecttype']} + collapsible + > +
+ +
+ + +
+); + +export default LegacyOptionsFieldset; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ObjectsAPIOptionsFieldset.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ObjectsAPIOptionsFieldset.js new file mode 100644 index 0000000000..0ffab53287 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ObjectsAPIOptionsFieldset.js @@ -0,0 +1,62 @@ +import {useFormikContext} from 'formik'; +import PropTypes from 'prop-types'; +import {FormattedMessage} from 'react-intl'; + +import {ContentJSON} from 'components/admin/form_design/registrations/objectsapi/LegacyConfigFields'; +import Fieldset from 'components/admin/forms/Fieldset'; +import {ObjectsAPIGroup} from 'components/admin/forms/objects_api'; + +import {ObjectType, ObjectTypeVersion} from './fields'; + +/** + * Callback to invoke when the API group changes - used to reset the dependent fields. + */ +const onApiGroupChange = prevValues => ({ + ...prevValues, + objecttype: '', + objecttypeVersion: undefined, +}); + +/** + * Configuration fields related to the Objects API (template based) integration. + */ +const ObjectsAPIOptionsFieldset = ({objectsApiGroupChoices}) => { + const { + values: {objecttype = ''}, + } = useFormikContext(); + return ( +
+ } + collapsible + fieldNames={['objecttype', 'objecttypeVersion', 'contentJson']} + > + + + + +
+ ); +}; + +ObjectsAPIOptionsFieldset.propTypes = { + objectsApiGroupChoices: PropTypes.arrayOf( + PropTypes.arrayOf( + PropTypes.oneOfType([ + PropTypes.number, // value + PropTypes.string, // label + ]) + ) + ), +}; + +export default ObjectsAPIOptionsFieldset; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/OptionalOptionsFieldset.js b/src/openforms/js/components/admin/form_design/registrations/zgw/OptionalOptionsFieldset.js index 708d541ae5..156cd40ecd 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/OptionalOptionsFieldset.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/OptionalOptionsFieldset.js @@ -1,16 +1,12 @@ -import {useFormikContext} from 'formik'; import PropTypes from 'prop-types'; import {FormattedMessage} from 'react-intl'; -import {useAsync} from 'react-use'; import Fieldset from 'components/admin/forms/Fieldset'; -import {getCatalogueOption} from 'components/admin/forms/zgw'; import ErrorBoundary from 'components/errors/ErrorBoundary'; import {ConfidentialityLevel, MedewerkerRoltype, OrganisationRSIN, ProductSelect} from './fields'; -import {getCatalogues} from './utils'; -const OptionalOptionsFieldset = ({confidentialityLevelChoices}) => { +const OptionalOptionsFieldset = ({confidentialityLevelChoices, catalogueUrl}) => { return (
{ } > - +
); }; -const CatalogiApiField = () => { - const { - values: {zgwApiGroup = null, catalogue = undefined}, - } = useFormikContext(); - - // fetch available catalogues and re-use the result - const {value: catalogueOptionGroups = [], error: cataloguesError} = useAsync(async () => { - if (!zgwApiGroup) return []; - return await getCatalogues(zgwApiGroup); - }, [zgwApiGroup]); - if (cataloguesError) throw cataloguesError; - - const catalogueValue = getCatalogueOption(catalogueOptionGroups, catalogue || {}); - const catalogueUrl = catalogueValue?.url; - return ; -}; - OptionalOptionsFieldset.propTypes = { confidentialityLevelChoices: PropTypes.arrayOf( PropTypes.arrayOf(PropTypes.string) // value & label are both string ).isRequired, + catalogueUrl: PropTypes.string, }; export default OptionalOptionsFieldset; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js index 4657d9c4b4..f035023a79 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsForm.js @@ -3,7 +3,11 @@ import React, {useContext} from 'react'; import {FormattedMessage} from 'react-intl'; import ModalOptionsConfiguration from 'components/admin/forms/ModalOptionsConfiguration'; -import {ValidationErrorContext, filterErrors} from 'components/admin/forms/ValidationErrors'; +import { + ValidationErrorContext, + ValidationErrorsProvider, + filterErrors, +} from 'components/admin/forms/ValidationErrors'; import {getChoicesFromSchema} from 'utils/json-schema'; import ZGWFormFields from './ZGWOptionsFormFields'; @@ -22,14 +26,14 @@ const ZGWOptionsForm = ({name, label, schema, formData, onChange}) => { zaakVertrouwelijkheidaanduiding.enumNames ); - const numErrors = filterErrors(name, validationErrors).length; const defaultGroup = apiGroupChoices.length === 1 ? apiGroupChoices[0][0] : undefined; + const relevantErrors = filterErrors(name, validationErrors); return ( { }} onSubmit={values => onChange({formData: values})} > - + + + ); }; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js index c43929489a..67911e76e7 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.js @@ -5,28 +5,14 @@ import {FormattedMessage} from 'react-intl'; import {TabList, TabPanel, Tabs} from 'react-tabs'; import Tab from 'components/admin/form_design/Tab'; -import {ContentJSON} from 'components/admin/form_design/registrations/objectsapi/LegacyConfigFields'; -import Fieldset from 'components/admin/forms/Fieldset'; -import { - ValidationErrorContext, - ValidationErrorsProvider, - filterErrors, -} from 'components/admin/forms/ValidationErrors'; -import {ObjectsAPIGroup} from 'components/admin/forms/objects_api'; +import {ValidationErrorContext, filterErrors} from 'components/admin/forms/ValidationErrors'; import BasicOptionsFieldset from './BasicOptionsFieldset'; +import LegacyOptionsFieldset from './LegacyOptionsFieldset'; import ManageVariableToPropertyMappings from './ManageVariableToPropertyMappings'; +import ObjectsAPIOptionsFieldset from './ObjectsAPIOptionsFieldset'; import OptionalOptionsFieldset from './OptionalOptionsFieldset'; -import {LegacyCaseType, LegacyDocumentType, ObjectType, ObjectTypeVersion} from './fields'; - -/** - * Callback to invoke when the API group changes - used to reset the dependent fields. - */ -const onApiGroupChange = prevValues => ({ - ...prevValues, - objecttype: '', - objecttypeVersion: undefined, -}); +import useCatalogueOptions from './useCatalogueOptions'; const ZGWFormFields = ({ name, @@ -35,93 +21,59 @@ const ZGWFormFields = ({ confidentialityLevelChoices, }) => { const { - values: {propertyMappings = [], objecttype = ''}, + values: {propertyMappings = []}, } = useFormikContext(); const validationErrors = useContext(ValidationErrorContext); - const relevantErrors = filterErrors(name, validationErrors); + + // load the available catalogues + const {loadingCatalogues, catalogueOptionGroups, cataloguesError, catalogueUrl} = + useCatalogueOptions(); const numCasePropertyErrors = filterErrors(`${name}.propertyMappings`, validationErrors).length; - const numBaseErrors = relevantErrors.length - numCasePropertyErrors; + const numBaseErrors = validationErrors.length - numCasePropertyErrors; return ( - - - - 0}> - - - 0}> - - - - - {/* Base configuration */} - - - - {/* @deprecated */} -
- } - fieldNames={['zaaktype', 'informatieobjecttype']} - collapsible - > -
- -
- - -
- - + + + 0}> + + + 0}> + + + -
- } - collapsible - fieldNames={['objecttype', 'objecttypeVersion', 'contentJson']} - > - - - - -
- + {/* Base configuration */} + + + + + + - {/* zaakeigenschappen / case properties */} - - - - - + {/* zaakeigenschappen / case properties */} + + + + ); }; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js index 3707b86e93..9ff47e8d1c 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/ZGWOptionsFormFields.stories.js @@ -9,7 +9,13 @@ import { import {rsSelect} from 'utils/storybookTestHelpers'; import ZGWFormFields from './ZGWOptionsFormFields'; -import {mockCaseTypesGet, mockCataloguesGet, mockDocumenTypesGet, mockProductsGet} from './mocks'; +import { + mockCaseTypesGet, + mockCataloguesGet, + mockCataloguesGetError, + mockDocumenTypesGet, + mockProductsGet, +} from './mocks'; const NAME = 'form.registrationBackends.0.options'; @@ -54,7 +60,12 @@ export default { }, parameters: { msw: { - handlers: [mockCataloguesGet(), mockCaseTypesGet(), mockDocumenTypesGet(), mockProductsGet()], + handlers: { + catalogues: [mockCataloguesGet()], + caseTypes: [mockCaseTypesGet()], + documentTypes: [mockDocumenTypesGet()], + products: [mockProductsGet()], + }, }, }, }; @@ -132,3 +143,20 @@ export const SelectCaseTypeAndDocumentType = { await rsSelect(documentTypeSelect, 'Attachment'); }, }; + +export const CataloguesLoadingFails = { + args: { + formData: { + zgwApiGroup: 1, + zaaktype: '', + propertyMappings: [], + }, + }, + parameters: { + msw: { + handlers: { + catalogues: [mockCataloguesGetError()], + }, + }, + }, +}; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js b/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js index 605ee97ec8..72b5d26331 100644 --- a/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/mocks.js @@ -29,6 +29,11 @@ export const mockCataloguesGet = () => HttpResponse.json(CATALOGUES) ); +export const mockCataloguesGetError = () => + http.get(`${API_BASE_URL}/api/v2/registration/plugins/zgw-api/catalogues`, () => + HttpResponse.json({unexpected: 'error'}, {status: 500}) + ); + const CASE_TYPES = { 'https://example.com/catalogi/api/v1/catalogussen/1': [ { @@ -143,14 +148,14 @@ export const mockDocumenTypesGet = () => const PRODUCTS = [ { - uri: 'https://example.com/product/1234', + url: 'https://example.com/product/1234', }, { - uri: 'https://example.com/product/4321', + url: 'https://example.com/product/4321', description: undefined, }, { - uri: 'https://example.com/product/1423', + url: 'https://example.com/product/1423', description: 'Product 1423', }, ]; diff --git a/src/openforms/js/components/admin/form_design/registrations/zgw/useCatalogueOptions.js b/src/openforms/js/components/admin/form_design/registrations/zgw/useCatalogueOptions.js new file mode 100644 index 0000000000..e19e271f60 --- /dev/null +++ b/src/openforms/js/components/admin/form_design/registrations/zgw/useCatalogueOptions.js @@ -0,0 +1,90 @@ +import {useFormikContext} from 'formik'; +import {useAsync, usePrevious, useUpdateEffect} from 'react-use'; + +import {getCatalogueOption} from 'components/admin/forms/zgw'; + +import {getCatalogues} from './utils'; + +/** + * Hook that manages everything related to the ZGW API group available catalogues. + * + * It's responsible for retrieving the options and the derived catalogueUrl if a + * catalogue is selected. It also takes care of resetting dependent form state if the + * catalogue changes. + */ +const useCatalogueOptions = () => { + const { + values: { + zgwApiGroup = null, + catalogue = undefined, + caseTypeIdentification = '', + documentTypeDescription = '', + medewerkerRoltype = '', + productUrl = '', + }, + setFieldValue, + } = useFormikContext(); + + const previousCatalogue = usePrevious(catalogue); + const previousCaseTypeIdentification = usePrevious(caseTypeIdentification); + + // fetch available catalogues and re-use the result + const { + loading: loadingCatalogues, + value: catalogueOptionGroups = [], + error: cataloguesError, + } = useAsync(async () => { + if (!zgwApiGroup) return []; + return await getCatalogues(zgwApiGroup); + }, [zgwApiGroup]); + + const catalogueValue = getCatalogueOption(catalogueOptionGroups, catalogue || {}); + const catalogueUrl = catalogueValue?.url; + + // Synchronize dependent fields when dependencies change. + // 1. Clear case type when catalogue changes. + useUpdateEffect(() => { + const catalogueChanged = catalogue !== previousCatalogue; + if (previousCatalogue && catalogueChanged && caseTypeIdentification) { + setFieldValue('caseTypeIdentification', ''); + } + }, [setFieldValue, previousCatalogue, catalogue, caseTypeIdentification]); + + // 2. Clear document type when case type changes + useUpdateEffect(() => { + const caseTypeChanged = caseTypeIdentification !== previousCaseTypeIdentification; + if (previousCaseTypeIdentification && caseTypeChanged && documentTypeDescription) { + setFieldValue('documentTypeDescription', ''); + } + }, [ + setFieldValue, + previousCaseTypeIdentification, + caseTypeIdentification, + documentTypeDescription, + ]); + + // 3. Clear selected product when case type changes + useUpdateEffect(() => { + const caseTypeChanged = caseTypeIdentification !== previousCaseTypeIdentification; + if (previousCaseTypeIdentification && caseTypeChanged && productUrl) { + setFieldValue('productUrl', ''); + } + }, [setFieldValue, previousCaseTypeIdentification, caseTypeIdentification, productUrl]); + + // 4. Clear medewerker roltype when case type changes + useUpdateEffect(() => { + const caseTypeChanged = caseTypeIdentification !== previousCaseTypeIdentification; + if (previousCaseTypeIdentification && caseTypeChanged && medewerkerRoltype) { + setFieldValue('medewerkerRoltype', ''); + } + }, [setFieldValue, previousCaseTypeIdentification, caseTypeIdentification, medewerkerRoltype]); + + return { + loadingCatalogues, + catalogueOptionGroups, + cataloguesError, + catalogueUrl, + }; +}; + +export default useCatalogueOptions; diff --git a/src/openforms/js/components/admin/forms/zgw/CatalogueSelect.js b/src/openforms/js/components/admin/forms/zgw/CatalogueSelect.js index ff74f63ec8..f811ea7a44 100644 --- a/src/openforms/js/components/admin/forms/zgw/CatalogueSelect.js +++ b/src/openforms/js/components/admin/forms/zgw/CatalogueSelect.js @@ -78,22 +78,24 @@ const CatalogueSelect = ({label, isDisabled = false, loading, optionGroups}) => ); }; +export const CatalogueSelectOptions = PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string.isRequired, + options: PropTypes.arrayOf( + PropTypes.shape({ + rsin: PropTypes.string.isRequired, + domain: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + }) + ).isRequired, + }) +); + CatalogueSelect.propTypes = { label: PropTypes.node.isRequired, isDisabled: PropTypes.bool, loading: PropTypes.bool.isRequired, - optionGroups: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string.isRequired, - options: PropTypes.arrayOf( - PropTypes.shape({ - rsin: PropTypes.string.isRequired, - domain: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, - }) - ).isRequired, - }) - ), + optionGroups: CatalogueSelectOptions, }; export default CatalogueSelect; diff --git a/src/openforms/js/components/admin/forms/zgw/index.js b/src/openforms/js/components/admin/forms/zgw/index.js index a227a42ef0..e771ba7cf5 100644 --- a/src/openforms/js/components/admin/forms/zgw/index.js +++ b/src/openforms/js/components/admin/forms/zgw/index.js @@ -3,6 +3,7 @@ */ export { default as CatalogueSelect, + CatalogueSelectOptions, extractValue as getCatalogueOption, groupAndSortOptions as groupAndSortCatalogueOptions, } from './CatalogueSelect'; diff --git a/src/openforms/js/lang/en.json b/src/openforms/js/lang/en.json index 0c535db7ce..e4b6a7dbf7 100644 --- a/src/openforms/js/lang/en.json +++ b/src/openforms/js/lang/en.json @@ -1214,6 +1214,11 @@ "description": "Add process variable button", "originalDefault": "Add variable" }, + "LbiXCA": { + "defaultMessage": "Something went wrong while retrieving the available products defined in the selected case. Please check that the services in the selected API group are configured correctly.", + "description": "ZGW APIs registrations options: case product error", + "originalDefault": "Something went wrong while retrieving the available products defined in the selected case. Please check that the services in the selected API group are configured correctly." + }, "LeVpdf": { "defaultMessage": "Plugin configuration: Email", "description": "Email registration options modal title", @@ -2494,11 +2499,6 @@ "description": "Add item to multi-input field", "originalDefault": "Add item" }, - "ln2iyc": { - "defaultMessage": "Something went wrong while retrieving the available catalogues or products defined in the selected case. Please check that the services in the selected API group are configured correctly.", - "description": "ZGW APIs registrations options: case product error", - "originalDefault": "Something went wrong while retrieving the available catalogues or products defined in the selected case. Please check that the services in the selected API group are configured correctly." - }, "ln72CJ": { "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.", "description": "ZGW APIs registration options 'objecttype' help text", diff --git a/src/openforms/js/lang/nl.json b/src/openforms/js/lang/nl.json index d078487879..763208f174 100644 --- a/src/openforms/js/lang/nl.json +++ b/src/openforms/js/lang/nl.json @@ -1223,6 +1223,11 @@ "description": "Add process variable button", "originalDefault": "Add variable" }, + "LbiXCA": { + "defaultMessage": "Er ging iets fout bij het ophalen van de beschikbare producten binnen het geselecteerde zaaktype. Controleer of de services in de geselecteerde API-groep goed ingesteld zijn.", + "description": "ZGW APIs registrations options: case product error", + "originalDefault": "Something went wrong while retrieving the available products defined in the selected case. Please check that the services in the selected API group are configured correctly." + }, "LeVpdf": { "defaultMessage": "Plugin-insellingen: e-mail", "description": "Email registration options modal title", @@ -2515,11 +2520,6 @@ "description": "Add item to multi-input field", "originalDefault": "Add item" }, - "ln2iyc": { - "defaultMessage": "Er ging iets fout bij het ophalen van de beschikbare catalogi of geselecteerde zaak producten. Controleer of de services in de geselecteerde API-groep goed ingesteld zijn.", - "description": "ZGW APIs registrations options: case product error", - "originalDefault": "Something went wrong while retrieving the available catalogues or products defined in the selected case. Please check that the services in the selected API group are configured correctly." - }, "ln72CJ": { "defaultMessage": "Objecttyperesource-URL in de Objecttypen-API. Wanneer dit ingesteld is, dan wordt een object van dit type aangemaakt en aan de zaak gerelateerd.", "description": "ZGW APIs registration options 'objecttype' help text",