scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-13 23:11:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 101

fix(ui): make the env-credential login warning banner dismissible

Browse source 
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
ryan 2026-09-12 02:20:32 +00:00
parent b5bf09d22d
commit 2db51046d4
2 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.test.tsx
View file

@ -1,4 +1,4 @@
import { renderWithProviders, screen } from "../../tests/test-utils";
import { fireEvent, renderWithProviders, screen } from "../../tests/test-utils";
import { vi } from "vitest";
import { EnvCredentialLoginWarningBanner } from "./EnvCredentialLoginWarningBanner";
import type { HealthReadinessDetailsResponse } from "@/app/(dashboard)/hooks/healthReadiness/useHealthReadinessDetails";
@ -23,6 +23,22 @@ const mockRole = (userRole: string) => {
};
describe("EnvCredentialLoginWarningBanner", () => {
beforeEach(() => {
localStorage.clear();
});
it("should hide the banner when dismissed and stay hidden on remount", () => {
mockRole("Admin");
mockDetails({ status: "healthy", show_env_credential_login_warning: true });
const first = renderWithProviders(<EnvCredentialLoginWarningBanner accessToken="token" />);
fireEvent.click(screen.getByRole("button", { name: "Dismiss banner" }));
expect(first.container).toBeEmptyDOMElement();
first.unmount();
const second = renderWithProviders(<EnvCredentialLoginWarningBanner accessToken="token" />);
expect(second.container).toBeEmptyDOMElement();
});
it("should warn an admin when env-credential login is enabled", () => {
mockRole("Admin");
mockDetails({ status: "healthy", show_env_credential_login_warning: true });

22
ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.tsx
View file

@ -1,26 +1,37 @@
"use client";
import React from "react";
import { TriangleAlert } from "lucide-react";
import React, { useState } from "react";
import { TriangleAlert, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useHealthReadinessDetails } from "@/app/(dashboard)/hooks/healthReadiness/useHealthReadinessDetails";
import { useAuth } from "@/contexts/AuthContext";
import { isAdminRole } from "@/utils/roles";
const DISMISS_STORAGE_KEY = "litellm:envCredentialLoginWarningDismissed";
export const EnvCredentialLoginWarningBanner: React.FC<{ accessToken: string | null }> = ({ accessToken }) => {
const { userRole } = useAuth();
const { data: healthData } = useHealthReadinessDetails(accessToken);
const [dismissed, setDismissed] = useState(
() => typeof window !== "undefined" && localStorage.getItem(DISMISS_STORAGE_KEY) === "true",
);
if (!isAdminRole(userRole) || !healthData?.show_env_credential_login_warning) {
if (dismissed || !isAdminRole(userRole) || !healthData?.show_env_credential_login_warning) {
return null;
}
const handleDismiss = () => {
localStorage.setItem(DISMISS_STORAGE_KEY, "true");
setDismissed(true);
};
return (
<div
role="alert"
className="flex items-start gap-3 border-b border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive"
>
<TriangleAlert className="mt-0.5 size-5 shrink-0" aria-hidden="true" />
<div>
<div className="min-w-0 flex-1">
<p className="font-semibold">Environment-credential login is enabled</p>
<p>
Anyone with <code className="font-mono">UI_USERNAME</code>/<code className="font-mono">UI_PASSWORD</code> (or
@ -30,6 +41,9 @@ export const EnvCredentialLoginWarningBanner: React.FC<{ accessToken: string | n
off.
</p>
</div>
<Button variant="ghost" size="icon-sm" className="shrink-0" aria-label="Dismiss banner" onClick={handleDismiss}>
<X />
</Button>
</div>
);
};