diff --git a/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx b/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx index 9c776c94a0..1c2d52cf0c 100644 --- a/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/LatencyBasedConfiguration.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { TextInput } from "@tremor/react"; +import { Input } from "antd"; interface routingStrategyArgs { ttl?: number; @@ -42,7 +42,7 @@ const LatencyBasedConfiguration: React.FC = ({

{paramExplanation[param] || ""}

- = ({

{routerFieldsMetadata[param]?.field_description || ""}

- ({ - Select: Object.assign( - ({ value, onChange, children }: any) => ( - - ), - { - Option: ({ value, children }: any) => ( - +// Override antd Select (complex to drive in JSDOM) while preserving the rest +// of antd (Switch, Button, etc.) so nested components render normally. +vi.mock("antd", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + Select: Object.assign( + ({ value, onChange, children }: any) => ( + ), - } - ), -})); + { + Option: ({ value, children }: any) => ( + + ), + } + ), + }; +}); const defaultValue: RouterSettingsFormValue = { routerSettings: {}, diff --git a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx index b469751ac2..cc071117b8 100644 --- a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.test.tsx @@ -90,6 +90,7 @@ describe("TagFilteringToggle", () => { await user.click(screen.getByRole("switch")); - expect(onToggle).toHaveBeenCalledWith(true); + expect(onToggle).toHaveBeenCalledTimes(1); + expect(onToggle.mock.calls[0][0]).toBe(true); }); }); diff --git a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx index 2b53a48c3a..725c75a3f6 100644 --- a/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/TagFilteringToggle.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Switch } from "@tremor/react"; +import { Switch } from "antd"; interface TagFilteringToggleProps { enabled: boolean; diff --git a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx index eea2717298..80f0ed98c8 100644 --- a/ui/litellm-dashboard/src/components/router_settings/index.test.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/index.test.tsx @@ -3,24 +3,28 @@ import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils" import userEvent from "@testing-library/user-event"; import RouterSettings from "./index"; -vi.mock("antd", () => ({ - Select: Object.assign( - ({ value, onChange, children }: any) => ( - - ), - { - Option: ({ value, children }: any) => ( - +vi.mock("antd", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + Select: Object.assign( + ({ value, onChange, children }: any) => ( + ), - } - ), -})); + { + Option: ({ value, children }: any) => ( + + ), + } + ), + }; +}); vi.mock("@/components/networking", () => ({ getCallbacksCall: vi.fn(), diff --git a/ui/litellm-dashboard/src/components/router_settings/index.tsx b/ui/litellm-dashboard/src/components/router_settings/index.tsx index aaad530683..5bd0132122 100644 --- a/ui/litellm-dashboard/src/components/router_settings/index.tsx +++ b/ui/litellm-dashboard/src/components/router_settings/index.tsx @@ -1,4 +1,4 @@ -import { Button } from "@tremor/react"; +import { Button } from "antd"; import React, { useEffect, useState } from "react"; import NotificationsManager from "../molecules/notifications_manager"; import { getCallbacksCall, getRouterSettingsCall, setCallbacksCall } from "../networking"; @@ -191,10 +191,10 @@ const RouterSettings: React.FC = ({ accessToken, userRole, {/* Actions - Sticky at bottom */}
- -