Move recommended reviewer reason into user popover

What does this MR do and why?

Improves the recommended-reviewers (GitLab Duo) UX by moving the recommendation reason out of a standalone help-icon popover and into the shared user avatar popover's #title slot, mirroring the existing "Cannot merge" pattern.

Why:

  • The help icon (?) was a poor affordance: its visual form suggested "click for help" without encoding any reviewer state, and it competed visually with the + add-reviewer button (the actual call to action).
  • It forced back-and-forth: the reason lived in the help icon, while related decision signals (local time, busy status) lived in the user popover. Comparing them meant two triggers and two mental hops to reason about one person.
  • Consolidating the reason into the popover brings all "should I pick this reviewer" signals onto one surface and reduces visual noise.
  • A new availability-driven status icon (status-active / status-waiting, colored info / subtle) is shown on both the avatar overlay and the popover header. This gives an at-a-glance triage signal and a clear optical difference between states.

On the status color source: the icon color is driven by the reviewer's live status (GraphQL / UsersCache), while the reason text is a point-in-time snapshot from the AI suggestion flow. This is intentional: rather than removing staleness (the reason text is inherently a snapshot of why the suggestion was made), it adds a fresh signal for the actionable dimension (is this person around now?). As a result, the live icon and the snapshot reason text can visibly disagree, which is expected.

Implementation notes

  • user_popover.vue (shared, app-wide): new rows/classes render only when data-recommendation-reason is present on the target, so existing usages are unaffected.
  • .suggested-reviewer-reason-icon lives in CE sidebar.scss alongside .reviewer-grid / [data-css-area='user'], which already serve this EE component, and mirrors the existing .reviewer-merge-icon overlay treatment.

References

#603172 (comment 3892720484)

Screenshots or screen recordings

Before After
CleanShot_2026-09-23_at_9.58.37_AM_2x CleanShot_2026-09-23_at_9.26.47_AM_2x
CleanShot_2026-09-23_at_9.55.59_AM_2x CleanShot_2026-09-23_at_9.27.19_AM_2x

How to set up and validate locally

  1. Open a merge request in a project with GitLab Duo suggested reviewers enabled.
  2. In the reviewers sidebar, observe the suggested reviewers list.
  3. Hover a suggested reviewer's avatar: the recommendation reason now appears in the user popover title with an availability-driven status icon, and the small status icon is overlaid on the avatar.

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