diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json index e1da40d6ea2..7e2d9d82a8e 100644 --- a/ui/litellm-dashboard/eslint-suppressions.json +++ b/ui/litellm-dashboard/eslint-suppressions.json @@ -234,9 +234,6 @@ "src/app/(dashboard)/cost-tracking/_components/how_it_works.tsx": { "local/filename-pascal-case": { "count": 1 - }, - "no-restricted-imports": { - "count": 1 } }, "src/app/(dashboard)/cost-tracking/_components/pricing_calculator/index.tsx": { @@ -260,17 +257,9 @@ "count": 2 } }, - "src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.test.tsx": { - "unused-imports/no-unused-imports": { - "count": 1 - } - }, "src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.tsx": { "local/filename-pascal-case": { "count": 1 - }, - "no-restricted-imports": { - "count": 1 } }, "src/app/(dashboard)/cost-tracking/_components/pricing_calculator/use_multi_cost_estimate.ts": { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.tsx index 5fa27551d16..8a4a18a71fe 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/how_it_works.tsx @@ -1,6 +1,7 @@ import React, { useState, useMemo } from "react"; -import { Text, TextInput } from "@tremor/react"; import CodeBlock from "@/components/CodeBlock"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; const HowItWorks: React.FC = () => { const [responseCost, setResponseCost] = useState(""); @@ -9,8 +10,10 @@ const HowItWorks: React.FC = () => { const calculatedDiscount = useMemo(() => { const cost = parseFloat(responseCost); const discount = parseFloat(discountAmount); + const hasInvalidCost = isNaN(cost) || cost === 0; + const hasInvalidDiscount = isNaN(discount) || discount === 0; - if (isNaN(cost) || isNaN(discount) || cost === 0 || discount === 0) { + if (hasInvalidCost || hasInvalidDiscount) { return null; } @@ -28,30 +31,30 @@ const HowItWorks: React.FC = () => { return (
- Cost Calculation - +

Cost Calculation

+

Discounts are applied to provider costs:{" "} - + final_cost = base_cost × (1 - discount%/100) - +

- Example - +

Example

+

A 5% discount on a $10.00 request results in: $10.00 × (1 - 0.05) = $9.50 - +

- Valid Range - Discount percentages must be between 0% and 100% +

Valid Range

+

Discount percentages must be between 0% and 100%

-
- Validating Discounts - +
+

Validating Discounts

+

Make a test request and check the response headers to verify discounts are applied: - +

{ "messages": [{"role": "user", "content": "Hello"}] }'`} /> - Look for these headers in the response: +

Look for these headers in the response:

- + x-litellm-response-cost - Final cost after discount +

Final cost after discount

- + x-litellm-response-cost-original - Original cost before discount +

Original cost before discount

- + x-litellm-response-cost-discount-amount - Amount discounted +

Amount discounted

-
- Discount Calculator - +
+

Discount Calculator

+

Enter values from your response headers to verify the discount: - -

+

+
-
-
{calculatedDiscount && ( -
- Calculated Results +
+

Calculated Results

- Original Cost: - ${calculatedDiscount.originalCost} +

Original Cost:

+ ${calculatedDiscount.originalCost}
- Final Cost: - ${calculatedDiscount.finalCost} +

Final Cost:

+ ${calculatedDiscount.finalCost}
- Discount Amount: - ${calculatedDiscount.discountAmount} +

Discount Amount:

+ ${calculatedDiscount.discountAmount}
-
- Discount Applied: - {calculatedDiscount.discountPercentage}% +
+

Discount Applied:

+

{calculatedDiscount.discountPercentage}%

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.test.tsx index e40fe7dbbca..1c6800de7d2 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.test.tsx @@ -1,8 +1,7 @@ import React from "react"; import { describe, it, expect, vi, beforeEach } from "vitest"; -import { screen, fireEvent } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { renderWithProviders } from "../../../../../../tests/test-utils"; +import { renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils"; import MultiExportDropdown from "./multi_export_dropdown"; import type { MultiModelResult } from "./types"; @@ -78,41 +77,44 @@ describe("MultiExportDropdown", () => { await user.click(screen.getByRole("button", { name: /^export$/i })); - expect(screen.getByText("Export as PDF")).toBeInTheDocument(); - expect(screen.getByText("Export as CSV")).toBeInTheDocument(); + expect(await screen.findByRole("menuitem", { name: "Export as PDF" })).toBeInTheDocument(); + expect(screen.getByRole("menuitem", { name: "Export as CSV" })).toBeInTheDocument(); }); it("should hide the export menu when the Export button is clicked again", async () => { const user = userEvent.setup(); renderWithProviders(); - await user.click(screen.getByRole("button", { name: /^export$/i })); - expect(screen.getByText("Export as PDF")).toBeInTheDocument(); + const trigger = screen.getByRole("button", { name: /^export$/i }); + await user.click(trigger); + await screen.findByRole("menuitem", { name: "Export as PDF" }); - await user.click(screen.getByRole("button", { name: /^export$/i })); - expect(screen.queryByText("Export as PDF")).not.toBeInTheDocument(); + await user.click(trigger); + await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false")); }); it("should call exportMultiToPDF and close the menu when Export as PDF is clicked", async () => { const user = userEvent.setup(); renderWithProviders(); - await user.click(screen.getByRole("button", { name: /^export$/i })); - await user.click(screen.getByText("Export as PDF")); + const trigger = screen.getByRole("button", { name: /^export$/i }); + await user.click(trigger); + await user.click(await screen.findByRole("menuitem", { name: "Export as PDF" })); expect(exportMultiToPDF).toHaveBeenCalledTimes(1); - expect(screen.queryByText("Export as PDF")).not.toBeInTheDocument(); + await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false")); }); it("should call exportMultiToCSV and close the menu when Export as CSV is clicked", async () => { const user = userEvent.setup(); renderWithProviders(); - await user.click(screen.getByRole("button", { name: /^export$/i })); - await user.click(screen.getByText("Export as CSV")); + const trigger = screen.getByRole("button", { name: /^export$/i }); + await user.click(trigger); + await user.click(await screen.findByRole("menuitem", { name: "Export as CSV" })); expect(exportMultiToCSV).toHaveBeenCalledTimes(1); - expect(screen.queryByText("Export as CSV")).not.toBeInTheDocument(); + await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false")); }); it("should pass the multiResult to the export functions", async () => { @@ -121,7 +123,7 @@ describe("MultiExportDropdown", () => { renderWithProviders(); await user.click(screen.getByRole("button", { name: /^export$/i })); - await user.click(screen.getByText("Export as PDF")); + await user.click(await screen.findByRole("menuitem", { name: "Export as PDF" })); expect(exportMultiToPDF).toHaveBeenCalledWith(multiResult); }); @@ -135,10 +137,41 @@ describe("MultiExportDropdown", () => {
, ); - await user.click(screen.getByRole("button", { name: /^export$/i })); - expect(screen.getByText("Export as PDF")).toBeInTheDocument(); + const trigger = screen.getByRole("button", { name: /^export$/i }); + await user.click(trigger); + await screen.findByRole("menuitem", { name: "Export as PDF" }); - fireEvent.mouseDown(screen.getByTestId("outside")); - expect(screen.queryByText("Export as PDF")).not.toBeInTheDocument(); + await user.click(screen.getByTestId("outside")); + await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false")); + }); + + it("should focus and navigate export options with the keyboard", async () => { + const user = userEvent.setup(); + renderWithProviders(); + + const trigger = screen.getByRole("button", { name: /^export$/i }); + trigger.focus(); + await user.keyboard("{ArrowDown}"); + + const pdfOption = await screen.findByRole("menuitem", { name: "Export as PDF" }); + await waitFor(() => expect(pdfOption).toHaveFocus()); + + await user.keyboard("{ArrowDown}"); + expect(screen.getByRole("menuitem", { name: "Export as CSV" })).toHaveFocus(); + }); + + it("should close the menu and restore trigger focus when Escape is pressed", async () => { + const user = userEvent.setup(); + renderWithProviders(); + + const trigger = screen.getByRole("button", { name: /^export$/i }); + trigger.focus(); + await user.keyboard("{ArrowDown}"); + await screen.findByRole("menuitem", { name: "Export as PDF" }); + + await user.keyboard("{Escape}"); + + await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false")); + expect(trigger).toHaveFocus(); }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.tsx index af60b590165..3174df0b951 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_export_dropdown.tsx @@ -1,6 +1,12 @@ -import React, { useState, useRef, useEffect } from "react"; -import { Button } from "@tremor/react"; -import { DownloadOutlined, FilePdfOutlined, FileExcelOutlined } from "@ant-design/icons"; +import React from "react"; +import { Download, FileSpreadsheet, FileText } from "lucide-react"; +import { buttonVariants } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; import { MultiModelResult } from "./types"; import { exportMultiToPDF, exportMultiToCSV } from "./multi_export_utils"; @@ -9,62 +15,29 @@ interface MultiExportDropdownProps { } const MultiExportDropdown: React.FC = ({ multiResult }) => { - const [isOpen, setIsOpen] = useState(false); - const menuRef = useRef(null); - const hasResults = multiResult.entries.some((e) => e.result !== null); - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if (menuRef.current && !menuRef.current.contains(event.target as Node)) { - setIsOpen(false); - } - }; - - if (isOpen) { - document.addEventListener("mousedown", handleClickOutside); - } - - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, [isOpen]); - if (!hasResults) { return null; } return ( -
- - - {isOpen && ( -
- - -
- )} -
+ + + exportMultiToPDF(multiResult)}> + + Export as PDF + + exportMultiToCSV(multiResult)}> + + Export as CSV + + + ); };