Merge pull request #36918 from BerriAI/litellm_shadcn_modelhub_0814

refactor(ui): move the model hub and model select onto shadcn primitives

Author: yuneng-berri

tests/e2e/ui/tests/proxy-admin/teams.spec.ts

@@ -47,10 +47,10 @@ test.describe("Proxy Admin - Teams", () => {
     // Fill Team Name — the input has id="team_alias"
     await dialog.locator("#team_alias").fill(uniqueAlias);
 
-    // Select models — the models multi-select is inside the modal
-    // Click to open dropdown, select "All Proxy Models"
-    await dialog.locator(".ant-select-selection-overflow").first().click();
-    await page.locator(".ant-select-dropdown:visible").getByText("All Proxy Models").click();
+    // Select models — the models multi-select is inside the modal. Its popup is
+    // portaled to the body, so scope the option lookup to the page, not the dialog.
+    await dialog.getByTestId("create-team-models-select").getByRole("combobox").click();
+    await page.getByRole("option", { name: "All Proxy Models", exact: true }).click();
     await page.keyboard.press("Escape");
 
     // Submit — click the submit button inside the dialog (not the header button)
@@ -191,11 +191,11 @@ test.describe("Proxy Admin - Teams", () => {
       const modelsSelect = page.locator("[data-testid='models-select']");
       await expect(modelsSelect).toBeVisible({ timeout: 10_000 });
 
-      const anthropicTag = modelsSelect
-        .locator(".ant-select-selection-item")
+      const anthropicChip = modelsSelect
+        .locator('[data-slot="combobox-chip"]')
         .filter({ hasText: "fake-anthropic-claude" });
-      await expect(anthropicTag).toBeVisible({ timeout: 5_000 });
-      await anthropicTag.locator(".ant-select-selection-item-remove").click();
+      await expect(anthropicChip).toBeVisible({ timeout: 5_000 });
+      await anthropicChip.locator('[data-slot="combobox-chip-remove"]').click();
 
       await page.getByRole("button", { name: "Save Changes" }).click();
 

ui/litellm-dashboard/eslint-suppressions.json

@@ -1772,21 +1772,13 @@
   "src/components/GuardrailsMonitor/LogViewer.tsx": {
     "no-nested-ternary": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
     }
   },
   "src/components/HelpLink.test.tsx": {
     "unused-imports/no-unused-imports": {
       "count": 1
     }
   },
-  "src/components/ModelSelect/ModelSelect.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/Navbar/BlogDropdown/BlogDropdown.test.tsx": {
     "max-nested-callbacks": {
       "count": 12
@@ -2239,9 +2231,6 @@
     }
   },
   "src/components/claude_code_plugins/MakeSkillPublicForm.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    },
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
@@ -2760,9 +2749,6 @@
     },
     "max-lines": {
       "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 2
     }
   },
   "src/components/query_param_input.tsx": {

ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx

@@ -1,8 +1,9 @@
-import { CheckCircleOutlined, CloseOutlined, DownOutlined, WarningOutlined } from "@ant-design/icons";
+import { CircleCheck, ChevronDown, TriangleAlert, X } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import moment from "moment";
-import { Button, Spin } from "antd";
 import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { UiLoadingSpinner } from "@/components/ui/ui-loading-spinner";
 import { uiSpendLogsCall } from "@/components/networking";
 import { LogDetailsDrawer } from "@/components/view_logs/LogDetailsDrawer";
 import type { LogEntry as ViewLogsLogEntry } from "@/components/view_logs/columns";
@@ -13,21 +14,21 @@ const actionConfig: Record<
   { icon: React.ElementType; color: string; bg: string; border: string; label: string }
 > = {
   blocked: {
-    icon: CloseOutlined,
+    icon: X,
     color: "text-red-600",
     bg: "bg-red-50",
     border: "border-red-200",
     label: "Blocked",
   },
   passed: {
-    icon: CheckCircleOutlined,
+    icon: CircleCheck,
     color: "text-green-600",
     bg: "bg-green-50",
     border: "border-green-200",
     label: "Passed",
   },
   flagged: {
-    icon: WarningOutlined,
+    icon: TriangleAlert,
     color: "text-amber-600",
     bg: "bg-amber-50",
     border: "border-amber-200",
@@ -125,8 +126,8 @@ export function LogViewer({
                 {filters.map((f) => (
                   <Button
                     key={f}
-                    type={activeFilter === f ? "primary" : "default"}
-                    size="small"
+                    variant={activeFilter === f ? "default" : "outline"}
+                    size="sm"
                     onClick={() => setActiveFilter(f)}
                   >
                     {f.charAt(0).toUpperCase() + f.slice(1)}
@@ -139,8 +140,8 @@ export function LogViewer({
                 {sampleSizes.map((size) => (
                   <Button
                     key={size}
-                    type={sampleSize === size ? "primary" : "default"}
-                    size="small"
+                    variant={sampleSize === size ? "default" : "outline"}
+                    size="sm"
                     onClick={() => setSampleSize(size)}
                   >
                     {size}
@@ -154,7 +155,7 @@ export function LogViewer({
 
       {logsLoading && (
         <div className="flex items-center justify-center py-12">
-          <Spin />
+          <UiLoadingSpinner className="size-5" />
         </div>
       )}
       {!logsLoading && displayLogs.length === 0 && (
@@ -182,11 +183,11 @@ export function LogViewer({
                     </span>
                     <span className="text-xs text-gray-400">{log.timestamp}</span>
                     <span className="text-xs text-gray-400">·</span>
-                    {log.model && <span className="text-xs text-gray-500">{log.model}</span>}
+                    {log.model && <span className="min-w-0 text-xs break-words text-gray-500">{log.model}</span>}
                   </div>
                   <p className="text-sm text-gray-800 truncate">{log.input_snippet ?? log.input ?? "—"}</p>
                 </div>
-                <DownOutlined className="w-4 h-4 text-gray-400 shrink-0 mt-1" />
+                <ChevronDown className="w-4 h-4 text-gray-400 shrink-0 mt-1" />
               </button>
             );
           })}