Skip to content

Convert VSA label dropdown to GlCollapsibleListbox

Alex Pennells requested to merge 418058-convert-custom-stage-form into master

What does this MR do and why?

Replace LabelsSelector.vue usage in the create new VSA form. The old component makes use of GlDropdown and is re-used in another place in the app. I decided that trying to rework that component would be more difficult than creating separate solution for both instances, as their implementations are very different. I did re-use much of the existing code to simplify the conversion though.

Next steps

Replace the other usage of LabelsSelector.vue so that we can remove the dependancy on GlDropdown

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
Screenshot_2024-02-15_at_2.53.36_PM Screenshot_2024-02-15_at_2.51.14_PM
Screenshot_2024-02-15_at_2.53.45_PM Screenshot_2024-02-15_at_2.51.20_PM
Screenshot_2024-02-15_at_2.53.59_PM Screenshot_2024-02-15_at_2.51.42_PM
Screenshot_2024-02-15_at_2.57.45_PM Screenshot_2024-02-15_at_2.52.12_PM

How to set up and validate locally

  1. Visit the VSA page for any project (ex. https://gdk.test:3000/gitlab-org/gitlab-shell/-/value_stream_analytics)
  2. Click New value stream
  3. Select Create from no template option in the dialog
  4. Change the Stage 1 Start event/end event to Issue label was added or Issue label was removed
  5. Select a label from the listbox

Related to #418058 (closed)

Edited by Alex Pennells

Merge request reports