diff --git a/ui/litellm-dashboard/eslint.config.mjs b/ui/litellm-dashboard/eslint.config.mjs index 6d7ca2ad071..23cc5096bb1 100644 --- a/ui/litellm-dashboard/eslint.config.mjs +++ b/ui/litellm-dashboard/eslint.config.mjs @@ -82,9 +82,22 @@ const eslintConfig = [ "no-restricted-syntax": "off", }, }, + { + files: ["src/**/*.{ts,tsx}", "tests/**/*.{ts,tsx}"], + rules: { "local/no-ad-hoc-z-index": "error" }, + }, + { + files: [ + "src/components/ui/**/*.{ts,tsx}", + "src/components/shared/DataTable/**/*.{ts,tsx}", + "src/**/*.test.{ts,tsx}", + "tests/**/*.{ts,tsx}", + ], + rules: { "local/no-ad-hoc-z-index": ["error", { allowPopupLayer: true }] }, + }, { files: ["tests/eslint-rules/**/*.{ts,tsx}"], - rules: { "local/no-noop-hover-variant": "off" }, + rules: { "local/no-noop-hover-variant": "off", "local/no-ad-hoc-z-index": "off" }, }, { files: ["src/**/*.test.{ts,tsx}", "tests/**/*.{ts,tsx}"], diff --git a/ui/litellm-dashboard/scripts/eslint-rules/index.mjs b/ui/litellm-dashboard/scripts/eslint-rules/index.mjs index 983399ae4a3..750b8df4e27 100644 --- a/ui/litellm-dashboard/scripts/eslint-rules/index.mjs +++ b/ui/litellm-dashboard/scripts/eslint-rules/index.mjs @@ -3,6 +3,7 @@ import noLongConditionChain from "./no-long-condition-chain.mjs"; import noComplexJsxArrow from "./no-complex-jsx-arrow.mjs"; import filenamePascalCase from "./filename-pascal-case.mjs"; import noNoopHoverVariant from "./no-noop-hover-variant.mjs"; +import noAdHocZIndex from "./no-ad-hoc-z-index.mjs"; const plugin = { rules: { @@ -11,6 +12,7 @@ const plugin = { "no-complex-jsx-arrow": noComplexJsxArrow, "filename-pascal-case": filenamePascalCase, "no-noop-hover-variant": noNoopHoverVariant, + "no-ad-hoc-z-index": noAdHocZIndex, }, }; diff --git a/ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs b/ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs new file mode 100644 index 00000000000..fbe0fdcf7e5 --- /dev/null +++ b/ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs @@ -0,0 +1,71 @@ +const AD_HOC_Z = /^(?:[\w-]+:)*-?z-(?:\d+|\[[^\]]*\]|\([^)]*\))$/; +const POPUP_Z = /^(?:[\w-]+:)*z-popup$/; + +const classify = (token, allowPopupLayer) => { + if (AD_HOC_Z.test(token)) return "adHoc"; + if (!allowPopupLayer && POPUP_Z.test(token)) return "popupReserved"; + return null; +}; + +const offendingTokens = (value, allowPopupLayer) => + value + .split(/\s+/) + .filter(Boolean) + .map((token) => ({ token, messageId: classify(token, allowPopupLayer) })) + .filter(({ messageId }) => messageId !== null); + +const propertyName = (key) => { + if (key.type === "Identifier") return key.name; + if (key.type === "Literal" && typeof key.value === "string") return key.value; + return null; +}; + +const rule = { + meta: { + type: "problem", + docs: { + description: + "Disallow hand-picked z-index values (numeric or arbitrary z-* classes, inline zIndex styles). Use the named scale defined in src/app/globals.css so nothing can stack above the portalled popup layer.", + }, + schema: [ + { + type: "object", + properties: { allowPopupLayer: { type: "boolean" } }, + additionalProperties: false, + }, + ], + messages: { + adHoc: + "`{{token}}` is a hand-picked z-index. Use the scale from globals.css: z-raised, z-chrome, z-sticky, z-sticky-pinned, z-floating, z-overlay (z-popup is reserved for portalled primitives).", + popupReserved: + "`{{token}}` is reserved for the portalled primitives in src/components/ui. Page content must stay below the popup layer; use z-overlay or lower.", + inlineZIndex: + "Inline `zIndex` styles bypass the z-index scale. Use a class from globals.css (z-raised, z-chrome, z-sticky, z-sticky-pinned, z-floating, z-overlay) instead.", + }, + }, + create(context) { + const allowPopupLayer = context.options[0]?.allowPopupLayer ?? false; + const check = (node, value) => { + if (typeof value !== "string" || !value.includes("z-")) return; + for (const { token, messageId } of offendingTokens(value, allowPopupLayer)) { + context.report({ node, messageId, data: { token } }); + } + }; + return { + Literal(node) { + check(node, node.value); + }, + TemplateElement(node) { + check(node, node.value.cooked); + }, + Property(node) { + const name = propertyName(node.key); + if (name === "zIndex" || name === "z-index") { + context.report({ node, messageId: "inlineZIndex" }); + } + }, + }; + }, +}; + +export default rule; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx index fae21f8dfc4..dc1223264bb 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx @@ -758,7 +758,7 @@ type ConfirmDialogProps = { function ConfirmDialog({ action, guardrailName, onConfirm, onCancel }: ConfirmDialogProps) { const isApprove = action === "approve"; return ( -
+
= ({ }) => { return ( !open && onCancel()}> - + Add custom regex pattern diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx index b87df6d8996..2d8819ad876 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.test.tsx @@ -88,4 +88,13 @@ describe("KeywordModal", () => { expect(screen.queryByText("Add blocked keyword")).not.toBeInTheDocument(); }); + + it("should not raise the dialog above the portalled popup layer its Action select renders into", async () => { + renderModal(); + await screen.findByText("Add blocked keyword"); + + const content = document.querySelector('[data-slot="dialog-content"]'); + expect(content).not.toBeNull(); + expect(Array.from(content!.classList).filter((cls) => cls.startsWith("z-"))).toEqual(["z-popup"]); + }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.tsx index 177c0d2fac6..504f35973fd 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/KeywordModal.tsx @@ -5,7 +5,6 @@ import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { ACTION_ITEMS } from "./action_options"; -import { NESTED_DIALOG_LAYER } from "./dialog_layering"; interface KeywordModalProps { visible: boolean; @@ -32,7 +31,7 @@ const KeywordModal: React.FC = ({ }) => { return ( !open && onCancel()}> - + Add blocked keyword diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.test.tsx index 5302ac3b7f7..46af4263eab 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.test.tsx @@ -142,4 +142,13 @@ describe("PatternModal", () => { expect(screen.queryByText("Add prebuilt pattern")).not.toBeInTheDocument(); }); + + it("should not raise the dialog above the portalled popup layer its pattern combobox renders into", async () => { + renderModal(); + await screen.findByText("Add prebuilt pattern"); + + const content = document.querySelector('[data-slot="dialog-content"]'); + expect(content).not.toBeNull(); + expect(Array.from(content!.classList).filter((cls) => cls.startsWith("z-"))).toEqual(["z-popup"]); + }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.tsx index e703711a03a..4caa47217fe 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/PatternModal.tsx @@ -14,7 +14,6 @@ import { import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { ACTION_ITEMS } from "./action_options"; -import { NESTED_DIALOG_LAYER } from "./dialog_layering"; interface PrebuiltPattern { name: string; @@ -66,7 +65,7 @@ const PatternModal: React.FC = ({ return ( !open && onCancel()}> - + Add prebuilt pattern diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/dialog_layering.ts b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/dialog_layering.ts deleted file mode 100644 index 0e29ffb6250..00000000000 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/dialog_layering.ts +++ /dev/null @@ -1 +0,0 @@ -export const NESTED_DIALOG_LAYER = "z-[1100]"; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx index 226b7b6064d..aaa656d15bb 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.tsx @@ -522,7 +522,7 @@ const GuardrailInfoView: React.FC = ({ guardrailId, onClose, variant="ghost" size="icon-xs" onClick={() => copyToClipboard(guardrailData.guardrail_id, "guardrail-id")} - className={`left-2 z-10 transition-all duration-200 ${ + className={`left-2 z-raised transition-all duration-200 ${ copiedStates["guardrail-id"] ? "text-success bg-success/10 border-success/20" : "text-muted-foreground hover:text-foreground hover:bg-muted" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx index fe097387dd2..7062a6f0a5f 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx @@ -79,7 +79,7 @@ function ConfirmDialog({ action, serverName, isCurrentlyActive, onConfirm, onCan ? "This server is currently live. Rejecting it will immediately remove it from the proxy runtime." : "This will mark the submission as rejected."; return ( -
+
= ({ currentServerAccessGroups = [] variant="ghost" size="icon-xs" onClick={() => copyToClipboard(code, copyKey)} - className={`absolute top-2 right-2 z-10 transition-all duration-200 ${ + className={`absolute top-2 right-2 z-raised transition-all duration-200 ${ copiedStates[copyKey] ? "text-success bg-success/10 border-success/20" : "text-muted-foreground hover:text-foreground hover:bg-accent" diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx index 37a4ddcb0a0..1299ec7a325 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx @@ -100,7 +100,7 @@ export function ComparisonPanel({ {/* Close button in top right */} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx index 005ec035ca3..54ea3702cb4 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx @@ -757,7 +757,7 @@ export default function ComplianceUI({ {showGuardrailDropdown && ( -
+
{guardrailOptions.length === 0 ? (
No guardrails available. Create guardrails in the Guardrails page. diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx index 5940dc4049e..72dc744c5f4 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.test.tsx @@ -198,6 +198,12 @@ describe("AddPolicyForm", () => { renderWithProviders(); await user.click(await screen.findByText("Flow Builder")); + + expect( + screen.getByText("You'll be taken to the Flow Builder to design your policy logic visually."), + ).toBeInTheDocument(); + expect(screen.queryByText(/full-screen/i)).not.toBeInTheDocument(); + await user.click(screen.getByRole("button", { name: "Continue to Builder" })); expect(onOpenFlowBuilder).toHaveBeenCalledTimes(1); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx index 097a6389721..2830b0fda12 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/add_policy_form.tsx @@ -342,9 +342,7 @@ const AddPolicyForm: React.FC = ({ {selectedMode === "flow_builder" && ( - - You'll be redirected to the full-screen Flow Builder to design your policy logic visually. - + You'll be taken to the Flow Builder to design your policy logic visually. )} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.test.tsx index 1d4c58a05ee..b6e18bc1413 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.test.tsx @@ -2,7 +2,7 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { renderWithProviders } from "@/../tests/test-utils"; -import { beforeEach, describe, expect, it, vi } from "vitest"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import PoliciesPanel from "./index"; /** @@ -52,7 +52,11 @@ vi.mock("./policy_templates", () => ({ })); vi.mock("./pipeline_flow_builder", () => ({ - FlowBuilderPage: () => null, + FlowBuilderPage: ({ onBack }: { onBack: () => void }) => ( + + ), })); vi.mock("./policy_info", () => ({ @@ -159,3 +163,48 @@ describe("PoliciesPanel attachment delete", () => { }); }); }); + +describe("PoliciesPanel flow builder", () => { + const POLICY_ID = "pol-11111111-2222-3333-4444-555555555555"; + + beforeEach(() => { + vi.clearAllMocks(); + networkingMocks.getPoliciesList.mockResolvedValue({ + policies: [ + { + policy_id: POLICY_ID, + policy_name: "pii-policy", + inherit: null, + description: null, + guardrails_add: [], + guardrails_remove: [], + condition: null, + definition_location: "db", + }, + ], + }); + }); + + afterEach(() => { + networkingMocks.getPoliciesList.mockResolvedValue({ policies: [] }); + }); + + it("replaces the tabs and policy table with the flow builder while editing, then restores them on back", async () => { + const user = userEvent.setup(); + renderWithProviders(); + + await user.click(screen.getByRole("tab", { name: /^policies$/i })); + await user.click(await screen.findByTestId(`policy-actions-${POLICY_ID}`)); + await user.click(await screen.findByTestId("policy-action-edit")); + + expect(await screen.findByRole("button", { name: "Back to policies" })).toBeInTheDocument(); + expect(screen.queryByRole("tab", { name: /^policies$/i })).not.toBeInTheDocument(); + expect(screen.queryByText("pii-policy")).not.toBeInTheDocument(); + + await user.click(screen.getByRole("button", { name: "Back to policies" })); + + expect(await screen.findByText("pii-policy")).toBeInTheDocument(); + expect(screen.getByRole("tab", { name: /^policies$/i })).toHaveAttribute("aria-selected", "true"); + expect(screen.queryByRole("button", { name: "Back to policies" })).not.toBeInTheDocument(); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx index 08ee2213413..16469728f39 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/index.tsx @@ -406,6 +406,37 @@ const PoliciesPanel: React.FC = ({ accessToken, userRole }) setTemplateQueueProgress(null); }; + if (showFlowBuilder) { + return ( + { + setShowFlowBuilder(false); + setEditingPolicy(null); + }} + onSuccess={() => { + fetchPolicies(); + setEditingPolicy(null); + }} + accessToken={accessToken} + editingPolicy={editingPolicy} + availableGuardrails={guardrailsList} + createPolicy={createPolicyCall} + updatePolicy={updatePolicyCall} + onVersionCreated={(newPolicy) => { + setEditingPolicy(newPolicy); + fetchPolicies(); + }} + onSelectVersion={(policy) => { + setEditingPolicy(policy); + }} + onVersionStatusUpdated={(updatedPolicy) => { + setEditingPolicy(updatedPolicy); + fetchPolicies(); + }} + /> + ); + } + return (
@@ -628,35 +659,6 @@ const PoliciesPanel: React.FC = ({ accessToken, userRole }) accessToken={accessToken} allTemplates={loadedTemplates} /> - - {showFlowBuilder && ( - { - setShowFlowBuilder(false); - setEditingPolicy(null); - }} - onSuccess={() => { - fetchPolicies(); - setEditingPolicy(null); - }} - accessToken={accessToken} - editingPolicy={editingPolicy} - availableGuardrails={guardrailsList} - createPolicy={createPolicyCall} - updatePolicy={updatePolicyCall} - onVersionCreated={(newPolicy) => { - setEditingPolicy(newPolicy); - fetchPolicies(); - }} - onSelectVersion={(policy) => { - setEditingPolicy(policy); - }} - onVersionStatusUpdated={(updatedPolicy) => { - setEditingPolicy(updatedPolicy); - fetchPolicies(); - }} - /> - )}
); }; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx index 3af5b31c41f..4e7c3d23cf9 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.test.tsx @@ -169,8 +169,7 @@ describe("PipelineFlowBuilder", () => { }); describe("FlowBuilderPage", () => { - it("stacks its full-screen shell below the portalled popup layer", () => { - const portalLayerZIndex = 50; + it("renders its shell in flow with no stacking level, so it can never cover the portalled popup layer", () => { const { container } = renderWithProviders( { ); const shell = container.firstElementChild as HTMLElement; + const shellClasses = shell.className.split(/\s+/); - expect(shell).toHaveStyle({ position: "fixed" }); - expect(Number(shell.style.zIndex)).toBeLessThan(portalLayerZIndex); + expect(shell).toContainElement(screen.getByPlaceholderText("Policy name...")); + expect(shell).not.toHaveStyle({ position: "fixed" }); + expect(shellClasses).not.toContain("fixed"); + expect(window.getComputedStyle(shell).zIndex).not.toMatch(/\d/); + expect(shellClasses.filter((cls) => /^-?z-/.test(cls))).toEqual([]); }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx index c649bb4844b..8651be39f0d 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/pipeline_flow_builder.tsx @@ -227,7 +227,7 @@ const Connector: React.FC = ({ onInsert }) => (
{showTooltip && (
{content}
@@ -178,7 +178,7 @@ export const DocsMenu: React.FC = ({ items, children = "Docs", cl {isOpen && ( -
+
{items.map((item, index) => ( = ({ accessToken, /> {isDeleteModalOpen && ( -
+
{/* Visual Connection */} -
+
IF FAILS, TRY... diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx index eed449d6676..975fbd6d623 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx @@ -221,7 +221,7 @@ const TopKeyView: React.FC = ({ topKeys, teams, showTags = fals customTooltip={(props) => { const item = props.payload?.[0]?.payload; return ( -
+
Key Alias: @@ -246,7 +246,7 @@ const TopKeyView: React.FC = ({ topKeys, teams, showTags = fals )} {isModalOpen && selectedKey && keyData && ( -
+
{/* Close button */}
-
+