From 9cbad58a7090df9ec19ab46b0500cde1e0a1fa7d Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:03:49 +0000 Subject: [PATCH 1/3] refactor(ui): remove unused HelpLink and HelpIcon components Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../src/components/HelpLink.test.tsx | 80 +----------- .../src/components/HelpLink.tsx | 120 ------------------ 2 files changed, 1 insertion(+), 199 deletions(-) diff --git a/ui/litellm-dashboard/src/components/HelpLink.test.tsx b/ui/litellm-dashboard/src/components/HelpLink.test.tsx index e502126477a..a247b39b145 100644 --- a/ui/litellm-dashboard/src/components/HelpLink.test.tsx +++ b/ui/litellm-dashboard/src/components/HelpLink.test.tsx @@ -3,85 +3,7 @@ import { describe, it, expect } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { renderWithProviders } from "../../tests/test-utils"; -import { HelpLink, HelpIcon, DocsMenu } from "./HelpLink"; - -describe("HelpLink", () => { - it("should render with default children and open in new tab", () => { - renderWithProviders(); - - const link = screen.getByRole("link", { name: /learn more/i }); - expect(link).toHaveAttribute("href", "https://docs.example.com"); - expect(link).toHaveAttribute("target", "_blank"); - expect(link).toHaveAttribute("rel", "noopener noreferrer"); - }); - - it("should render custom children text", () => { - renderWithProviders(Custom docs link); - - expect(screen.getByText("Custom docs link")).toBeInTheDocument(); - }); - - it("should have the correct href", () => { - renderWithProviders(); - expect(screen.getByRole("link")).toHaveAttribute("href", "https://docs.example.com/test"); - }); - - it("should include a screen-reader-only label for accessibility", () => { - renderWithProviders(); - - expect(screen.getByText("(opens in a new tab)")).toBeInTheDocument(); - }); -}); - -describe("HelpIcon", () => { - it("should render a help button with accessible label", () => { - renderWithProviders(); - - expect(screen.getByRole("button", { name: /help information/i })).toBeInTheDocument(); - }); - - it("should show tooltip content on hover", async () => { - const user = userEvent.setup(); - renderWithProviders(); - - await user.hover(screen.getByRole("button", { name: /help information/i })); - - expect(screen.getByText("Tooltip help text")).toBeInTheDocument(); - }); - - it("should hide tooltip content when not hovered", () => { - renderWithProviders(); - expect(screen.queryByText("Hidden tooltip")).not.toBeInTheDocument(); - }); - - it("should show learn more link when learnMoreHref is provided", async () => { - const user = userEvent.setup(); - renderWithProviders(); - await user.hover(screen.getByRole("button", { name: /help information/i })); - expect(screen.getByText("Learn more")).toBeInTheDocument(); - }); - - it("should use custom learn more text when provided", async () => { - const user = userEvent.setup(); - renderWithProviders( - , - ); - - await user.hover(screen.getByRole("button", { name: /help information/i })); - - const link = screen.getByRole("link", { name: /read docs/i }); - expect(link).toHaveAttribute("href", "https://docs.example.com"); - }); - - it("should not show learn more link when learnMoreHref is not provided", async () => { - const user = userEvent.setup(); - renderWithProviders(); - - await user.hover(screen.getByRole("button", { name: /help information/i })); - - expect(screen.queryByRole("link")).not.toBeInTheDocument(); - }); -}); +import { DocsMenu } from "./HelpLink"; describe("DocsMenu", () => { const items = [ diff --git a/ui/litellm-dashboard/src/components/HelpLink.tsx b/ui/litellm-dashboard/src/components/HelpLink.tsx index 35e2e5f535f..39ac18f9e80 100644 --- a/ui/litellm-dashboard/src/components/HelpLink.tsx +++ b/ui/litellm-dashboard/src/components/HelpLink.tsx @@ -1,13 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import { ExternalLink, ChevronDown } from "lucide-react"; -interface HelpLinkProps { - href: string; - children?: React.ReactNode; - variant?: "inline" | "subtle" | "button"; - className?: string; -} - interface DocMenuItem { label: string; href: string; @@ -19,119 +12,6 @@ interface DocsMenuProps { className?: string; } -/** - * A reusable component for linking to documentation, styled similar to Linear's help links. - * - * @example - * // Inline "Learn more" style - * - * Learn more about custom pricing - * - * - * @example - * // Subtle link (just icon + text, minimal styling) - * - * View docs - * - * - * @example - * // Button style (more prominent) - * - * Custom Pricing Documentation - * - */ -export const HelpLink: React.FC = ({ - href, - children = "Learn more", - variant = "inline", - className = "", -}) => { - const baseClasses = - "inline-flex items-center gap-1.5 transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-1 rounded-sm"; - - const variantClasses = { - inline: "text-info text-sm font-medium hover:underline", - subtle: "text-muted-foreground hover:text-foreground text-xs", - button: - "text-info border border-border px-3 py-1.5 rounded-md bg-card hover:bg-accent text-sm font-medium shadow-xs", - }; - - return ( - - {children} - - ); -}; - -/** - * A minimal help icon with tooltip for inline contextual help. - * Similar to Linear's "?" icons that appear next to labels. - */ -interface HelpIconProps { - content: React.ReactNode; - learnMoreHref?: string; - learnMoreText?: string; -} - -export const HelpIcon: React.FC = ({ content, learnMoreHref, learnMoreText = "Learn more" }) => { - const [showTooltip, setShowTooltip] = React.useState(false); - - return ( -
- - {showTooltip && ( -
-
{content}
- {learnMoreHref && ( - - {learnMoreText} - - )} -
-
- )} -
- ); -}; - /** * A dropdown menu for multiple documentation links. * Linear-style: Single "Docs" button that expands to show multiple relevant links. From ce1a8340c76473fb6bff4ec667625cb714bee814 Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:23:11 +0000 Subject: [PATCH 2/3] refactor(ui): rename HelpLink module to DocsMenu Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../_components/cost_tracking_settings.integration.test.tsx | 2 +- .../cost-tracking/_components/cost_tracking_settings.test.tsx | 2 +- .../cost-tracking/_components/cost_tracking_settings.tsx | 2 +- .../src/components/{HelpLink.test.tsx => DocsMenu.test.tsx} | 2 +- .../src/components/{HelpLink.tsx => DocsMenu.tsx} | 0 5 files changed, 4 insertions(+), 4 deletions(-) rename ui/litellm-dashboard/src/components/{HelpLink.test.tsx => DocsMenu.test.tsx} (98%) rename ui/litellm-dashboard/src/components/{HelpLink.tsx => DocsMenu.tsx} (100%) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx index d4fbb7e153e..3de88fb6f57 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.integration.test.tsx @@ -40,7 +40,7 @@ vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn().mockResolvedValue([]), })); -vi.mock("@/components/HelpLink", () => ({ +vi.mock("@/components/DocsMenu", () => ({ DocsMenu: () => null, })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.test.tsx index a8609aef629..50c8c12c9c2 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.test.tsx @@ -41,7 +41,7 @@ vi.mock("@/components/llm_calls/fetch_models", () => ({ fetchAvailableModels: vi.fn().mockResolvedValue([]), })); -vi.mock("@/components/HelpLink", () => ({ +vi.mock("@/components/DocsMenu", () => ({ DocsMenu: () => null, })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx index 52b66edcbe5..b8e51939dd0 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx @@ -19,7 +19,7 @@ import AddProviderForm from "./add_provider_form"; import ProviderMarginTable from "./provider_margin_table"; import AddMarginForm from "./add_margin_form"; import PricingCalculator from "./pricing_calculator/index"; -import { DocsMenu } from "@/components/HelpLink"; +import { DocsMenu } from "@/components/DocsMenu"; import HowItWorks from "./how_it_works"; import { useDiscountConfig } from "./use_discount_config"; import { useMarginConfig } from "./use_margin_config"; diff --git a/ui/litellm-dashboard/src/components/HelpLink.test.tsx b/ui/litellm-dashboard/src/components/DocsMenu.test.tsx similarity index 98% rename from ui/litellm-dashboard/src/components/HelpLink.test.tsx rename to ui/litellm-dashboard/src/components/DocsMenu.test.tsx index a247b39b145..327f1368b5f 100644 --- a/ui/litellm-dashboard/src/components/HelpLink.test.tsx +++ b/ui/litellm-dashboard/src/components/DocsMenu.test.tsx @@ -3,7 +3,7 @@ import { describe, it, expect } from "vitest"; import { screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { renderWithProviders } from "../../tests/test-utils"; -import { DocsMenu } from "./HelpLink"; +import { DocsMenu } from "./DocsMenu"; describe("DocsMenu", () => { const items = [ diff --git a/ui/litellm-dashboard/src/components/HelpLink.tsx b/ui/litellm-dashboard/src/components/DocsMenu.tsx similarity index 100% rename from ui/litellm-dashboard/src/components/HelpLink.tsx rename to ui/litellm-dashboard/src/components/DocsMenu.tsx From 8d760679f6af03af88d7c82a25ec64a0f6d03bcc Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:35:05 +0000 Subject: [PATCH 3/3] refactor(ui): drop JSDoc example from DocsMenu Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- ui/litellm-dashboard/src/components/DocsMenu.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/ui/litellm-dashboard/src/components/DocsMenu.tsx b/ui/litellm-dashboard/src/components/DocsMenu.tsx index 39ac18f9e80..81958f70683 100644 --- a/ui/litellm-dashboard/src/components/DocsMenu.tsx +++ b/ui/litellm-dashboard/src/components/DocsMenu.tsx @@ -12,18 +12,6 @@ interface DocsMenuProps { className?: string; } -/** - * A dropdown menu for multiple documentation links. - * Linear-style: Single "Docs" button that expands to show multiple relevant links. - * - * @example - * - * Docs - * - */ export const DocsMenu: React.FC = ({ items, children = "Docs", className = "" }) => { const [isOpen, setIsOpen] = useState(false); const menuRef = useRef(null);