diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.integration.test.tsx index fb9725e4d66..f8e2b2090b1 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.integration.test.tsx @@ -24,7 +24,6 @@ const defaultProps = { function makeKey(overrides: Partial = {}): KeyResponse { return { token: "tok-abc123", - token_id: "tid-abc123", key_name: "sk-...abc", key_alias: "Test Key", spend: 0, @@ -115,15 +114,26 @@ describe("ProjectKeysTable", () => { expect(within(row).queryByRole("link", { name: "My API Key" })).not.toBeInTheDocument(); }); - it("falls back to the token ID in the accessible row name when the alias is empty", () => { + it("falls back to the key name in the accessible row name when the alias is empty", () => { renderWithProviders( , ); - expect(screen.getByRole("row", { name: "Open key tid-empty-alias" })).toBeInTheDocument(); + expect(screen.getByRole("row", { name: "Open key name-empty-alias" })).toBeInTheDocument(); + }); + + it("falls back to the token when the alias and key name are empty", () => { + renderWithProviders( + , + ); + + expect(screen.getByRole("row", { name: "Open key tok-empty-name" })).toBeInTheDocument(); }); it("navigates to key details when plain row content is clicked", async () => { @@ -136,18 +146,18 @@ describe("ProjectKeysTable", () => { expect(push).toHaveBeenCalledWith("/ui/api-keys?key=tok-abc123"); }); - it("opens a focused row with Enter and labels an alias-less key with its ID", async () => { + it("opens a focused row with Enter and labels an alias-less key with its key name", async () => { const user = userEvent.setup(); push.mockClear(); const aliasLessKeyInput = { token: "tok-no-alias", - token_id: "tid-no-alias", + key_name: "name-no-alias", key_alias: null as any, user_id: "owner-1", }; const aliasLessKey = makeKey(aliasLessKeyInput); renderWithProviders(); - const row = screen.getByRole("row", { name: "Open key tid-no-alias" }); + const row = screen.getByRole("row", { name: "Open key name-no-alias" }); row.focus(); expect(row).toHaveFocus(); await user.keyboard("{Enter}"); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.tsx index b9cbec7524f..20aa22e5f65 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.tsx @@ -62,7 +62,7 @@ export function ProjectKeysTable({ onRowClick={(key) => { if (key.token) router.push(keyDetailHref(key.token)); }} - getRowLabel={(key) => `Open key ${key.key_alias || key.token_id}`} + getRowLabel={(key) => `Open key ${key.key_alias || key.key_name || key.token}`} /> ); } diff --git a/ui/litellm-dashboard/src/components/public_model_hub.integration.test.tsx b/ui/litellm-dashboard/src/components/public_model_hub.integration.test.tsx index c4c7fe8e4d8..32214a77617 100644 --- a/ui/litellm-dashboard/src/components/public_model_hub.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/public_model_hub.integration.test.tsx @@ -521,6 +521,24 @@ describe("publicMCPHubColumns", () => { }); describe("public hub MCP details modal", () => { + it("uses the alias in the accessible label when the server name is empty", async () => { + const networkingModule = await import("./networking"); + const serverWithoutName = { + ...mockMcpServer, + server_id: "server-fallback-id", + server_name: "", + alias: "server-fallback-alias", + }; + vi.mocked(networkingModule.mcpHubPublicServersCall).mockResolvedValueOnce([serverWithoutName]); + + renderHub(); + + await userEvent.click(await screen.findByRole("tab", { name: /MCP Hub/i })); + expect( + await screen.findByRole("row", { name: "Open MCP server server-fallback-alias" }), + ).toBeInTheDocument(); + }); + it("does not show the upstream url when a server is opened", async () => { const user = userEvent.setup(); const networkingModule = await import("./networking"); diff --git a/ui/litellm-dashboard/src/components/public_model_hub.tsx b/ui/litellm-dashboard/src/components/public_model_hub.tsx index f8d431ce808..fbe5c433760 100644 --- a/ui/litellm-dashboard/src/components/public_model_hub.tsx +++ b/ui/litellm-dashboard/src/components/public_model_hub.tsx @@ -629,7 +629,7 @@ const PublicModelHub: React.FC = ({ accessToken, isEmbedded columns={mcpColumns} getRowId={(server, index) => server.server_id || String(index)} onRowClick={showMcpModal} - getRowLabel={(server) => `Open MCP server ${server.server_name}`} + getRowLabel={(server) => `Open MCP server ${server.server_name || server.alias || server.server_id}`} sortingMode="client" sorting={mcpSorting} onSortingChange={setMcpSorting}