From 629d7683f2be588ab69af2e6832e310b3c38b33e Mon Sep 17 00:00:00 2001 From: ryan-crabbe-berri Date: Wed, 19 Aug 2026 17:04:14 -0700 Subject: [PATCH] refactor(ui): swap @ant-design/icons for lucide-react (#37553) The dashboard drew its icons from two libraries at once: lucide-react, which shadcn/ui ships with, and @ant-design/icons, left over from antd. This moves the last 39 files onto lucide and drops the dependency, so the icon set matches the component library everywhere. antd icons sized themselves from the inherited font-size and rendered as role="img" with an aria-label, neither of which a lucide svg does, so the swap carries explicit size classes and gives the two icon-only plugin buttons real accessible names. --- ui/litellm-dashboard/eslint.config.mjs | 4 ++ ui/litellm-dashboard/package-lock.json | 1 - ui/litellm-dashboard/package.json | 1 - .../agents/_components/add_agent_form.tsx | 16 ++--- .../_components/GuardrailConfig.tsx | 18 ++---- .../guardrail_garden_card.test.tsx | 4 -- .../_components/guardrail_info.test.tsx | 2 +- .../guardrails/_components/guardrail_info.tsx | 7 +-- .../_components/AwsSigV4Fields.tsx | 4 +- .../_components/CreateMCPServer.tsx | 10 +-- .../_components/DcrBridgeToggle.tsx | 4 +- .../_components/EnvVarsSection.tsx | 12 ++-- .../_components/IdJagFormFields.tsx | 4 +- .../_components/MCPPermissionManagement.tsx | 23 ++++--- .../_components/OAuthFormFields.tsx | 4 +- .../_components/OpenAPIFormSection.tsx | 4 +- .../_components/OpenApiByokFields.tsx | 12 ++-- .../_components/StdioConfiguration.tsx | 4 +- .../TokenEndpointAuthMethodField.tsx | 4 +- .../_components/TokenExchangeFormFields.tsx | 4 +- .../_components/mcp_server_edit.tsx | 23 ++++--- .../LoggingSettings/LoggingSettings.tsx | 5 +- .../PluginSettings.integration.test.tsx | 6 +- .../PluginSettings/PluginSettings.tsx | 20 +++--- .../VirtualKeysPage/keyTableColumns.tsx | 4 +- .../add_model/ClassificationMethodConfig.tsx | 8 +-- .../add_model/ComplexityRouterConfig.tsx | 8 +-- .../add_model/EscalationKeywords.tsx | 4 +- .../components/add_model/KeywordTierRules.tsx | 8 +-- .../add_model/SemanticKeywordMatching.tsx | 4 +- .../add_model/advanced_settings.tsx | 7 +-- .../add_model/provider_specific_fields.tsx | 4 +- .../claude_code_plugins/skill_detail.tsx | 10 +-- .../common_components/AccessGroupSelector.tsx | 6 +- .../check_openapi_schema.tsx | 4 +- .../common_components/user_search_modal.tsx | 5 +- .../mcp_tools/ByokCredentialModal.tsx | 28 +++------ .../src/components/model_info_view.tsx | 5 +- .../organisms/RegenerateKeyModal.tsx | 7 +-- .../organisms/create_key_button.tsx | 61 +++++++++---------- .../src/components/routing_groups/index.tsx | 8 +-- .../shared/advanced_date_picker.test.tsx | 6 +- .../shared/advanced_date_picker.tsx | 6 +- .../src/components/team/LoggingSettings.tsx | 7 +-- .../src/components/team/TeamInfo.tsx | 17 +++--- 45 files changed, 195 insertions(+), 218 deletions(-) diff --git a/ui/litellm-dashboard/eslint.config.mjs b/ui/litellm-dashboard/eslint.config.mjs index 35603123736..3cbb93f9a48 100644 --- a/ui/litellm-dashboard/eslint.config.mjs +++ b/ui/litellm-dashboard/eslint.config.mjs @@ -62,6 +62,10 @@ const eslintConfig = [ message: "antd is being phased out; build new UI with shadcn/ui primitives instead of adding antd imports.", }, + { + group: ["@ant-design/icons", "@ant-design/icons/*"], + message: "@ant-design/icons is gone from the dashboard; use lucide-react instead.", + }, ], }, ], diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json index 7069450a75c..154a19da7f3 100644 --- a/ui/litellm-dashboard/package-lock.json +++ b/ui/litellm-dashboard/package-lock.json @@ -9,7 +9,6 @@ "version": "0.1.0", "dependencies": { "@ant-design/cssinjs": "1.24.0", - "@ant-design/icons": "5.6.1", "@anthropic-ai/sdk": "0.92.0", "@base-ui/react": "^1.6.0", "@headlessui/tailwindcss": "0.2.2", diff --git a/ui/litellm-dashboard/package.json b/ui/litellm-dashboard/package.json index 962cabcba7b..3f9c29d2afe 100644 --- a/ui/litellm-dashboard/package.json +++ b/ui/litellm-dashboard/package.json @@ -25,7 +25,6 @@ }, "dependencies": { "@ant-design/cssinjs": "1.24.0", - "@ant-design/icons": "5.6.1", "@anthropic-ai/sdk": "0.92.0", "@base-ui/react": "^1.6.0", "@headlessui/tailwindcss": "0.2.2", diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx index 22471ee66f9..09737c3151b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/_components/add_agent_form.tsx @@ -3,7 +3,7 @@ import { Select, Steps, Tag } from "antd"; import { FormProvider, useForm, useWatch } from "react-hook-form"; import { toast } from "@/lib/toast"; import { Logo } from "@/components/molecules/logo/Logo"; -import { CheckCircleFilled, KeyOutlined, RobotOutlined, AppstoreOutlined } from "@ant-design/icons"; +import { Bot, CircleCheck, Key, LayoutGrid } from "lucide-react"; import CreatedKeyDisplay from "@/components/shared/CreatedKeyDisplay"; import { Button } from "@/components/ui/button"; import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner"; @@ -707,7 +707,7 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok }`} onClick={() => handleAgentTypeChange(CUSTOM_AGENT_TYPE)} > - +
Custom / Other @@ -846,7 +846,8 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok
{/* Agent name chip */}
- } color="purple" className="px-3 py-1 text-sm"> + + {agentName}
@@ -884,7 +885,7 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok
- + Create a new key for this agent

