diff --git a/ui/litellm-dashboard/src/lib/http/schema.d.ts b/ui/litellm-dashboard/src/lib/http/schema.d.ts
index bd08b743c7d..5c8b6394acd 100644
--- a/ui/litellm-dashboard/src/lib/http/schema.d.ts
+++ b/ui/litellm-dashboard/src/lib/http/schema.d.ts
@@ -33781,6 +33781,8 @@ export interface components {
key_exists?: boolean | null;
/** Team Id */
team_id?: string | null;
+ /** User Alias */
+ user_alias?: string | null;
/** User Email */
user_email?: string | null;
/** User Id */
diff --git a/ui/litellm-dashboard/tests/top_key_view.test.tsx b/ui/litellm-dashboard/tests/top_key_view.test.tsx
index 6751b639339..2b851da6e0d 100644
--- a/ui/litellm-dashboard/tests/top_key_view.test.tsx
+++ b/ui/litellm-dashboard/tests/top_key_view.test.tsx
@@ -1,17 +1,19 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
-import { renderWithProviders, screen, fireEvent } from "./test-utils";
+import { renderWithProviders, screen, fireEvent, waitFor } from "./test-utils";
import TopKeyView from "../src/components/UsagePage/components/EntityUsage/TopKeyView";
import { TagUsage } from "../src/components/UsagePage/types";
import useAuthorized from "../src/app/(dashboard)/hooks/useAuthorized";
+import { keyListCall } from "../src/components/networking";
// Mock the networking module
vi.mock("../src/components/networking", () => ({
- keyInfoV1Call: vi.fn(),
+ keyListCall: vi.fn(),
}));
-// Mock the transform function
-vi.mock("../src/components/key_team_helpers/transform_key_info", () => ({
- transformKeyInfo: vi.fn((data) => data),
+vi.mock("../src/components/templates/key_info_view", () => ({
+ default: ({ keyData }: { keyData: { user_id?: string; user_email?: string; user?: { user_alias?: string } } }) => (
+
{`Owner: ${keyData.user?.user_alias}|${keyData.user_email}|${keyData.user_id}`}
+ ),
}));
vi.mock("../src/app/(dashboard)/hooks/useAuthorized", () => ({
@@ -20,6 +22,7 @@ vi.mock("../src/app/(dashboard)/hooks/useAuthorized", () => ({
describe("TopKeyView", () => {
const mockUseAuthorized = vi.mocked(useAuthorized);
+ const mockKeyListCall = vi.mocked(keyListCall);
const mockProps = {
topKeys: [],
accessToken: "test-token",
@@ -321,5 +324,50 @@ describe("TopKeyView", () => {
// Check that spend is formatted correctly
expect(screen.getByText("$25.50")).toBeInTheDocument();
});
+
+ it("should expand the owner when opening key details", async () => {
+ mockKeyListCall.mockResolvedValue({
+ keys: [
+ {
+ token: "key-1",
+ user_id: "user-1",
+ user_email: null,
+ user: {
+ user_id: "user-1",
+ user_alias: "Alice Example",
+ user_email: "alice@example.com",
+ },
+ },
+ ],
+ } as Awaited
>);
+
+ renderWithProviders(
+ ,
+ );
+
+ fireEvent.click(screen.getByText("key-1"));
+
+ await waitFor(() =>
+ expect(mockKeyListCall).toHaveBeenCalledWith(
+ "test-token",
+ null,
+ null,
+ null,
+ null,
+ "key-1",
+ 1,
+ 1,
+ null,
+ null,
+ "user",
+ ),
+ );
+ expect(await screen.findByText("Owner: Alice Example|alice@example.com|user-1")).toBeInTheDocument();
+ });
});
});