From b9bfe74628bff1e0ba8a3e8816b27db8472e45e8 Mon Sep 17 00:00:00 2001 From: mateo Date: Thu, 17 Sep 2026 20:04:10 +0000 Subject: [PATCH] chore(ui): remove never-rendered GuardrailConfig mock component and its test Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../_components/GuardrailConfig.test.tsx | 88 ------ .../_components/GuardrailConfig.tsx | 261 ------------------ 2 files changed, 349 deletions(-) delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx deleted file mode 100644 index 60bf235040f..00000000000 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.test.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { render, screen, act } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import { vi } from "vitest"; -import { GuardrailConfig } from "./GuardrailConfig"; - -describe("GuardrailConfig", () => { - const defaultProps = { - guardrailName: "Content Safety", - guardrailType: "Content Safety", - provider: "bedrock", - }; - - afterEach(() => { - vi.useRealTimers(); - }); - - it("should render", () => { - render(); - expect(screen.getByText("Parameters")).toBeInTheDocument(); - }); - - it("should display the guardrail name in the parameters description", () => { - render(); - expect(screen.getByText(/Configure Content Safety behavior/)).toBeInTheDocument(); - }); - - // Note: Version history entries are hardcoded placeholders in the component. - // These assertions will need updating when wired to real API data. - it("should show version history when 'View history' is clicked", async () => { - const user = userEvent.setup(); - render(); - await user.click(screen.getByRole("button", { name: /view history/i })); - expect(screen.getByText("Initial configuration")).toBeInTheDocument(); - expect(screen.getByText("Added custom categories list")).toBeInTheDocument(); - }); - - it("should toggle version history text between View/Hide", async () => { - const user = userEvent.setup(); - render(); - const button = screen.getByRole("button", { name: /view history/i }); - await user.click(button); - expect(screen.getByRole("button", { name: /hide history/i })).toBeInTheDocument(); - }); - - it("should show custom code textarea when custom code override is toggled on", async () => { - const user = userEvent.setup(); - render(); - await user.click(screen.getByRole("switch", { name: "Custom Code Override" })); - expect(screen.getByPlaceholderText(/async def evaluate/)).toBeInTheDocument(); - }); - - it("should hide custom code textarea when custom code override is off", () => { - render(); - // There's an input for categories, but no textarea - expect(screen.queryByPlaceholderText(/async def evaluate/)).not.toBeInTheDocument(); - }); - - it("should show the re-run button in idle state", () => { - render(); - expect(screen.getByRole("button", { name: /re-run on failing logs/i })).toBeInTheDocument(); - }); - - it("should show loading state when re-run is clicked", async () => { - vi.useFakeTimers({ shouldAdvanceTime: true }); - const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); - render(); - await user.click(screen.getByRole("button", { name: /re-run on failing logs/i })); - expect(screen.getByText(/Running on 10 samples/)).toBeInTheDocument(); - }); - - it("should show success message after re-run completes", async () => { - vi.useFakeTimers({ shouldAdvanceTime: true }); - const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime }); - render(); - await user.click(screen.getByRole("button", { name: /re-run on failing logs/i })); - await act(async () => { - vi.advanceTimersByTime(2500); - }); - expect(screen.getByText(/7\/10 would now pass/)).toBeInTheDocument(); - }); - - it("should display the Revert and Save buttons", () => { - render(); - expect(screen.getByRole("button", { name: /revert/i })).toBeInTheDocument(); - // The component's hardcoded default version is "v3", so Save shows "v4" - expect(screen.getByRole("button", { name: /save as v\d+/i })).toBeInTheDocument(); - }); -}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx deleted file mode 100644 index 34da9b8d08d..00000000000 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx +++ /dev/null @@ -1,261 +0,0 @@ -import { CircleCheck, CirclePlay, Code, Save, Undo2 } from "lucide-react"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import { Switch } from "@/components/ui/switch"; -import { Textarea } from "@/components/ui/textarea"; -import React, { useId, useState } from "react"; - -interface GuardrailConfigProps { - guardrailName: string; - guardrailType: string; - provider: string; -} - -const versions = [ - { - id: "v3", - label: "v3 (current)", - date: "2026-02-18", - author: "admin@company.com", - changes: "Adjusted sensitivity for medical terms", - }, - { id: "v2", label: "v2", date: "2026-02-10", author: "admin@company.com", changes: "Added custom categories list" }, - { id: "v1", label: "v1", date: "2026-01-28", author: "admin@company.com", changes: "Initial configuration" }, -]; - -const ACTION_ITEMS = [ - { value: "block", label: "Block Request" }, - { value: "flag", label: "Flag for Review" }, - { value: "log", label: "Log Only" }, - { value: "fallback", label: "Use Fallback Response" }, -]; - -const PROVIDER_ITEMS = [ - { value: "bedrock", label: "AWS Bedrock Guardrails" }, - { value: "google", label: "Google Cloud AI Safety" }, - { value: "litellm", label: "LiteLLM Built-in" }, - { value: "custom", label: "Custom Code" }, -]; - -const GUARDRAIL_TYPE_ITEMS = [ - { value: "Content Safety", label: "Content Safety" }, - { value: "PII", label: "PII Detection" }, - { value: "Topic", label: "Topic Restriction" }, - { value: "prompt_injection", label: "Prompt Injection" }, - { value: "custom", label: "Custom" }, -]; - -export function GuardrailConfig({ guardrailName, guardrailType, provider }: GuardrailConfigProps) { - const [action, setAction] = useState("block"); - const [enabled, setEnabled] = useState(true); - const [customCode, setCustomCode] = useState(""); - const [useCustomCode, setUseCustomCode] = useState(false); - const [rerunStatus, setRerunStatus] = useState<"idle" | "running" | "success" | "error">("idle"); - const [version, setVersion] = useState("v3"); - const [showVersionHistory, setShowVersionHistory] = useState(false); - const enabledToggleId = useId(); - - const handleRerun = () => { - setRerunStatus("running"); - setTimeout(() => { - setRerunStatus("success"); - setTimeout(() => setRerunStatus("idle"), 3000); - }, 2000); - }; - - return ( -
- {/* Version Bar */} -
-
-
- Version: - - -
-
- - -
-
- - {showVersionHistory && ( -
- {versions.map((v) => ( -
-
- - {v.id} - - {v.changes} -
-
- {v.author} - {v.date} -
-
- ))} -
- )} -
- - {/* Parameters */} -
-

Parameters

-

Configure {guardrailName} behavior

- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
-
- - {/* Custom Code Override */} -
-
-
-

- - Custom Code Override -

-

- Replace the built-in guardrail with custom evaluation code -

-
- -
- - {useCustomCode && ( -