A dedicated key scoped to this agent.

@@ -920,7 +921,7 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok
- + Assign an existing key

Re-assign a key you already have to this agent.

@@ -958,10 +959,11 @@ const AddAgentForm: React.FC = ({ visible, onClose, accessTok const renderReadyStep = () => (
- +

Agent Created!

- } color="purple" className="px-3 py-1 text-sm"> + + {createdAgentName}
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 index 619ccd8d974..271de78c272 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailConfig.tsx @@ -1,10 +1,4 @@ -import { - CheckCircleOutlined, - CodeOutlined, - PlayCircleOutlined, - RollbackOutlined, - SaveOutlined, -} from "@ant-design/icons"; +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"; @@ -100,11 +94,11 @@ export function GuardrailConfig({ guardrailName, guardrailType, provider }: Guar
@@ -214,7 +208,7 @@ export function GuardrailConfig({ guardrailName, guardrailType, provider }: Guar

- + Custom Code Override

Replace the built-in guardrail with custom evaluation code

@@ -247,13 +241,13 @@ export function GuardrailConfig({ guardrailName, guardrailType, provider }: Guar
{rerunStatus === "success" && ( - 7/10 would now pass with new config + 7/10 would now pass with new config )} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx index d81eaa5a4fc..25f63ca2902 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_garden_card.test.tsx @@ -4,10 +4,6 @@ import userEvent from "@testing-library/user-event"; import GuardrailCard from "./guardrail_garden_card"; import type { GuardrailCardInfo } from "./guardrail_garden_data"; -vi.mock("@ant-design/icons", () => ({ - CheckCircleFilled: ({ style, ...props }: any) => , -})); - const baseCard: GuardrailCardInfo = { id: "test-guard", name: "Test Guardrail", diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx index b6ee130d50a..4f1ac3e7d7a 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/guardrail_info.test.tsx @@ -153,7 +153,7 @@ describe("Guardrail Info", () => { expect(getByText("Guardrail Settings")).toBeInTheDocument(); }); - await userEvent.hover(within(container).getByRole("img", { name: "info-circle" })); + await userEvent.hover(within(container).getByRole("img", { name: "Config guardrail details" })); expect(await findByText("Guardrail is defined in the config file and cannot be edited.")).toBeInTheDocument(); }); 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 f89e8a3248c..8f3ec6185fd 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 @@ -5,9 +5,8 @@ import { updateGuardrailCall, } from "@/components/networking"; import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils"; -import { EyeInvisibleOutlined, InfoCircleOutlined, StopOutlined } from "@ant-design/icons"; -import { ArrowLeft, CheckIcon, Code, CopyIcon } from "lucide-react"; +import { ArrowLeft, Ban, CheckIcon, Code, CopyIcon, EyeOff, Info } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; @@ -607,7 +606,7 @@ const GuardrailInfoView: React.FC = ({ guardrailId, onClose, value === "MASK" ? "text-blue-600" : "text-red-600" }`} > - {value === "MASK" ? : } + {value === "MASK" ? : } {String(value)}

@@ -667,7 +666,7 @@ const GuardrailInfoView: React.FC = ({ guardrailId, onClose,

Guardrail Settings

{isConfigGuardrail && ( - + )} {!isEditing && diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx index 09016bda266..8137e551028 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/AwsSigV4Fields.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Input, Tooltip } from "antd"; -import { InfoCircleOutlined } from "@ant-design/icons"; +import { Info } from "lucide-react"; import { MountedFormField } from "@/components/common_components/MountedFormField"; import { antdRequired } from "@/components/common_components/antdFormRules"; @@ -12,7 +12,7 @@ const FieldLabel: React.FC<{ label: string; tooltip: string }> = ({ label, toolt {label} - + ); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx index 5233081fc39..f5acd116f33 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/CreateMCPServer.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { Tooltip, Select, Input as AntdInput, InputNumber, Collapse } from "antd"; import { FormProvider, useForm, useWatch } from "react-hook-form"; -import { InfoCircleOutlined } from "@ant-design/icons"; +import { Info } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner"; @@ -688,7 +688,7 @@ const CreateMCPServer: React.FC = ({ MCP Server Name - + } @@ -709,7 +709,7 @@ const CreateMCPServer: React.FC = ({ Alias - + } @@ -827,7 +827,7 @@ const CreateMCPServer: React.FC = ({ Max Concurrent Requests (optional) - + } @@ -910,7 +910,7 @@ const CreateMCPServer: React.FC = ({ Authentication Value - + } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx index 35b23f9873c..a18c4592838 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/DcrBridgeToggle.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Switch, Tooltip } from "antd"; -import { InfoCircleOutlined } from "@ant-design/icons"; +import { Info } from "lucide-react"; import { MountedFormField } from "@/components/common_components/MountedFormField"; import { isClientForwardedTokenMode } from "@/components/mcp_tools/types"; @@ -29,7 +29,7 @@ export default function DcrBridgeToggle({ Gateway-hosted sign-in (DCR bridge) - + } diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx index 23a55d2dc1a..01f68d2a531 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Input, Select, Tooltip, Typography } from "antd"; import { Button } from "@/components/ui/button"; -import { InfoCircleOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; +import { CircleMinus, Info, Plus } from "lucide-react"; import { useFieldArray, useFormContext, useWatch } from "react-hook-form"; import { @@ -55,7 +55,7 @@ const EnvVarsSection: React.FC = () => { } > - +
@@ -100,15 +100,15 @@ const EnvVarsSection: React.FC = () => { {(control) => = ({ {label}{" "} - + ) : ( diff --git a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx index f4c88f09f2c..2977a9e4941 100644 --- a/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx +++ b/ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx @@ -1,7 +1,6 @@ import { useRef, useState } from "react"; -import { Info } from "lucide-react"; +import { Info, UserPlus } from "lucide-react"; import { Alert, AlertTitle } from "@/components/shared/Alert"; -import { UserAddOutlined } from "@ant-design/icons"; import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer"; import { useForm } from "react-hook-form"; import { userFilterUICall } from "@/components/networking"; @@ -266,7 +265,7 @@ const UserSearchModal: React.FC = ({
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx index 0e86492731c..f21af04d5d5 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx @@ -5,15 +5,7 @@ import { Input, Switch } from "antd"; import { toast } from "@/lib/toast"; import { fetchClient } from "@/lib/http/api"; import { ApiError } from "@/lib/http/client"; -import { - KeyOutlined, - LockOutlined, - CheckOutlined, - ArrowRightOutlined, - ArrowLeftOutlined, - CloseOutlined, - LinkOutlined, -} from "@ant-design/icons"; +import { ArrowLeft, ArrowRight, Check, Key, Link2, Lock, X } from "lucide-react"; import { MCPServer } from "./types"; import { Dialog, DialogContent } from "@/components/ui/dialog"; @@ -84,7 +76,7 @@ export const ByokCredentialModal: React.FC = ({ server onClick={() => setStep(1)} className="flex items-center gap-1 text-gray-500 hover:text-gray-800 text-sm" > - Back + Back ) : (
@@ -94,7 +86,7 @@ export const ByokCredentialModal: React.FC = ({ server
@@ -105,7 +97,7 @@ export const ByokCredentialModal: React.FC = ({ server
L
- +
{firstLetter}
@@ -148,7 +140,7 @@ export const ByokCredentialModal: React.FC = ({ server
    {server.byok_description.map((item, i) => (
  • - + {item}
    • ))} @@ -160,7 +152,7 @@ export const ByokCredentialModal: React.FC = ({ server onClick={() => setStep(2)} className="w-full bg-gray-900 hover:bg-gray-700 text-white font-medium py-3 px-6 rounded-xl flex items-center justify-center gap-2 transition-colors" > - Continue to Authentication + Continue to Authentication
)} diff --git a/ui/litellm-dashboard/src/components/model_info_view.tsx b/ui/litellm-dashboard/src/components/model_info_view.tsx index 58d7a7bca6e..407144d1a52 100644 --- a/ui/litellm-dashboard/src/components/model_info_view.tsx +++ b/ui/litellm-dashboard/src/components/model_info_view.tsx @@ -2,7 +2,6 @@ import { useModelCostMap } from "@/app/(dashboard)/hooks/models/useModelCostMap" import { useModelHub, useModelsInfo } from "@/app/(dashboard)/hooks/models/useModels"; import { useQueryClient } from "@tanstack/react-query"; import { transformModelData } from "@/app/(dashboard)/models-and-endpoints/utils/modelDataTransformer"; -import { InfoCircleOutlined } from "@ant-design/icons"; import { KeyIcon, RefreshIcon, TrashIcon } from "@heroicons/react/outline"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; @@ -10,7 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { SimpleTooltip } from "@/components/ui/tooltip"; import { applyPtuModelInfo } from "../utils/ptuModelInfo"; import { usePtuCostAttributionEnabled } from "@/app/(dashboard)/hooks/uiSettings/usePtuCostAttributionEnabled"; -import { ArrowLeft, CheckIcon, CopyIcon } from "lucide-react"; +import { ArrowLeft, CheckIcon, CopyIcon, Info } from "lucide-react"; import { useEffect, useMemo, useState } from "react"; import { copyToClipboard as utilCopyToClipboard } from "../utils/dataUtils"; import { stripMaskedSecrets } from "../utils/maskedSecretUtils"; @@ -757,7 +756,7 @@ export default function ModelInfoView({ ) ) : ( - + )}
diff --git a/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx b/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx index 5158d8612ab..81d3dcc61a2 100644 --- a/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx +++ b/ui/litellm-dashboard/src/components/organisms/RegenerateKeyModal.tsx @@ -1,9 +1,8 @@ import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; -import { CheckOutlined, CopyOutlined, SyncOutlined } from "@ant-design/icons"; import { Alert, AlertTitle } from "@/components/shared/Alert"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"; -import { CircleHelp, TriangleAlert } from "lucide-react"; +import { Check, CircleHelp, Copy, RefreshCw, TriangleAlert } from "lucide-react"; import React, { useEffect, useMemo, useState } from "react"; import { useWatch } from "react-hook-form"; import { CopyToClipboard } from "react-copy-to-clipboard"; @@ -264,7 +263,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat @@ -275,7 +274,7 @@ export function RegenerateKeyModal({ selectedToken, visible, onClose, onKeyUpdat Cancel diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx index eab5abb9936..168b7f6cf25 100644 --- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx +++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx @@ -7,14 +7,13 @@ import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings" import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import useCan from "@/app/(dashboard)/hooks/useCan"; import { formatNumberWithCommas } from "@/utils/dataUtils"; -import { InfoCircleOutlined } from "@ant-design/icons"; import { useQueryClient } from "@tanstack/react-query"; import { Button } from "@/components/ui/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Input } from "@/components/ui/input"; import { Field, FieldLabel } from "@/components/shared/form/field"; import { Input as AntdInput, Radio, Select, Switch, Tag, Tooltip, Typography } from "antd"; -import { ChevronDown } from "lucide-react"; +import { ChevronDown, Info } from "lucide-react"; import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer"; import { DEBOUNCE_WAIT_MS } from "@/utils/debounceConstants"; import React, { useEffect, useMemo, useRef, useState } from "react"; @@ -647,7 +646,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Owned By{" "} - + @@ -667,7 +666,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp User ID{" "} - + } @@ -740,7 +739,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Organization{" "} - + } @@ -763,7 +762,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Team{" "} - + } @@ -790,7 +789,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Project{" "} - + } @@ -836,7 +835,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp : "Unique identifier for this service account" } > - + } @@ -856,7 +855,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Models{" "} - + } @@ -909,7 +908,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Key Type{" "} - + } @@ -972,7 +971,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Max Budget (USD){" "} - + } @@ -999,7 +998,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Reset Budget{" "} - + } @@ -1021,7 +1020,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Budget Windows{" "} - + @@ -1032,7 +1031,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Budget Fallbacks{" "} - + @@ -1049,7 +1048,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Tokens per minute Limit (TPM){" "} - + } @@ -1090,7 +1089,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Requests per minute Limit (RPM){" "} - + } @@ -1130,7 +1129,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Per-Tag Rate Limits{" "} - + @@ -1142,7 +1141,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Throttle on budget exceeded{" "} - + } @@ -1164,7 +1163,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Enable Prompt Caching{" "} - + } @@ -1191,7 +1190,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1231,7 +1230,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1267,7 +1266,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1309,7 +1308,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1344,7 +1343,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Access Groups{" "} - + } @@ -1371,7 +1370,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} // Prevent accordion from collapsing when clicking link > - + @@ -1404,7 +1403,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Allowed Vector Stores{" "} - + } @@ -1426,7 +1425,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Metadata{" "} - + } @@ -1447,7 +1446,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Tags{" "} - + } @@ -1478,7 +1477,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Allowed MCP Servers{" "} - + } @@ -1521,7 +1520,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp Allowed Agents{" "} - + } @@ -1688,7 +1687,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp } > - +
diff --git a/ui/litellm-dashboard/src/components/routing_groups/index.tsx b/ui/litellm-dashboard/src/components/routing_groups/index.tsx index 560523972ca..9f94fbf6c98 100644 --- a/ui/litellm-dashboard/src/components/routing_groups/index.tsx +++ b/ui/litellm-dashboard/src/components/routing_groups/index.tsx @@ -3,7 +3,7 @@ import React, { useMemo, useState } from "react"; import { Card, Flex, Input, Space, Typography } from "antd"; import { Button } from "@/components/ui/button"; -import { PlusOutlined, ReloadOutlined, SearchOutlined } from "@ant-design/icons"; +import { Plus, RefreshCw, Search } from "lucide-react"; import { useRoutingGroups, useSaveRoutingGroups } from "@/app/(dashboard)/hooks/routingGroups/useRoutingGroups"; import { useRouterFields } from "@/app/(dashboard)/hooks/router/useRouterFields"; import { useModelHub } from "@/app/(dashboard)/hooks/models/useModels"; @@ -107,7 +107,7 @@ const RoutingGroups: React.FC = () => { } + prefix={} placeholder="Search groups..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} @@ -120,11 +120,11 @@ const RoutingGroups: React.FC = () => { disabled={isFetching && !isLoading} aria-busy={isFetching && !isLoading} > - + Refresh diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx index c907aeae035..bb4e0865f3f 100644 --- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.test.tsx @@ -49,10 +49,8 @@ describe("AdvancedDatePicker", () => { }); it("should display formatted date range", () => { - render(); - // The component displays date range in the format "D MMM, HH:mm - D MMM, HH:mm" - // Just check that the clock icon is present - expect(screen.getByLabelText("clock-circle")).toBeInTheDocument(); + const { container } = render(); + expect(getTrigger(container)).toHaveTextContent(/\d{1,2} \w{3}, \d{2}:\d{2} - \d{1,2} \w{3}, \d{2}:\d{2}/); }); it("should open dropdown when clicked", () => { diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx index b9a4d28539b..0013f702362 100644 --- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx +++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx @@ -1,4 +1,4 @@ -import { CalendarOutlined, ClockCircleOutlined } from "@ant-design/icons"; +import { Calendar, Clock } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/cva.config"; import type { DateRangePickerValue } from "./date_picker_types"; @@ -291,7 +291,7 @@ const AdvancedDatePicker: React.FC = ({ > - + {formatDisplayRange(value.from, value.to)} = ({
- + Start and end dates
diff --git a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx index e9ec3ce9439..b7f2dfaf398 100644 --- a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx +++ b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx @@ -3,14 +3,13 @@ import React from "react"; import { SimpleTooltip } from "@/components/ui/tooltip"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; -import { InfoCircleOutlined } from "@ant-design/icons"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"; import { CogIcon, BanIcon } from "@heroicons/react/outline"; -import { Eye, EyeOff, Plus, Trash2 } from "lucide-react"; +import { Eye, EyeOff, Info, Plus, Trash2 } from "lucide-react"; import { callbackInfo, callback_map, mapDisplayToInternalNames } from "../callback_info_helpers"; import { Logo } from "@/components/molecules/logo/Logo"; import NumericalInput from "../shared/numerical_input"; @@ -198,7 +197,7 @@ const LoggingSettings: React.FC = ({ Disabled Callbacks - +
@@ -244,7 +243,7 @@ const LoggingSettings: React.FC = ({ Logging Integrations - +
)} @@ -1809,7 +1808,7 @@ const TeamInfoView: React.FC = ({

Team Member Settings{" "} - +

Max Budget: {info.team_member_budget_table?.max_budget || "No Limit"}
@@ -1970,7 +1969,7 @@ const TeamInfoView: React.FC = ({ Team Member Budget (USD){" "} - + ), @@ -1985,7 +1984,7 @@ const TeamInfoView: React.FC = ({ Budget Reset Period{" "} - + ), @@ -1997,7 +1996,7 @@ const TeamInfoView: React.FC = ({ Team Member TPM Limit{" "} - + ), @@ -2012,7 +2011,7 @@ const TeamInfoView: React.FC = ({ Team Member RPM Limit{" "} - + ), @@ -2027,7 +2026,7 @@ const TeamInfoView: React.FC = ({ Allowed Models{" "} - + ),