Add text wrap fix to item name in agent/flow delete modal

What does this MR do and why?

This adds the gl-wrap-anywhere class to the name of the agent/flow in the delete modal so that very long names without spaces will wrap within the box rather than overflowing.

Screenshots or screen recordings

Screenshots after fix

User can hard delete

Agent

can_hard_delete_agent

Flow

can_hard_delete_flow

User cannot hard delete

Agent

cant_hard_delete_agent

Flow

cant_hard_delete_flow

How to set up and validate locally

  1. Create a new agent or flow as a user who can hard delete agents/flows
  • Make the name of the agent/flow the max number of characters (255) without spaces
  1. Create a new agent or flow as a user who cannot hard delete agents/flows
  • Make the name of the agent/flow the max number of characters (255) without spaces
  1. Try to delete the new agent or flow and check that the name does not overflow out of the box.

Or

  1. Within ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_actions.vue, temporarily set the value of the computed value canHardDelete() to false
  2. Create a new agent or flow. Make the name of the agent/flow the max number of characters (255) without spaces.
  3. Try to delete the new agent or flow and check that the name does not overflow out of the box.
  4. Change the value of canHardDelete() to true, test again.
  5. Revert the value of canHardDelete() to Boolean(this.item.userPermissions?.forceHardDeleteAiCatalogItem)

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.

Related to #582876

Edited by Allison Villa

Merge request reports

Loading