scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-07 08:26:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 36

chore(ui): drop the unused antd table header sort dropdown

Browse source 
TableHeaderSortDropdown had no importers left; the shared DataTable's
DataTableSortHeader covers the same ascending/descending/reset menu on Base UI.
knip did not flag it because its own test file counted as a usage.
This commit is contained in:
Yuneng Jiang 2026-07-24 16:08:35 -07:00
parent 9e56630347
commit 3966fbf5ec
No known key found for this signature in database
2 changed files with 0 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
ui/litellm-dashboard/src/components/common_components/TableHeaderSortDropdown/TableHeaderSortDropdown.test.tsx
View file

@ -1,148 +0,0 @@
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { TableHeaderSortDropdown } from "./TableHeaderSortDropdown";
describe("TableHeaderSortDropdown", () => {
it("should render", () => {
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState={false} onSortChange={onSortChange} />);
expect(screen.getByRole("button")).toBeInTheDocument();
});
it("should open dropdown menu when button is clicked", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState={false} onSortChange={onSortChange} />);
const button = screen.getByRole("button");
await user.click(button);
await waitFor(() => {
expect(screen.getByText("Ascending")).toBeInTheDocument();
expect(screen.getByText("Descending")).toBeInTheDocument();
expect(screen.getByText("Reset")).toBeInTheDocument();
});
});
it("should call onSortChange with asc when ascending option is clicked", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState={false} onSortChange={onSortChange} />);
const button = screen.getByRole("button");
await user.click(button);
await waitFor(() => {
expect(screen.getByText("Ascending")).toBeInTheDocument();
});
const ascendingOption = screen.getByText("Ascending");
await user.click(ascendingOption);
expect(onSortChange).toHaveBeenCalledTimes(1);
expect(onSortChange).toHaveBeenCalledWith("asc");
});
it("should call onSortChange with desc when descending option is clicked", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState={false} onSortChange={onSortChange} />);
const button = screen.getByRole("button");
await user.click(button);
await waitFor(() => {
expect(screen.getByText("Descending")).toBeInTheDocument();
});
const descendingOption = screen.getByText("Descending");
await user.click(descendingOption);
expect(onSortChange).toHaveBeenCalledTimes(1);
expect(onSortChange).toHaveBeenCalledWith("desc");
});
it("should call onSortChange with false when reset option is clicked", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState="asc" onSortChange={onSortChange} />);
const button = screen.getByRole("button");
await user.click(button);
await waitFor(() => {
expect(screen.getByText("Reset")).toBeInTheDocument();
});
const resetOption = screen.getByText("Reset");
await user.click(resetOption);
expect(onSortChange).toHaveBeenCalledTimes(1);
expect(onSortChange).toHaveBeenCalledWith(false);
});
it("should highlight ascending option when sort state is asc", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState="asc" onSortChange={onSortChange} />);
const button = screen.getByRole("button");
await user.click(button);
await waitFor(() => {
const ascendingOption = screen.getByText("Ascending");
const menuItem = ascendingOption.closest(".ant-dropdown-menu-item");
expect(menuItem).toHaveClass("ant-dropdown-menu-item-selected");
});
});
it("should highlight descending option when sort state is desc", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState="desc" onSortChange={onSortChange} />);
const button = screen.getByRole("button");
await user.click(button);
await waitFor(() => {
const descendingOption = screen.getByText("Descending");
const menuItem = descendingOption.closest(".ant-dropdown-menu-item");
expect(menuItem).toHaveClass("ant-dropdown-menu-item-selected");
});
});
it("should not highlight any option when sort state is false", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
render(<TableHeaderSortDropdown sortState={false} onSortChange={onSortChange} />);
const button = screen.getByRole("button");
await user.click(button);
await waitFor(() => {
expect(screen.getByText("Ascending")).toBeInTheDocument();
});
const ascendingOption = screen.getByText("Ascending");
const menuItem = ascendingOption.closest(".ant-dropdown-menu-item");
expect(menuItem).not.toHaveClass("ant-dropdown-menu-item-selected");
});
it("should stop event propagation when button is clicked", async () => {
const user = userEvent.setup();
const onSortChange = vi.fn();
const onParentClick = vi.fn();
render(
<div onClick={onParentClick}>
<TableHeaderSortDropdown sortState={false} onSortChange={onSortChange} />
</div>,
);
const button = screen.getByRole("button");
await user.click(button);
expect(onParentClick).not.toHaveBeenCalled();
});
});

82
ui/litellm-dashboard/src/components/common_components/TableHeaderSortDropdown/TableHeaderSortDropdown.tsx
View file

@ -1,82 +0,0 @@
import React from "react";
import { Button, Dropdown, MenuProps } from "antd";
import { SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon, XIcon } from "@heroicons/react/outline";
export type SortState = "asc" | "desc" | false;
interface TableHeaderSortDropdownProps {
/**
* Current sort state: "asc", "desc", or false for neutral
*/
sortState: SortState;
/**
* Callback when sort state changes
* @param newState - The new sort state: "asc", "desc", or false
*/
onSortChange: (newState: SortState) => void;
/**
* Optional column ID for identification
*/
columnId?: string;
}
export const TableHeaderSortDropdown: React.FC<TableHeaderSortDropdownProps> = ({ sortState, onSortChange }) => {
const handleMenuClick: MenuProps["onClick"] = ({ key }) => {
if (key === "asc") {
onSortChange("asc");
} else if (key === "desc") {
onSortChange("desc");
} else if (key === "reset") {
onSortChange(false);
}
};
const menuItems: MenuProps["items"] = [
{
key: "asc",
label: "Ascending",
icon: <ChevronUpIcon className="h-4 w-4" />,
},
{
key: "desc",
label: "Descending",
icon: <ChevronDownIcon className="h-4 w-4" />,
},
{
key: "reset",
label: "Reset",
icon: <XIcon className="h-4 w-4" />,
},
];
// Determine which icon to display based on current sort state
const renderIcon = () => {
if (sortState === "asc") {
return <ChevronUpIcon className="h-4 w-4" />;
} else if (sortState === "desc") {
return <ChevronDownIcon className="h-4 w-4" />;
} else {
return <SwitchVerticalIcon className="h-4 w-4" />;
}
};
return (
<Dropdown
menu={{
items: menuItems,
onClick: handleMenuClick,
selectable: true,
selectedKeys: sortState ? [sortState] : [],
}}
trigger={["click"]}
autoAdjustOverflow
>
<Button
type="text"
onClick={(e) => e.stopPropagation()}
icon={renderIcon()}
className={sortState ? "text-blue-500 hover:text-blue-600" : "text-gray-400 hover:text-blue-500"}
/>
</Dropdown>
);
};