👽 [#4693] Integrate Objects API prefill modal with backend #4799

stevenbal · 2024-10-28T14:48:56Z

Closes #4693

Changes

Integrate Objects API prefill modal with backend

Checklist

Check off the items that are completed or not relevant.

Impact on features
- Checked copying a form
- Checked import/export of a form
- Config checks in the configuration overview admin page
- Problem detection in the admin email digest is handled
Release management
- I have labelled the PR as "needs-backport" accordingly
I have updated the translations assets (you do NOT need to provide translations)
- Ran ./bin/makemessages_js.sh
- Ran ./bin/compilemessages_js.sh
Commit hygiene
- Commit messages refer to the relevant Github issue
- Commit messages explain the "why" of change, not the how

codecov · 2024-10-28T14:57:45Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.59%. Comparing base (4b73a1d) to head (4716f4b).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4799      +/-   ##
==========================================
+ Coverage   96.57%   96.59%   +0.02%     
==========================================
  Files         747      747              
  Lines       25400    25400              
  Branches     3355     3355              
==========================================
+ Hits        24529    24535       +6     
+ Misses        608      604       -4     
+ Partials      263      261       -2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

stevenbal · 2024-10-28T15:42:18Z

@sergei-maertens I'm trying to fix the issue with the react-select menu being clipped, but I'm not sure how to fix it. I've tried setting a z-index, but that alone doesn't fix the issue. If I try using overflow: visible, I do see the full menu, but the rest of the modal breaks :/

current situation

with overflow

Any ideas on how this can be fixed? Changing the menuPlacement to bottom will likely cause the same issue in the future, if the list of choices gets long enough

stevenbal · 2024-10-29T11:23:56Z

@sergei-maertens I've made the placement bottom and set a maxMenuHeight for the selects used in the modal to avoid overflow issues (efb307d)

src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js

src/openforms/js/components/admin/forms/ReactSelect.js

src/openforms/js/components/admin/forms/VariableMapping.js

src/openforms/js/components/admin/forms/objects_api/ObjectTypeSelect.js

sergei-maertens

I've noticed a couple more things when checking this out locally to look into the dropdown issue:

I'm missing the code structure from the registrations app a bit - now there's a single file with a number of components for the Objects API form, all in the variables/prefill folder. Perhaps building out a sub-structure like in registrations with a directory per plugin ID would be better to manage the code, and we can then split out the individual components.
When resetting the api group in the prefill form, the selected object type and version are not reset, only the variables mapping. This leads to hidden form state that is not accurately represented in the UI and is confusing at the least and dangerous at most.
The form field/button to copy the settings from a registration backend I haven't tested yet, but I found the UI controls to be in an odd place. I would expect that to be the first thing I see, visually separated from the rest of the fields since they also affect API group, object type and object type version, not just the variables mapping. And a paragraph with some explanation of what it actually does would go a long way for users to decide what they want to do to configure. Additionally, the 'copy' language should maybe be more along the lines of 'synchronize', since this would also be the mechanism to update the prefill config after the registration variables config/mapping is updated without having to manage everything manually afterwards
The help texts for fields now have the registration field help texts, those either need to be removed for the prefill plugin, or overridden with prefill-specific content. Now it's just confusing instead of making things more clear.

sergei-maertens · 2024-11-12T11:48:38Z

src/openforms/js/components/admin/forms/ReactSelect.js

@@ -82,6 +82,7 @@ const SelectWithoutFormik = ({name, options, value, className, onChange, ...prop
    classNamePrefix="admin-react-select"
    styles={styles}
    menuPlacement="auto"
+    menuPortalTarget={document.body}


this is too simple as it breaks storybook, which renders in another DOM node and the within(canvasElement) queries break. Instead, we should probably set up a custom context that defaults to document.body, but which we can override in storybook to point it to the right node, similar to what we do with the modals.

we now have this modal context for storybook from @robinmolen, so we can apply the same pattern.

that allows the user to copy the configuration used by the Form's registration backend

* remove unnecessary prefill prefix from options in javascript code * remove trailing comments * use variable for computed name in VariableMapping * add dropdown to select a registration backend instead of always picking first * also copy variablesmapping when clicking copy button * use setValues to set formik values at once, instead of multiple calls of setFieldValue

sergei-maertens · 2024-11-18T13:33:09Z

Rebased on master - I will now look at the state again and do a thorough review!

sergei-maertens · 2024-11-18T16:43:38Z

I'm not happy yet with the "copy configuration" button and this is a tough nut to crack. After some discussion/debate with Joeri, we've settled on something like this:

When you open the prefill modal, you get the current state (with dropdowns likely empty if this is the initial configuration:
- A link is injected next to the 'plugin' field. This will require some interesting changes which we can discuss tomorrow, since you currently can't provide additional children for the plugin field... We can add a tooltip here that describes how it works/what it does for better documentation.
- The registration backend dropdown is not visible at all
The user clicks the link to copy the settings - this makes the registration dropdown visible:
Clicking the link again just collapse the form row again
Selecting a backend and then clicking the 'copy' button performs the copy as it is right now, but also automatically collapses the form row again at the end to declutter the UI again.

Please also set up the styling properly so that the link and button are nicely aligned.

sergei-maertens

We should go through these remarks tomorrow :)

Let's get this PR wrapped up before we tackle the other one.

sergei-maertens · 2024-11-18T16:49:32Z

src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js

Can we structure/organize this code a bit better? I noticed I was getting lost on what calls what. I'd like to see:

a directory src/openforms/js/components/admin/form_design/variables/prefill/ with...

subdirectories default, objects_api

AttributeField, IdentifierRoleField and DefaultFields go in default

ObjectsAPIFields goes in objects_api, and you can break up the component in multiple files - try to go for one file per component

Consider moving PLUGIN_COMPONENT_MAPPING to a constants.js or index.js instead of defining it in PrefillConfigurationForm (in the prefill directory)

This mimics the structure of registration frontend components more closely and makes it a bit easier to navigate imo.

sergei-maertens · 2024-11-18T16:50:09Z

src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js

+            className="button"
+            onClick={e => {
+              e.preventDefault();
+              const confirmed = window.confirm(


the useConfirm hook rework was merged, so you can use that now :)

sergei-maertens · 2024-11-18T16:52:54Z

src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js

@@ -104,7 +190,7 @@ const ObjectsAPIFields = ({errors}) => {
        <ObjectsAPIGroup
          apiGroupChoices={apiGroups}
          onChangeCheck={async () => {
-            if (values.options.variablesMapping.length === 0) return true;
+            if (variablesMapping.length === 0) return true;


this change resets the objecttype and object version too, so just checking for variable mappings is maybe too naive? Maybe better to warn as soon as an objecttype is selected

sergei-maertens · 2024-11-18T16:53:28Z

src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js

@@ -123,11 +211,11 @@ const ObjectsAPIFields = ({errors}) => {
          }
        >
          <ObjectTypeSelect


the prefill configuration now shows the tooltips/help texts for the registration configuration, which is misleading

sergei-maertens · 2024-11-18T16:53:34Z

src/openforms/js/components/admin/form_design/variables/prefill/ObjectsAPIFields.js

@@ -147,9 +237,11 @@ const ObjectsAPIFields = ({errors}) => {
          <ObjectTypeVersionSelect


the prefill configuration now shows the tooltips/help texts for the registration configuration, which is misleading

sergei-maertens · 2024-11-18T17:07:58Z

src/openforms/js/components/admin/form_design/variables/prefill/PrefillConfigurationForm.js

+  const defaults = {
    objectsApiGroup: '',
-    objecttype: '',
+    objecttypeUuid: '',
    objecttypeVersion: null,
    variablesMapping: [],
-  },
-  errors,
-}) => {
+  };
+  options = {...defaults, ...options};


I think this needs to be pushed down to ObjectsAPIFields and have it set the default values on initial render - you can get the initialValues from the Formik state. This generic component should not be polluted with plugin-specific options and we want to keep the relevant code co-located.

sergei-maertens · 2024-11-18T17:08:27Z

src/openforms/js/components/admin/forms/ReactSelect.js

@@ -82,6 +82,7 @@ const SelectWithoutFormik = ({name, options, value, className, onChange, ...prop
    classNamePrefix="admin-react-select"
    styles={styles}
    menuPlacement="auto"
+    menuPortalTarget={document.body}


we now have this modal context for storybook from @robinmolen, so we can apply the same pattern.

stevenbal marked this pull request as draft October 28, 2024 14:49

stevenbal force-pushed the feature/4693-product-prefill-modal-integration branch from c725d4c to 7436b8f Compare October 28, 2024 15:37

stevenbal force-pushed the feature/4693-product-prefill-modal-integration branch 6 times, most recently from 49af4a9 to 175af2c Compare October 29, 2024 10:59

stevenbal marked this pull request as ready for review October 29, 2024 11:22

stevenbal requested a review from sergei-maertens October 29, 2024 11:24

sergei-maertens requested changes Oct 29, 2024

View reviewed changes

stevenbal marked this pull request as draft October 29, 2024 15:33

stevenbal force-pushed the feature/4693-product-prefill-modal-integration branch 3 times, most recently from 0b8256e to 5e646cc Compare November 4, 2024 08:35

stevenbal marked this pull request as ready for review November 4, 2024 08:43

stevenbal requested a review from sergei-maertens November 4, 2024 08:51

stevenbal mentioned this pull request Nov 5, 2024

✨ [#4398] Check object ownership when creating submission #4696

Draft

11 tasks

sergei-maertens self-assigned this Nov 8, 2024

sergei-maertens force-pushed the feature/4693-product-prefill-modal-integration branch from 5e646cc to 33836d3 Compare November 12, 2024 10:15

sergei-maertens reviewed Nov 12, 2024

View reviewed changes

sergei-maertens marked this pull request as draft November 12, 2024 11:48

stevenbal added 4 commits November 18, 2024 14:27

👽 [#4693] Integrate Objects API prefill modal with backend

51bdf97

✨ [#4693] Add copy button for Objects API prefill config

a9b61d2

that allows the user to copy the configuration used by the Form's registration backend

💄 [#4693] Fix select menu overflow issues in prefill modal

feab1eb

stevenbal and others added 4 commits November 18, 2024 14:29

🌐 [#4693] Compile JS translations

1ecf1be

🏷️ [#4693] Fix AttributeSelect prop types

f94f7e1

🎨 [#4693] Don't show copy button if no backends are available

951fd64

💄 [#4693] Use portalling to prevent hidden overflow of react-select menu

4716f4b

sergei-maertens force-pushed the feature/4693-product-prefill-modal-integration branch from 8e23cf3 to 4716f4b Compare November 18, 2024 13:32

sergei-maertens reviewed Nov 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

👽 [#4693] Integrate Objects API prefill modal with backend #4799

👽 [#4693] Integrate Objects API prefill modal with backend #4799

stevenbal commented Oct 28, 2024 •

edited

Loading

codecov bot commented Oct 28, 2024 •

edited

Loading

stevenbal commented Oct 28, 2024

stevenbal commented Oct 29, 2024

sergei-maertens left a comment

sergei-maertens Nov 12, 2024

sergei-maertens Nov 18, 2024

sergei-maertens commented Nov 18, 2024

sergei-maertens commented Nov 18, 2024

sergei-maertens left a comment

sergei-maertens Nov 18, 2024

sergei-maertens Nov 18, 2024

sergei-maertens Nov 18, 2024

sergei-maertens Nov 18, 2024

sergei-maertens Nov 18, 2024

sergei-maertens Nov 18, 2024

sergei-maertens Nov 18, 2024

		@@ -147,9 +237,11 @@ const ObjectsAPIFields = ({errors}) => {
		<ObjectTypeVersionSelect

👽 [#4693] Integrate Objects API prefill modal with backend #4799

Are you sure you want to change the base?

👽 [#4693] Integrate Objects API prefill modal with backend #4799

Conversation

stevenbal commented Oct 28, 2024 • edited Loading

codecov bot commented Oct 28, 2024 • edited Loading

Codecov Report

stevenbal commented Oct 28, 2024

stevenbal commented Oct 29, 2024

sergei-maertens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sergei-maertens commented Nov 18, 2024

sergei-maertens commented Nov 18, 2024

sergei-maertens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stevenbal commented Oct 28, 2024 •

edited

Loading

codecov bot commented Oct 28, 2024 •

edited

Loading