diff --git a/ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx b/ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx index 6f63fcfa54..de5e138739 100644 --- a/ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx +++ b/ui/litellm-dashboard/src/components/add_model/AddModelForm.test.tsx @@ -65,6 +65,21 @@ vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ default: vi.fn(), })); +vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({ + useInfiniteTeams: () => ({ + data: { + pages: [{ + teams: [{ team_id: "team-1", team_alias: "Test Team", organization_id: "org-1" }], + total: 1, page: 1, page_size: 20, total_pages: 1, + }], + }, + fetchNextPage: vi.fn(), + hasNextPage: false, + isFetchingNextPage: false, + isLoading: false, + }), +})); + vi.mock("@/app/(dashboard)/hooks/guardrails/useGuardrails", () => ({ useGuardrails: vi.fn().mockReturnValue({ data: [{ guardrail_name: "test-guardrail" }], diff --git a/ui/litellm-dashboard/src/components/common_components/team_dropdown.tsx b/ui/litellm-dashboard/src/components/common_components/team_dropdown.tsx index 75243c4d91..844bbfc3eb 100644 --- a/ui/litellm-dashboard/src/components/common_components/team_dropdown.tsx +++ b/ui/litellm-dashboard/src/components/common_components/team_dropdown.tsx @@ -1,10 +1,12 @@ import React, { useMemo, useState, type UIEvent } from "react"; -import { Select } from "antd"; +import { Select, Typography } from "antd"; import { LoadingOutlined } from "@ant-design/icons"; import { useDebouncedState } from "@tanstack/react-pacer/debouncer"; import { useInfiniteTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; import { Team } from "../key_team_helpers/key_list"; +const { Text } = Typography; + interface TeamDropdownProps { value?: string; onChange?: (value: string) => void; @@ -25,7 +27,7 @@ const TeamDropdown: React.FC = ({ onTeamSelect, disabled, organizationId, - pageSize = 50, + pageSize = 20, }) => { const [searchInput, setSearchInput] = useState(""); const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", { @@ -58,15 +60,6 @@ const TeamDropdown: React.FC = ({ return result; }, [data]); - const options = useMemo( - () => - teams.map((team) => ({ - label: `${team.team_alias} (${team.team_id})`, - value: team.team_id, - })), - [teams], - ); - const handlePopupScroll = (e: UIEvent) => { const target = e.currentTarget; const scrollRatio = @@ -103,7 +96,6 @@ const TeamDropdown: React.FC = ({ onPopupScroll={handlePopupScroll} loading={isLoading} notFoundContent={isLoading ? : "No teams found"} - options={options} popupRender={(menu) => ( <> {menu} @@ -114,7 +106,14 @@ const TeamDropdown: React.FC = ({ )} )} - /> + > + {teams.map((team) => ( + + {team.team_alias}{" "} + ({team.team_id}) + + ))} + ); };