diff --git a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx index 0aa70cb77c5..9758dfd7427 100644 --- a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx +++ b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx @@ -67,59 +67,51 @@ export function MCPServerPermissions({ // Function to get display name for access group const getAccessGroupDisplayName = (group: string) => { - // If accessGroupNames is a list of names, just return the group string return group; }; + // Merge servers and access groups into one list + const mergedItems = [ + ...mcpServers.map(server => ({ type: 'server', value: server })), + ...mcpAccessGroups.map(group => ({ type: 'accessGroup', value: group })), + ]; + const totalCount = mergedItems.length; + return (
MCP Servers - {mcpServers.length} + {totalCount}
- {mcpServers.length > 0 ? ( + {totalCount > 0 ? (
- {mcpServers.map((server, index) => ( - + {mergedItems.map((item, index) => ( + item.type === 'server' ? ( + +
+ {getMCPServerDisplayName(item.value)} +
+
+ ) : (
- {getMCPServerDisplayName(server)} + + {getAccessGroupDisplayName(item.value)} (Access Group)
-
+ ) ))}
) : (
- No MCP servers configured -
- )} -
- - MCP Access Groups - - {mcpAccessGroups.length} - -
- {mcpAccessGroups.length > 0 ? ( -
- {mcpAccessGroups.map((group, index) => ( -
- {getAccessGroupDisplayName(group)} -
- ))} -
- ) : ( -
- - No MCP access groups configured + No MCP servers or access groups configured
)}