From 72be35f9b81da33c34a2c82c37ff69f9d998a3e0 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Thu, 16 Apr 2026 11:01:30 -0700
Subject: [PATCH 1/2] chore(ui): migrate router_settings page from Tremor to
 antd
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace @tremor/react components with antd equivalents:
- Button → antd Button
- TextInput → antd Input
- Switch → antd Switch
---
 .../router_settings/LatencyBasedConfiguration.tsx           | 4 ++--
 .../router_settings/ReliabilityRetriesSection.tsx           | 4 ++--
 .../src/components/router_settings/TagFilteringToggle.tsx   | 2 +-
 .../src/components/router_settings/index.tsx                | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

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<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"
diff --git a/ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx b/ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx
index d217a45358..3005822ab8 100644
--- a/ui/litellm-dashboard/src/components/router_settings/ReliabilityRetriesSection.tsx
+++ b/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"
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.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<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>

From 260679679f7881d96cbbf53bbf23b4ffaf7091dc Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Thu, 16 Apr 2026 14:04:33 -0700
Subject: [PATCH 2/2] fix(ui): repair router_settings tests broken by full antd
 mock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The antd mocks in RouterSettingsForm.test.tsx and index.test.tsx
replaced the entire antd module with only Select, so the Switch and
Button used by nested components failed to render. Use importOriginal
to preserve the rest of antd and override only Select.

Also fix the TagFilteringToggle click assertion — antd's Switch fires
onChange with (checked, event), so toHaveBeenCalledWith(true) was
always going to miss. Assert the checked arg directly instead of
coupling to antd's call signature.
---
 .../RouterSettingsForm.test.tsx               | 41 +++++++++++--------
 .../TagFilteringToggle.test.tsx               |  3 +-
 .../components/router_settings/index.test.tsx | 38 +++++++++--------
 3 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx b/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx
index 3988f01281..a8ff485cf9 100644
--- a/ui/litellm-dashboard/src/components/router_settings/RouterSettingsForm.test.tsx
+++ b/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: {},
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/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) => (
-      <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(),