Skip to content

Project Topics - Migrate selector to GlCollapsibleListbox

Background

This feature request came from an active bug with the Project Topic selector found here: #386864 (closed)
Relevant thread (internal only): #386864 (comment 1814603014)

Currently, when selecting project topics there are issues when topics share similar names and accessing the new topic button is un-reachable

Expand to view screenshots of bug

Not able to add ".NET 6": no-add

What appears when you can add a Topic: add

This is largely in part due to an older pattern using the GlTokenSelector component and the way it expects to handle new items.

After some discussion we determined that rather than attempting to enhance this older component it makes more sense to migrate to a component that aligns more with other areas of GitLab like the selectors found in the right hand rail of this issue. That component being GlCollapsibleListbox.

This would allow for a more familiar UX pattern and much more flexibility in how we would like it to behave. As well as closing out #386864 (closed)

Proposal

Migrate Project Topic selector from GlTokenSelector => GlCollapsibleListbox

Screenshots of potential experience

Searching Topic Creating Topic
Screenshot_2024-03-21_at_2.46.59_PM Screenshot_2024-03-21_at_2.48.28_PM

Implementation plan

  1. Migrate GlTokenSelector => GlCollapsibleListbox in topics_token_selector.vue
  2. Add a <footer> slot with a button that says Create project topic
  3. Add @click event to button that hides the collapsable dropdown and shows an <input> field with actions to create a project label
  4. In the event handler for adding/creating tokens in topics/index.js add logic to not add duplicates to the list and simply ignore them. This could be done with a Set
Edited by Zack Cuddy