Skip to content

Draft: Use GlCollapsibleListbox for user_select.vue

Scott de Jonge requested to merge 418103-migrate-app-assets-javascripts-vue_shared-components-user_select-user_select-vue-to into master

What does this MR do and why?

  • Replace GlDropdown with GlCollapsibleListbox in user_select.vue
  • Update sidebar_assignees_widget.vue logic to use array of username strings instead of user objects to align with the expected value prop within GlCollapsibleListbox
  • Append user items with value property which clones username value
  • Update "Invite members" trigger-element to tertiary button with styles
  • Add category prop in invite_members_trigger.vue bound to GlButton
  • Remove wrapping <gl-dropdown-item> from #footer template in sidebar_assignees_widget.vue

Screenshots or screen recordings

Before After
CleanShot_2023-10-17_at_17.47.34 CleanShot_2023-10-18_at_16.57.04
State Before After
Unassigned user-select-before-1-unassigned CleanShot_2023-10-17_at_17.51.43_2x
Search user-select-before-2-search CleanShot_2023-10-17_at_17.52.00_2x
Single assignee user-select-before-3-single-assignee CleanShot_2023-10-18_at_16.59.01_2x
Multiple assignees user-select-before-4-mulitple-assignees CleanShot_2023-10-18_at_16.59.08_2x

How to set up and validate locally

  1. Go to Issue or MR and assign user(s)
    1. Search for users in listbox
    2. Unselect users
    3. Unassign all users
    4. Press "Invite members" footer button

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 #418103

Edited by Scott de Jonge

Merge request reports