Migrate app/assets/javascripts/groups_select.js away from select2

The app/assets/javascripts/groups_select.js script initializes select2 instances on all .ajax-groups-select selectors. The selector is being applied by the SelectsHelper#groups_select_tag method which we currently call in two views:

View Preview
ee/app/views/admin/application_settings/_custom_templates_form.html.haml#21 ee_app_views_admin_application_settings__custom_templates_form.html.haml
ee/app/views/groups/_custom_project_templates_setting.html.haml#21 ee_app_views_groups__custom_project_templates_setting.html.haml

As part of this issue, we would like to migrate these selectors away from select2.

In both cases, we are rendering groups selectors with async filtering capability where a single selection is supported.

It would be great to keep both selectors consolidated into a single implementation if possible. There currently exist two Vue group selector implementations:

They both seem to support the features we need for this migration. It would be great to look into them to confirm, and move them to the vue_shared directory so they can be easily reused.

Implementation plan

  • Create the vue_group_select feature flag.
  • Migrate to a shared group selector component.
  • Leverage infinite scrolling once GlCollapsibleListbox supports it.
  • Remove the vue_group_select feature flag (!107847 (merged)).
  • The following tasks are covered in !108323 (merged):
    • Replace the current mount point with a .js-vue-group-select for the Vue app: !98597 (comment 1166269406).
    • Move the label to the Vue app, wrap everything within a GlFormGroup, confirm all works in terms of a11y: !98597 (comment 1166269400).
    • Cleanup app/helpers/selects_helper.rb. We might be able to get rid of SelectsHelper#groups_select_tag unless the new implementation relies on it.
Edited by Paul Gascou-Vaillancourt