From 2eae26d2924df44b6db560d827075f49d6c47186 Mon Sep 17 00:00:00 2001 From: Steven Bal Date: Mon, 25 Nov 2024 12:06:55 +0100 Subject: [PATCH] :sparkles: [#4398] Add authAttributePath to objects prefill form --- .../objectsapi/LegacyConfigFields.js | 161 +++++++++--------- .../objectsapi/ObjectsApiOptionsForm.js | 2 +- .../objectsapi/V2ConfigFields.js | 48 +++--- .../registrations/objectsapi/fields/index.js | 1 - .../variables/VariablesEditor.stories.js | 5 +- ...opyConfigurationFromRegistrationBackend.js | 3 +- .../prefill/objects_api/ObjectsAPIFields.js | 49 +++--- .../js/components/admin/forms/ArrayInput.js | 8 +- .../components/admin/forms/VariableMapping.js | 2 +- .../objects_api}/AuthAttributePath.js | 25 ++- .../admin/forms/objects_api/index.js | 1 + 11 files changed, 166 insertions(+), 139 deletions(-) rename src/openforms/js/components/admin/{form_design/registrations/objectsapi/fields => forms/objects_api}/AuthAttributePath.js (62%) diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js index 4e4f8a18dd..ba80b822f9 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/LegacyConfigFields.js @@ -1,12 +1,15 @@ import {useField} from 'formik'; import PropTypes from 'prop-types'; -import {FormattedMessage} from 'react-intl'; +import {useContext} from 'react'; +import {FormattedMessage, useIntl} from 'react-intl'; +import {FeatureFlagsContext} from 'components/admin/form_design/Context'; import Field from 'components/admin/forms/Field'; import Fieldset from 'components/admin/forms/Fieldset'; import FormRow from 'components/admin/forms/FormRow'; import {TextArea, TextInput} from 'components/admin/forms/Inputs'; import { + AuthAttributePath, ObjectTypeSelect, ObjectTypeVersionSelect, ObjectsAPIGroup, @@ -14,7 +17,6 @@ import { import ErrorBoundary from 'components/errors/ErrorBoundary'; import { - AuthAttributePath, DocumentTypesFieldet, LegacyDocumentTypesFieldet, OrganisationRSIN, @@ -31,89 +33,94 @@ const onApiGroupChange = prevValues => ({ objecttypeVersion: undefined, }); -const LegacyConfigFields = ({apiGroupChoices}) => ( - <> -
- +const LegacyConfigFields = ({apiGroupChoices}) => { + const intl = useIntl(); + const {REGISTRATION_OBJECTS_API_ENABLE_EXISTING_OBJECT_INTEGRATION = false} = + useContext(FeatureFlagsContext); + + const [updateExistingObject] = useField('updateExistingObject'); + const authAttributePathRequired = !!updateExistingObject.value; + + return ( + <> +
+ + + } + > + + + +
+ +
+ } + collapsible + initialCollapsed={false} + > + + + +
+ } > - - } - helpText={ - - } - /> - - } - /> + -
-
- } - collapsible - initialCollapsed={false} - > - - - -
- - - } - > - - - - - -
- } - collapsible - fieldNames={['organisatieRsin']} - > - - - - -
- -); + + +
+ } + collapsible + fieldNames={['organisatieRsin']} + > + + + {REGISTRATION_OBJECTS_API_ENABLE_EXISTING_OBJECT_INTEGRATION ? ( + + ) : null} + +
+ + ); +}; LegacyConfigFields.propTypes = { apiGroupChoices: PropTypes.arrayOf( diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsForm.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsForm.js index b84e8bcff8..586518e70c 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsForm.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/ObjectsApiOptionsForm.js @@ -56,7 +56,7 @@ ObjectsApiOptionsForm.propTypes = { objecttype: PropTypes.string, objecttypeVersion: PropTypes.number, updateExistingObject: PropTypes.bool, - authAttributePath: PropTypes.bool, + authAttributePath: PropTypes.array, productaanvraagType: PropTypes.string, informatieobjecttypeSubmissionReport: PropTypes.string, uploadSubmissionCsv: PropTypes.bool, diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js index 2b6efed72b..b5f67d4ecd 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/V2ConfigFields.js @@ -1,10 +1,14 @@ -import {useFormikContext} from 'formik'; +import {useField, useFormikContext} from 'formik'; import PropTypes from 'prop-types'; +import {useContext} from 'react'; +import {useIntl} from 'react-intl'; import {FormattedMessage} from 'react-intl'; +import {FeatureFlagsContext} from 'components/admin/form_design/Context'; import useConfirm from 'components/admin/form_design/useConfirm'; import Fieldset from 'components/admin/forms/Fieldset'; import { + AuthAttributePath, ObjectTypeSelect, ObjectTypeVersionSelect, ObjectsAPIGroup, @@ -12,7 +16,6 @@ import { import ErrorBoundary from 'components/errors/ErrorBoundary'; import { - AuthAttributePath, DocumentTypesFieldet, LegacyDocumentTypesFieldet, OrganisationRSIN, @@ -31,6 +34,13 @@ const onApiGroupChange = prevValues => ({ }); const V2ConfigFields = ({apiGroupChoices}) => { + const intl = useIntl(); + const {REGISTRATION_OBJECTS_API_ENABLE_EXISTING_OBJECT_INTEGRATION = false} = + useContext(FeatureFlagsContext); + + const [updateExistingObject] = useField('updateExistingObject'); + const authAttributePathRequired = !!updateExistingObject.value; + const { values: {variablesMapping = []}, setFieldValue, @@ -70,18 +80,14 @@ const V2ConfigFields = ({apiGroupChoices}) => { } > - } - helpText={ - - } + label={intl.formatMessage({ + description: "Objects API registration options 'Objecttype' label", + defaultMessage: 'Objecttype', + })} + helpText={intl.formatMessage({ + description: "Objects API registration options 'Objecttype' helpText", + defaultMessage: 'The registration result will be an object from the selected type.', + })} onChangeCheck={async () => { if (variablesMapping.length === 0) return true; const confirmSwitch = await openObjectTypeConfirmation(); @@ -101,12 +107,10 @@ const V2ConfigFields = ({apiGroupChoices}) => { } > - } + label={intl.formatMessage({ + description: "Objects API registration options 'objecttypeVersion' label", + defaultMessage: 'Version', + })} /> @@ -136,7 +140,9 @@ const V2ConfigFields = ({apiGroupChoices}) => { > - + {REGISTRATION_OBJECTS_API_ENABLE_EXISTING_OBJECT_INTEGRATION ? ( + + ) : null} diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/index.js b/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/index.js index eb718ea817..bc81b78752 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/index.js +++ b/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/index.js @@ -3,4 +3,3 @@ export {DocumentTypesFieldet} from './DocumentTypes'; export {default as UpdateExistingObject} from './UpdateExistingObject'; export {default as UploadSubmissionCsv} from './UploadSubmissionCSV'; export {default as OrganisationRSIN} from './OrganisationRSIN'; -export {default as AuthAttributePath} from './AuthAttributePath'; diff --git a/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js b/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js index f4619e2bc6..5f9d34a63e 100644 --- a/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js +++ b/src/openforms/js/components/admin/form_design/variables/VariablesEditor.stories.js @@ -639,6 +639,7 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = { objectsApiGroup: 1, objecttype: '2c77babf-a967-4057-9969-0200320d23f1', objecttypeVersion: 2, + authAttributePath: ['path', 'to', 'bsn'], variablesMapping: [ { variableKey: 'formioComponent', @@ -705,7 +706,6 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = { // Cannot do selectOption with react-select const options = await canvas.findAllByText('Example Objects API reg.'); const option = options[1]; - console.log(option); await userEvent.click(option); const copyButton = await canvas.findByRole('button', { @@ -735,6 +735,9 @@ export const ConfigurePrefillObjectsAPIWithCopyButton = { 'options.objecttypeUuid': '2c77babf-a967-4057-9969-0200320d23f1', 'options.objecttypeVersion': '2', }); + expect(canvas.getByTestId('options.authAttributePath-0')).toHaveValue('path'); + expect(canvas.getByTestId('options.authAttributePath-1')).toHaveValue('to'); + expect(canvas.getByTestId('options.authAttributePath-2')).toHaveValue('bsn'); expect(propertyDropdowns[0]).toHaveValue(serializeValue(['height'])); expect(propertyDropdowns[1]).toHaveValue(serializeValue(['species'])); diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/CopyConfigurationFromRegistrationBackend.js b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/CopyConfigurationFromRegistrationBackend.js index 1292b6aba4..b4d4d44c25 100644 --- a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/CopyConfigurationFromRegistrationBackend.js +++ b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/CopyConfigurationFromRegistrationBackend.js @@ -58,7 +58,7 @@ const CopyConfigurationFromRegistrationBackend = ({backends, setShowCopyButton}) onClick={async e => { e.preventDefault(); const confirmSwitch = await openCopyConfigurationConfirmationModal(); - if (confirmSwitch) { + if (confirmSwitch && selectedBackend) { setValues(prevValues => ({ ...prevValues, // Trying to set multiple nested values doesn't work, since it sets them @@ -68,6 +68,7 @@ const CopyConfigurationFromRegistrationBackend = ({backends, setShowCopyButton}) objectsApiGroup: selectedBackend.options.objectsApiGroup, objecttypeUuid: selectedBackend.options.objecttype, objecttypeVersion: selectedBackend.options.objecttypeVersion, + authAttributePath: selectedBackend.options.authAttributePath, variablesMapping: selectedBackend.options.variablesMapping, }, })); diff --git a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js index 5f7b0d375f..b077f4490a 100644 --- a/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js +++ b/src/openforms/js/components/admin/form_design/variables/prefill/objects_api/ObjectsAPIFields.js @@ -5,7 +5,7 @@ */ import {useFormikContext} from 'formik'; import PropTypes from 'prop-types'; -import {useContext, useEffect, useState} from 'react'; +import {useContext, useEffect} from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; import useAsync from 'react-use/esm/useAsync'; @@ -16,6 +16,7 @@ import FormRow from 'components/admin/forms/FormRow'; import {LOADING_OPTION} from 'components/admin/forms/Select'; import VariableMapping from 'components/admin/forms/VariableMapping'; import { + AuthAttributePath, ObjectTypeSelect, ObjectTypeVersionSelect, ObjectsAPIGroup, @@ -38,6 +39,7 @@ const onApiGroupChange = prevValues => ({ ...prevValues.options, objecttypeUuid: '', objecttypeVersion: undefined, + authAttributePath: [], variablesMapping: [], }, }); @@ -60,7 +62,13 @@ const ObjectsAPIFields = ({errors, showCopyButton, setShowCopyButton}) => { values, values: { plugin, - options: {objecttypeUuid, objecttypeVersion, objectsApiGroup, variablesMapping}, + options: { + objecttypeUuid, + objecttypeVersion, + objectsApiGroup, + authAttributePath, + variablesMapping, + }, }, setFieldValue, } = useFormikContext(); @@ -69,6 +77,7 @@ const ObjectsAPIFields = ({errors, showCopyButton, setShowCopyButton}) => { objectsApiGroup: '', objecttypeUuid: '', objecttypeVersion: null, + authAttributePath: [], variablesMapping: [], }; @@ -120,7 +129,7 @@ const ObjectsAPIFields = ({errors, showCopyButton, setShowCopyButton}) => { return ( <> - {showCopyButton && backends.length ? ( + {showCopyButton ? ( { if (!objecttypeUuid) return true; const confirmSwitch = await openApiGroupConfirmationModal(); if (!confirmSwitch) return false; + setFieldValue('options.authAttributePath', []); setFieldValue('options.variablesMapping', []); return true; }} @@ -154,22 +164,20 @@ const ObjectsAPIFields = ({errors, showCopyButton, setShowCopyButton}) => { name="options.objecttypeUuid" apiGroupFieldName="options.objectsApiGroup" versionFieldName="options.objecttypeVersion" - label={ - - } - helpText={ - - } + label={intl.formatMessage({ + description: "Objects API prefill options 'Objecttype' label", + defaultMessage: 'Objecttype', + })} + helpText={intl.formatMessage({ + description: "Objects API prefill options 'Objecttype' helpText", + defaultMessage: + 'The prefill values will be taken from an object of the selected type.', + })} onChangeCheck={async () => { if (values.options.variablesMapping.length === 0) return true; const confirmSwitch = await openObjectTypeConfirmationModal(); if (!confirmSwitch) return false; + setFieldValue('options.authAttributePath', []); setFieldValue('options.variablesMapping', []); return true; }} @@ -188,16 +196,15 @@ const ObjectsAPIFields = ({errors, showCopyButton, setShowCopyButton}) => { > - } + label={intl.formatMessage({ + description: "Objects API prefill options 'objecttypeVersion' label", + defaultMessage: 'Version', + })} apiGroupFieldName="options.objectsApiGroup" objectTypeFieldName="options.objecttypeUuid" /> +
{ + setInputs([...values]); + }, [values]); + const onAdd = event => { setInputs(inputs.concat([''])); }; @@ -65,6 +70,7 @@ const ArrayInput = ({ type={inputType} value={value} onChange={onInputChange.bind(null, index)} + data-testid={`${name}-${index}`} {...extraProps} /> diff --git a/src/openforms/js/components/admin/forms/VariableMapping.js b/src/openforms/js/components/admin/forms/VariableMapping.js index 825abd82d5..bab5846fe1 100644 --- a/src/openforms/js/components/admin/forms/VariableMapping.js +++ b/src/openforms/js/components/admin/forms/VariableMapping.js @@ -255,7 +255,7 @@ const VariableMapping = ({ // TODO update const initial = {[variableName]: '', [propertyName]: ''}; const mapping = get(values, name); - arrayHelpers.insert(mapping.length, initial); + arrayHelpers.insert(mapping ? mapping.length : 0, initial); }} > diff --git a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/AuthAttributePath.js b/src/openforms/js/components/admin/forms/objects_api/AuthAttributePath.js similarity index 62% rename from src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/AuthAttributePath.js rename to src/openforms/js/components/admin/forms/objects_api/AuthAttributePath.js index a7a323cb8b..3cf9cf3d97 100644 --- a/src/openforms/js/components/admin/form_design/registrations/objectsapi/fields/AuthAttributePath.js +++ b/src/openforms/js/components/admin/forms/objects_api/AuthAttributePath.js @@ -1,26 +1,19 @@ import {useField} from 'formik'; -import {useContext} from 'react'; +import PropTypes from 'prop-types'; import {FormattedMessage} from 'react-intl'; -import {FeatureFlagsContext} from 'components/admin/form_design/Context'; import ArrayInput from 'components/admin/forms/ArrayInput'; import Field from 'components/admin/forms/Field'; import FormRow from 'components/admin/forms/FormRow'; -const AuthAttributePath = () => { - const [fieldProps, , fieldHelpers] = useField({name: 'authAttributePath', type: 'array'}); - const [updateExistingObject] = useField('updateExistingObject'); +const AuthAttributePath = ({name, required = true, ...extraProps}) => { + const [fieldProps, , fieldHelpers] = useField({name: name, type: 'array'}); const {setValue} = fieldHelpers; - const {REGISTRATION_OBJECTS_API_ENABLE_EXISTING_OBJECT_INTEGRATION = false} = - useContext(FeatureFlagsContext); - - if (!REGISTRATION_OBJECTS_API_ENABLE_EXISTING_OBJECT_INTEGRATION) { - return null; - } return ( { defaultMessage="This is used to perform validation to verify that the authenticated user is the owner of the object." /> } - required={!!updateExistingObject.value} + required={required} > { setValue(value); }} inputType="text" + {...extraProps} /> ); }; -AuthAttributePath.propTypes = {}; +AuthAttributePath.propTypes = { + name: PropTypes.string.isRequired, + required: PropTypes.bool, +}; export default AuthAttributePath; diff --git a/src/openforms/js/components/admin/forms/objects_api/index.js b/src/openforms/js/components/admin/forms/objects_api/index.js index 0d50dcfab0..01c8607560 100644 --- a/src/openforms/js/components/admin/forms/objects_api/index.js +++ b/src/openforms/js/components/admin/forms/objects_api/index.js @@ -1,3 +1,4 @@ +export {default as AuthAttributePath} from './AuthAttributePath'; export {default as ObjectsAPIGroup} from './ObjectsAPIGroup'; export {default as ObjectTypeSelect} from './ObjectTypeSelect'; export {default as ObjectTypeVersionSelect} from './ObjectTypeVersionSelect';