Merge pull request #25879 from BerriAI/litellm_chore-migrate-router-settings-page-off-of-tremor

chore(ui): migrate router_settings page from Tremor to antd

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<LatencyBasedConfigurationProps> = ({
                 <p className="text-xs text-gray-500 mt-0.5 mb-2">
                   {paramExplanation[param] || ""}
                 </p>
-                <TextInput
+                <Input
                   name={param}
                   defaultValue={typeof value === "object" ? JSON.stringify(value, null, 2) : value?.toString()}
                   className="font-mono text-sm w-full"

ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextInput } from "@tremor/react";
+import { Input } from "antd";
 
 interface ReliabilityRetriesSectionProps {
   routerSettings: { [key: string]: any };
@@ -36,7 +36,7 @@ const ReliabilityRetriesSection: React.FC<ReliabilityRetriesSectionProps> = ({
                 <p className="text-xs text-gray-500 mt-0.5 mb-2">
                   {routerFieldsMetadata[param]?.field_description || ""}
                 </p>
-                <TextInput
+                <Input
                   name={param}
                   defaultValue={
                     value === null || value === undefined || value === "null"

ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx

@@ -4,25 +4,30 @@ import userEvent from "@testing-library/user-event";
 import RouterSettingsForm from "./RouterSettingsForm";
 import type { RouterSettingsFormValue } from "./RouterSettingsForm";
 
-// Use the same antd mock as RoutingStrategySelector to keep things consistent
-vi.mock("antd", () => ({
-  Select: Object.assign(
-    ({ value, onChange, children }: any) => (
-      <select
-        data-testid="strategy-select"
-        value={value ?? ""}
-        onChange={(e) => onChange(e.target.value)}
-      >
-        {children}
-      </select>
-    ),
-    {
-      Option: ({ value, children }: any) => (
-        <option value={value}>{children}</option>
+// 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<typeof import("antd")>();
+  return {
+    ...actual,
+    Select: Object.assign(
+      ({ value, onChange, children }: any) => (
+        <select
+          data-testid="strategy-select"
+          value={value ?? ""}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {children}
+        </select>
       ),
-    }
-  ),
-}));
+      {
+        Option: ({ value, children }: any) => (
+          <option value={value}>{children}</option>
+        ),
+      }
+    ),
+  };
+});
 
 const defaultValue: RouterSettingsFormValue = {
   routerSettings: {},

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);
   });
 });

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;

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) => (
-      <select
-        data-testid="strategy-select"
-        value={value ?? ""}
-        onChange={(e) => onChange(e.target.value)}
-      >
-        {children}
-      </select>
-    ),
-    {
-      Option: ({ value, children }: any) => (
-        <option value={value}>{children}</option>
+vi.mock("antd", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("antd")>();
+  return {
+    ...actual,
+    Select: Object.assign(
+      ({ value, onChange, children }: any) => (
+        <select
+          data-testid="strategy-select"
+          value={value ?? ""}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {children}
+        </select>
       ),
-    }
-  ),
-}));
+      {
+        Option: ({ value, children }: any) => (
+          <option value={value}>{children}</option>
+        ),
+      }
+    ),
+  };
+});
 
 vi.mock("@/components/networking", () => ({
   getCallbacksCall: vi.fn(),

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<RouterSettingsProps> = ({ accessToken, userRole,
 
       {/* Actions - Sticky at bottom */}
       <div className="border-t border-gray-200 pt-6 flex justify-end gap-3">
-        <Button variant="secondary" size="sm" onClick={() => window.location.reload()} className="text-sm">
+        <Button onClick={() => window.location.reload()}>
           Reset
         </Button>
-        <Button size="sm" onClick={handleSaveChanges} className="text-sm font-medium">
+        <Button type="primary" onClick={handleSaveChanges}>
           Save Changes
         </Button>
       </div>