Migrate notification settings away from select2
What does this MR do and why?
This replaces email selectors in the notification user preferences with
a Vue component based off GlCollapsibleListbox
. This lets us get rid
of select2
on that page.
The new component is a wrapper around ListboxInput
which itself is a wrapper around GlCollapsibleListbox
.
This MR also introduced a few changes in ListboxInput
to accommodate for the context it's being used in here:
- Add a
description
prop to be passed to theGlFormGroup
. This is technically not needed here. This change stems from another migration where we'll need to show a help text below some listboxes. It feels like a small enough change that it can be shipped here. - Add a
disabled
prop to be passed to theGlCollapsibleListbox
. In some cases, it looks like we need to disable the global email listbox, which is what this prop allows for. - Render the wrapper as a DIV instead of a
GlFormGroup
when neither the label or description are provided. This avoids some spacing issues when no label is needed. This is useful for the groups' email selectors within the table as those don't have labels.
Screenshots or screen recordings
Global setting
Before | After |
---|---|
![]() |
![]() |
Group settings
Before | After |
---|---|
![]() |
![]() |
How to set up and validate locally
- Navigate to the notification settings at http://gdk.test:3000/-/profile/notifications
- Change the global setting or some group's setting.
- This should trigger a page reload after which the selected setting should be persisted.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #373843 (closed)