Use react-select in variable dropdown for better UX

[robinmolen]

Closes #4524

Changes

The variable dropdown now uses the react-select component. Allowing for searching within the options

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

Attention: Patch coverage is 62.16216% with 14 lines in your changes missing coverage. Please review.

Project coverage is 96.56%. Comparing base (ff04630) to head (827f6ac).
Report is 18 commits behind head on master.

Files with missing lines	Patch %	Lines
src/openforms/formio/migration_converters.py	17.64%	13 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4675      +/-   ##
==========================================
- Coverage   96.61%   96.56%   -0.05%     
==========================================
  Files         746      746              
  Lines       25144    25174      +30     
  Branches     3302     3310       +8     
==========================================
+ Hits        24292    24309      +17     
- Misses        589      601      +12     
- Partials      263      264       +1     

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

[robinmolen]

The chromatic tests are failing because either the DMN variable options aren't loaded yet, or for some reason the DMN select cannot be done correctly (This second fail is also inconsistent. Sometimes it succeeds, sometimes it fails...)

Maybe we should remove the dmn variable select check from the "Empty" DMN Action configuration test scenario

[sergei-maertens]

we have src/openforms/scss/vendor/_react-select.scss, but I need to take a proper look at how this sass is structured still! more feedback will come

edit: nvm, I noticed you found that file :)

[robinmolen]

Yeah, I put it here to keep all the .form-variable-dropdown styling contained to this file :)

[sergei-maertens]

magic z-index numbers usually hint at the stacking context not being as expected - perhaps there's a better solution?

@stevenbal this may also be what you are running into with the prefill modal

[robinmolen]

I'll take a look if this can be solved in another way 👍

[robinmolen]

This was needed, because the .submit-row would be on-top of the react-select menu. The z-index on the .submit-row was added because of an issue with the z-index of the tinymce.

I've changed the styling of the .submit-row and the tinymce to prevent this stacking issue. (And removed this z-index styling from the .admin-react-select__menu)

[sergei-maertens]

Closing in favour of #4730