Fix item name and GraphQL clarity issues in AI Catalog delete modal

Overview

There are two separate TODOs in the Delete modal that need to be addressed. These can be done in two separate MRs or combined into one.

How to access the modal

  1. Create an agent
  2. Click on '...' top right on the detail page
  3. Click on 'delete'

Tasks

1. Prevent overflowing of the item name (done)

Issue: Item names can overflow in the delete modal (see screenshot)

Screenshot_2025-12-03_at_19.53.14

To reproduce: Create an agent or flow with a very long name without any spaces. The name can have up to 255 characters.

Solution: This issue has been fixed in various other places in the Catalog. It should be fixable with gl-wrap-anywhere or some gl-break-words CSS class or similar.

2. Update GraphQL description text

Issue: The GraphQL description text needs to be updated as discussed here

New text: "You can also use the GraphQL API to delete items." (done)

Future changes based on thread discussion:

  • Have the modal default to "hard delete" (since its the recommended option - currently it defaults to soft)
  • Changing the text around the GraphQL API in the modal to text below, and linking to the GraphQL API docs:
Deletion method
Choose whether to delete or hide this item. You can also use the GraphQL API to delete an item.
:radio_button: Delete permanently
       This action cannot be undone.
:radio_button: Hide from the AI Catalog
       Users can continue to use the item in the groups and projects it is enabled in.

Testing notes

This modal should have two UIs:

  • One for instance admins
  • One for everyone else

Both UIs should be tested to ensure the fixes work correctly in both contexts. There should be an if-else somewhere in the Vue code that differentiates between the two user types.

  • <div v-if="canHardDelete">

The code for the modal is in here: ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_actions.vue

Edited by Allison Villa