From ef341b82ed1d4dc8a7e54db3552fa9ecb3280bf2 Mon Sep 17 00:00:00 2001
From: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
Date: Wed, 3 Jun 2026 17:45:35 +0000
Subject: [PATCH] fix(mcp/ui): scope create-server e2e assertion to the new
 card grid

The MCP servers list moved from a DataTable to an MCPServerCard grid, so
the create-flow e2e test's `table tbody` lookup could never match and
e2e_ui_testing failed once the server landed in the list. Tag the grid
with a stable data-testid and assert against it, keeping the original
scoping that prevents the closing modal's server_name input from
satisfying the check early
---
 ui/litellm-dashboard/e2e_tests/tests/mcp/mcpServers.spec.ts | 6 +++---
 .../src/components/mcp_tools/mcp_servers.tsx                | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/e2e_tests/tests/mcp/mcpServers.spec.ts b/ui/litellm-dashboard/e2e_tests/tests/mcp/mcpServers.spec.ts
index f953a82daaa..2dccf0f3953 100644
--- a/ui/litellm-dashboard/e2e_tests/tests/mcp/mcpServers.spec.ts
+++ b/ui/litellm-dashboard/e2e_tests/tests/mcp/mcpServers.spec.ts
@@ -50,13 +50,13 @@ test.describe("MCP Servers", () => {
 
     // No teardown needed — the e2e runner spins up a fresh DB per invocation.
 
-    // Success toast and the new row in the table. Scope the row lookup to
-    // the MCP servers table so the form modal's `server_name` input — which
+    // Success toast and the new card in the server grid. Scope the lookup to
+    // the MCP servers grid so the form modal's `server_name` input — which
     // still holds the timestamped value during its close animation — can't
     // satisfy the assertion before the server actually lands in the list.
     await expect(page.getByText("MCP Server created successfully").first())
       .toBeVisible({ timeout: 15_000 });
-    await expect(page.locator("table tbody").getByText(uniqueName).first())
+    await expect(page.getByTestId("mcp-servers-grid").getByText(uniqueName).first())
       .toBeVisible({ timeout: 10_000 });
   });
 });
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 d42e3d40ddb..0923055d09b 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@@ -578,7 +578,10 @@ const MCPServers: React.FC<MCPServerProps> = ({ accessToken, userRole, userID })
                       />
                     </div>
                   ) : (
-                    <div className="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+                    <div
+                      data-testid="mcp-servers-grid"
+                      className="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
+                    >
                       {displayedServers.map((server) => (
                         <MCPServerCard
                           key={server.server_id}