[Project Curation] Refactor Catalog Item UI - Move Catalog Item Creation from Explore to Project
Overview
This issue focuses on refactoring the AI Catalog Item UI by moving catalog item creation functionality from the Explore area to the project area. This change will improve the user experience by allowing users to create and manage catalog items directly within their projects.
Current State Analysis
Current Architecture
-
Explore Area: Located at
/explore/ai_catalog, contains the main catalog browsing and "Add to project" functionality -
Project Area: Located at
/projects/:namespace/:project/duo_agents_platform, currently shows agent sessions but lacks creation capabilities -
Shared Components: Both areas use similar components from
ee/app/assets/javascripts/ai/catalog/andee/app/assets/javascripts/ai/duo_agents_platform/
Current Flow
- Users browse catalog items in the Explore area (
/explore/ai_catalog) - Users click "Add to project" which creates an
ItemConsumerviacreateAiCatalogItemConsumermutation - Project area shows consumed items but doesn't allow direct creation
Proposed Changes
1. Frontend Changes
Project-Level Catalog Item Creation
-
Location:
ee/app/assets/javascripts/ai/duo_agents_platform/ -
New Components Needed:
- Create button in project catalog index page
- Combined creation form that handles both catalog item and item consumer creation
- Enhanced project catalog index with proper action buttons
Component Modifications
-
Projects:
- Add "Create agent" button
- Integrate with new creation flow
- Combine agent creation with automatic item consumer creation
- Editing an agent should land on the same page again
- Repeat for flows
-
Explore: UX TBD. Proposal:
- Create button should show a modal where users can select a project where they want to create the agent in
- User gets redirected to the specific URL of the project in the automate path of agents with
/new - Repeat for flows
Index Page Considerations
The project catalog index should differentiate between:
- Local Items: Catalog items created within the same project (can be deleted)
- External Items: Catalog items added from other projects via explore (can only be removed)
Proposed UI approach:
- Two-tab layout: "My Agents/Flows" vs "Added Agents/Flows"
-
Different Actions:
- Local items: Edit, Delete, Test Run
- External items: Remove, Test Run (no edit/delete)
We could also differentiate between public and private flows. Because - for now - this would exactly be this differentiation.
2. Backend Changes
Combined Creation Service
Create a new service that handles both catalog item and item consumer creation atomically.
3. Permission Considerations
The same permissions have to be added to the new 'create' and 'edit' buttons as we currently have in place: Only maintainers and owners of a project should see the buttons. This is different from the status quo, as everyone logged in sees the buttons, but then can only select certain projects.