@@ -89,10 +89,6 @@ vi.mock("@/components/team/member_permissions", () => ({
default: vi.fn(() =>
Member Permissions
),
}));
-vi.mock("@/components/team/member_permissions", () => ({
- default: vi.fn(() =>
Member Permissions
),
-}));
-
import { useAllProxyModels } from "@/app/(dashboard)/hooks/models/useModels";
import { useOrganization } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
import { useTeam } from "@/app/(dashboard)/hooks/teams/useTeams";
@@ -335,10 +331,10 @@ describe("TeamInfoView", () => {
await user.click(settingsTab);
await waitFor(() => {
- expect(screen.getByRole("button", { name: "Edit Settings" })).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: /edit settings/i })).toBeInTheDocument();
});
- const editButton = screen.getByRole("button", { name: "Edit Settings" });
+ const editButton = screen.getByRole("button", { name: /edit settings/i });
await user.click(editButton);
await waitFor(() => {
@@ -361,17 +357,17 @@ describe("TeamInfoView", () => {
await user.click(settingsTab);
await waitFor(() => {
- expect(screen.getByRole("button", { name: "Edit Settings" })).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: /edit settings/i })).toBeInTheDocument();
});
- const editButton = screen.getByRole("button", { name: "Edit Settings" });
+ const editButton = screen.getByRole("button", { name: /edit settings/i });
await user.click(editButton);
await waitFor(() => {
expect(screen.getByLabelText("Team Name")).toBeInTheDocument();
});
- const cancelButton = screen.getByRole("button", { name: "Cancel" });
+ const cancelButton = screen.getByRole("button", { name: /cancel/i });
await user.click(cancelButton);
await waitFor(() => {
@@ -438,10 +434,10 @@ describe("TeamInfoView", () => {
await user.click(settingsTab);
await waitFor(() => {
- expect(screen.getByRole("button", { name: "Edit Settings" })).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: /edit settings/i })).toBeInTheDocument();
});
- const editButton = screen.getByRole("button", { name: "Edit Settings" });
+ const editButton = screen.getByRole("button", { name: /edit settings/i });
await user.click(editButton);
const secretField = await screen.findByPlaceholderText(
@@ -472,10 +468,10 @@ describe("TeamInfoView", () => {
await user.click(settingsTab);
await waitFor(() => {
- expect(screen.getByRole("button", { name: "Edit Settings" })).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: /edit settings/i })).toBeInTheDocument();
});
- const editButton = screen.getByRole("button", { name: "Edit Settings" });
+ const editButton = screen.getByRole("button", { name: /edit settings/i });
await user.click(editButton);
const secretField = await screen.findByPlaceholderText(
@@ -502,10 +498,10 @@ describe("TeamInfoView", () => {
await user.click(membersTab);
await waitFor(() => {
- expect(screen.getByRole("button", { name: "Add Member" })).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: /add member/i })).toBeInTheDocument();
});
- const addButton = screen.getByRole("button", { name: "Add Member" });
+ const addButton = screen.getByRole("button", { name: /add member/i });
await user.click(addButton);
await waitFor(() => {
@@ -603,6 +599,47 @@ describe("TeamInfoView", () => {
});
});
+ it("should open Settings tab by default when editTeam is true and user can edit", async () => {
+ vi.mocked(networking.teamInfoCall).mockResolvedValue(createMockTeamData());
+
+ renderWithProviders(
);
+
+ await waitFor(() => {
+ const teamNameElements = screen.queryAllByText("Test Team");
+ expect(teamNameElements.length).toBeGreaterThan(0);
+ });
+
+ expect(screen.getByText("Team Settings")).toBeInTheDocument();
+ });
+
+ it("should open Overview tab by default when editTeam is false", async () => {
+ vi.mocked(networking.teamInfoCall).mockResolvedValue(createMockTeamData());
+
+ renderWithProviders(
);
+
+ await waitFor(() => {
+ const teamNameElements = screen.queryAllByText("Test Team");
+ expect(teamNameElements.length).toBeGreaterThan(0);
+ });
+
+ expect(screen.getByText("Budget Status")).toBeInTheDocument();
+ });
+
+ it("should open Overview tab by default when editTeam is true but user cannot edit", async () => {
+ vi.mocked(networking.teamInfoCall).mockResolvedValue(createMockTeamData());
+
+ renderWithProviders(
+
+ );
+
+ await waitFor(() => {
+ const teamNameElements = screen.queryAllByText("Test Team");
+ expect(teamNameElements.length).toBeGreaterThan(0);
+ });
+
+ expect(screen.getByText("Budget Status")).toBeInTheDocument();
+ });
+
it("should display soft budget alerting emails in settings view when present", async () => {
const user = userEvent.setup();
vi.mocked(networking.teamInfoCall).mockResolvedValue(
diff --git a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
new file mode 100644
index 00000000000..d081538fb64
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
@@ -0,0 +1,1294 @@
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import UserSearchModal from "@/components/common_components/user_search_modal";
+import {
+ getGuardrailsList,
+ getPoliciesList,
+ getPolicyInfoWithGuardrails,
+ Member,
+ Organization,
+ organizationInfoCall,
+ teamInfoCall,
+ teamMemberAddCall,
+ teamMemberDeleteCall,
+ teamMemberUpdateCall,
+ teamUpdateCall,
+} from "@/components/networking";
+import { formatNumberWithCommas } from "@/utils/dataUtils";
+import { mapEmptyStringToNull } from "@/utils/keyUpdateUtils";
+import { isProxyAdminRole } from "@/utils/roles";
+import { EditOutlined, InfoCircleOutlined, SaveOutlined } from "@ant-design/icons";
+import { ArrowLeftIcon } from "@heroicons/react/outline";
+import { Badge, Card, Grid, Text, TextInput, Title } from "@tremor/react";
+import { Button, Form, Input, message, Select, Switch, Tabs, Tooltip } from "antd";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import React, { useEffect, useMemo, useState } from "react";
+import { copyToClipboard as utilCopyToClipboard } from "../../utils/dataUtils";
+import AgentSelector from "../agent_management/AgentSelector";
+import DeleteResourceModal from "../common_components/DeleteResourceModal";
+import DurationSelect from "../common_components/DurationSelect";
+import PassThroughRoutesSelector from "../common_components/PassThroughRoutesSelector";
+import { unfurlWildcardModelsInList } from "../key_team_helpers/fetch_available_models_team_key";
+import LoggingSettingsView from "../logging_settings_view";
+import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
+import MCPToolPermissions from "../mcp_server_management/MCPToolPermissions";
+import { ModelSelect } from "../ModelSelect/ModelSelect";
+import NotificationsManager from "../molecules/notifications_manager";
+import { fetchMCPAccessGroups } from "../networking";
+import ObjectPermissionsView from "../object_permissions_view";
+import NumericalInput from "../shared/numerical_input";
+import VectorStoreSelector from "../vector_store_management/VectorStoreSelector";
+import EditLoggingSettings from "./EditLoggingSettings";
+import MemberModal from "./EditMembership";
+import MemberPermissions from "./member_permissions";
+import {
+ getTeamInfoDefaultTab,
+ getTeamInfoVisibleTabs,
+ TEAM_INFO_TAB_KEYS,
+ TEAM_INFO_TAB_LABELS,
+} from "./tabVisibilityUtils";
+import TeamMembersComponent from "./TeamMemberTab";
+
+export interface TeamMembership {
+ user_id: string;
+ team_id: string;
+ budget_id: string;
+ spend: number;
+ litellm_budget_table: {
+ budget_id: string;
+ soft_budget: number | null;
+ max_budget: number | null;
+ max_parallel_requests: number | null;
+ tpm_limit: number | null;
+ rpm_limit: number | null;
+ model_max_budget: Record
| null;
+ budget_duration: string | null;
+ };
+}
+
+export interface TeamData {
+ team_id: string;
+ team_info: {
+ team_alias: string;
+ team_id: string;
+ organization_id: string | null;
+ admins: string[];
+ members: string[];
+ members_with_roles: Member[];
+ metadata: Record;
+ tpm_limit: number | null;
+ rpm_limit: number | null;
+ max_budget: number | null;
+ soft_budget?: number | null;
+ budget_duration: string | null;
+ models: string[];
+ blocked: boolean;
+ spend: number;
+ max_parallel_requests: number | null;
+ budget_reset_at: string | null;
+ model_id: string | null;
+ litellm_model_table: {
+ model_aliases: Record;
+ } | null;
+ created_at: string;
+ guardrails?: string[];
+ policies?: string[];
+ object_permission?: {
+ object_permission_id: string;
+ mcp_servers: string[];
+ mcp_access_groups?: string[];
+ mcp_tool_permissions?: Record;
+ vector_stores: string[];
+ agents?: string[];
+ agent_access_groups?: string[];
+ };
+ team_member_budget_table: {
+ max_budget: number;
+ budget_duration: string;
+ tpm_limit: number | null;
+ rpm_limit: number | null;
+ } | null;
+ };
+ keys: any[];
+ team_memberships: TeamMembership[];
+}
+
+export interface TeamInfoProps {
+ teamId: string;
+ onUpdate: (data: any) => void;
+ onClose: () => void;
+ accessToken: string | null;
+ is_team_admin: boolean;
+ is_proxy_admin: boolean;
+ userModels: string[];
+ editTeam: boolean;
+ premiumUser?: boolean;
+}
+
+const getOrganizationModels = (organization: Organization | null, userModels: string[]) => {
+ let tempModelsToPick = [];
+
+ if (organization) {
+ // Check if organization has "all-proxy-models" in its models array
+ if (organization.models.includes("all-proxy-models")) {
+ // Treat as all-proxy-models (use userModels)
+ tempModelsToPick = userModels;
+ } else if (organization.models.length > 0) {
+ // Organization has specific models
+ tempModelsToPick = organization.models;
+ } else {
+ // Empty array [] is treated as all-proxy-models
+ tempModelsToPick = userModels;
+ }
+ } else {
+ // No organization, show all available models
+ tempModelsToPick = userModels;
+ }
+
+ return unfurlWildcardModelsInList(tempModelsToPick, userModels);
+};
+
+const TeamInfoView: React.FC = ({
+ teamId,
+ onClose,
+ accessToken,
+ is_team_admin,
+ is_proxy_admin,
+ userModels,
+ editTeam,
+ premiumUser = false,
+ onUpdate,
+}) => {
+ const [teamData, setTeamData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
+ const [form] = Form.useForm();
+ const [isEditMemberModalVisible, setIsEditMemberModalVisible] = useState(false);
+ const [selectedEditMember, setSelectedEditMember] = useState(null);
+ const [isEditing, setIsEditing] = useState(false);
+ const [mcpAccessGroups, setMcpAccessGroups] = useState([]);
+ const [mcpAccessGroupsLoaded, setMcpAccessGroupsLoaded] = useState(false);
+ const [copiedStates, setCopiedStates] = useState>({});
+ const [guardrailsList, setGuardrailsList] = useState([]);
+ const [policiesList, setPoliciesList] = useState([]);
+ const [policyGuardrails, setPolicyGuardrails] = useState>({});
+ const [loadingPolicies, setLoadingPolicies] = useState(false);
+ const [memberToDelete, setMemberToDelete] = useState(null);
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+ const [isDeleting, setIsDeleting] = useState(false);
+ const [isTeamSaving, setIsTeamSaving] = useState(false);
+ const [organization, setOrganization] = useState(null);
+ const { userRole } = useAuthorized();
+
+ const canEditTeam = is_team_admin || is_proxy_admin;
+ const visibleTabs = useMemo(() => getTeamInfoVisibleTabs(canEditTeam), [canEditTeam]);
+ const defaultTabKey = useMemo(
+ () => getTeamInfoDefaultTab(editTeam, canEditTeam),
+ [editTeam, canEditTeam]
+ );
+
+ const fetchTeamInfo = async () => {
+ try {
+ setLoading(true);
+ if (!accessToken) return;
+ const response = await teamInfoCall(accessToken, teamId);
+ setTeamData(response);
+ } catch (error) {
+ NotificationsManager.fromBackend("Failed to load team information");
+ console.error("Error fetching team info:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchTeamInfo();
+ }, [teamId, accessToken]);
+
+ // Fetch organization data when team has organization_id
+ useEffect(() => {
+ const fetchOrganization = async () => {
+ if (!accessToken || !teamData?.team_info?.organization_id) {
+ setOrganization(null);
+ return;
+ }
+
+ try {
+ const orgData = await organizationInfoCall(accessToken, teamData.team_info.organization_id);
+ setOrganization(orgData);
+ } catch (error) {
+ console.error("Error fetching organization info:", error);
+ setOrganization(null);
+ }
+ };
+
+ fetchOrganization();
+ }, [accessToken, teamData?.team_info?.organization_id]);
+
+ // Compute modelsToPick based on organization and userModels
+ const modelsToPick = useMemo(() => {
+ return getOrganizationModels(organization, userModels);
+ }, [organization, userModels]);
+
+ const fetchMcpAccessGroups = async () => {
+ if (!accessToken) return;
+ if (mcpAccessGroupsLoaded) return;
+ try {
+ const groups = await fetchMCPAccessGroups(accessToken);
+ setMcpAccessGroups(groups);
+ setMcpAccessGroupsLoaded(true);
+ } catch (error) {
+ console.error("Failed to fetch MCP access groups:", error);
+ }
+ };
+
+ useEffect(() => {
+ const fetchGuardrails = async () => {
+ try {
+ if (!accessToken) return;
+ const response = await getGuardrailsList(accessToken);
+ const guardrailNames = response.guardrails.map((g: { guardrail_name: string }) => g.guardrail_name);
+ setGuardrailsList(guardrailNames);
+ } catch (error) {
+ console.error("Failed to fetch guardrails:", error);
+ }
+ };
+
+ const fetchPolicies = async () => {
+ try {
+ if (!accessToken) return;
+ const response = await getPoliciesList(accessToken);
+ const policyNames = response.policies.map((p: { policy_name: string }) => p.policy_name);
+ setPoliciesList(policyNames);
+ } catch (error) {
+ console.error("Failed to fetch policies:", error);
+ }
+ };
+
+ fetchGuardrails();
+ fetchPolicies();
+ }, [accessToken]);
+
+ // Fetch resolved guardrails for all policies
+ useEffect(() => {
+ const fetchPolicyGuardrails = async () => {
+ if (!accessToken || !teamData?.team_info?.policies || teamData.team_info.policies.length === 0) {
+ return;
+ }
+
+ setLoadingPolicies(true);
+ const guardrailsMap: Record = {};
+
+ try {
+ await Promise.all(
+ teamData.team_info.policies.map(async (policyName: string) => {
+ try {
+ const policyInfo = await getPolicyInfoWithGuardrails(accessToken, policyName);
+ guardrailsMap[policyName] = policyInfo.resolved_guardrails || [];
+ } catch (error) {
+ console.error(`Failed to fetch guardrails for policy ${policyName}:`, error);
+ guardrailsMap[policyName] = [];
+ }
+ })
+ );
+ setPolicyGuardrails(guardrailsMap);
+ } catch (error) {
+ console.error("Failed to fetch policy guardrails:", error);
+ } finally {
+ setLoadingPolicies(false);
+ }
+ };
+
+ fetchPolicyGuardrails();
+ }, [accessToken, teamData?.team_info?.policies]);
+
+ const handleMemberCreate = async (values: any) => {
+ try {
+ if (accessToken == null) return;
+
+ const member: Member = {
+ user_email: values.user_email,
+ user_id: values.user_id,
+ role: values.role,
+ };
+
+ await teamMemberAddCall(accessToken, teamId, member);
+
+ NotificationsManager.success("Team member added successfully");
+ setIsAddMemberModalVisible(false);
+ form.resetFields();
+
+ // Fetch updated team info
+ const updatedTeamData = await teamInfoCall(accessToken, teamId);
+ setTeamData(updatedTeamData);
+
+ // Notify parent component of the update
+ onUpdate(updatedTeamData);
+ } catch (error: any) {
+ let errMsg = "Failed to add team member";
+
+ if (error?.raw?.detail?.error?.includes("Assigning team admins is a premium feature")) {
+ errMsg = "Assigning admins is an enterprise-only feature. Please upgrade your LiteLLM plan to enable this.";
+ } else if (error?.message) {
+ errMsg = error.message;
+ }
+
+ NotificationsManager.fromBackend(errMsg);
+ console.error("Error adding team member:", error);
+ }
+ };
+
+ const handleMemberUpdate = async (values: any) => {
+ try {
+ if (accessToken == null) {
+ return;
+ }
+
+ const member: Member = {
+ user_email: values.user_email,
+ user_id: values.user_id,
+ role: values.role,
+ max_budget_in_team: values.max_budget_in_team,
+ tpm_limit: values.tpm_limit,
+ rpm_limit: values.rpm_limit,
+ };
+ message.destroy(); // Remove all existing toasts
+
+ await teamMemberUpdateCall(accessToken, teamId, member);
+
+ NotificationsManager.success("Team member updated successfully");
+ setIsEditMemberModalVisible(false);
+
+ // Fetch updated team info
+ const updatedTeamData = await teamInfoCall(accessToken, teamId);
+ setTeamData(updatedTeamData);
+
+ // Notify parent component of the update
+ onUpdate(updatedTeamData);
+ } catch (error: any) {
+ let errMsg = "Failed to update team member";
+ if (error?.raw?.detail?.includes("Assigning team admins is a premium feature")) {
+ errMsg = "Assigning admins is an enterprise-only feature. Please upgrade your LiteLLM plan to enable this.";
+ } else if (error?.message) {
+ errMsg = error.message;
+ }
+ setIsEditMemberModalVisible(false);
+
+ message.destroy(); // Remove all existing toasts
+
+ NotificationsManager.fromBackend(errMsg);
+ console.error("Error updating team member:", error);
+ }
+ };
+
+ const handleMemberDelete = (member: Member) => {
+ setMemberToDelete(member);
+ setIsDeleteModalOpen(true);
+ };
+
+ const handleDeleteConfirm = async () => {
+ if (!memberToDelete || !accessToken) return;
+
+ setIsDeleting(true);
+ try {
+ await teamMemberDeleteCall(accessToken, teamId, memberToDelete);
+
+ NotificationsManager.success("Team member removed successfully");
+
+ // Fetch updated team info
+ const updatedTeamData = await teamInfoCall(accessToken, teamId);
+ setTeamData(updatedTeamData);
+
+ // Notify parent component of the update
+ onUpdate(updatedTeamData);
+ } catch (error) {
+ NotificationsManager.fromBackend("Failed to remove team member");
+ console.error("Error removing team member:", error);
+ } finally {
+ setIsDeleting(false);
+ setIsDeleteModalOpen(false);
+ setMemberToDelete(null);
+ }
+ };
+
+ const handleDeleteCancel = () => {
+ setIsDeleteModalOpen(false);
+ setMemberToDelete(null);
+ };
+
+ const handleTeamUpdate = async (values: any) => {
+ try {
+ if (!accessToken) return;
+ setIsTeamSaving(true);
+
+ let parsedMetadata = {};
+ try {
+ const rawMetadata = values.metadata ? JSON.parse(values.metadata) : {};
+ // Exclude soft_budget_alerting_emails from parsed metadata since it's handled separately
+ const { soft_budget_alerting_emails, ...rest } = rawMetadata;
+ parsedMetadata = rest;
+ } catch (e) {
+ NotificationsManager.fromBackend("Invalid JSON in metadata field");
+ return;
+ }
+
+ let secretManagerSettings: Record | undefined;
+ if (typeof values.secret_manager_settings === "string") {
+ const trimmedSecretConfig = values.secret_manager_settings.trim();
+ if (trimmedSecretConfig.length > 0) {
+ try {
+ secretManagerSettings = JSON.parse(values.secret_manager_settings);
+ } catch (e) {
+ NotificationsManager.fromBackend("Invalid JSON in secret manager settings");
+ return;
+ }
+ }
+ }
+
+ const sanitizeNumeric = (v: any) => {
+ if (v === null || v === undefined) return null;
+ if (typeof v === "string" && v.trim() === "") return null;
+ if (typeof v === "number" && Number.isNaN(v)) return null;
+ return v;
+ };
+
+ const updateData: any = {
+ team_id: teamId,
+ team_alias: values.team_alias,
+ models: values.models,
+ tpm_limit: sanitizeNumeric(values.tpm_limit),
+ rpm_limit: sanitizeNumeric(values.rpm_limit),
+ max_budget: values.max_budget,
+ soft_budget: sanitizeNumeric(values.soft_budget),
+ budget_duration: values.budget_duration,
+ metadata: {
+ ...parsedMetadata,
+ ...(values.guardrails?.length > 0 ? { guardrails: values.guardrails } : {}),
+ ...(values.logging_settings?.length > 0 ? { logging: values.logging_settings } : {}),
+ disable_global_guardrails: values.disable_global_guardrails || false,
+ soft_budget_alerting_emails:
+ typeof values.soft_budget_alerting_emails === "string"
+ ? values.soft_budget_alerting_emails
+ .split(",")
+ .map((email: string) => email.trim())
+ .filter((email: string) => email.length > 0)
+ : values.soft_budget_alerting_emails || [],
+ ...(secretManagerSettings !== undefined ? { secret_manager_settings: secretManagerSettings } : {}),
+ },
+ ...(values.policies?.length > 0 ? { policies: values.policies } : {}),
+ organization_id: values.organization_id,
+ };
+
+ updateData.max_budget = mapEmptyStringToNull(updateData.max_budget);
+ updateData.team_member_budget_duration = values.team_member_budget_duration;
+
+ if (values.team_member_budget !== undefined) {
+ updateData.team_member_budget = Number(values.team_member_budget);
+ }
+
+ if (values.team_member_key_duration !== undefined) {
+ updateData.team_member_key_duration = values.team_member_key_duration;
+ }
+
+ if (values.team_member_tpm_limit !== undefined || values.team_member_rpm_limit !== undefined) {
+ updateData.team_member_tpm_limit = sanitizeNumeric(values.team_member_tpm_limit);
+ updateData.team_member_rpm_limit = sanitizeNumeric(values.team_member_rpm_limit);
+ }
+
+ // Handle object_permission updates
+ const { servers, accessGroups } = values.mcp_servers_and_groups || {
+ servers: [],
+ accessGroups: [],
+ };
+ const serverIds = new Set(servers || []);
+ const mcpToolPermissions = Object.fromEntries(
+ Object.entries(values.mcp_tool_permissions || {}).filter(([serverId]) => serverIds.has(serverId)),
+ );
+
+ updateData.object_permission = {};
+ if (servers) {
+ updateData.object_permission.mcp_servers = servers;
+ }
+ if (accessGroups) {
+ updateData.object_permission.mcp_access_groups = accessGroups;
+ }
+ if (mcpToolPermissions) {
+ updateData.object_permission.mcp_tool_permissions = mcpToolPermissions;
+ }
+ delete values.mcp_servers_and_groups;
+ delete values.mcp_tool_permissions;
+
+ // Handle agent permissions
+ const { agents, accessGroups: agentAccessGroups } = values.agents_and_groups || {
+ agents: [],
+ accessGroups: [],
+ };
+ if (agents && agents.length > 0) {
+ updateData.object_permission.agents = agents;
+ }
+ if (agentAccessGroups && agentAccessGroups.length > 0) {
+ updateData.object_permission.agent_access_groups = agentAccessGroups;
+ }
+ delete values.agents_and_groups;
+
+ // Handle vector stores permissions
+ if (values.vector_stores && values.vector_stores.length > 0) {
+ updateData.object_permission.vector_stores = values.vector_stores;
+ }
+
+ const response = await teamUpdateCall(accessToken, updateData);
+
+ NotificationsManager.success("Team settings updated successfully");
+ setIsEditing(false);
+ fetchTeamInfo();
+ } catch (error) {
+ console.error("Error updating team:", error);
+ } finally {
+ setIsTeamSaving(false);
+ }
+ };
+
+ if (loading) {
+ return Loading...
;
+ }
+
+ if (!teamData?.team_info) {
+ return Team not found
;
+ }
+
+ const { team_info: info } = teamData;
+
+ const copyToClipboard = async (text: string, key: string) => {
+ const success = await utilCopyToClipboard(text);
+ if (success) {
+ setCopiedStates((prev) => ({ ...prev, [key]: true }));
+ setTimeout(() => {
+ setCopiedStates((prev) => ({ ...prev, [key]: false }));
+ }, 2000);
+ }
+ };
+
+ return (
+
+
+
+
}
+ onClick={onClose}
+ className="mb-4"
+ >
+ Back to Teams
+
+
{info.team_alias}
+
+ {info.team_id}
+ : }
+ onClick={() => copyToClipboard(info.team_id, "team-id")}
+ className={`left-2 z-10 transition-all duration-200 ${copiedStates["team-id"]
+ ? "text-green-600 bg-green-50 border-green-200"
+ : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+ }`}
+ />
+
+
+
+
+
+
+ Budget Status
+
+
${formatNumberWithCommas(info.spend, 4)}
+
+ of {info.max_budget === null ? "Unlimited" : `$${formatNumberWithCommas(info.max_budget, 4)}`}
+
+ {info.budget_duration && Reset: {info.budget_duration}}
+
+ {info.team_member_budget_table && (
+
+ Team Member Budget: ${formatNumberWithCommas(info.team_member_budget_table.max_budget, 4)}
+
+ )}
+
+
+
+
+ Rate Limits
+
+ TPM: {info.tpm_limit || "Unlimited"}
+ RPM: {info.rpm_limit || "Unlimited"}
+ {info.max_parallel_requests && Max Parallel Requests: {info.max_parallel_requests}}
+
+
+
+
+ Models
+
+ {info.models.length === 0 ? (
+ All proxy models
+ ) : (
+ info.models.map((model, index) => (
+
+ {model}
+
+ ))
+ )}
+
+
+
+
+ Virtual Keys
+
+ User Keys: {teamData.keys.filter((key) => key.user_id).length}
+ Service Account Keys: {teamData.keys.filter((key) => !key.user_id).length}
+ Total: {teamData.keys.length}
+
+
+
+
+
+
+ Guardrails
+ {info.guardrails && info.guardrails.length > 0 ? (
+
+ {info.guardrails.map((guardrail: string, index: number) => (
+
+ {guardrail}
+
+ ))}
+
+ ) : (
+ No guardrails configured
+ )}
+ {info.metadata?.disable_global_guardrails && (
+
+ Global Guardrails Disabled
+
+ )}
+
+
+
+ Policies
+ {info.policies && info.policies.length > 0 ? (
+
+ {info.policies.map((policy: string, index: number) => (
+
+
+ {policy}
+ {loadingPolicies && Loading guardrails...}
+
+ {!loadingPolicies && policyGuardrails[policy] && policyGuardrails[policy].length > 0 && (
+
+
Resolved Guardrails:
+
+ {policyGuardrails[policy].map((guardrail: string, gIndex: number) => (
+
+ {guardrail}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+
Team Settings
+ {canEditTeam && !isEditing && (
+ } onClick={() => setIsEditing(true)}>Edit Settings
+ )}
+
+
+ {isEditing ? (
+
+ ) : (
+
+
+
Team Name
+
{info.team_alias}
+
+
+
Team ID
+
{info.team_id}
+
+
+
Created At
+
{new Date(info.created_at).toLocaleString()}
+
+
+
Models
+
+ {info.models.map((model, index) => (
+
+ {model}
+
+ ))}
+
+
+
+
Rate Limits
+
TPM: {info.tpm_limit || "Unlimited"}
+
RPM: {info.rpm_limit || "Unlimited"}
+
+
+
Team Budget
+
+ Max Budget:{" "}
+ {info.max_budget !== null ? `$${formatNumberWithCommas(info.max_budget, 4)}` : "No Limit"}
+
+
+ Soft Budget:{" "}
+ {info.soft_budget !== null && info.soft_budget !== undefined
+ ? `$${formatNumberWithCommas(info.soft_budget, 4)}`
+ : "No Limit"}
+
+
Budget Reset: {info.budget_duration || "Never"}
+ {info.metadata?.soft_budget_alerting_emails &&
+ Array.isArray(info.metadata.soft_budget_alerting_emails) &&
+ info.metadata.soft_budget_alerting_emails.length > 0 && (
+
+ Soft Budget Alerting Emails: {info.metadata.soft_budget_alerting_emails.join(", ")}
+
+ )}
+
+
+
+ Team Member Settings{" "}
+
+
+
+
+
Max Budget: {info.team_member_budget_table?.max_budget || "No Limit"}
+
Budget Duration: {info.team_member_budget_table?.budget_duration || "No Limit"}
+
Key Duration: {info.metadata?.team_member_key_duration || "No Limit"}
+
TPM Limit: {info.team_member_budget_table?.tpm_limit || "No Limit"}
+
RPM Limit: {info.team_member_budget_table?.rpm_limit || "No Limit"}
+
+
+
Organization ID
+
{info.organization_id}
+
+
+ Status
+ {info.blocked ? "Blocked" : "Active"}
+
+
+
+
Disable Global Guardrails
+
+ {info.metadata?.disable_global_guardrails === true ? (
+ Enabled - Global guardrails bypassed
+ ) : (
+ Disabled - Global guardrails active
+ )}
+
+
+
+
+
+
+
+ {info.metadata?.secret_manager_settings && (
+
+
Secret Manager Settings
+
+ {JSON.stringify(info.metadata.secret_manager_settings, null, 2)}
+
+
+ )}
+
+
{
+ const membership = teamData.team_memberships.find(
+ (tm) => tm.user_id === record.user_id
+ );
+ const enhancedMember = {
+ ...record,
+ max_budget_in_team:
+ membership?.litellm_budget_table?.max_budget || null,
+ tpm_limit:
+ membership?.litellm_budget_table?.tpm_limit || null,
+ rpm_limit:
+ membership?.litellm_budget_table?.rpm_limit || null,
+ };
+ setSelectedEditMember(enhancedMember);
+ setIsEditMemberModalVisible(true);
+ }}
+ />
+ {(isProxyAdmin ||
+ (isUserTeamAdmin && !disableTeamAdminDeleteTeamUser)) && (
+ handleMemberDelete(record)}
+ />
+ )}
+
+
record.user_id || String(index)}
+ pagination={false}
+ size="small"
+ scroll={{ x: "max-content" }}
+ />
+ }
+ type="primary"
+ onClick={() => setIsAddMemberModalVisible(true)}
+ >
+ Add Member
+
+
+ );
+};
diff --git a/ui/litellm-dashboard/src/components/team/tabVisibilityUtils.test.ts b/ui/litellm-dashboard/src/components/team/tabVisibilityUtils.test.ts
new file mode 100644
index 00000000000..5a09b4fa36c
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/team/tabVisibilityUtils.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import {
+ getTeamInfoDefaultTab,
+ getTeamInfoVisibleTabs,
+ isTeamInfoTabVisible,
+ TEAM_INFO_TAB_KEYS,
+ TEAM_INFO_TAB_LABELS,
+} from "./tabVisibilityUtils";
+
+describe("team_info_tabs", () => {
+ describe("TEAM_INFO_TAB_LABELS", () => {
+ it("should have label for every tab key", () => {
+ expect(TEAM_INFO_TAB_LABELS[TEAM_INFO_TAB_KEYS.OVERVIEW]).toBe("Overview");
+ expect(TEAM_INFO_TAB_LABELS[TEAM_INFO_TAB_KEYS.MEMBERS]).toBe("Members");
+ expect(TEAM_INFO_TAB_LABELS[TEAM_INFO_TAB_KEYS.MEMBER_PERMISSIONS]).toBe("Member Permissions");
+ expect(TEAM_INFO_TAB_LABELS[TEAM_INFO_TAB_KEYS.SETTINGS]).toBe("Settings");
+ });
+ });
+
+ describe("getTeamInfoVisibleTabs", () => {
+ it("returns only overview when user cannot edit team", () => {
+ const tabs = getTeamInfoVisibleTabs(false);
+ expect(tabs).toEqual([TEAM_INFO_TAB_KEYS.OVERVIEW]);
+ });
+
+ it("returns all tabs when user can edit team", () => {
+ const tabs = getTeamInfoVisibleTabs(true);
+ expect(tabs).toEqual([
+ TEAM_INFO_TAB_KEYS.OVERVIEW,
+ TEAM_INFO_TAB_KEYS.MEMBERS,
+ TEAM_INFO_TAB_KEYS.MEMBER_PERMISSIONS,
+ TEAM_INFO_TAB_KEYS.SETTINGS,
+ ]);
+ });
+ });
+
+ describe("getTeamInfoDefaultTab", () => {
+ it("returns overview when editTeam is false", () => {
+ expect(getTeamInfoDefaultTab(false, true)).toBe(TEAM_INFO_TAB_KEYS.OVERVIEW);
+ expect(getTeamInfoDefaultTab(false, false)).toBe(TEAM_INFO_TAB_KEYS.OVERVIEW);
+ });
+
+ it("returns settings when editTeam is true and user can edit", () => {
+ expect(getTeamInfoDefaultTab(true, true)).toBe(TEAM_INFO_TAB_KEYS.SETTINGS);
+ });
+
+ it("returns overview when editTeam is true but user cannot edit", () => {
+ expect(getTeamInfoDefaultTab(true, false)).toBe(TEAM_INFO_TAB_KEYS.OVERVIEW);
+ });
+ });
+
+ describe("isTeamInfoTabVisible", () => {
+ it("always returns true for overview tab", () => {
+ expect(isTeamInfoTabVisible(TEAM_INFO_TAB_KEYS.OVERVIEW, false)).toBe(true);
+ expect(isTeamInfoTabVisible(TEAM_INFO_TAB_KEYS.OVERVIEW, true)).toBe(true);
+ });
+
+ it("returns false for members tab when user cannot edit", () => {
+ expect(isTeamInfoTabVisible(TEAM_INFO_TAB_KEYS.MEMBERS, false)).toBe(false);
+ });
+
+ it("returns true for members tab when user can edit", () => {
+ expect(isTeamInfoTabVisible(TEAM_INFO_TAB_KEYS.MEMBERS, true)).toBe(true);
+ });
+
+ it("returns false for settings tab when user cannot edit", () => {
+ expect(isTeamInfoTabVisible(TEAM_INFO_TAB_KEYS.SETTINGS, false)).toBe(false);
+ });
+
+ it("returns true for settings tab when user can edit", () => {
+ expect(isTeamInfoTabVisible(TEAM_INFO_TAB_KEYS.SETTINGS, true)).toBe(true);
+ });
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/team/tabVisibilityUtils.ts b/ui/litellm-dashboard/src/components/team/tabVisibilityUtils.ts
new file mode 100644
index 00000000000..d77230ea09b
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/team/tabVisibilityUtils.ts
@@ -0,0 +1,59 @@
+/**
+ * Team info tab configuration and permission logic.
+ * Extracted for testability - permission rules can be unit tested in isolation.
+ */
+
+export const TEAM_INFO_TAB_KEYS = {
+ OVERVIEW: "overview",
+ MEMBERS: "members",
+ MEMBER_PERMISSIONS: "member-permissions",
+ SETTINGS: "settings",
+} as const;
+
+export const TEAM_INFO_TAB_LABELS: Record = {
+ [TEAM_INFO_TAB_KEYS.OVERVIEW]: "Overview",
+ [TEAM_INFO_TAB_KEYS.MEMBERS]: "Members",
+ [TEAM_INFO_TAB_KEYS.MEMBER_PERMISSIONS]: "Member Permissions",
+ [TEAM_INFO_TAB_KEYS.SETTINGS]: "Settings",
+};
+
+/**
+ * Returns the list of tab keys that should be visible based on permissions.
+ * - Overview: always visible
+ * - Members, Member Permissions, Settings: only when canEditTeam is true
+ */
+export function getTeamInfoVisibleTabs(canEditTeam: boolean): readonly string[] {
+ const baseTabs = [TEAM_INFO_TAB_KEYS.OVERVIEW];
+ if (canEditTeam) {
+ return [
+ ...baseTabs,
+ TEAM_INFO_TAB_KEYS.MEMBERS,
+ TEAM_INFO_TAB_KEYS.MEMBER_PERMISSIONS,
+ TEAM_INFO_TAB_KEYS.SETTINGS,
+ ];
+ }
+ return baseTabs;
+}
+
+/**
+ * Returns the default active tab key based on permissions and edit intent.
+ * - When editTeam is true and user can edit: open Settings tab
+ * - Otherwise: open Overview tab
+ */
+export function getTeamInfoDefaultTab(editTeam: boolean, canEditTeam: boolean): string {
+ if (editTeam && canEditTeam) {
+ return TEAM_INFO_TAB_KEYS.SETTINGS;
+ }
+ return TEAM_INFO_TAB_KEYS.OVERVIEW;
+}
+
+/**
+ * Checks if a specific tab should be visible based on permissions.
+ */
+export function isTeamInfoTabVisible(
+ tabKey: string,
+ canEditTeam: boolean
+): boolean {
+ const visibleTabs = getTeamInfoVisibleTabs(canEditTeam);
+ return visibleTabs.includes(tabKey);
+}
diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx
deleted file mode 100644
index 014f8fb9010..00000000000
--- a/ui/litellm-dashboard/src/components/team/team_info.tsx
+++ /dev/null
@@ -1,1296 +0,0 @@
-import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
-import UserSearchModal from "@/components/common_components/user_search_modal";
-import {
- getGuardrailsList,
- getPoliciesList,
- getPolicyInfoWithGuardrails,
- Member,
- Organization,
- organizationInfoCall,
- teamInfoCall,
- teamMemberAddCall,
- teamMemberDeleteCall,
- teamMemberUpdateCall,
- teamUpdateCall,
-} from "@/components/networking";
-import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { mapEmptyStringToNull } from "@/utils/keyUpdateUtils";
-import { isProxyAdminRole } from "@/utils/roles";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { ArrowLeftIcon } from "@heroicons/react/outline";
-import {
- Badge,
- Card,
- Grid,
- Tab,
- TabGroup,
- TabList,
- TabPanel,
- TabPanels,
- Text,
- TextInput,
- Title,
- Button as TremorButton,
-} from "@tremor/react";
-import { Button, Form, Input, message, Select, Switch, Tooltip } from "antd";
-import { CheckIcon, CopyIcon } from "lucide-react";
-import React, { useEffect, useMemo, useState } from "react";
-import { copyToClipboard as utilCopyToClipboard } from "../../utils/dataUtils";
-import AgentSelector from "../agent_management/AgentSelector";
-import DeleteResourceModal from "../common_components/DeleteResourceModal";
-import DurationSelect from "../common_components/DurationSelect";
-import PassThroughRoutesSelector from "../common_components/PassThroughRoutesSelector";
-import { unfurlWildcardModelsInList } from "../key_team_helpers/fetch_available_models_team_key";
-import LoggingSettingsView from "../logging_settings_view";
-import MCPServerSelector from "../mcp_server_management/MCPServerSelector";
-import MCPToolPermissions from "../mcp_server_management/MCPToolPermissions";
-import { ModelSelect } from "../ModelSelect/ModelSelect";
-import NotificationsManager from "../molecules/notifications_manager";
-import { fetchMCPAccessGroups } from "../networking";
-import ObjectPermissionsView from "../object_permissions_view";
-import NumericalInput from "../shared/numerical_input";
-import VectorStoreSelector from "../vector_store_management/VectorStoreSelector";
-import EditLoggingSettings from "./EditLoggingSettings";
-import MemberModal from "./EditMembership";
-import MemberPermissions from "./member_permissions";
-import TeamMembersComponent from "./team_member_view";
-
-export interface TeamMembership {
- user_id: string;
- team_id: string;
- budget_id: string;
- spend: number;
- litellm_budget_table: {
- budget_id: string;
- soft_budget: number | null;
- max_budget: number | null;
- max_parallel_requests: number | null;
- tpm_limit: number | null;
- rpm_limit: number | null;
- model_max_budget: Record | null;
- budget_duration: string | null;
- };
-}
-
-export interface TeamData {
- team_id: string;
- team_info: {
- team_alias: string;
- team_id: string;
- organization_id: string | null;
- admins: string[];
- members: string[];
- members_with_roles: Member[];
- metadata: Record;
- tpm_limit: number | null;
- rpm_limit: number | null;
- max_budget: number | null;
- soft_budget?: number | null;
- budget_duration: string | null;
- models: string[];
- blocked: boolean;
- spend: number;
- max_parallel_requests: number | null;
- budget_reset_at: string | null;
- model_id: string | null;
- litellm_model_table: {
- model_aliases: Record;
- } | null;
- created_at: string;
- guardrails?: string[];
- policies?: string[];
- object_permission?: {
- object_permission_id: string;
- mcp_servers: string[];
- mcp_access_groups?: string[];
- mcp_tool_permissions?: Record;
- vector_stores: string[];
- agents?: string[];
- agent_access_groups?: string[];
- };
- team_member_budget_table: {
- max_budget: number;
- budget_duration: string;
- tpm_limit: number | null;
- rpm_limit: number | null;
- } | null;
- };
- keys: any[];
- team_memberships: TeamMembership[];
-}
-
-export interface TeamInfoProps {
- teamId: string;
- onUpdate: (data: any) => void;
- onClose: () => void;
- accessToken: string | null;
- is_team_admin: boolean;
- is_proxy_admin: boolean;
- userModels: string[];
- editTeam: boolean;
- premiumUser?: boolean;
-}
-
-const getOrganizationModels = (organization: Organization | null, userModels: string[]) => {
- let tempModelsToPick = [];
-
- if (organization) {
- // Check if organization has "all-proxy-models" in its models array
- if (organization.models.includes("all-proxy-models")) {
- // Treat as all-proxy-models (use userModels)
- tempModelsToPick = userModels;
- } else if (organization.models.length > 0) {
- // Organization has specific models
- tempModelsToPick = organization.models;
- } else {
- // Empty array [] is treated as all-proxy-models
- tempModelsToPick = userModels;
- }
- } else {
- // No organization, show all available models
- tempModelsToPick = userModels;
- }
-
- return unfurlWildcardModelsInList(tempModelsToPick, userModels);
-};
-
-const TeamInfoView: React.FC = ({
- teamId,
- onClose,
- accessToken,
- is_team_admin,
- is_proxy_admin,
- userModels,
- editTeam,
- premiumUser = false,
- onUpdate,
-}) => {
- const [teamData, setTeamData] = useState(null);
- const [loading, setLoading] = useState(true);
- const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
- const [form] = Form.useForm();
- const [isEditMemberModalVisible, setIsEditMemberModalVisible] = useState(false);
- const [selectedEditMember, setSelectedEditMember] = useState(null);
- const [isEditing, setIsEditing] = useState(false);
- const [mcpAccessGroups, setMcpAccessGroups] = useState([]);
- const [mcpAccessGroupsLoaded, setMcpAccessGroupsLoaded] = useState(false);
- const [copiedStates, setCopiedStates] = useState>({});
- const [guardrailsList, setGuardrailsList] = useState([]);
- const [policiesList, setPoliciesList] = useState([]);
- const [policyGuardrails, setPolicyGuardrails] = useState>({});
- const [loadingPolicies, setLoadingPolicies] = useState(false);
- const [memberToDelete, setMemberToDelete] = useState(null);
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
- const [isDeleting, setIsDeleting] = useState(false);
- const [isTeamSaving, setIsTeamSaving] = useState(false);
- const [organization, setOrganization] = useState(null);
- const { userRole } = useAuthorized();
-
- const canEditTeam = is_team_admin || is_proxy_admin;
-
- const fetchTeamInfo = async () => {
- try {
- setLoading(true);
- if (!accessToken) return;
- const response = await teamInfoCall(accessToken, teamId);
- setTeamData(response);
- } catch (error) {
- NotificationsManager.fromBackend("Failed to load team information");
- console.error("Error fetching team info:", error);
- } finally {
- setLoading(false);
- }
- };
-
- useEffect(() => {
- fetchTeamInfo();
- }, [teamId, accessToken]);
-
- // Fetch organization data when team has organization_id
- useEffect(() => {
- const fetchOrganization = async () => {
- if (!accessToken || !teamData?.team_info?.organization_id) {
- setOrganization(null);
- return;
- }
-
- try {
- const orgData = await organizationInfoCall(accessToken, teamData.team_info.organization_id);
- setOrganization(orgData);
- } catch (error) {
- console.error("Error fetching organization info:", error);
- setOrganization(null);
- }
- };
-
- fetchOrganization();
- }, [accessToken, teamData?.team_info?.organization_id]);
-
- // Compute modelsToPick based on organization and userModels
- const modelsToPick = useMemo(() => {
- return getOrganizationModels(organization, userModels);
- }, [organization, userModels]);
-
- const fetchMcpAccessGroups = async () => {
- if (!accessToken) return;
- if (mcpAccessGroupsLoaded) return;
- try {
- const groups = await fetchMCPAccessGroups(accessToken);
- setMcpAccessGroups(groups);
- setMcpAccessGroupsLoaded(true);
- } catch (error) {
- console.error("Failed to fetch MCP access groups:", error);
- }
- };
-
- useEffect(() => {
- const fetchGuardrails = async () => {
- try {
- if (!accessToken) return;
- const response = await getGuardrailsList(accessToken);
- const guardrailNames = response.guardrails.map((g: { guardrail_name: string }) => g.guardrail_name);
- setGuardrailsList(guardrailNames);
- } catch (error) {
- console.error("Failed to fetch guardrails:", error);
- }
- };
-
- const fetchPolicies = async () => {
- try {
- if (!accessToken) return;
- const response = await getPoliciesList(accessToken);
- const policyNames = response.policies.map((p: { policy_name: string }) => p.policy_name);
- setPoliciesList(policyNames);
- } catch (error) {
- console.error("Failed to fetch policies:", error);
- }
- };
-
- fetchGuardrails();
- fetchPolicies();
- }, [accessToken]);
-
- // Fetch resolved guardrails for all policies
- useEffect(() => {
- const fetchPolicyGuardrails = async () => {
- if (!accessToken || !teamData?.team_info?.policies || teamData.team_info.policies.length === 0) {
- return;
- }
-
- setLoadingPolicies(true);
- const guardrailsMap: Record = {};
-
- try {
- await Promise.all(
- teamData.team_info.policies.map(async (policyName: string) => {
- try {
- const policyInfo = await getPolicyInfoWithGuardrails(accessToken, policyName);
- guardrailsMap[policyName] = policyInfo.resolved_guardrails || [];
- } catch (error) {
- console.error(`Failed to fetch guardrails for policy ${policyName}:`, error);
- guardrailsMap[policyName] = [];
- }
- })
- );
- setPolicyGuardrails(guardrailsMap);
- } catch (error) {
- console.error("Failed to fetch policy guardrails:", error);
- } finally {
- setLoadingPolicies(false);
- }
- };
-
- fetchPolicyGuardrails();
- }, [accessToken, teamData?.team_info?.policies]);
-
- const handleMemberCreate = async (values: any) => {
- try {
- if (accessToken == null) return;
-
- const member: Member = {
- user_email: values.user_email,
- user_id: values.user_id,
- role: values.role,
- };
-
- await teamMemberAddCall(accessToken, teamId, member);
-
- NotificationsManager.success("Team member added successfully");
- setIsAddMemberModalVisible(false);
- form.resetFields();
-
- // Fetch updated team info
- const updatedTeamData = await teamInfoCall(accessToken, teamId);
- setTeamData(updatedTeamData);
-
- // Notify parent component of the update
- onUpdate(updatedTeamData);
- } catch (error: any) {
- let errMsg = "Failed to add team member";
-
- if (error?.raw?.detail?.error?.includes("Assigning team admins is a premium feature")) {
- errMsg = "Assigning admins is an enterprise-only feature. Please upgrade your LiteLLM plan to enable this.";
- } else if (error?.message) {
- errMsg = error.message;
- }
-
- NotificationsManager.fromBackend(errMsg);
- console.error("Error adding team member:", error);
- }
- };
-
- const handleMemberUpdate = async (values: any) => {
- try {
- if (accessToken == null) {
- return;
- }
-
- const member: Member = {
- user_email: values.user_email,
- user_id: values.user_id,
- role: values.role,
- max_budget_in_team: values.max_budget_in_team,
- tpm_limit: values.tpm_limit,
- rpm_limit: values.rpm_limit,
- };
- console.log("Updating member with values:", member);
- message.destroy(); // Remove all existing toasts
-
- await teamMemberUpdateCall(accessToken, teamId, member);
-
- NotificationsManager.success("Team member updated successfully");
- setIsEditMemberModalVisible(false);
-
- // Fetch updated team info
- const updatedTeamData = await teamInfoCall(accessToken, teamId);
- setTeamData(updatedTeamData);
-
- // Notify parent component of the update
- onUpdate(updatedTeamData);
- } catch (error: any) {
- let errMsg = "Failed to update team member";
- if (error?.raw?.detail?.includes("Assigning team admins is a premium feature")) {
- errMsg = "Assigning admins is an enterprise-only feature. Please upgrade your LiteLLM plan to enable this.";
- } else if (error?.message) {
- errMsg = error.message;
- }
- setIsEditMemberModalVisible(false);
-
- message.destroy(); // Remove all existing toasts
-
- NotificationsManager.fromBackend(errMsg);
- console.error("Error updating team member:", error);
- }
- };
-
- const handleMemberDelete = (member: Member) => {
- setMemberToDelete(member);
- setIsDeleteModalOpen(true);
- };
-
- const handleDeleteConfirm = async () => {
- if (!memberToDelete || !accessToken) return;
-
- setIsDeleting(true);
- try {
- await teamMemberDeleteCall(accessToken, teamId, memberToDelete);
-
- NotificationsManager.success("Team member removed successfully");
-
- // Fetch updated team info
- const updatedTeamData = await teamInfoCall(accessToken, teamId);
- setTeamData(updatedTeamData);
-
- // Notify parent component of the update
- onUpdate(updatedTeamData);
- } catch (error) {
- NotificationsManager.fromBackend("Failed to remove team member");
- console.error("Error removing team member:", error);
- } finally {
- setIsDeleting(false);
- setIsDeleteModalOpen(false);
- setMemberToDelete(null);
- }
- };
-
- const handleDeleteCancel = () => {
- setIsDeleteModalOpen(false);
- setMemberToDelete(null);
- };
-
- const handleTeamUpdate = async (values: any) => {
- try {
- if (!accessToken) return;
- setIsTeamSaving(true);
-
- let parsedMetadata = {};
- try {
- const rawMetadata = values.metadata ? JSON.parse(values.metadata) : {};
- // Exclude soft_budget_alerting_emails from parsed metadata since it's handled separately
- const { soft_budget_alerting_emails, ...rest } = rawMetadata;
- parsedMetadata = rest;
- } catch (e) {
- NotificationsManager.fromBackend("Invalid JSON in metadata field");
- return;
- }
-
- let secretManagerSettings: Record | undefined;
- if (typeof values.secret_manager_settings === "string") {
- const trimmedSecretConfig = values.secret_manager_settings.trim();
- if (trimmedSecretConfig.length > 0) {
- try {
- secretManagerSettings = JSON.parse(values.secret_manager_settings);
- } catch (e) {
- NotificationsManager.fromBackend("Invalid JSON in secret manager settings");
- return;
- }
- }
- }
-
- const sanitizeNumeric = (v: any) => {
- if (v === null || v === undefined) return null;
- if (typeof v === "string" && v.trim() === "") return null;
- if (typeof v === "number" && Number.isNaN(v)) return null;
- return v;
- };
-
- const updateData: any = {
- team_id: teamId,
- team_alias: values.team_alias,
- models: values.models,
- tpm_limit: sanitizeNumeric(values.tpm_limit),
- rpm_limit: sanitizeNumeric(values.rpm_limit),
- max_budget: values.max_budget,
- soft_budget: sanitizeNumeric(values.soft_budget),
- budget_duration: values.budget_duration,
- metadata: {
- ...parsedMetadata,
- ...(values.guardrails?.length > 0 ? { guardrails: values.guardrails } : {}),
- ...(values.logging_settings?.length > 0 ? { logging: values.logging_settings } : {}),
- disable_global_guardrails: values.disable_global_guardrails || false,
- soft_budget_alerting_emails:
- typeof values.soft_budget_alerting_emails === "string"
- ? values.soft_budget_alerting_emails
- .split(",")
- .map((email: string) => email.trim())
- .filter((email: string) => email.length > 0)
- : values.soft_budget_alerting_emails || [],
- ...(secretManagerSettings !== undefined ? { secret_manager_settings: secretManagerSettings } : {}),
- },
- ...(values.policies?.length > 0 ? { policies: values.policies } : {}),
- organization_id: values.organization_id,
- };
-
- updateData.max_budget = mapEmptyStringToNull(updateData.max_budget);
- updateData.team_member_budget_duration = values.team_member_budget_duration;
-
- if (values.team_member_budget !== undefined) {
- updateData.team_member_budget = Number(values.team_member_budget);
- }
-
- if (values.team_member_key_duration !== undefined) {
- updateData.team_member_key_duration = values.team_member_key_duration;
- }
-
- if (values.team_member_tpm_limit !== undefined || values.team_member_rpm_limit !== undefined) {
- updateData.team_member_tpm_limit = sanitizeNumeric(values.team_member_tpm_limit);
- updateData.team_member_rpm_limit = sanitizeNumeric(values.team_member_rpm_limit);
- }
-
- // Handle object_permission updates
- const { servers, accessGroups } = values.mcp_servers_and_groups || {
- servers: [],
- accessGroups: [],
- };
- const serverIds = new Set(servers || []);
- const mcpToolPermissions = Object.fromEntries(
- Object.entries(values.mcp_tool_permissions || {}).filter(([serverId]) => serverIds.has(serverId)),
- );
-
- updateData.object_permission = {};
- if (servers) {
- updateData.object_permission.mcp_servers = servers;
- }
- if (accessGroups) {
- updateData.object_permission.mcp_access_groups = accessGroups;
- }
- if (mcpToolPermissions) {
- updateData.object_permission.mcp_tool_permissions = mcpToolPermissions;
- }
- delete values.mcp_servers_and_groups;
- delete values.mcp_tool_permissions;
-
- // Handle agent permissions
- const { agents, accessGroups: agentAccessGroups } = values.agents_and_groups || {
- agents: [],
- accessGroups: [],
- };
- if (agents && agents.length > 0) {
- updateData.object_permission.agents = agents;
- }
- if (agentAccessGroups && agentAccessGroups.length > 0) {
- updateData.object_permission.agent_access_groups = agentAccessGroups;
- }
- delete values.agents_and_groups;
-
- // Handle vector stores permissions
- if (values.vector_stores && values.vector_stores.length > 0) {
- updateData.object_permission.vector_stores = values.vector_stores;
- }
-
- const response = await teamUpdateCall(accessToken, updateData);
-
- NotificationsManager.success("Team settings updated successfully");
- setIsEditing(false);
- fetchTeamInfo();
- } catch (error) {
- console.error("Error updating team:", error);
- } finally {
- setIsTeamSaving(false);
- }
- };
-
- if (loading) {
- return Loading...
;
- }
-
- if (!teamData?.team_info) {
- return Team not found
;
- }
-
- const { team_info: info } = teamData;
-
- const copyToClipboard = async (text: string, key: string) => {
- const success = await utilCopyToClipboard(text);
- if (success) {
- setCopiedStates((prev) => ({ ...prev, [key]: true }));
- setTimeout(() => {
- setCopiedStates((prev) => ({ ...prev, [key]: false }));
- }, 2000);
- }
- };
-
- return (
-
-
-
-
- Back to Teams
-
-
{info.team_alias}
-
- {info.team_id}
- : }
- onClick={() => copyToClipboard(info.team_id, "team-id")}
- className={`left-2 z-10 transition-all duration-200 ${copiedStates["team-id"]
- ? "text-green-600 bg-green-50 border-green-200"
- : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
- }`}
- />
-
-
-
-
-
-
- {[
- Overview,
- ...(canEditTeam
- ? [
- Members,
- Member Permissions,
- Settings,
- ]
- : []),
- ]}
-
-
-
- {/* Overview Panel */}
-
-
-
- Budget Status
-
-
${formatNumberWithCommas(info.spend, 4)}
-
- of {info.max_budget === null ? "Unlimited" : `$${formatNumberWithCommas(info.max_budget, 4)}`}
-
- {info.budget_duration && Reset: {info.budget_duration}}
-
- {info.team_member_budget_table && (
-
- Team Member Budget: ${formatNumberWithCommas(info.team_member_budget_table.max_budget, 4)}
-
- )}
-
-
-
-
- Rate Limits
-
- TPM: {info.tpm_limit || "Unlimited"}
- RPM: {info.rpm_limit || "Unlimited"}
- {info.max_parallel_requests && Max Parallel Requests: {info.max_parallel_requests}}
-
-
-
-
- Models
-
- {info.models.length === 0 ? (
- All proxy models
- ) : (
- info.models.map((model, index) => (
-
- {model}
-
- ))
- )}
-
-
-
-
- Virtual Keys
-
- User Keys: {teamData.keys.filter((key) => key.user_id).length}
- Service Account Keys: {teamData.keys.filter((key) => !key.user_id).length}
- Total: {teamData.keys.length}
-
-
-
-
-
-
- Guardrails
- {info.guardrails && info.guardrails.length > 0 ? (
-
- {info.guardrails.map((guardrail: string, index: number) => (
-
- {guardrail}
-
- ))}
-
- ) : (
- No guardrails configured
- )}
- {info.metadata?.disable_global_guardrails && (
-
- Global Guardrails Disabled
-
- )}
-
-
-
- Policies
- {info.policies && info.policies.length > 0 ? (
-
- {info.policies.map((policy: string, index: number) => (
-
-
- {policy}
- {loadingPolicies && Loading guardrails...}
-
- {!loadingPolicies && policyGuardrails[policy] && policyGuardrails[policy].length > 0 && (
-
-
Resolved Guardrails:
-
- {policyGuardrails[policy].map((guardrail: string, gIndex: number) => (
-
- {guardrail}
-
- ))}
-
-
- )}
-
- ))}
-
-
Team Settings
- {canEditTeam && !isEditing && (
- setIsEditing(true)}>Edit Settings
- )}
-
-
- {isEditing ? (
-
- ) : (
-
-
-
Team Name
-
{info.team_alias}
-
-
-
Team ID
-
{info.team_id}
-
-
-
Created At
-
{new Date(info.created_at).toLocaleString()}
-
-
-
Models
-
- {info.models.map((model, index) => (
-
- {model}
-
- ))}
-
-
-
-
Rate Limits
-
TPM: {info.tpm_limit || "Unlimited"}
-
RPM: {info.rpm_limit || "Unlimited"}
-
-
-
Team Budget
-
- Max Budget:{" "}
- {info.max_budget !== null ? `$${formatNumberWithCommas(info.max_budget, 4)}` : "No Limit"}
-
-
- Soft Budget:{" "}
- {info.soft_budget !== null && info.soft_budget !== undefined
- ? `$${formatNumberWithCommas(info.soft_budget, 4)}`
- : "No Limit"}
-
-
Budget Reset: {info.budget_duration || "Never"}
- {info.metadata?.soft_budget_alerting_emails &&
- Array.isArray(info.metadata.soft_budget_alerting_emails) &&
- info.metadata.soft_budget_alerting_emails.length > 0 && (
-
- Soft Budget Alerting Emails: {info.metadata.soft_budget_alerting_emails.join(", ")}
-
- )}
-
-
-
- Team Member Settings{" "}
-
-
-
-
-
Max Budget: {info.team_member_budget_table?.max_budget || "No Limit"}
-
Budget Duration: {info.team_member_budget_table?.budget_duration || "No Limit"}
-
Key Duration: {info.metadata?.team_member_key_duration || "No Limit"}
-
TPM Limit: {info.team_member_budget_table?.tpm_limit || "No Limit"}
-
RPM Limit: {info.team_member_budget_table?.rpm_limit || "No Limit"}
-
-
-
Organization ID
-
{info.organization_id}
-
-
- Status
- {info.blocked ? "Blocked" : "Active"}
-
-
-
-
Disable Global Guardrails
-
- {info.metadata?.disable_global_guardrails === true ? (
- Enabled - Global guardrails bypassed
- ) : (
- Disabled - Global guardrails active
- )}
-
-
-
-
-
-
-
- {info.metadata?.secret_manager_settings && (
-
-
Secret Manager Settings
-
- {JSON.stringify(info.metadata.secret_manager_settings, null, 2)}
-
-
- )}
-
-
-
setIsEditMemberModalVisible(false)}
- onSubmit={handleMemberUpdate}
- initialData={selectedEditMember}
- mode="edit"
- config={{
- title: "Edit Member",
- showEmail: true,
- showUserId: true,
- roleOptions: [
- { label: "Admin", value: "admin" },
- { label: "User", value: "user" },
- ],
- additionalFields: [
- {
- name: "max_budget_in_team",
- label: (
-
- Team Member Budget (USD){" "}
-
-
-
-
- ),
- type: "numerical" as const,
- step: 0.01,
- min: 0,
- placeholder: "Budget limit for this member within this team",
- },
- {
- name: "tpm_limit",
- label: (
-
- Team Member TPM Limit{" "}
-
-
-
-
- ),
- type: "numerical" as const,
- step: 1,
- min: 0,
- placeholder: "Tokens per minute limit for this member in this team",
- },
- {
- name: "rpm_limit",
- label: (
-
- Team Member RPM Limit{" "}
-
-
-
-
- ),
- type: "numerical" as const,
- step: 1,
- min: 0,
- placeholder: "Requests per minute limit for this member in this team",
- },
- ],
- }}
- />
-
- setIsAddMemberModalVisible(false)}
- onSubmit={handleMemberCreate}
- accessToken={accessToken}
- />
-
- {/* Delete Member Confirmation Modal */}
-
-
-
-
-
-
-
- User ID
- User Email
- Role
-
- Team Member Spend (USD){" "}
-
-
-
-
- Team Member Budget (USD)
-
- Team Member Rate Limits{" "}
-
-
-
-
-
- Actions
-
-
-
-
-
- {teamData.team_info.members_with_roles.map((member: Member, index: number) => (
-
-
- {member.user_id}
-
-
- {member.user_email ? member.user_email : "No Email"}
-
-
- {member.role}
-
-
- ${formatNumberWithCommas(getUserSpend(member.user_id), 4)}
-
-
-
- {getUserBudget(member.user_id)
- ? `$${formatNumberWithCommas(Number(getUserBudget(member.user_id)), 4)}`
- : "No Limit"}
-
-
-
- {getUserRateLimits(member.user_id)}
-
-
- {canEditTeam && (
-
-
{
- // Get budget and rate limit data from team membership
- const membership = teamData.team_memberships.find((tm) => tm.user_id === member.user_id);
- const enhancedMember = {
- ...member,
- max_budget_in_team: membership?.litellm_budget_table?.max_budget || null,
- tpm_limit: membership?.litellm_budget_table?.tpm_limit || null,
- rpm_limit: membership?.litellm_budget_table?.rpm_limit || null,
- };
- setSelectedEditMember(enhancedMember);
- setIsEditMemberModalVisible(true);
- }}
- />
- {(isProxyAdmin || (isUserTeamAdmin && !disableTeamAdminDeleteTeamUser)) && (
- handleMemberDelete(member)}
- />
- )}
-
-
-
setIsAddMemberModalVisible(true)}>Add Member
-