[Feature] UI - Navbar: Option to Hide Community Engagement Buttons

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(<CommunityEngagementButtons />);
+    expect(screen.getByRole("link", { name: /join slack/i })).toBeInTheDocument();
+  });
+
+  it("should render Join Slack button with correct link", () => {
+    renderWithProviders(<CommunityEngagementButtons />);
+
+    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(<CommunityEngagementButtons />);
+
+    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(<CommunityEngagementButtons />);
+
+    expect(screen.queryByRole("link", { name: /join slack/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /star us on github/i })).not.toBeInTheDocument();
+  });
+});

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 (
+    <>
+      <Button
+        href="https://www.litellm.ai/support"
+        target="_blank"
+        rel="noopener noreferrer"
+        icon={<SlackOutlined />}
+        className="shadow-md shadow-indigo-500/20 hover:shadow-indigo-500/50 transition-shadow"
+      >
+        Join Slack
+      </Button>
+      <Button
+        href="https://github.com/BerriAI/litellm"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="shadow-md shadow-indigo-500/20 hover:shadow-indigo-500/50 transition-shadow"
+        icon={<GithubOutlined />}
+      >
+        Star us on GitHub
+      </Button>
+    </>
+  );
+};

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: () => (
+    <div data-testid="community-engagement-buttons">
+      <a href="https://www.litellm.ai/support" target="_blank" rel="noopener noreferrer">
+        Join Slack
+      </a>
+      <a href="https://github.com/BerriAI/litellm" target="_blank" rel="noopener noreferrer">
+        Star us on GitHub
+      </a>
+    </div>
+  ),
+}));
+
 // 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(<Navbar {...defaultProps} />);
-
-    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(<Navbar {...defaultProps} />);
-
-    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(<Navbar {...defaultProps} />);

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<NavbarProps> = ({
           </div>
           {/* Right side nav items */}
           <div className="flex items-center space-x-5 ml-auto">
-            <Button
-              href="https://www.litellm.ai/support"
-              target="_blank"
-              rel="noopener noreferrer"
-              icon={<SlackOutlined />}
-              className="shadow-md shadow-indigo-500/20 hover:shadow-indigo-500/50 transition-shadow"
-            >
-              Join Slack
-            </Button>
-            <Button
-              href="https://github.com/BerriAI/litellm"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="shadow-md shadow-indigo-500/20 hover:shadow-indigo-500/50 transition-shadow"
-              icon={<GithubOutlined />}
-            >
-              Star us on GitHub
-            </Button>
+            <CommunityEngagementButtons />
             {/* 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 && <Switch