From bdc0893c28165a8ba96dc1f6cc428817cc21ec67 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Tue, 13 Oct 2026 16:48:32 -0700 Subject: [PATCH] fix(ui): drop deprecation banners from kept features and make the rest permanent (#46314) * fix(ui): drop deprecation banners from kept features and make the rest permanent * test(ui): pin deprecation banner copy, dismissal and kept-feature absence * fix(ui): point deprecation banner at the discussion instead of asking for feedback * test(ui): drop copy-pinning and removed-banner absence tests * refactor(ui): build the deprecation banner on the shadcn Alert primitive --- .../_components/MCPNetworkSettings.tsx | 2 - .../memory/page.integration.test.tsx | 6 -- .../src/app/(dashboard)/memory/page.tsx | 8 +-- .../src/app/(dashboard)/playground/page.tsx | 2 - .../src/app/(dashboard)/prompts/page.tsx | 8 +-- .../workflows/page.integration.test.tsx | 6 +- .../src/components/DeprecationBanner.test.tsx | 32 ++-------- .../src/components/DeprecationBanner.tsx | 58 +++++-------------- 8 files changed, 25 insertions(+), 97 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx index 2fd62c7f1ef..c421f1a932e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx @@ -14,7 +14,6 @@ import { import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner"; -import { DeprecationBanner } from "@/components/DeprecationBanner"; import { toast } from "@/lib/toast"; import { getGeneralSettingsCall, @@ -317,7 +316,6 @@ const MCPNetworkSettings: React.FC = ({ accessToken }) return (
-

Private IP Ranges

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/memory/page.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/memory/page.integration.test.tsx index 40773381587..2ef684a6ce7 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/memory/page.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/memory/page.integration.test.tsx @@ -49,10 +49,4 @@ describe("Memory page access by role", () => { await waitFor(() => expect(requestedUrls().filter((url) => url.includes("/v1/memory"))).toEqual([])); }, ); - - it("hides the deprecation banner along with the page body for a denied role", () => { - renderAs("Internal User"); - - expect(screen.queryByText(/draft deprecation list/i)).not.toBeInTheDocument(); - }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/memory/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/memory/page.tsx index 7b1b6223372..1ba2ece9f84 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/memory/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/memory/page.tsx @@ -1,7 +1,6 @@ "use client"; import { MemoryView } from "./_components/MemoryView"; -import { DeprecationBanner } from "@/components/DeprecationBanner"; import { AdminOnlyNotice } from "@/components/shared/AdminOnlyNotice"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import useCan from "@/app/(dashboard)/hooks/useCan"; @@ -14,10 +13,5 @@ export default function Memory() { return ; } - return ( - <> - - - - ); + return ; } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx index bb5612e7367..fa5f76317de 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx @@ -7,7 +7,6 @@ import CompareUI from "@/app/(dashboard)/playground/components/compareUI/Compare import ComplianceUI from "@/app/(dashboard)/playground/components/complianceUI/ComplianceUI"; import SystemOneUI from "@/app/(dashboard)/playground/components/systemOneUI/SystemOneUI"; import BetaBadge from "@/components/BetaBadge"; -import { DeprecationBanner } from "@/components/DeprecationBanner"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import { fetchProxySettings } from "@/utils/proxyUtils"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; @@ -100,7 +99,6 @@ export default function PlaygroundPage() { - - - - - ); + return ; } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/workflows/page.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/workflows/page.integration.test.tsx index 5281ba626e1..6aa7119b034 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/workflows/page.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/workflows/page.integration.test.tsx @@ -50,9 +50,9 @@ describe("Workflows page access by role", () => { }, ); - it("hides the deprecation banner along with the page body for a denied role", () => { - renderAs("Internal User"); + it("shows an admin the deprecation notice", () => { + renderAs("Admin"); - expect(screen.queryByText(/draft deprecation list/i)).not.toBeInTheDocument(); + expect(screen.getByRole("alert")).toHaveTextContent("Workflows"); }); }); diff --git a/ui/litellm-dashboard/src/components/DeprecationBanner.test.tsx b/ui/litellm-dashboard/src/components/DeprecationBanner.test.tsx index 596ad2a1626..ead6785bfd4 100644 --- a/ui/litellm-dashboard/src/components/DeprecationBanner.test.tsx +++ b/ui/litellm-dashboard/src/components/DeprecationBanner.test.tsx @@ -1,44 +1,20 @@ import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; import { describe, expect, it } from "vitest"; import { DeprecationBanner } from "./DeprecationBanner"; describe("DeprecationBanner", () => { - it("names the deprecated feature in the heading and the body", () => { - render(); + it("names the deprecated feature", () => { + render(); - expect(screen.getByText("Memory is on a draft deprecation list")).toBeInTheDocument(); - expect(screen.getByText(/Memory is one of several experimental features/)).toBeInTheDocument(); - }); - - it("states the target removal date and that the list is not final", () => { - render(); - - expect(screen.getByText(/as early as September 1, 2026/)).toBeInTheDocument(); - expect(screen.getByText(/This list is a draft and is not final/)).toBeInTheDocument(); + expect(screen.getByRole("alert")).toHaveTextContent("Workflows"); }); it("links to the deprecation discussion in a new tab without leaking the opener", () => { - render(); + render(); const link = screen.getByRole("link", { name: "deprecation discussion" }); expect(link).toHaveAttribute("href", "https://github.com/BerriAI/litellm/discussions/32090"); expect(link).toHaveAttribute("target", "_blank"); expect(link).toHaveAttribute("rel", "noopener noreferrer"); }); - - it("exposes a named close control", () => { - render(); - - expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument(); - }); - - it("hides the banner once the close control is used", async () => { - const user = userEvent.setup(); - render(); - - await user.click(screen.getByRole("button", { name: /close/i })); - - expect(screen.queryByText("Memory is on a draft deprecation list")).not.toBeInTheDocument(); - }); }); diff --git a/ui/litellm-dashboard/src/components/DeprecationBanner.tsx b/ui/litellm-dashboard/src/components/DeprecationBanner.tsx index 9df34636f82..75541e4087c 100644 --- a/ui/litellm-dashboard/src/components/DeprecationBanner.tsx +++ b/ui/litellm-dashboard/src/components/DeprecationBanner.tsx @@ -1,52 +1,26 @@ "use client"; -import React, { useState } from "react"; +import React from "react"; import Link from "next/link"; -import { Info, X } from "lucide-react"; +import { Info } from "lucide-react"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; const DEPRECATION_DISCUSSION_URL = "https://github.com/BerriAI/litellm/discussions/32090"; -const DEPRECATION_TARGET_DATE = "September 1, 2026"; interface DeprecationBannerProps { featureName: string; } -export const DeprecationBanner: React.FC = ({ featureName }) => { - const [isClosed, setIsClosed] = useState(false); - - if (isClosed) { - return null; - } - - return ( -

- -
-

{`${featureName} is on a draft deprecation list`}

-

- {`${featureName} is one of several experimental features we're considering removing, potentially as early as ${DEPRECATION_TARGET_DATE}. This list is a draft and is not final. If you rely on this feature, please share feedback on the `} - - deprecation discussion - - . -

-
- -
- ); -}; +export const DeprecationBanner: React.FC = ({ featureName }) => ( + + + {`${featureName} is deprecated`} + + {`${featureName} will be removed in the near future. See the `} + + deprecation discussion + + {" for details."} + + +);