diff --git a/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx b/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx index d56e65237eb..befc3758eba 100644 --- a/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx +++ b/ui/litellm-dashboard/src/components/ModelInfoEditForm.tsx @@ -24,6 +24,7 @@ import CacheControlInjectionPoints, { CACHE_CONTROL_TOOLTIP, type CacheControlInjectionPoint, } from "./add_model/cache_control_settings"; +import type { Team } from "./key_team_helpers/key_list"; import type { CredentialItem } from "./networking"; import NumericalInput from "./shared/numerical_input"; import type { Tag } from "./tag_management/types"; @@ -103,6 +104,7 @@ export interface ModelEditFormValues { litellm_credential_name?: string; litellm_extra_params?: string; model_info?: string; + team_id?: string; } type ModelEditFieldName = keyof ModelEditFormValues; @@ -139,6 +141,7 @@ const modelEditShape = { litellm_credential_name: textish, litellm_extra_params: textish, model_info: textish, + team_id: textish, }; const isJson = (value: string): boolean => { @@ -260,6 +263,7 @@ export const toModelEditFormValues = (localModelData: any, isWildcardModel: bool null, 2, ), + team_id: localModelData.model_info?.team_id ?? undefined, }); const displayCost = (localModelData: any, field: TouchedPricingField): string => { @@ -285,6 +289,7 @@ interface ModelInfoEditFormProps { tagsList: Record; credentialsList: CredentialItem[]; healthCheckModelOptions: { value: string; label: string }[]; + teams: Team[] | null; } const Display: React.FC<{ children: React.ReactNode }> = ({ children }) => ( @@ -355,6 +360,7 @@ const ModelInfoEditForm: React.FC = ({ tagsList, credentialsList, healthCheckModelOptions, + teams, }) => { // Neither RHF's blur-based touchedFields nor its resettable dirtyFields matches antd's touched-on-change. const touchedRef = React.useRef>(new Set()); @@ -800,7 +806,36 @@ const ModelInfoEditForm: React.FC = ({
Team ID - {modelData.model_info.team_id || "Not Set"} + {isEditing ? ( + + {({ id, value, onChange, onBlur }) => { + const items = (teams ?? []).map((team) => ({ + value: team.team_id, + label: team.team_alias ? `${team.team_alias} (${team.team_id})` : team.team_id, + })); + return ( + + ); + }} + + ) : ( + {modelData.model_info.team_id || "Not Set"} + )}
diff --git a/ui/litellm-dashboard/src/components/model_info_view.test.tsx b/ui/litellm-dashboard/src/components/model_info_view.test.tsx index 3db9418dfb9..c166e3107f0 100644 --- a/ui/litellm-dashboard/src/components/model_info_view.test.tsx +++ b/ui/litellm-dashboard/src/components/model_info_view.test.tsx @@ -42,6 +42,11 @@ vi.mock("@/app/(dashboard)/hooks/models/useModelCostMap", () => ({ useModelCostMap: (...args: any[]) => mockUseModelCostMap(...args), })); +const mockUseTeams = vi.fn(); +vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({ + useTeams: () => mockUseTeams(), +})); + const mockUsePtuCostAttributionEnabled = vi.fn(); vi.mock("@/app/(dashboard)/hooks/uiSettings/usePtuCostAttributionEnabled", () => ({ usePtuCostAttributionEnabled: () => mockUsePtuCostAttributionEnabled(), @@ -102,6 +107,7 @@ describe("ModelInfoView", () => { }); vi.clearAllMocks(); mockUsePtuCostAttributionEnabled.mockReturnValue(false); + mockUseTeams.mockReturnValue({ data: undefined, isLoading: false, error: null }); mockUseModelsInfo.mockReturnValue({ data: { @@ -1564,6 +1570,70 @@ describe("ModelInfoView", () => { expect(payload.model_info).toMatchObject({ team_id: "team-7" }); }); + it("sends the team picked in the Team ID selector", async () => { + mockUseTeams.mockReturnValue({ + data: [ + { team_id: "team-1", team_alias: "alpha" }, + { team_id: "team-2", team_alias: "beta" }, + ], + isLoading: false, + error: null, + }); + const teamModel = { + ...defaultModelData, + model_info: { ...defaultModelData.model_info, team_id: "team-1" }, + }; + mockUseModelsInfo.mockReturnValue({ data: { data: [teamModel] }, isLoading: false, error: null }); + mockModelInfoV1Call.mockResolvedValue({ data: [teamModel] }); + const user = userEvent.setup(); + await enterEditMode(user); + + await user.click(screen.getByText("alpha (team-1)")); + await user.click(await screen.findByText("beta (team-2)")); + + const payload = await save(user); + + expect(payload.model_info.team_id).toBe("team-2"); + }); + + it("shows the Team ID placeholder for a model with no team", async () => { + mockUseTeams.mockReturnValue({ + data: [{ team_id: "team-1", team_alias: "alpha" }], + isLoading: false, + error: null, + }); + const user = userEvent.setup(); + await enterEditMode(user); + + expect(screen.getByText("Select a team")).toBeInTheDocument(); + }); + + it.each(["Internal User", "Org Admin"])("only offers a %s the teams they administer", async (userRole) => { + mockUseTeams.mockReturnValue({ + data: [ + { team_id: "team-1", team_alias: "alpha", members_with_roles: [{ user_id: "123", role: "admin" }] }, + { team_id: "team-2", team_alias: "beta", members_with_roles: [{ user_id: "123", role: "user" }] }, + { team_id: "team-3", team_alias: "gamma", members_with_roles: [{ user_id: "123", role: "admin" }] }, + ], + isLoading: false, + error: null, + }); + const teamModel = { + ...defaultModelData, + model_info: { ...defaultModelData.model_info, team_id: "team-1" }, + }; + mockUseModelsInfo.mockReturnValue({ data: { data: [teamModel] }, isLoading: false, error: null }); + mockModelInfoV1Call.mockResolvedValue({ data: [teamModel] }); + const user = userEvent.setup(); + render(, { wrapper }); + await user.click(await screen.findByRole("button", { name: /edit settings/i })); + + await user.click(await screen.findByText("alpha (team-1)")); + + expect(await screen.findByRole("option", { name: "gamma (team-3)" })).toBeInTheDocument(); + expect(screen.queryByRole("option", { name: "beta (team-2)" })).not.toBeInTheDocument(); + }); + it("sends the edited LiteLLM extra params", async () => { const user = userEvent.setup(); await enterEditMode(user); diff --git a/ui/litellm-dashboard/src/components/model_info_view.tsx b/ui/litellm-dashboard/src/components/model_info_view.tsx index 35afcdb2985..bf7ab669ec0 100644 --- a/ui/litellm-dashboard/src/components/model_info_view.tsx +++ b/ui/litellm-dashboard/src/components/model_info_view.tsx @@ -23,6 +23,7 @@ import { isComplexityRouter as isComplexityRouterParams, } from "./add_model/auto_router_strategies"; import { canModifyModel } from "@/utils/modelPermissions"; +import { teamsUserCanAssign } from "@/utils/roles"; import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; import DeleteResourceModal from "./common_components/DeleteResourceModal"; import EditAutoRouterModal from "./edit_auto_router/edit_auto_router_modal"; @@ -174,6 +175,7 @@ export default function ModelInfoView({ isDbModel: modelData?.model_info?.db_model === true, }); const isAdmin = userRole === "Admin"; + const assignableTeams = useMemo(() => teamsUserCanAssign(teams ?? null, userRole, userID), [teams, userRole, userID]); // Editor-aware on purpose: an adaptive or quality router must not offer Edit Auto Router. const isAutoRouterModel = hasAutoRouterEditor(modelData?.litellm_params); // Broader than the editor check: adaptive and quality routers equally have no upstream @@ -420,6 +422,7 @@ export default function ModelInfoView({ health_check_model: values.health_check_model, }; } + if (values.team_id) updatedModelInfo = { ...updatedModelInfo, team_id: values.team_id }; updatedModelInfo = applyPtuModelInfo(updatedModelInfo, values, ptuCostAttributionEnabled); } catch (e) { toast.fromError("Invalid JSON in Model Info"); @@ -779,6 +782,7 @@ export default function ModelInfoView({ tagsList={tagsList} credentialsList={credentialsList} healthCheckModelOptions={healthCheckModelOptions} + teams={assignableTeams} /> ) : (

Loading...

diff --git a/ui/litellm-dashboard/src/utils/roles.ts b/ui/litellm-dashboard/src/utils/roles.ts index 62a5f02cc39..bab44c29dc1 100644 --- a/ui/litellm-dashboard/src/utils/roles.ts +++ b/ui/litellm-dashboard/src/utils/roles.ts @@ -46,6 +46,17 @@ export const isUserTeamAdminForSingleTeam = (teamMemberWithRoles: Member[] | nul return teamMemberWithRoles.some((member) => member.user_id === userID && member.role === "admin"); }; +export const teamsUserCanAssign = ( + teams: Team[] | null, + userRole: string | null, + userID: string | null, +): Team[] | null => { + if (teams == null || isProxyAdminRole(userRole ?? "")) { + return teams; + } + return teams.filter((team) => isUserTeamAdminForSingleTeam(team.members_with_roles, userID ?? "")); +}; + export const isOrgAdminForAnyOrg = ( organizations: Organization[] | null | undefined, userID: string | null | undefined,