Verified Production Fix
[gitlab-org/gitlab] Design: Project-level Enable/Enabled button states for AI Catalog items
GL-gitlab-org/gitlab#592625 • Mar 08, 2026
### ROOT CAUSE
The issue arises because the UI is not correctly reflecting the enabled state of AI Catalog items at the project-level. Specifically, when an item is enabled for a project, the UI still shows an "Enable" button, which is confusing and leads to unexpected behavior when clicked.
### CODE FIX
To address this issue, we need to update the UI logic to correctly reflect the enabled state of AI Catalog items at the project-level. Here is a proposed code fix:
1. **Update the UI Logic:**
- Modify the component responsible for rendering the AI Catalog item buttons.
- Check the `AiCatalogItem.configurationForProject` field to determine if the item is enabled for the project.
- Render the appropriate button based on the enabled state.
2. **Ensure Correct Button States:**
- If the item is not enabled for the project, render a clickable "Enable" button.
- If the item is enabled for the project, render a non-clickable "Enabled" button.
3. **Disable Option in Actions Menu:**
- Ensure that the "Enable" option remains in the actions menu, but is disabled when the item is already enabled.
Here is a sample code snippet to illustrate the fix:
// Assuming this is a React component
import React from 'react';
const AiCatalogItemButton = ({ item, projectId, canAdminConsumer }) => {
const isItemEnabled = item.configurationForProject.enabled;
const handleEnableClick = () => {
// Logic to enable the item for the project
enableItemForProject(item.id, projectId);
};
return (
{canAdminConsumer && (
)}
);
};
export default AiCatalogItemButton;
### Explanation:
- **isItemEnabled:** This variable checks if the AI Catalog item is enabled for the project using the `AiCatalogItem.configurationForProject.enabled` field.
- **handleEnableClick:** This function is called when the "Enable" button is clicked. It should contain the logic to enable the item for the project.
- **Button Rendering:** The button is rendered conditionally based on the `isItemEnabled` state. If the item is enabled, the button is non-clickable and displays "Enabled". If the item is not enabled, the button is clickable and displays "Enable".
By implementing this fix, the UI will correctly reflect the enabled state of AI Catalog items at the project-level, resolving the confusion and unexpected behavior.
Deploy with Vultr
Use this fix in production instantly. Claim your high-performance developer credit.
Get Started with Vultr →
digital