Add Model Page Select perf

ui/litellm-dashboard/src/components/add_model/add_model_tab.test.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { render, renderHook, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Form } from "antd";
 import type { UploadProps } from "antd/es/upload";
 import { describe, expect, it, vi } from "vitest";
@@ -8,6 +9,14 @@ import type { CredentialItem } from "../networking";
 import { Providers } from "../provider_info_helpers";
 import AddModelTab from "./add_model_tab";
 
+vi.mock("../molecules/models/ProviderLogo", () => ({
+  ProviderLogo: ({ provider, className }: { provider: string; className?: string }) => (
+    <div className={className} data-testid={`provider-logo-${provider}`}>
+      {provider}
+    </div>
+  ),
+}));
+
 vi.mock("../networking", async () => {
   const actual = await vi.importActual("../networking");
   return {
@@ -258,4 +267,47 @@ describe("Add Model Tab", () => {
       { timeout: 10000 },
     );
   }, 15000); // 15 second timeout to allow waitFor to complete
+
+  it("should show team selection when team-only switch is enabled", async () => {
+    const props = createTestProps();
+    const queryClient = createQueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <AddModelTab
+          form={props.form}
+          handleOk={props.handleOk}
+          selectedProvider={props.selectedProvider}
+          setSelectedProvider={props.setSelectedProvider}
+          providerModels={props.providerModels}
+          setProviderModelsFn={props.setProviderModelsFn}
+          getPlaceholder={props.getPlaceholder}
+          uploadProps={props.uploadProps}
+          showAdvancedSettings={props.showAdvancedSettings}
+          setShowAdvancedSettings={props.setShowAdvancedSettings}
+          teams={props.teams}
+          credentials={props.credentials}
+          accessToken={props.accessToken}
+          userRole={props.userRole}
+          premiumUser={props.premiumUser}
+        />
+      </QueryClientProvider>,
+    );
+
+    // Wait for component to load
+    await screen.findByText("Provider");
+
+    // Find the team-BYOK switch by its role
+    const teamSwitch = screen.getByRole("switch");
+    expect(teamSwitch).toBeInTheDocument();
+
+    // Initially, team selection should not be visible
+    expect(screen.queryByText("Select Team")).not.toBeInTheDocument();
+
+    // Click the switch to enable team-only mode
+    await userEvent.click(teamSwitch!);
+
+    // Now team selection should be visible
+    expect(await screen.findByText("Select Team")).toBeInTheDocument();
+  });
 });

ui/litellm-dashboard/src/components/add_model/add_model_tab.tsx

@@ -15,6 +15,7 @@ import {
   tagListCall,
 } from "../networking";
 import { Providers, providerLogoMap } from "../provider_info_helpers";
+import { ProviderLogo } from "../molecules/models/ProviderLogo";
 import { Tag } from "../tag_management/types";
 import AddAutoRouterTab from "./add_auto_router_tab";
 import { TEST_MODES } from "./add_model_modes";
@@ -191,6 +192,7 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
                     labelAlign="left"
                   >
                     <AntdSelect
+                      virtual={false}
                       showSearch
                       loading={isProviderMetadataLoading}
                       placeholder={isProviderMetadataLoading ? "Loading providers..." : "Select a provider"}
@@ -220,34 +222,7 @@ const AddModelTab: React.FC<AddModelTabProps> = ({
                         return (
                           <AntdSelect.Option key={providerKey} value={providerKey} data-label={displayName}>
                             <div className="flex items-center space-x-2">
-                              {logoSrc ? (
-                                <img
-                                  src={logoSrc}
-                                  alt={`${displayName} logo`}
-                                  className="w-5 h-5"
-                                  onError={(e) => {
-                                    const target = e.currentTarget as HTMLImageElement;
-                                    const parent = target.parentElement;
-                                    if (!parent || !parent.contains(target)) {
-                                      return;
-                                    }
-
-                                    try {
-                                      const fallbackDiv = document.createElement("div");
-                                      fallbackDiv.className =
-                                        "w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs";
-                                      fallbackDiv.textContent = displayName.charAt(0);
-                                      parent.replaceChild(fallbackDiv, target);
-                                    } catch (error) {
-                                      console.error("Failed to replace provider logo fallback:", error);
-                                    }
-                                  }}
-                                />
-                              ) : (
-                                <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center text-xs">
-                                  {displayName.charAt(0)}
-                                </div>
-                              )}
+                              <ProviderLogo provider={providerKey} className="w-5 h-5" />
                               <span>{displayName}</span>
                             </div>
                           </AntdSelect.Option>