Add Search and Style Update to Custom Agent Selector

Julie Huangrequested to merge
577516/restyle-custom-agent-selector into master

What does this MR do and why?

Updates the Custom Agent Selector in the new UI to match designs:

  • Makes it searchable
  • Adds avatars to agents
  • Wraps agent descriptions over 3 lines.

Out of scope:

This update does not apply to the old UI

Related: https://gitlab.com/gitlab-org/gitlab/-/issues/577516

References

Screenshots or screen recordings

Before After
Screenshot_2025-12-02_at_12.51.27_pm Screenshot_2025-12-02_at_12.44.10_pm

Screen Recording

Screen_Recording_2025-12-02_at_12.46.15_pm

How to set up and validate locally

  • An active online cloud or legacy, Ultimate license.
  • Switch to the latest Duo project studio UI by following the instructions
  1. Start GDK in saas mode GITLAB_SIMULATE_SAAS=1 gdk start
  2. Run the Duo setup rake task in Saas mode GITLAB_SIMULATE_SAAS=1 bundle exec 'rake gitlab:duo:setup' to seed instance with a Duo test group (it will be called gitlab-duo).
  3. Navigate to the group you just created. Create a project within the group and navigate to it.
  4. The Custom Agent Selector button should appear on the top right, near Admin button (see screenshots). Open it and verify the behaviour.

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 Julie Huang

Merge request reports