scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-07 02:59:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

Merge pull request #32919 from BerriAI/litellm_pacer_debounce_team_keys

Browse source 
refactor(ui): use TanStack Pacer debounce for the team keys search
This commit is contained in:
yuneng-jiang 2026-07-11 11:14:42 -07:00 • committed by GitHub
commit 5d7b7047a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.test.tsx
View file

@ -24,6 +24,11 @@ vi.mock("../templates/key_info_view", () => ({
)),
}));
// Resolve the debounced search synchronously so typed input lands in the useKeys query within the test tick.
vi.mock("@tanstack/react-pacer/debouncer", () => ({
useDebouncedValue: (value: unknown) => [value, { cancel: vi.fn(), flush: vi.fn() }],
}));
const mockUseKeys = useKeys as MockedFunction<typeof useKeys>;
const createMockKey = (overrides: Partial<KeyResponse> = {}): KeyResponse =>
@ -286,10 +291,8 @@ describe("TeamVirtualKeysTable", () => {
await user.type(await screen.findByTestId("datatable-search"), "check-002");
await waitFor(
() =>
expect(mockUseKeys).toHaveBeenLastCalledWith(1, 50, expect.objectContaining({ selectedKeyAlias: "check-002" })),
{ timeout: 2000 },
await waitFor(() =>
expect(mockUseKeys).toHaveBeenLastCalledWith(1, 50, expect.objectContaining({ selectedKeyAlias: "check-002" })),
);
});

24
ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx
View file

@ -10,10 +10,10 @@ import {
} from "@/components/shared/DataTable";
import { Input } from "@/components/ui/input";
import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/outline";
import { useDebouncedValue } from "@tanstack/react-pacer/debouncer";
import { ColumnDef, ColumnFiltersState, OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table";
import { Badge, Icon, Text } from "@tremor/react";
import { Popover, Tooltip, Typography } from "antd";
import debounce from "lodash/debounce";
import DefaultProxyAdminTag from "../common_components/DefaultProxyAdminTag";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_team_key";
@ -43,24 +43,12 @@ export function TeamVirtualKeysTable({ teamId, teamAlias, organization }: TeamVi
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [filtersOpen, setFiltersOpen] = useState(false);
const [searchInput, setSearchInput] = useState("");
const [searchQuery, setSearchQuery] = useState("");
const [searchQuery] = useDebouncedValue(searchInput, { wait: 300 });
const debouncedSetSearch = useMemo(
() =>
debounce((value: string) => {
setSearchQuery(value);
setTablePagination((prev) => ({ ...prev, pageIndex: 0 }));
}, 300),
[],
);
useEffect(() => () => debouncedSetSearch.cancel(), [debouncedSetSearch]);
const handleSearchChange = useCallback(
(value: string) => {
setSearchInput(value);
debouncedSetSearch(value);
},
[debouncedSetSearch],
);
const handleSearchChange = useCallback((value: string) => {
setSearchInput(value);
setTablePagination((prev) => ({ ...prev, pageIndex: 0 }));
}, []);
const getFilterValue = useCallback(
(columnId: string): string | undefined => {