Migrate away from select2 in User Settings
We currently render several select2
instances in User Settings:
Those are all single-selects. The Dashboard and Language selects happen to have client-side filtering enabled because they contain at least 10 options.
As part of this issue, we would like to replace all those select2
instances with simple Pajamas-compliant select
elements when possible. Some instances should be migrated to GlListbox
to preserve client-side filtering or adhere to Pajamas guidelines.
Implementation plan
Consider using app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
for the most complex instances listed below.
-
app/views/profiles/preferences/show.html.haml
-
Replace .select2
with.gl-form-select.custom-select
in Preferences > Layout width field. -
Replace .select2
withGlListbox
in Preferences > Dashboard field. -
Replace .select2
with.gl-form-select.custom-select
in Preferences > Project overview content field. -
Replace .select2
withGlListbox
in Preferences > Language field. -
Replace .select2
with.gl-form-select.custom-select
in Preferences > First day of the week field.
-
-
ee/app/views/profiles/preferences/_group_overview_selector.html.haml
-
Replace .select2
with.gl-form-select.custom-select
in Preferences > Group overview content field.
-
-
app/views/profiles/notifications/_group_settings.html.haml
-
Replace .select2
withGlListbox
in Notifications > Groups field.
-
-
app/views/profiles/notifications/_email_settings.html.haml
-
Replace .select2
withGlListbox
in Notifications > Notification Email field.-
Note: An event listener is bound to this input in app/assets/javascripts/profile/profile.js#46
. This should be backported if it is needed, or removed otherwise.
-
-
Edited by Paul Gascou-Vaillancourt