Truncate flow descriptions in slash commands menu

What does this MR do and why?

In Duo Agentic Chat, typing / lists AI Catalog flow commands with their full catalog description. Those descriptions are free-form prose and wrap onto multiple lines, which overwhelms the fixed-width dropdown panel.

This MR adds the gl-truncate utility class to the description row in the slash commands menu, so each description is limited to a single line and truncated with an ellipsis. The truncation is purely presentational — the description string itself is left untouched, and no title attribute or tooltip is added, per the issue discussion.

References

Resolves #629466 (closed)

Screenshots or screen recordings

Not attached: this environment cannot render the chat UI. The change is a single utility class (gl-truncate) on the description element; the accompanying Jest spec asserts the class is applied to every option's description row.

Before After
flow_before.png flow_after.png

How to set up and validate locally

  1. Open Duo Agentic Chat with the AI Catalog flows enabled.
  2. Type / in the prompt composer to open the slash commands menu.
  3. Verify each command's description renders on a single line, truncated with an ellipsis when it exceeds the panel width.

Automated coverage: yarn jest ee/spec/frontend/ai/duo_agentic_chat/components/prompt_composer/slash_commands_menu/slash_commands_menu_spec.js — a new spec under option markup asserts every option's description element carries gl-truncate.

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 Nick Leonard

Merge request reports

Loading
Loading