scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-08-28 05:25:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 36

fix(ui): match the MCP servers count badge to its sibling permission badges

Browse source 
The Object Permissions section rendered the MCP Servers badge with shadcn's
default variant (solid bg-primary), so a plain count showed up as a black pill
next to the light Vector Stores and Agents counts. Counts now use secondary
everywhere, and destructive stays reserved for the blocked state.
This commit is contained in:
Yuneng Jiang 2026-08-14 16:32:27 -07:00
parent 652f4cb8e4
commit 61334ec94a
No known key found for this signature in database
2 changed files with 41 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.test.tsx
View file

@ -3,7 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import MCPServerPermissions from "./MCPServerPermissions";
import * as networking from "../networking";
import { ALL_PROXY_MCP_SERVERS_SENTINEL } from "../mcp_tools/constants";
import { ALL_PROXY_MCP_SERVERS_SENTINEL, NO_MCP_SERVERS_SENTINEL } from "../mcp_tools/constants";
vi.mock("../networking");
@ -372,4 +372,43 @@ describe("MCPServerPermissions", () => {
expect(screen.getByText("All")).toBeInTheDocument();
expect(screen.queryByText(ALL_PROXY_MCP_SERVERS_SENTINEL)).not.toBeInTheDocument();
});
it("should use the neutral badge variant unless MCP access is blocked", async () => {
/**
* The header badge sits next to the Vector Stores and Agents badges, which both render
* variant="secondary". "default" renders solid bg-primary (black), so it only belongs on
* the blocked state, which uses "destructive".
*/
vi.mocked(networking.fetchMCPServers).mockResolvedValue([]);
const { rerender } = render(
<MCPServerPermissions
mcpServers={[]}
mcpAccessGroups={[]}
mcpToolPermissions={{}}
accessToken={mockAccessToken}
/>,
);
expect(screen.getByText("0")).toHaveAttribute("data-variant", "secondary");
rerender(
<MCPServerPermissions
mcpServers={[ALL_PROXY_MCP_SERVERS_SENTINEL]}
mcpAccessGroups={[]}
mcpToolPermissions={{}}
accessToken={mockAccessToken}
/>,
);
await waitFor(() => expect(screen.getByText("All")).toHaveAttribute("data-variant", "secondary"));
rerender(
<MCPServerPermissions
mcpServers={[NO_MCP_SERVERS_SENTINEL]}
mcpAccessGroups={[]}
mcpToolPermissions={{}}
accessToken={mockAccessToken}
/>,
);
await waitFor(() => expect(screen.getByText("Blocked")).toHaveAttribute("data-variant", "destructive"));
});
});

2
ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
View file

@ -112,7 +112,7 @@ export function MCPServerPermissions({
<div className="flex items-center gap-2">
<ServerIcon className="h-4 w-4 text-blue-600" />
<p className="text-sm font-semibold text-gray-900">MCP Servers</p>
<Badge variant={blocksAllMcpServers ? "destructive" : "default"}>
<Badge variant={blocksAllMcpServers ? "destructive" : "secondary"}>
{blocksAllMcpServers ? "Blocked" : grantsAllProxyMcpServers ? "All" : totalCount}
</Badge>
</div>