Merge pull request #18994 from BerriAI/litellm_ui_key_refresh_fix

[Fix] UI - Refetch Keys after Key Create
This commit is contained in:
yuneng-jiang 2026-01-12 17:56:47 -08:00 • committed by GitHub
commit c126cfd8db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 3 deletions

View file

@ -4,7 +4,7 @@ import { keyListCall } from "@/components/networking";
import { KeyResponse } from "@/components/key_team_helpers/key_list";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
const keyKeys = createQueryKeys("keys");
export const keyKeys = createQueryKeys("keys");
export interface KeysResponse {
keys: KeyResponse[];

View file

@ -1,5 +1,5 @@
import { render, screen } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { renderWithProviders, screen } from "../../../tests/test-utils";
import CreateKey from "./create_key_button";
const mockKeyCreateCall = vi.fn().mockResolvedValue({
@ -58,7 +58,7 @@ describe("CreateKey", () => {
});
it("should render the CreateKey component", () => {
render(<CreateKey {...defaultProps} />);
renderWithProviders(<CreateKey {...defaultProps} />);
expect(screen.getByRole("button", { name: /create new key/i })).toBeInTheDocument();
});
});

View file

@ -1,7 +1,9 @@
"use client";
import { keyKeys } from "@/app/(dashboard)/hooks/keys/useKeys";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { formatNumberWithCommas } from "@/utils/dataUtils";
import { InfoCircleOutlined } from "@ant-design/icons";
import { useQueryClient } from "@tanstack/react-query";
import { Accordion, AccordionBody, AccordionHeader, Button, Col, Grid, Text, TextInput, Title } from "@tremor/react";
import { Button as Button2, Form, Input, Modal, Radio, Select, Switch, Tooltip } from "antd";
import debounce from "lodash/debounce";
@ -136,6 +138,7 @@ export const fetchUserModels = async (
*/
const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey }) => {
const { accessToken, userId: userID, userRole, premiumUser } = useAuthorized();
const queryClient = useQueryClient();
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
const [apiKey, setApiKey] = useState(null);
@ -392,6 +395,10 @@ const CreateKey: React.FC<CreateKeyProps> = ({ team, teams, data, addKey }) => {
// Also directly update the keys list in VirtualKeysTable without an API call
addKey(response);
// Invalidate and refetch all keys list queries to update the table
// This will trigger a refetch of all key list queries regardless of pagination
queryClient.invalidateQueries({ queryKey: keyKeys.lists() });
setApiKey(response["key"]);
setSoftBudget(response["soft_budget"]);
NotificationsManager.success("Virtual Key Created");