Redesign recommended reviewers sidebar group

What does this MR do and why?

Rework the recommended reviewers group in the MR reviewers sidebar so it reads as a single collapsible group rather than per-rule sub-lists.

The old layout grouped suggestions under a bold rule heading per approval rule, which competed visually with the assigned reviewers and gave no way to get the group out of the way. Each suggestion is now a two-line row (name plus role) under one lightweight "Recommended" toggle. Collapsing the group persists per user via localStorage and shows the reviewers as a stacked avatar group, keeping the sidebar compact on MRs the user is not acting on. Recommended avatars use a dashed, unfilled treatment so they are not mistaken for assigned reviewers.

The header is a button exposing aria-expanded/aria-controls, and both the user hover card and the matching-files tooltip are preserved on hover and keyboard focus.

Highlights

  • Single collapsible Recommended group with a two-line row per reviewer (name + role), replacing the per-approval-rule sub-headings.
  • The role line keeps the dotted-underline "Matching files" popover; the user hover card is preserved on the name/avatar. Both open on hover and keyboard focus.
  • Recommended avatars use a dashed, unfilled treatment to distinguish them from assigned reviewers, while the availability status dot stays legible.
  • Collapsed state hides the rows and shows a stacked avatar group (GlAvatarsInline, up to 3 + overflow) with a single accessible label.
  • Collapse state persists per user across MRs via LocalStorageSync (key suggested_reviewers_collapsed).
  • Adding a recommended reviewer still moves them into the assigned list and drops them from this group; the group renders nothing when empty.

References

Follow-up polish to the recommended reviewers UI in the MR reviewers sidebar.

Screenshots or screen recordings

Before After
CleanShot_2026-09-29_at_5.05.07_PM_2x CleanShot_2026-09-29_at_5.30.59_PM_2x
CleanShot_2026-09-29_at_5.05.07_PM_2x CleanShot_2026-09-29_at_5.31.06_PM_2x

How to set up and validate locally

  1. On a GDK with an EE license and AI suggested reviewers enabled, open a merge request that has recommendations.
  2. In the sidebar Reviewers section, confirm the Recommended group:
    • Expanded by default; each reviewer is a two-line row (name + role with dotted underline).
    • Hover/focus a role to see the "Matching files" popover; hover/focus a name/avatar for the user card with the reason.
    • Click the header to collapse: rows hide and up to 3 dashed avatar chips (then +N) appear.
    • Reload another MR and confirm the collapse state persisted.
    • Add a recommended reviewer and confirm they move to the assigned list and leave the group; adding the last one renders nothing.

MR acceptance checklist

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

Edited by Austin Regnery

Merge request reports

Loading
Loading