From 8f1f5825aadf175b4e41ad6232c30b29ba63764f Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Mon, 10 Nov 2025 18:38:23 -0800
Subject: [PATCH] Invite User Searchable Team Select (#16454)

---
 .../components/create_user_button.test.tsx    | 35 +++++++++++++++++++
 .../src/components/create_user_button.tsx     | 33 ++++-------------
 2 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/create_user_button.test.tsx

diff --git a/ui/litellm-dashboard/src/components/create_user_button.test.tsx b/ui/litellm-dashboard/src/components/create_user_button.test.tsx
new file mode 100644
index 00000000000..e40a1e0ac3c
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/create_user_button.test.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Createuser from "./create_user_button";
+
+vi.mock("./networking", () => ({
+  userCreateCall: vi.fn(),
+  modelAvailableCall: vi.fn().mockResolvedValue({ data: [] }),
+  invitationCreateCall: vi.fn(),
+  getProxyUISettings: vi.fn().mockResolvedValue({
+    PROXY_BASE_URL: null,
+    PROXY_LOGOUT_URL: null,
+    DEFAULT_TEAM_DISABLED: false,
+    SSO_ENABLED: false,
+  }),
+  getProxyBaseUrl: vi.fn().mockReturnValue("http://localhost"),
+}));
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+
+describe("Create User Button", () => {
+  it("should render the create user button", () => {
+    const qc = createQueryClient();
+    const { getByText } = render(
+      <QueryClientProvider client={qc}>
+        <Createuser userID="123" accessToken="123" teams={[]} possibleUIRoles={{}} isEmbedded />
+      </QueryClientProvider>,
+    );
+    expect(getByText("Create User")).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/create_user_button.tsx b/ui/litellm-dashboard/src/components/create_user_button.tsx
index 9973c2e777c..6fb6f80c4b4 100644
--- a/ui/litellm-dashboard/src/components/create_user_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_user_button.tsx
@@ -26,6 +26,7 @@ import { InfoCircleOutlined } from "@ant-design/icons";
 import { getModelDisplayName } from "./key_team_helpers/fetch_available_models_team_key";
 import { useQueryClient } from "@tanstack/react-query";
 import NotificationsManager from "./molecules/notifications_manager";
+import TeamDropdown from "./common_components/team_dropdown";
 
 // Helper function to generate UUID compatible across all environments
 const generateUUID = (): string => {
@@ -201,19 +202,9 @@ const Createuser: React.FC<CreateuserProps> = ({
               ))}
           </Select2>
         </Form.Item>
-        <Form.Item label="Team ID" name="team_id">
-          <Select placeholder="Select Team ID" style={{ width: "100%" }}>
-            {teams ? (
-              teams.map((team: any) => (
-                <Option key={team.team_id} value={team.team_id}>
-                  {team.team_alias}
-                </Option>
-              ))
-            ) : (
-              <Option key="default" value={null}>
-                Default Team
-              </Option>
-            )}
+        <Form.Item label="Team" name="team_id">
+          <Select placeholder="Select Team" style={{ width: "100%" }}>
+            <TeamDropdown teams={teams} />
           </Select>
         </Form.Item>
 
@@ -275,24 +266,12 @@ const Createuser: React.FC<CreateuserProps> = ({
           </Form.Item>
 
           <Form.Item
-            label="Team ID"
+            label="Team"
             className="gap-2"
             name="team_id"
             help="If selected, user will be added as a 'user' role to the team."
           >
-            <Select placeholder="Select Team ID" style={{ width: "100%" }}>
-              {teams ? (
-                teams.map((team: any) => (
-                  <Option key={team.team_id} value={team.team_id}>
-                    {team.team_alias}
-                  </Option>
-                ))
-              ) : (
-                <Option key="default" value={null}>
-                  Default Team
-                </Option>
-              )}
-            </Select>
+            <TeamDropdown teams={teams} />
           </Form.Item>
 
           <Form.Item label="Metadata" name="metadata">