Add avatars and search to Duo Chat drawer group selector

Roy Liurequested to merge
619524-duo-drawer-selector-avatars-search into master

What does this MR do and why?

This follow-up to !247578 (merged) brings the inline group selector in the Duo Chat drawer's empty state (shown when a user has no default Duo namespace) in line with the Figma design. The original selector was a bare GlCollapsibleListbox with no avatars, search, or grouping, scoped out of !247578 (merged) for a later pass.

It adds group avatars (GlAvatarLabeled, identicon fallback), a client-side case-insensitive search input, and a "Groups with GitLab Duo enabled" label above the listbox items. It also fixes a latent bug where the no-results text was hardcoded to the fetch-error message, which would have shown incorrectly when a search simply matched nothing. The search input is only rendered when candidates have loaded, so the fetch-error state shows just the error message.

Screenshots or screen recordings

Before (master) After (avatars, identicon fallback, search, group label)
00-before-open-listbox 02-open-listbox

New states introduced by this MR:

Search narrows the list No matches shows "No results found"
03-search-filtered 04-no-results
Empty state (unchanged)
01-empty-state
Candidates query fails — before (master) Candidates query fails — after (unchanged: search stays hidden on error)
00-before-fetch-error 05-fetch-error-v2

How to set up and validate locally

  1. Sign in as a user with no default Duo namespace set, who belongs to one or more Duo-enabled groups. (for setting up these groups, check out !247578 (merged))
  2. Open the Duo Chat drawer.
  3. Open the group selector.
  4. Confirm each item shows a group avatar and the "Groups with GitLab Duo enabled" label appears above the list.
  5. Type in the search box and confirm the list narrows accordingly.
  6. Type a term that matches nothing and confirm "No results found" is shown (not the fetch-error message).

References

Edited by Roy Liu

Merge request reports