refresh keys on delete

ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.test.tsx

@@ -6,6 +6,7 @@ import { KeyResponse, Team } from "../key_team_helpers/key_list";
 import { Organization } from "../networking";
 import { KeysResponse, useKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
 import { useFilterLogic } from "../key_team_helpers/filter_logic";
+import useTeams from "@/app/(dashboard)/hooks/useTeams";
 
 // Mock network calls
 vi.mock("./networking", async (importOriginal) => {
@@ -21,6 +22,7 @@ vi.mock("./networking", async (importOriginal) => {
         },
       ],
     }),
+    teamListCall: vi.fn().mockResolvedValue([]),
   };
 });
 
@@ -51,6 +53,20 @@ vi.mock("../key_team_helpers/filter_logic", () => ({
   useFilterLogic: vi.fn(),
 }));
 
+// Mock useTeams hook (used by KeyInfoView)
+vi.mock("@/app/(dashboard)/hooks/useTeams", () => ({
+  default: vi.fn(),
+}));
+
+// Mock fetchTeams to prevent network calls
+vi.mock("@/app/(dashboard)/networking", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/app/(dashboard)/networking")>();
+  return {
+    ...actual,
+    fetchTeams: vi.fn().mockResolvedValue([]),
+  };
+});
+
 const mockKey: KeyResponse = {
   token: "sk-1234567890abcdef",
   token_id: "key-1",
@@ -146,6 +162,7 @@ const mockOrganization: Organization = {
 // Mock hook implementations
 const mockUseKeys = useKeys as MockedFunction<typeof useKeys>;
 const mockUseFilterLogic = useFilterLogic as MockedFunction<typeof useFilterLogic>;
+const mockUseTeams = useTeams as MockedFunction<typeof useTeams>;
 
 beforeEach(() => {
   // Reset mocks before each test
@@ -181,6 +198,12 @@ beforeEach(() => {
     handleFilterChange: vi.fn(),
     handleFilterReset: vi.fn(),
   });
+
+  // Mock useTeams hook (used by KeyInfoView)
+  mockUseTeams.mockReturnValue({
+    teams: [mockTeam],
+    setTeams: vi.fn(),
+  });
 });
 
 it("should render VirtualKeysTable component", () => {
@@ -394,3 +417,43 @@ it("should handle column resizing hover events", () => {
   fireEvent.mouseLeave(headerCell);
   expect(resizer.style.opacity).toBe("0");
 });
+
+it("should open KeyInfoView when clicking on a key ID button", async () => {
+  const mockProps = {
+    teams: [mockTeam],
+    organizations: [mockOrganization],
+    onSortChange: vi.fn(),
+    currentSort: {
+      sortBy: "created_at",
+      sortOrder: "desc" as const,
+    },
+  };
+
+  renderWithProviders(<VirtualKeysTable {...mockProps} />);
+
+  // Wait for the table to render
+  await waitFor(() => {
+    expect(screen.getByText("Test Key Alias")).toBeInTheDocument();
+  });
+
+  // Verify table is visible before clicking - check for table-specific text
+  expect(screen.getByText(/Showing.*results/)).toBeInTheDocument();
+
+  // Find the key ID button (it should show the truncated token)
+  const keyIdButton = screen.getByText("sk-1234...");
+  expect(keyIdButton).toBeInTheDocument();
+
+  // Click on the key ID button
+  fireEvent.click(keyIdButton);
+
+  // Wait for KeyInfoView to appear - check for unique elements that only exist in KeyInfoView
+  await waitFor(() => {
+    expect(screen.getByText("Back to Keys")).toBeInTheDocument();
+    // KeyInfoView shows "Created:" or "Updated:" which is unique to it
+    expect(screen.getByText(/Created:|Updated:/)).toBeInTheDocument();
+  });
+
+  // Verify that table-specific elements are no longer visible
+  // The "Showing X of Y results" text should not be visible when KeyInfoView is open
+  expect(screen.queryByText(/Showing.*results/)).not.toBeInTheDocument();
+});

ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx

@@ -533,6 +533,7 @@ export function VirtualKeysTable({ teams, organizations, onSortChange, currentSo
           onClose={() => setSelectedKey(null)}
           keyData={selectedKey}
           teams={allTeams}
+          onDelete={refetch}
         />
       ) : (
         <div className="border-b py-4 flex-1 overflow-hidden">
@@ -599,11 +600,10 @@ export function VirtualKeysTable({ teams, organizations, onSortChange, currentSo
                           <TableHeaderCell
                             key={header.id}
                             data-header-id={header.id}
-                            className={`py-1 h-8 relative hover:bg-gray-50 ${
-                              header.id === "actions"
+                            className={`py-1 h-8 relative hover:bg-gray-50 ${header.id === "actions"
                                 ? "sticky right-0 bg-white shadow-[-4px_0_8px_-6px_rgba(0,0,0,0.1)]"
                                 : ""
-                            }`}
+                              }`}
                             style={{
                               width: header.getSize(),
                               position: "relative",