Skip to content

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 GlCollapsibleListbox instead of the select2
    • use GlAvatarLabeled instead of the custom template (requires a small visual change as the avatar is updated to the closest GitLab UI size).
    • avoid using !this.isFeatureEnabled within the if (this.isFeatureEnabled) block in the fetchGroups method.
  • Add proper styles to selects.scss in order to achieve the full width gl-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_approval feature flag is off as the logic is only set for the Api.groups endpoint and not the Api.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
Screenshot_2023-01-03_at_16.22.54 Screenshot_2023-01-03_at_16.19.25

2. Merge request -> Edit -> Approval rules

Before After
Screenshot_2023-01-03_at_16.22.34 Screenshot_2023-01-03_at_16.18.47

3. Security & Compliance -> Policies -> New policy -> Scan result policy

Before After
Screenshot_2023-01-03_at_16.22.08 Screenshot_2023-01-03_at_16.19.47

How to set up and validate locally

Visit the corresponding pages:

  1. Project -> Settings -> Merge requests
  2. Merge request -> Edit -> Approval rules
  3. 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.

Review progress:

Related to #374115 (closed)

Edited by Anna Vovchenko

Merge request reports