From db57e765a5ac37a8500fdaa12a04f0b11543db08 Mon Sep 17 00:00:00 2001
From: "Jugal D. Bhatt" <55304795+jugaldb@users.noreply.github.com>
Date: Sat, 12 Jul 2025 06:56:43 +0530
Subject: [PATCH] [MCP Gateway] UI Quality check fixes  (#12521)

* Add tooltip to mcp server access groups

* fix ui issues
---
 .../src/components/mcp_tools/mcp_server_columns.tsx      | 8 +++++++-
 .../src/components/mcp_tools/mcp_servers.tsx             | 9 ++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
index 73bdfc612c2..be3aa4a9143 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
@@ -3,6 +3,7 @@ import { MCPServer } from "./types";
 import { Icon } from "@tremor/react";
 import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
 import { getMaskedAndFullUrl } from "./utils";
+import { Tooltip } from "antd";
 
 export const mcpServerColumns = (
   userRole: string,
@@ -64,7 +65,12 @@ export const mcpServerColumns = (
       if (Array.isArray(groups) && groups.length > 0) {
         // If string array
         if (typeof groups[0] === "string") {
-          return <span>{groups.join(", ")}</span>;
+          const joined = groups.join(", ");
+          return (
+            <Tooltip title={joined}>
+              <span className="max-w-[200px] truncate block">{joined.length > 30 ? `${joined.slice(0, 30)}...` : joined}</span>
+            </Tooltip>
+          );
         }
       }
       return <span className="text-gray-400 italic">None</span>;
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
index 5b89c8fc445..669d97b2306 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -4,6 +4,7 @@ import {
   Modal,
   message,
   Select,
+  Tooltip,
 } from "antd";
 import {
   TabPanel,
@@ -33,6 +34,7 @@ import { isAdminRole } from "@/utils/roles";
 import { MCPServerView } from "./mcp_server_view";
 import CreateMCPServer from "./create_mcp_server";
 import MCPConnect from "./mcp_connect";
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
@@ -291,7 +293,12 @@ const MCPServers: React.FC<MCPServerProps> = ({
                     </Option>
                   ))}
                 </Select>
-                <Text className="text-lg font-semibold text-gray-900 ml-6">Access Group:</Text>
+                <Text className="text-lg font-semibold text-gray-900 ml-6">
+                  Access Group:
+                  <Tooltip title="An MCP Access Group is a set of users or teams that have permission to access specific MCP servers. Use access groups to control and organize who can connect to which servers.">
+                    <QuestionCircleOutlined style={{ marginLeft: 4, color: '#888' }} />
+                  </Tooltip>
+                </Text>
                 <Select
                   value={selectedMcpAccessGroup}
                   onChange={handleMcpAccessGroupChange}