|
-
+
{
// TODO update
- const initial = {formVariable: '', [propertyName]: ''};
+ const initial = {[variableName]: '', [propertyName]: ''};
const mapping = get(values, name);
arrayHelpers.insert(mapping.length, initial);
}}
@@ -274,6 +286,13 @@ VariableMapping.propTypes = {
*/
directionIcon: PropTypes.node,
+ /**
+ * Name of the variable nested inside each mapping item.
+ *
+ * This is the form variable to which the property will be mapped.
+ */
+ variableName: PropTypes.string.isRequired,
+
/**
* Name of the property nested inside each mapping item.
*
diff --git a/src/openforms/js/components/admin/forms/VariableMapping.stories.js b/src/openforms/js/components/admin/forms/VariableMapping.stories.js
index a999071807..b6800d5c49 100644
--- a/src/openforms/js/components/admin/forms/VariableMapping.stories.js
+++ b/src/openforms/js/components/admin/forms/VariableMapping.stories.js
@@ -1,9 +1,9 @@
-import {expect, fn, userEvent, waitFor, within} from '@storybook/test';
+import {expect, fn, userEvent, within} from '@storybook/test';
import selectEvent from 'react-select-event';
import {FormDecorator, FormikDecorator} from 'components/admin/form_design/story-decorators';
import {VARIABLE_SOURCES} from 'components/admin/form_design/variables/constants';
-import {getReactSelectContainer} from 'utils/storybookTestHelpers';
+import {findReactSelectMenu} from 'utils/storybookTestHelpers';
import VariableMapping, {serializeValue} from './VariableMapping';
@@ -149,9 +149,9 @@ export const SelectOptions = {
const formVariableDropdown = canvas.getByLabelText('Formuliervariabele');
selectEvent.openMenu(formVariableDropdown);
- const formVarOptions = await within(
- getReactSelectContainer(formVariableDropdown)
- ).findAllByRole('option');
+ const formVarOptions = await within(await findReactSelectMenu(canvas)).findAllByRole(
+ 'option'
+ );
expect(formVarOptions).toHaveLength(2);
expect(formVarOptions[0]).toHaveTextContent('key2');
diff --git a/src/openforms/js/components/admin/forms/VariableSelection.stories.js b/src/openforms/js/components/admin/forms/VariableSelection.stories.js
index 0c9b6ccb94..8da4d86efc 100644
--- a/src/openforms/js/components/admin/forms/VariableSelection.stories.js
+++ b/src/openforms/js/components/admin/forms/VariableSelection.stories.js
@@ -3,6 +3,7 @@ import {useArgs} from '@storybook/preview-api';
import {FormDecorator} from 'components/admin/form_design/story-decorators';
import {VARIABLE_SOURCES} from '../form_design/variables/constants';
+import {ReactSelectContext} from './ReactSelect';
import VariableSelection from './VariableSelection';
const render = ({name, includeStaticVariables, filter, menuIsOpen = false}) => {
@@ -117,6 +118,14 @@ export default {
export const Default = {};
export const menuOpen = {
+ decorators: [
+ // workaround for https://github.com/JedWatson/react-select/issues/3708
+ Story => (
+ undefined}}>
+
+
+ ),
+ ],
args: {
menuIsOpen: true,
},
diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js
index 5e80d60cd3..157b3ba7d2 100644
--- a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js
+++ b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js
@@ -1,6 +1,5 @@
import {useField, useFormikContext} from 'formik';
import PropTypes from 'prop-types';
-import {FormattedMessage} from 'react-intl';
import {usePrevious, useUpdateEffect} from 'react-use';
import useAsync from 'react-use/esm/useAsync';
@@ -24,6 +23,8 @@ const ObjectTypeSelect = ({
name = 'objecttype',
apiGroupFieldName = 'objectsApiGroup',
onChangeCheck,
+ label,
+ helpText,
versionFieldName = 'objecttypeVersion',
}) => {
const [fieldProps, , fieldHelpers] = useField(name);
@@ -67,31 +68,15 @@ const ObjectTypeSelect = ({
return (
-
- }
- helpText={
-
- }
- noManageChildProps
- >
+
{
- const okToProceed = onChangeCheck === undefined || onChangeCheck();
+ onChange={async selectedOption => {
+ const okToProceed = onChangeCheck === undefined || (await onChangeCheck());
if (okToProceed) setValue(selectedOption.value);
}}
/>
@@ -107,9 +92,17 @@ ObjectTypeSelect.propTypes = {
name: PropTypes.string,
/**
* Optional callback to confirm the change. Return `true` to continue with the change,
- * return `false` to abort it.
+ * return `false` to abort it. The callback function must be async.
*/
onChangeCheck: PropTypes.func,
+ /**
+ * The label that will be shown before the field
+ */
+ label: PropTypes.string.isRequired,
+ /**
+ * The help text to explain what the field is for
+ */
+ helpText: PropTypes.string.isRequired,
/**
* Name of the field holding the selected API group. The value is used in the API
* call to get the available object types.
diff --git a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js
index 63a4b7028a..126e08275b 100644
--- a/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js
+++ b/src/openforms/js/components/admin/forms/objects_api/ObjectTypeVersionSelect.js
@@ -29,6 +29,7 @@ const ObjectTypeVersionSelect = ({
name = 'objecttypeVersion',
apiGroupFieldName = 'objectsApiGroup',
objectTypeFieldName = 'objecttype',
+ label,
}) => {
const {getFieldProps} = useFormikContext();
@@ -54,17 +55,7 @@ const ObjectTypeVersionSelect = ({
const options = choices.map(([value, label]) => ({value, label}));
return (
-
- }
- noManageChildProps
- >
+
option.value === normalizedValue)}
required={required}
- onChange={selectedOption => {
- const okToProceed = onChangeCheck === undefined || onChangeCheck();
+ onChange={async selectedOption => {
+ const okToProceed = onChangeCheck === undefined || (await onChangeCheck());
if (okToProceed) {
// normalize empty string back to null
const newValue = selectedOption ? selectedOption.value : null;
diff --git a/src/openforms/js/lang/en.json b/src/openforms/js/lang/en.json
index a575ce961b..35192bab32 100644
--- a/src/openforms/js/lang/en.json
+++ b/src/openforms/js/lang/en.json
@@ -69,6 +69,11 @@
"description": "Email registration options 'attachmentFormats' label",
"originalDefault": "The format(s) of the attachment(s) containing the submission details"
},
+ "0EYS7D": {
+ "defaultMessage": "Objecttype",
+ "description": "Objects API prefill options 'Objecttype' label",
+ "originalDefault": "Objecttype"
+ },
"0M2B7B": {
"defaultMessage": "DMN variable",
"description": "DMN variable label",
@@ -199,6 +204,11 @@
"description": "Logic expression generated description",
"originalDefault": "When {desc}"
},
+ "3SCiQR": {
+ "defaultMessage": "Copy configuration from registration",
+ "description": "Objects API prefill options: link to show copy from registration button",
+ "originalDefault": "Copy configuration from registration"
+ },
"3W3Px9": {
"defaultMessage": "Add another",
"description": "Button text to add extra item",
@@ -319,6 +329,11 @@
"description": "Variable table key title",
"originalDefault": "Key"
},
+ "6qPITC": {
+ "defaultMessage": "Something went wrong while retrieving the available object types.",
+ "description": "Objects API prefill options: object type select error",
+ "originalDefault": "Something went wrong while retrieving the available object types."
+ },
"7/Bhpw": {
"defaultMessage": "Please fill in the name of the previous variable before adding another",
"description": "Warning to finish invalid user defined variable",
@@ -674,6 +689,11 @@
"description": "Move down icon title",
"originalDefault": "Move down"
},
+ "DJ8XX2": {
+ "defaultMessage": "Select a registration backend and click the button to copy the configuration.",
+ "description": "Copy Objects API prefill configuration from registration backend help text",
+ "originalDefault": "Select a registration backend and click the button to copy the configuration."
+ },
"DRG6XN": {
"defaultMessage": "invalid input mapping(s)",
"description": "Warning message: DMN input mapping problems detected",
@@ -944,6 +964,11 @@
"description": "Form 'BRP Personen purpose limitation header value' field label",
"originalDefault": "BRP Personen purpose limitation header value"
},
+ "HdRpKT": {
+ "defaultMessage": "Version",
+ "description": "Objects API prefill options 'objecttypeVersion' label",
+ "originalDefault": "Version"
+ },
"Hfdfv2": {
"defaultMessage": "Which version of the process definition to start. The latest version is used if not specified.",
"description": "Camunda 'process definition version' help text",
@@ -2079,6 +2104,11 @@
"description": "Dynamic pricing fieldset title",
"originalDefault": "Pricing logic"
},
+ "fQuLvm": {
+ "defaultMessage": "Copy configuration from registration backend",
+ "description": "Copy Objects API prefill configuration from registration backend label",
+ "originalDefault": "Copy configuration from registration backend"
+ },
"fTmdl/": {
"defaultMessage": "Payment status update variable mapping",
"description": "StUF-ZDS registration paymentStatusUpdateMapping label",
@@ -2314,6 +2344,11 @@
"description": "Camunda complex process var configuration modal title",
"originalDefault": "Edit complex variable"
},
+ "jU6W0l": {
+ "defaultMessage": "Copy",
+ "description": "Copy Objects API prefill configuration from registration backend button",
+ "originalDefault": "Copy"
+ },
"jUPlH5": {
"defaultMessage": "Resulting string",
"description": "Interpolation expression preview label",
@@ -2384,11 +2419,6 @@
"description": "Email registration options 'emailPaymentSubject' helpText",
"originalDefault": "Subject of the email sent to the registration backend to notify a change in the payment status."
},
- "kWw9qL": {
- "defaultMessage": "This product will be send allong form submits.",
- "description": "ZGW APIs registration options 'product' helpText",
- "originalDefault": "This product will be send allong form submits."
- },
"klKZV5": {
"defaultMessage": "Indicates whether the existing object (retrieved from an optional initial data reference) should be updated, instead of creating a new one. If no existing object exists, a new one will be created instead.",
"description": "Objects API registration: updateExistingObject helpText",
@@ -2434,6 +2464,11 @@
"description": "ZGW APIs registration options 'objecttype' help text",
"originalDefault": "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."
},
+ "m83ECr": {
+ "defaultMessage": "Copying the configuration from the registration backend will clear the existing configuration. Are you sure you want to continue?",
+ "description": "Objects API prefill configuration: warning message when copying the config from registration backend",
+ "originalDefault": "Copying the configuration from the registration backend will clear the existing configuration. Are you sure you want to continue?"
+ },
"mCHS+l": {
"defaultMessage": "You have selected a catalogue - the document type URLs configured here will be ignored.",
"description": "Objects registration: warning that legacy document types will be ignored",
@@ -2539,6 +2574,11 @@
"description": "Include confirmation page content in PDF",
"originalDefault": "Whether to include the content of the confirmation page in the PDF."
},
+ "oqv4fM": {
+ "defaultMessage": "The prefill values will be taken from an object of the selected type.",
+ "description": "Objects API prefill options 'Objecttype' helpText",
+ "originalDefault": "The prefill values will be taken from an object of the selected type."
+ },
"oxYXJX": {
"defaultMessage": "How successful submissions of this form will be removed after the limit. Leave blank to use value in General Configuration.",
"description": "Successful Submissions Removal Method help text",
diff --git a/src/openforms/js/lang/nl.json b/src/openforms/js/lang/nl.json
index d601762c7a..cc64bb79cd 100644
--- a/src/openforms/js/lang/nl.json
+++ b/src/openforms/js/lang/nl.json
@@ -69,6 +69,11 @@
"description": "Email registration options 'attachmentFormats' label",
"originalDefault": "The format(s) of the attachment(s) containing the submission details"
},
+ "0EYS7D": {
+ "defaultMessage": "Objecttype",
+ "description": "Objects API prefill options 'Objecttype' label",
+ "originalDefault": "Objecttype"
+ },
"0M2B7B": {
"defaultMessage": "DMN-variabele",
"description": "DMN variable label",
@@ -200,6 +205,11 @@
"description": "Logic expression generated description",
"originalDefault": "When {desc}"
},
+ "3SCiQR": {
+ "defaultMessage": "Copy configuration from registration",
+ "description": "Objects API prefill options: link to show copy from registration button",
+ "originalDefault": "Copy configuration from registration"
+ },
"3W3Px9": {
"defaultMessage": "Nog één toevoegen",
"description": "Button text to add extra item",
@@ -322,6 +332,11 @@
"description": "Variable table key title",
"originalDefault": "Key"
},
+ "6qPITC": {
+ "defaultMessage": "Something went wrong while retrieving the available object types.",
+ "description": "Objects API prefill options: object type select error",
+ "originalDefault": "Something went wrong while retrieving the available object types."
+ },
"7/Bhpw": {
"defaultMessage": "Vul eerst de naam van de vorige variabele in voor u een nieuwe toevoegt",
"description": "Warning to finish invalid user defined variable",
@@ -679,6 +694,11 @@
"description": "Move down icon title",
"originalDefault": "Move down"
},
+ "DJ8XX2": {
+ "defaultMessage": "Select a registration backend and click the button to copy the configuration.",
+ "description": "Copy Objects API prefill configuration from registration backend help text",
+ "originalDefault": "Select a registration backend and click the button to copy the configuration."
+ },
"DRG6XN": {
"defaultMessage": "ongeldige invoerparameters",
"description": "Warning message: DMN input mapping problems detected",
@@ -951,6 +971,11 @@
"description": "Form 'BRP Personen purpose limitation header value' field label",
"originalDefault": "BRP Personen purpose limitation header value"
},
+ "HdRpKT": {
+ "defaultMessage": "Version",
+ "description": "Objects API prefill options 'objecttypeVersion' label",
+ "originalDefault": "Version"
+ },
"Hfdfv2": {
"defaultMessage": "Welke versie van de procesdefinitie moet gebruikt worden. Indien niet opgegeven dan wordt altijd de laatste versie gebruikt.",
"description": "Camunda 'process definition version' help text",
@@ -2096,6 +2121,11 @@
"description": "Dynamic pricing fieldset title",
"originalDefault": "Pricing logic"
},
+ "fQuLvm": {
+ "defaultMessage": "Copy configuration from registration backend",
+ "description": "Copy Objects API prefill configuration from registration backend label",
+ "originalDefault": "Copy configuration from registration backend"
+ },
"fTmdl/": {
"defaultMessage": "Payment status update variable mapping",
"description": "StUF-ZDS registration paymentStatusUpdateMapping label",
@@ -2332,6 +2362,11 @@
"description": "Camunda complex process var configuration modal title",
"originalDefault": "Edit complex variable"
},
+ "jU6W0l": {
+ "defaultMessage": "Copy",
+ "description": "Copy Objects API prefill configuration from registration backend button",
+ "originalDefault": "Copy"
+ },
"jUPlH5": {
"defaultMessage": "Tekstsjabloon",
"description": "Interpolation expression preview label",
@@ -2402,11 +2437,6 @@
"description": "Email registration options 'emailPaymentSubject' helpText",
"originalDefault": "Subject of the email sent to the registration backend to notify a change in the payment status."
},
- "kWw9qL": {
- "defaultMessage": "Dit product wordt met inzendingen meegestuurd.",
- "description": "ZGW APIs registration options 'product' helpText",
- "originalDefault": "This product will be send allong form submits."
- },
"klKZV5": {
"defaultMessage": "Geeft aan of een bestaande record (verkregen van de eventuele voor-invulreferentie) bijgewerkt moet worden in plaats van een nieuw object aan te maken. Als er geen bestaand object is, dan wordt een nieuwe aangemaakt.",
"description": "Objects API registration: updateExistingObject helpText",
@@ -2452,6 +2482,11 @@
"description": "ZGW APIs registration options 'objecttype' help text",
"originalDefault": "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."
},
+ "m83ECr": {
+ "defaultMessage": "Copying the configuration from the registration backend will clear the existing configuration. Are you sure you want to continue?",
+ "description": "Objects API prefill configuration: warning message when copying the config from registration backend",
+ "originalDefault": "Copying the configuration from the registration backend will clear the existing configuration. Are you sure you want to continue?"
+ },
"mCHS+l": {
"defaultMessage": "Je hebt een catalogus geselecteerd - de hier ingestelde documenttype-URLs worden genegeerd.",
"description": "Objects registration: warning that legacy document types will be ignored",
@@ -2557,6 +2592,11 @@
"description": "Include confirmation page content in PDF",
"originalDefault": "Whether to include the content of the confirmation page in the PDF."
},
+ "oqv4fM": {
+ "defaultMessage": "The prefill values will be taken from an object of the selected type.",
+ "description": "Objects API prefill options 'Objecttype' helpText",
+ "originalDefault": "The prefill values will be taken from an object of the selected type."
+ },
"oxYXJX": {
"defaultMessage": "Geeft aan hoe voltooide inzendingen worden opgeschoond na de bewaartermijn. Laat leeg om de waarde van de algemene configuratie te gebruiken.",
"description": "Successful Submissions Removal Method help text",
diff --git a/src/openforms/js/utils/storybookTestHelpers.js b/src/openforms/js/utils/storybookTestHelpers.js
index 09fb2a8849..dbc92fdf04 100644
--- a/src/openforms/js/utils/storybookTestHelpers.js
+++ b/src/openforms/js/utils/storybookTestHelpers.js
@@ -1,3 +1,14 @@
+import selectEvent from 'react-select-event';
+
+const SB_ROOT = document.getElementById('storybook-root');
+
+/**
+ * Wrapper around selectEvent.select to ensure the portal option is used.
+ */
+const rsSelect = async (input, optionOrOptions) => {
+ await selectEvent.select(input, optionOrOptions, {container: SB_ROOT});
+};
+
/**
* From the input field (retrieved by accessible queries), find the react-select container.
*
@@ -16,4 +27,11 @@ const getReactSelectContainer = comboboxInput => {
return container;
};
-export {getReactSelectContainer};
+/**
+ * Get the (portaled) opened react select menu.
+ */
+const findReactSelectMenu = async canvas => {
+ return await canvas.findByRole('listbox');
+};
+
+export {rsSelect, getReactSelectContainer, findReactSelectMenu};
diff --git a/src/openforms/scss/components/admin/_ReactModal.scss b/src/openforms/scss/components/admin/_ReactModal.scss
index 51f867573b..0f8e2eb91a 100644
--- a/src/openforms/scss/components/admin/_ReactModal.scss
+++ b/src/openforms/scss/components/admin/_ReactModal.scss
@@ -7,7 +7,9 @@
align-items: center;
position: fixed;
- z-index: 1000;
+ // the base admin layout gets a z-index up until 2, so this ensures it's layered on top of the admin
+ // while leaving enough space for other UI elements on top of that (like react-select)
+ z-index: 3;
top: 0;
right: 0;
bottom: 0;
diff --git a/src/openforms/scss/vendor/_react-select.scss b/src/openforms/scss/vendor/_react-select.scss
index 7742660e24..42649d6b99 100644
--- a/src/openforms/scss/vendor/_react-select.scss
+++ b/src/openforms/scss/vendor/_react-select.scss
@@ -26,4 +26,8 @@
var(--of-admin-select-max-inline-size)
);
max-inline-size: var(--of-admin-select-max-inline-size);
+
+ &__menu-portal {
+ z-index: 4 !important; // one higher than the react-modal z-index
+ }
}
diff --git a/src/openforms/tests/e2e/base.py b/src/openforms/tests/e2e/base.py
index d821669090..77fd95ac16 100644
--- a/src/openforms/tests/e2e/base.py
+++ b/src/openforms/tests/e2e/base.py
@@ -150,7 +150,9 @@ async def rs_select_option(
await dropdown.focus()
await page.keyboard.press("ArrowDown")
- listbox = dropdown_root.get_by_role("listbox")
+ # The options are appended to document.body
+ listbox = page.get_by_role("listbox")
+
await expect(listbox).to_be_visible()
option = listbox.get_by_role("option", name=option_label, exact=exact)
|