From 377797ff4445ceb1a8270e5159e42674d85e4421 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 15 Sep 2026 12:32:57 +0000
Subject: [PATCH] test(ui): cover 20 selected MCP servers rendering as separate
 chips

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../AccessGroupEditModal.integration.test.tsx | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx
index 472d4b8322e..7c4e218261f 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsModal/AccessGroupEditModal.integration.test.tsx
@@ -14,8 +14,13 @@ vi.mock("@/app/(dashboard)/hooks/agents/useAgents", () => ({
   useAgents: () => ({ data: { agents: [{ agent_id: "agent-1", agent_name: "Support Bot" }] } }),
 }));
 
+const manyServers = Array.from({ length: 20 }, (_, i) => ({
+  server_id: `srv-${i + 1}`,
+  server_name: `Server ${i + 1}`,
+}));
+
 vi.mock("@/app/(dashboard)/hooks/mcpServers/useMCPServers", () => ({
-  useMCPServers: () => ({ data: [{ server_id: "srv-1", server_name: "Files" }] }),
+  useMCPServers: () => ({ data: [{ server_id: "srv-1", server_name: "Files" }, ...manyServers.slice(1)] }),
 }));
 
 vi.mock("@/components/ModelSelect/ModelSelect", () => ({
@@ -181,6 +186,30 @@ describe("AccessGroupEditModal submit payload", () => {
     expect(variables().params.access_mcp_server_ids).toStrictEqual([]);
   });
 
+  it("keeps 20 selected MCP servers as separate chips instead of one joined string", async () => {
+    const user = setup();
+    renderModal({ ...accessGroup, access_mcp_server_ids: manyServers.map((s) => s.server_id) });
+    await screen.findByDisplayValue("Engineering");
+
+    await user.click(screen.getByRole("tab", { name: /MCP Servers/ }));
+    await screen.findByLabelText("Server 20");
+    const chips = screen.getAllByLabelText(/^(Files|Server \d+)$/);
+    expect(chips).toHaveLength(20);
+    expect(chips.map((chip) => chip.textContent)).toStrictEqual([
+      "Files",
+      ...manyServers.slice(1).map((s) => s.server_name),
+    ]);
+    expect(screen.queryByText(/Server 2, Server 3/)).not.toBeInTheDocument();
+
+    await user.click(within(screen.getByLabelText("Server 7")).getByRole("button"));
+    await save(user);
+
+    await waitFor(() => expect(mutate).toHaveBeenCalled());
+    expect(variables().params.access_mcp_server_ids).toStrictEqual(
+      manyServers.map((s) => s.server_id).filter((id) => id !== "srv-7"),
+    );
+  });
+
   it("sends models chosen on the Models tab", async () => {
     const user = setup();
     renderModal({ ...accessGroup, access_model_names: [] });