Skip to content

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 the GlFormGroup. 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 the GlCollapsibleListbox. 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
Screenshot_2022-12-28_at_3.41.10_PM Screenshot_2022-12-28_at_3.39.45_PM

Group settings

Before After
Screenshot_2022-12-28_at_3.41.32_PM Screenshot_2022-12-28_at_3.40.16_PM

How to set up and validate locally

  1. Navigate to the notification settings at http://gdk.test:3000/-/profile/notifications
  2. 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.

Related to #373843 (closed)

Merge request reports