From 32b1ff7d1128a450f2ae35bc4315dccba36e67a9 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Mon, 2 Feb 2026 17:25:16 -0800 Subject: [PATCH] option to hide community engagement buttons --- .../CommunityEngagementButtons.test.tsx | 50 +++++++++++++++++++ .../CommunityEngagementButtons.tsx | 36 +++++++++++++ .../src/components/navbar.test.tsx | 39 ++++++--------- .../src/components/navbar.tsx | 24 ++------- 4 files changed, 103 insertions(+), 46 deletions(-) create mode 100644 ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.test.tsx create mode 100644 ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.tsx diff --git a/ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.test.tsx b/ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.test.tsx new file mode 100644 index 00000000000..6994def858b --- /dev/null +++ b/ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.test.tsx @@ -0,0 +1,50 @@ +import { beforeEach, describe, expect, it, vi } from "vitest"; +import { renderWithProviders, screen } from "../../../../tests/test-utils"; +import { CommunityEngagementButtons } from "./CommunityEngagementButtons"; + +let mockUseDisableShowPromptsImpl = () => false; + +vi.mock("@/app/(dashboard)/hooks/useDisableShowPrompts", () => ({ + useDisableShowPrompts: () => mockUseDisableShowPromptsImpl(), +})); + +describe("CommunityEngagementButtons", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockUseDisableShowPromptsImpl = () => false; + }); + + it("should render", () => { + renderWithProviders(); + expect(screen.getByRole("link", { name: /join slack/i })).toBeInTheDocument(); + }); + + it("should render Join Slack button with correct link", () => { + renderWithProviders(); + + const joinSlackLink = screen.getByRole("link", { name: /join slack/i }); + expect(joinSlackLink).toBeInTheDocument(); + expect(joinSlackLink).toHaveAttribute("href", "https://www.litellm.ai/support"); + expect(joinSlackLink).toHaveAttribute("target", "_blank"); + expect(joinSlackLink).toHaveAttribute("rel", "noopener noreferrer"); + }); + + it("should render Star us on GitHub button with correct link", () => { + renderWithProviders(); + + const starOnGithubLink = screen.getByRole("link", { name: /star us on github/i }); + expect(starOnGithubLink).toBeInTheDocument(); + expect(starOnGithubLink).toHaveAttribute("href", "https://github.com/BerriAI/litellm"); + expect(starOnGithubLink).toHaveAttribute("target", "_blank"); + expect(starOnGithubLink).toHaveAttribute("rel", "noopener noreferrer"); + }); + + it("should not render buttons when prompts are disabled", () => { + mockUseDisableShowPromptsImpl = () => true; + + renderWithProviders(); + + expect(screen.queryByRole("link", { name: /join slack/i })).not.toBeInTheDocument(); + expect(screen.queryByRole("link", { name: /star us on github/i })).not.toBeInTheDocument(); + }); +}); diff --git a/ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.tsx b/ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.tsx new file mode 100644 index 00000000000..649bcc0b589 --- /dev/null +++ b/ui/litellm-dashboard/src/components/Navbar/CommunityEngagementButtons/CommunityEngagementButtons.tsx @@ -0,0 +1,36 @@ +import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts"; +import { GithubOutlined, SlackOutlined } from "@ant-design/icons"; +import { Button } from "antd"; +import React from "react"; + +export const CommunityEngagementButtons: React.FC = () => { + const disableShowPrompts = useDisableShowPrompts(); + + // Hide buttons if prompts are disabled + if (disableShowPrompts) { + return null; + } + + return ( + <> + + + + ); +}; diff --git a/ui/litellm-dashboard/src/components/navbar.test.tsx b/ui/litellm-dashboard/src/components/navbar.test.tsx index a2996f70587..125187e2340 100644 --- a/ui/litellm-dashboard/src/components/navbar.test.tsx +++ b/ui/litellm-dashboard/src/components/navbar.test.tsx @@ -12,11 +12,24 @@ vi.mock("@/utils/proxyUtils", () => ({ fetchProxySettings: vi.fn(), })); +// Mock CommunityEngagementButtons component +vi.mock("./Navbar/CommunityEngagementButtons/CommunityEngagementButtons", () => ({ + CommunityEngagementButtons: () => ( + + ), +})); + // Create mock functions that can be controlled in tests let mockUseThemeImpl = () => ({ logoUrl: null as string | null }); let mockUseHealthReadinessImpl = () => ({ data: null as any }); let mockGetLocalStorageItemImpl = (key: string) => null as string | null; -let mockUseDisableShowPromptsImpl = () => false; let mockUseAuthorizedImpl = () => ({ userId: "test-user", userEmail: "test@example.com", @@ -32,10 +45,6 @@ vi.mock("@/app/(dashboard)/hooks/healthReadiness/useHealthReadiness", () => ({ useHealthReadiness: () => mockUseHealthReadinessImpl(), })); -vi.mock("@/app/(dashboard)/hooks/useDisableShowPrompts", () => ({ - useDisableShowPrompts: () => mockUseDisableShowPromptsImpl(), -})); - vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: () => mockUseAuthorizedImpl(), })); @@ -79,26 +88,6 @@ describe("Navbar", () => { expect(screen.getByText("User")).toBeInTheDocument(); }); - it("should render Join Slack button with correct link", () => { - renderWithProviders(); - - const joinSlackLink = screen.getByRole("link", { name: /join slack/i }); - expect(joinSlackLink).toBeInTheDocument(); - expect(joinSlackLink).toHaveAttribute("href", "https://www.litellm.ai/support"); - expect(joinSlackLink).toHaveAttribute("target", "_blank"); - expect(joinSlackLink).toHaveAttribute("rel", "noopener noreferrer"); - }); - - it("should render Star us on GitHub button with correct link", () => { - renderWithProviders(); - - const starOnGithubLink = screen.getByRole("link", { name: /star us on github/i }); - expect(starOnGithubLink).toBeInTheDocument(); - expect(starOnGithubLink).toHaveAttribute("href", "https://github.com/BerriAI/litellm"); - expect(starOnGithubLink).toHaveAttribute("target", "_blank"); - expect(starOnGithubLink).toHaveAttribute("rel", "noopener noreferrer"); - }); - it("should display user information in dropdown", async () => { const user = userEvent.setup(); renderWithProviders(); diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx index 3649ca76238..2ffa0632f27 100644 --- a/ui/litellm-dashboard/src/components/navbar.tsx +++ b/ui/litellm-dashboard/src/components/navbar.tsx @@ -4,16 +4,15 @@ import { useTheme } from "@/contexts/ThemeContext"; import { clearTokenCookies } from "@/utils/cookieUtils"; import { fetchProxySettings } from "@/utils/proxyUtils"; import { - GithubOutlined, MenuFoldOutlined, MenuUnfoldOutlined, MoonOutlined, - SlackOutlined, SunOutlined, } from "@ant-design/icons"; -import { Button, Switch, Tag } from "antd"; +import { Switch, Tag } from "antd"; import Link from "next/link"; import React, { useEffect, useState } from "react"; +import { CommunityEngagementButtons } from "./Navbar/CommunityEngagementButtons/CommunityEngagementButtons"; import UserDropdown from "./Navbar/UserDropdown/UserDropdown"; interface NavbarProps { @@ -129,24 +128,7 @@ const Navbar: React.FC = ({ {/* Right side nav items */}
- - + {/* Dark mode is currently a work in progress. To test, you can change 'false' to 'true' below. Do not set this to true by default until all components are confirmed to support dark mode styles. */} {false &&