Update approvers_select to use listbox
What does this MR do and why?
This MR updates the approvers_select to remove select2 and to use gl-collapsible-listbox instead.
-
Update ee/app/assets/javascripts/approvals/components/approvers_select.vue-
use GlCollapsibleListboxinstead of theselect2 -
use GlAvatarLabeledinstead of the custom template (requires a small visual change as the avatar is updated to the closest GitLab UI size). -
avoid using !this.isFeatureEnabledwithin theif (this.isFeatureEnabled)block in thefetchGroupsmethod.
-
-
Add proper styles to selects.scssin order to achieve the full widthgl-collapsible-listbox(until gitlab-ui#2099 (closed) is done) -
Update related specs -
Fix some false positive specs: -
user_edits_approval_rules_mr_spec.rb#L93 is only passing when the permit_all_shared_groups_for_approvalfeature flag is off as the logic is only set for theApi.groupsendpoint and not theApi.projectGroups -
user_sets_approvers_spec.rb#L26 was testing an absent functionality. It was indeed possible to add an author as an approver. I fixed it by adding an MR author user id into the list of skipped user ids -
user_sets_approvers_spec.rb#L72 is only passing for the group other then the one project belongs to.
-
Screenshots or screen recordings
The select appears in 3 places:
1. Project -> Settings -> Merge requests
| Before | After |
|---|---|
![]() |
![]() |
2. Merge request -> Edit -> Approval rules
| Before | After |
|---|---|
![]() |
![]() |
3. Security & Compliance -> Policies -> New policy -> Scan result policy
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
Visit the corresponding pages:
- Project -> Settings -> Merge requests
- Merge request -> Edit -> Approval rules
- Security & Compliance -> Policies -> New policy -> Scan result policy
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.
Review progress:
-
UX review -
test review -
backend developer review -
backend maintainer review -
frontend developer review -
frontend maintainer review
Related to #374115 (closed)
Edited by Anna Vovchenko





