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

[stevenbal]

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]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.60%. Comparing base (cf95065) to head (5e269c9).
Report is 15 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4799      +/-   ##
==========================================
+ Coverage   96.58%   96.60%   +0.02%     
==========================================
  Files         749      749              
  Lines       25540    25540              
  Branches     3377     3377              
==========================================
+ Hits        24668    24674       +6     
+ Misses        608      604       -4     
+ Partials      264      262       -2     

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

---

🚨 Try these New Features:

• Flaky Tests Detection - Detect and resolve failed and flaky tests
• JS Bundle Analysis - Avoid shipping oversized bundles

[stevenbal]

@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]

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

[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]

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

[sergei-maertens]

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:

1. 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

2. The user clicks the link to copy the settings - this makes the registration dropdown visible:

   

3. Clicking the link again just collapse the form row again

4. 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]

Let's merge this so we can get it tested in the alpha release!