diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFormField.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFormField.tsx index 2de078c8a33..1753dab4d22 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFormField.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/CacheFormField.tsx @@ -74,7 +74,7 @@ const CacheFormField: React.FC = ({ field, embeddingModels, name={name} disabled={disabled} value={typeof value === "string" && value !== "" ? value : null} - onValueChange={(selected: string | null) => onChange(selected ?? "")} + onValueChange={onChange} > = ({ field, embeddingModels, onChange(model?.value ?? "")} + onValueChange={(model: EmbeddingModelOption | null) => onChange(model?.value ?? null)} itemToStringLabel={(model: EmbeddingModelOption) => model.label} isItemEqualToValue={(model: EmbeddingModelOption, other: EmbeddingModelOption) => model.value === other.value diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsUtils.ts b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsUtils.ts index 7b9454a37c3..8da54e3ee78 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsUtils.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/cacheSettingsUtils.ts @@ -1,6 +1,6 @@ import { CACHE_FIELDS, CacheField, CacheSection, REDACTED_VALUE, RedisType } from "./cacheSettingsFields"; -export type CacheFormValue = string | number | boolean | undefined; +export type CacheFormValue = string | number | boolean | null | undefined; export type CacheFormValues = Record; export type CacheSavePayloadValue = string | number | boolean | unknown[]; export type CacheSavePayload = Record; @@ -38,6 +38,9 @@ const initialValueForField = (field: CacheField, raw: unknown): CacheFormValue = return typeof source === "string" ? source : JSON.stringify(source, null, 2); } + if ((field.type === "select" || field.type === "model-select") && !hasValue(source)) { + return null; + } if (source === undefined || source === null) { return ""; } @@ -77,7 +80,7 @@ const saveValueForField = (field: CacheField, raw: CacheFormValue): CacheSavePay } if (typeof raw !== "string") { - return raw === undefined ? undefined : String(raw); + return raw == null ? undefined : String(raw); } const trimmed = raw.trim(); return trimmed === "" ? undefined : trimmed; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx index 918d8947151..0d1da4dc8ce 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_settings/index.integration.test.tsx @@ -1,7 +1,8 @@ import { describe, it, expect, vi, beforeEach } from "vitest"; -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { fireEvent, renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils"; import userEvent from "@testing-library/user-event"; import CacheSettings from "./index"; +import { fetchAvailableModels } from "@/components/llm_calls/fetch_models"; const { getCacheSettingsCall, testCacheConnectionCall, updateCacheSettingsCall } = vi.hoisted(() => ({ getCacheSettingsCall: vi.fn(), @@ -29,7 +30,7 @@ const LOADED_WITH_ADVANCED = { }, }; -const renderSettings = () => render(); +const renderSettings = () => renderWithProviders(); const save = async (user: ReturnType) => user.click(screen.getByRole("button", { name: /save changes/i })); @@ -174,4 +175,42 @@ describe("CacheSettings advanced settings round-trip", () => { await waitFor(() => expect(updateCacheSettingsCall).toHaveBeenCalledTimes(1)); expect(updateCacheSettingsCall.mock.calls[0][1]).not.toHaveProperty("ttl"); }); + + it("should omit a cleared cache model from save and test while retaining other settings", async () => { + vi.mocked(fetchAvailableModels).mockResolvedValue([ + { model_group: "synthetic-embedding", mode: "embedding" }, + ] as Awaited>); + getCacheSettingsCall.mockResolvedValue({ + current_values: { + redis_type: "semantic", + host: "localhost", + redis_semantic_cache_embedding_model: "synthetic-embedding", + password: "***REDACTED***", + ttl: 0, + ssl: false, + namespace: "synthetic-cache", + }, + }); + const user = userEvent.setup(); + renderSettings(); + await screen.findByRole("combobox", { name: "Embedding Model" }); + await user.click(screen.getByRole("button", { name: "Clear" })); + const expected = { + type: "redis", + host: "localhost", + port: "6379", + similarity_threshold: 0.8, + semantic_cache_scope: "key", + ssl: false, + ssl_check_hostname: false, + ttl: 0, + namespace: "synthetic-cache", + }; + await user.click(screen.getByRole("button", { name: "Test Connection" })); + await waitFor(() => expect(testCacheConnectionCall).toHaveBeenCalledWith("sk-test", expected)); + await save(user); + await waitFor(() => + expect(updateCacheSettingsCall).toHaveBeenCalledWith("sk-test", { ...expected, type: "redis-semantic" }), + ); + }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolArgumentsForm.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolArgumentsForm.tsx index 90d38642a5d..48bac2a4dd9 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolArgumentsForm.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/ToolArgumentsForm.tsx @@ -79,13 +79,16 @@ const ToolArgumentControl: React.FC<{ return ( @@ -108,8 +111,8 @@ const ToolArgumentControl: React.FC<{ if (prop.type === "boolean") { return ( onChange(setting.field_name, newValue ?? "")} - > + persist(ANTHROPIC_PROMPT_CACHING_TTL, newValue ?? "")} + value={ttlSetting.field_value ?? null} + onValueChange={(newValue) => persist(ANTHROPIC_PROMPT_CACHING_TTL, newValue)} > @@ -209,9 +206,11 @@ const GeneralSettings: React.FC = ({ accessToken, user return; } - let fieldValue = generalSettings.find((setting) => setting.field_name === fieldName)?.field_value; + const setting = generalSettings.find((setting) => setting.field_name === fieldName); + const fieldValue = setting?.field_value; - if (fieldValue == null || fieldValue == undefined) { + if (fieldValue == null) { + if (setting?.field_type === "Select") handleResetField(fieldName); return; } try { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx index b7962321333..8dbd43225db 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.integration.test.tsx @@ -1,5 +1,4 @@ -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { fireEvent, renderWithProviders, screen, waitFor } from "../../../../../tests/test-utils"; import userEvent from "@testing-library/user-event"; import { beforeEach, describe, expect, it, vi } from "vitest"; import * as networking from "@/components/networking"; @@ -23,20 +22,16 @@ const providers = [ { provider_name: "tavily", ui_friendly_name: "Tavily Search" }, ]; -const renderModal = () => { - const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } }); - return render( - - - , +const renderModal = () => + renderWithProviders( + , ); -}; const pickProvider = async (user: ReturnType, label: string) => { await user.click(screen.getAllByRole("combobox")[0]); @@ -145,4 +140,23 @@ describe("CreateSearchTools submit payload", () => { ).toBeInTheDocument(); expect(networking.createSearchTool).not.toHaveBeenCalled(); }); + + it("should block creation after clearing the required provider and accept a restored choice", async () => { + const user = userEvent.setup(); + renderModal(); + fireEvent.change(await screen.findByLabelText(/Search Tool Name/), { target: { value: "synthetic-search" } }); + await pickProvider(user, "Perplexity AI"); + await user.click(screen.getByRole("button", { name: "Clear" })); + await user.click(screen.getByRole("button", { name: "Add Search Tool" })); + expect(await screen.findByText("Please select a search provider")).toBeInTheDocument(); + expect(networking.createSearchTool).not.toHaveBeenCalled(); + await pickProvider(user, "Tavily Search"); + await user.click(screen.getByRole("button", { name: "Add Search Tool" })); + await waitFor(() => + expect(networking.createSearchTool).toHaveBeenCalledWith("test-token", { + search_tool_name: "synthetic-search", + litellm_params: { search_provider: "tavily" }, + }), + ); + }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.tsx b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.tsx index a724d979af5..eb778726f22 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/search-tools/_components/CreateSearchTools.tsx @@ -65,7 +65,10 @@ const createSearchToolShape = { .string() .min(1, "Please enter a search tool name") .regex(/^[a-zA-Z0-9_-]+$/, "Name can only contain letters, numbers, hyphens, and underscores"), - search_provider: z.string().min(1, "Please select a search provider"), + search_provider: z + .string() + .nullable() + .pipe(z.string({ error: "Please select a search provider" }).min(1, "Please select a search provider")), api_key: z.string().optional(), description: z.string().optional(), }; @@ -74,7 +77,7 @@ const createSearchToolSchema = z.object(createSearchToolShape); type CreateSearchToolFormValues = z.infer; -const EMPTY_VALUES: CreateSearchToolFormValues = { search_tool_name: "", search_provider: "" }; +const EMPTY_VALUES: z.input = { search_tool_name: "", search_provider: null }; const labelWithHint = (label: string, hint: string): React.ReactNode => ( <> @@ -216,8 +219,8 @@ const CreateSearchTool: React.FC = ({ onChange(provider ?? "")} + value={value} + onValueChange={onChange} > = ({ placeholder="Select a search provider" className="h-10 w-full rounded-lg" disabled={isLoadingProviders} - showClear={value !== ""} + showClear={value != null && value !== ""} /> No matching search providers @@ -326,7 +329,7 @@ const CreateSearchTool: React.FC = ({ = ({ visible, onClose, accessT label={labelWithHint("Category (Optional)", "Select a category or enter a custom one")} > {({ id, value, onChange, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => ( - onChange(category ?? "")} - > + No matching categories diff --git a/ui/litellm-dashboard/src/components/add_model/ModelChoiceCombobox.tsx b/ui/litellm-dashboard/src/components/add_model/ModelChoiceCombobox.tsx index 9021536f22a..e73c22189c6 100644 --- a/ui/litellm-dashboard/src/components/add_model/ModelChoiceCombobox.tsx +++ b/ui/litellm-dashboard/src/components/add_model/ModelChoiceCombobox.tsx @@ -17,8 +17,8 @@ export interface ModelChoice { interface ModelChoiceComboboxProps { id: string; - value: string; - onChange: (value: string) => void; + value: string | null; + onChange: (value: string | null) => void; choices: ModelChoice[]; placeholder: string; ariaInvalid: true | undefined; @@ -40,7 +40,7 @@ const ModelChoiceCombobox: React.FC = ({ onChange(choice?.value ?? "")} + onValueChange={(choice: ModelChoice | null) => onChange(choice?.value ?? null)} itemToStringLabel={(choice: ModelChoice) => choice.label} isItemEqualToValue={(choice: ModelChoice, current: ModelChoice) => choice.value === current.value} > @@ -50,7 +50,7 @@ const ModelChoiceCombobox: React.FC = ({ aria-describedby={ariaDescribedBy} placeholder={placeholder} className="w-full" - showClear={value !== ""} + showClear={value != null && value !== ""} /> No models found diff --git a/ui/litellm-dashboard/src/components/edit_auto_router/editAutoRouterFormSchema.ts b/ui/litellm-dashboard/src/components/edit_auto_router/editAutoRouterFormSchema.ts new file mode 100644 index 00000000000..af84a0897c6 --- /dev/null +++ b/ui/litellm-dashboard/src/components/edit_auto_router/editAutoRouterFormSchema.ts @@ -0,0 +1,42 @@ +import { z } from "zod/v4"; + +const sharedShape = { + auto_router_name: z.string().min(1, "Auto router name is required"), + model_access_group: z.array(z.string()), +}; + +const complexityRouterShape = { + ...sharedShape, + auto_router_default_model: z + .string() + .nullable() + .transform((value) => value ?? ""), + auto_router_embedding_model: z + .string() + .nullable() + .transform((value) => value ?? ""), +}; + +const semanticRouterShape = { + ...sharedShape, + auto_router_default_model: z + .string() + .nullable() + .pipe(z.string({ error: "Default model is required" }).min(1, "Default model is required")), + auto_router_embedding_model: z + .string() + .nullable() + .pipe(z.string({ error: "Embedding model is required" }).min(1, "Embedding model is required")), +}; + +export const complexityRouterSchema = z.object(complexityRouterShape); +export const semanticRouterSchema = z.object(semanticRouterShape); + +export type EditAutoRouterFormValues = z.infer; + +export const EMPTY_FORM_VALUES: z.input = { + auto_router_name: "", + auto_router_default_model: null, + auto_router_embedding_model: null, + model_access_group: [], +}; diff --git a/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx b/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx index 8a62e86e842..55be4c96bb1 100644 --- a/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx +++ b/ui/litellm-dashboard/src/components/edit_auto_router/edit_auto_router_modal.tsx @@ -1,5 +1,10 @@ import React, { useEffect, useMemo, useState } from "react"; -import { z } from "zod/v4"; +import { + complexityRouterSchema, + semanticRouterSchema, + EMPTY_FORM_VALUES, + type EditAutoRouterFormValues, +} from "./editAutoRouterFormSchema"; import { toast } from "@/lib/toast"; import { CircleHelp } from "lucide-react"; import { FieldGroup } from "@/components/ui/field"; @@ -400,35 +405,6 @@ export const buildUpdatedComplexityRouterConfig = ( }; }; -const sharedShape = { - auto_router_name: z.string().min(1, "Auto router name is required"), - model_access_group: z.array(z.string()), -}; - -const complexityRouterShape = { - ...sharedShape, - auto_router_default_model: z.string(), - auto_router_embedding_model: z.string(), -}; - -const semanticRouterShape = { - ...sharedShape, - auto_router_default_model: z.string().min(1, "Default model is required"), - auto_router_embedding_model: z.string().min(1, "Embedding model is required"), -}; - -const complexityRouterSchema = z.object(complexityRouterShape); -const semanticRouterSchema = z.object(semanticRouterShape); - -type EditAutoRouterFormValues = z.infer; - -const EMPTY_FORM_VALUES: EditAutoRouterFormValues = { - auto_router_name: "", - auto_router_default_model: "", - auto_router_embedding_model: "", - model_access_group: [], -}; - const labelWithHint = (label: string, hint: string): React.ReactNode => ( <> {label} @@ -587,8 +563,8 @@ const EditAutoRouterModal: React.FC = ({ // Set form values form.reset({ auto_router_name: modelData.model_name, - auto_router_default_model: modelData.litellm_params?.auto_router_default_model || "", - auto_router_embedding_model: modelData.litellm_params?.auto_router_embedding_model || "", + auto_router_default_model: modelData.litellm_params?.auto_router_default_model || null, + auto_router_embedding_model: modelData.litellm_params?.auto_router_embedding_model || null, model_access_group: modelData.model_info?.access_groups || [], }); } catch (error) { diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.integration.test.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.integration.test.tsx index b1174d1d37d..fb0bb2f9f0e 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.integration.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { fireEvent, render, screen } from "@testing-library/react"; +import { fireEvent, renderWithProviders, screen } from "../../../tests/test-utils"; import userEvent from "@testing-library/user-event"; import { describe, it, expect } from "vitest"; import MCPToolArgumentsForm, { MCPToolArgumentsFormRef } from "./MCPToolArgumentsForm"; @@ -10,7 +10,7 @@ const toolWith = (schema: InputSchema | string): MCPTool => const renderForm = (schema: InputSchema | string) => { const ref = React.createRef(); - render(); + renderWithProviders(); return ref; }; @@ -101,7 +101,7 @@ describe("MCPToolArgumentsForm", () => { it("resets dotted defaults and positional values when the selected tool changes", async () => { const ref = React.createRef(); - const { rerender } = render( + const { rerender } = renderWithProviders( { await expect(submit(ref)).resolves.toEqual({}); }); }); + +it("should distinguish an unset enum from empty string and retain explicit false", async () => { + const user = userEvent.setup(); + const ref = renderForm({ + type: "object", + properties: { + mode: { type: "string", enum: ["", "fast"], default: "fast" }, + active: { type: "boolean", default: true }, + }, + }); + await user.click(screen.getByRole("combobox", { name: "mode" })); + await user.click(await screen.findByRole("option", { name: "Select mode" })); + await user.click(screen.getByRole("combobox", { name: "active" })); + await user.click(await screen.findByRole("option", { name: "False" })); + await expect(submit(ref)).resolves.toEqual({ active: false }); + await user.click(screen.getByRole("combobox", { name: "mode" })); + await user.click(await screen.findByRole("option", { name: "Empty string" })); + await expect(submit(ref)).resolves.toEqual({ mode: "", active: false }); +}); diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.tsx index ab3213d9b37..64032659ed2 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPToolArgumentsForm.tsx @@ -23,6 +23,9 @@ const BOOLEAN_ITEMS = [ const isBlank = (value: unknown): boolean => value === undefined || value === null || value === ""; +const isUnsetArgument = (prop: InputSchemaProperty | undefined, value: unknown): boolean => + prop?.type === "string" && prop.enum ? value == null : isBlank(value); + const jsonErrorFor = (prop: InputSchemaProperty, value: unknown): string | null => { try { const parsed = typeof value === "string" ? JSON.parse(value) : value; @@ -45,10 +48,15 @@ const collectErrors = ( ): Record => { const entries = Object.entries(actualSchema.properties ?? {}).flatMap<[string, FieldError]>(([key, prop]) => { const value = values[key]; - const blank = isBlank(value); + const blank = isUnsetArgument(prop, value); if (actualSchema.required?.includes(key) && blank) { return [[key, { type: "required", message: requiredMessages[key] ?? `Please enter ${key}` }]]; } + if (prop.type === "string" && prop.enum) { + if (!blank && !prop.enum.includes(String(value))) { + return [[key, { type: "validate", message: `Please select a valid ${key}` }]]; + } + } if (prop.type !== "object" && prop.type !== "array") return []; if (blank) return []; const message = jsonErrorFor(prop, value); @@ -146,6 +154,7 @@ function buildDefaultValue(prop?: InputSchemaProperty, overrideDefault?: any): a } const getInitialValueForField = (prop: InputSchemaProperty): any => { + if (prop.type === "string" && prop.enum && prop.default === undefined) return null; const defaultValue = buildDefaultValue(prop); if (prop.type === "object" || prop.type === "array") { const fallback = prop.type === "array" ? [] : {}; @@ -164,7 +173,7 @@ function convertFormValues( Object.entries(values).forEach(([key, value]) => { const prop = schemaToUse.properties?.[key]; - if (prop && value !== null && value !== undefined && value !== "") { + if (prop && !isUnsetArgument(prop, value)) { switch (prop.type) { case "boolean": convertedValues[key] = value === "true" || value === true; @@ -202,7 +211,7 @@ function convertFormValues( default: convertedValues[key] = value; } - } else if (value !== null && value !== undefined && value !== "") { + } else if (!isUnsetArgument(prop, value)) { convertedValues[key] = value; } }); @@ -342,7 +351,7 @@ const MCPToolArgumentsForm = forwardRef { if (prop.type === "string" && prop.enum) { return ( - - {!required && Select {key}} + {!required && Select {key}} {prop.enum.map((v) => ( - {v} + {v === "" ? "Empty string" : v} ))} @@ -364,7 +373,11 @@ const MCPToolArgumentsForm = forwardRef +