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/groups/_custom_project_templates_setting.html.haml#21 |
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:
ee/app/assets/javascripts/boards/components/group_select.vue
app/assets/javascripts/invite_members/components/group_select.vue
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 ofSelectsHelper#groups_select_tag
unless the new implementation relies on it.
-