scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-08-28 05:25:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 36

feat(ui): mark Cost Optimization as beta in the left nav (#34984)

Browse source
This commit is contained in:
yuneng-jiang 2026-07-28 12:04:45 -07:00 • committed by GitHub
parent 51ad1b0a57
commit f4a68a75ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ui/litellm-dashboard/src/components/leftnav.test.tsx
View file

@ -237,6 +237,24 @@ describe("Sidebar (leftnav)", () => {
expect(link!.querySelector("svg")).not.toBeNull();
expect(label).toHaveClass("group-data-[collapsed=true]/sidebar:hidden");
});
it("shows Cost Optimization with a Beta badge and no feature-flag gate", () => {
const { container } = renderWithProviders(<Sidebar {...defaultProps} enableProjectsUI={false} />);
const costOptimization = container.querySelector('a[href*="cost-optimization"]');
expect(costOptimization).not.toBeNull();
expect(costOptimization!.textContent).toContain("Cost Optimization");
expect(costOptimization!.textContent).toContain("Beta");
expect(container.querySelector('a[href*="projects"]')).toBeNull();
});
it("keeps a readable collapsed-rail tooltip for items whose label carries a badge", () => {
const { container } = renderWithProviders(<Sidebar {...defaultProps} enableProjectsUI collapsed />);
expect(container.querySelector('a[href*="cost-optimization"]')).toHaveAttribute("title", "Cost Optimization");
expect(container.querySelector('a[href*="projects"]')).toHaveAttribute("title", "Projects");
});
});
describe("getBreadcrumb", () => {

10
ui/litellm-dashboard/src/components/leftnav.tsx
View file

@ -187,7 +187,11 @@ const menuGroups: MenuGroup[] = [
page: "cost-optimization",
icon: <PiggyBank {...ICON} />,
roles: [...all_admin_roles, ...internalUserRoles],
label: "Cost Optimization",
label: (
<span className="flex items-center gap-2">
Cost Optimization <BetaBadge />
</span>
),
},
{ key: "logs", page: "logs", label: "Logs", icon: <Activity {...ICON} /> },
{
@ -354,8 +358,6 @@ const findMenuItemKey = (page: string): string => {
return "api-keys";
};
const labelText = (item: MenuItem): string => (typeof item.label === "string" ? item.label : item.key);
const SECTION_DISPLAY: Record<string, string> = {
"AI GATEWAY": "AI Gateway",
OBSERVABILITY: "Observability",
@ -370,6 +372,8 @@ const prettify = (key: string): string =>
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(" ");
const labelText = (item: MenuItem): string => (typeof item.label === "string" ? item.label : prettify(item.key));
// Breadcrumb ("Section" / "Page") for the top bar, derived from the same nav config.
export const getBreadcrumb = (page: string): { section: string | null; title: string } => {
for (const group of menuGroups) {