From 5bd63c5a7249fc9f20dc8539187f11d9b1c75f19 Mon Sep 17 00:00:00 2001
From: "Jugal D. Bhatt" <55304795+jugaldb@users.noreply.github.com>
Date: Sun, 13 Jul 2025 01:25:36 +0530
Subject: [PATCH] [MCP Gateway] access group fixes on UI for keys and teams
 (#12556)

* add changes to mcp servers in team and keys

* added access group in bracket

* added access group capitalise
---
 .../permissions/MCPServerPermissions.tsx      | 58 ++++++++-----------
 1 file changed, 25 insertions(+), 33 deletions(-)

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 (
     <div className="space-y-3">
       <div className="flex items-center gap-2">
         <ServerIcon className="h-4 w-4 text-green-600" />
         <Text className="font-semibold text-gray-900">MCP Servers</Text>
         <Badge color="green" size="xs">
-          {mcpServers.length}
+          {totalCount}
         </Badge>
       </div>
-      {mcpServers.length > 0 ? (
+      {totalCount > 0 ? (
         <div className="flex flex-wrap gap-2">
-          {mcpServers.map((server, index) => (
-            <Tooltip key={index} title={`Full ID: ${server}`} placement="top">
+          {mergedItems.map((item, index) => (
+            item.type === 'server' ? (
+              <Tooltip key={index} title={`Full ID: ${item.value}`} placement="top">
+                <div
+                  className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium cursor-help"
+                >
+                  {getMCPServerDisplayName(item.value)}
+                </div>
+              </Tooltip>
+            ) : (
               <div
-                className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium cursor-help"
+                key={index}
+                className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-200 text-blue-800 text-sm font-medium"
               >
-                {getMCPServerDisplayName(server)}
+                <span className="inline-block w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
+                {getAccessGroupDisplayName(item.value)} <span className="ml-1 text-xs text-blue-500">(Access Group)</span>
               </div>
-            </Tooltip>
+            )
           ))}
         </div>
       ) : (
         <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50 border border-gray-200">
           <ServerIcon className="h-4 w-4 text-gray-400" />
-          <Text className="text-gray-500 text-sm">No MCP servers configured</Text>
-        </div>
-      )}
-      <div className="flex items-center gap-2 mt-4">
-        <ServerIcon className="h-4 w-4 text-blue-600" />
-        <Text className="font-semibold text-gray-900">MCP Access Groups</Text>
-        <Badge color="blue" size="xs">
-          {mcpAccessGroups.length}
-        </Badge>
-      </div>
-      {mcpAccessGroups.length > 0 ? (
-        <div className="flex flex-wrap gap-2">
-          {mcpAccessGroups.map((group, index) => (
-            <div
-              key={index}
-              className="inline-flex items-center px-3 py-1.5 rounded-lg bg-blue-50 border border-blue-200 text-blue-800 text-sm font-medium"
-            >
-              {getAccessGroupDisplayName(group)}
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-50 border border-gray-200">
-          <ServerIcon className="h-4 w-4 text-gray-400" />
-          <Text className="text-gray-500 text-sm">No MCP access groups configured</Text>
+          <Text className="text-gray-500 text-sm">No MCP servers or access groups configured</Text>
         </div>
       )}
     </div>