From 02873cf9923d106c528d57a4ff51ebf45332b355 Mon Sep 17 00:00:00 2001 From: yuneng-jiang Date: Sat, 22 Nov 2025 19:24:25 -0800 Subject: [PATCH] Minor cosmetic changes for buttons, add notification for delete team (#16984) --- .../src/components/OldTeams.tsx | 32 ++++++++++++------- .../src/components/model_info_view.tsx | 2 +- .../src/components/team/team_info.tsx | 13 +++----- .../components/templates/key_info_view.tsx | 2 +- 4 files changed, 26 insertions(+), 23 deletions(-) diff --git a/ui/litellm-dashboard/src/components/OldTeams.tsx b/ui/litellm-dashboard/src/components/OldTeams.tsx index 638d2bf1735..6a8313e56b2 100644 --- a/ui/litellm-dashboard/src/components/OldTeams.tsx +++ b/ui/litellm-dashboard/src/components/OldTeams.tsx @@ -1,6 +1,7 @@ import AvailableTeamsPanel from "@/components/team/available_teams"; import TeamInfoView from "@/components/team/team_info"; import TeamSSOSettings from "@/components/TeamSSOSettings"; +import { updateExistingKeys } from "@/utils/dataUtils"; import { isAdminRole } from "@/utils/roles"; import { InfoCircleOutlined } from "@ant-design/icons"; import { ChevronDownIcon, ChevronRightIcon, PencilAltIcon, RefreshIcon, TrashIcon } from "@heroicons/react/outline"; @@ -33,6 +34,7 @@ import { import { Button as Button2, Form, Input, Modal, Select as Select2, Switch, Tooltip, Typography } from "antd"; import React, { useEffect, useState } from "react"; import { formatNumberWithCommas } from "../utils/dataUtils"; +import DeleteResourceModal from "./common_components/DeleteResourceModal"; import { fetchTeams } from "./common_components/fetch_teams"; import ModelAliasManager from "./common_components/ModelAliasManager"; import PremiumLoggingSettings from "./common_components/PremiumLoggingSettings"; @@ -45,7 +47,15 @@ import type { KeyResponse, Team } from "./key_team_helpers/key_list"; import MCPServerSelector from "./mcp_server_management/MCPServerSelector"; import MCPToolPermissions from "./mcp_server_management/MCPToolPermissions"; import NotificationsManager from "./molecules/notifications_manager"; -import { Organization, fetchMCPAccessGroups, getGuardrailsList, teamDeleteCall } from "./networking"; +import { + Member, + Organization, + fetchMCPAccessGroups, + getGuardrailsList, + teamCreateCall, + teamDeleteCall, + v2TeamListCall, +} from "./networking"; import NumericalInput from "./shared/numerical_input"; import VectorStoreSelector from "./vector_store_management/VectorStoreSelector"; @@ -75,10 +85,6 @@ interface EditTeamModalProps { onSubmit: (data: FormData) => void; // Assuming FormData is the type of data to be submitted } -import { updateExistingKeys } from "@/utils/dataUtils"; -import DeleteResourceModal from "./common_components/DeleteResourceModal"; -import { Member, teamCreateCall, v2TeamListCall } from "./networking"; - interface TeamInfo { members_with_roles: Member[]; } @@ -331,11 +337,10 @@ const Teams: React.FC = ({ try { setIsTeamDeleting(true); await teamDeleteCall(accessToken, teamToDelete.team_id); - // Successfully completed the deletion. Update the state to trigger a rerender. await fetchTeams(accessToken, userID, userRole, currentOrg, setTeams); + NotificationsManager.success("Team deleted successfully"); } catch (error) { - console.error("Error deleting the team:", error); - // Handle any error situations, such as displaying an error message to the user. + NotificationsManager.fromBackend("Error deleting the team: " + error); } finally { setIsTeamDeleting(false); setIsDeleteModalOpen(false); @@ -344,7 +349,6 @@ const Teams: React.FC = ({ }; const cancelDelete = () => { - // Close the confirmation modal and reset the teamToDelete setIsDeleteModalOpen(false); setTeamToDelete(null); }; @@ -1276,10 +1280,14 @@ const Teams: React.FC = ({ valuePropName="checked" help="Bypass global guardrails for this team" > - setIsDeleteModalOpen(true)} - className="flex items-center text-red-500 border-red-500" + className="flex items-center text-red-500 border-red-500 hover:text-red-700" disabled={!canEditModel} data-testid="delete-model-button" > diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx index 3e7f12e751d..0dada8bb79f 100644 --- a/ui/litellm-dashboard/src/components/team/team_info.tsx +++ b/ui/litellm-dashboard/src/components/team/team_info.tsx @@ -359,9 +359,7 @@ const TeamInfoView: React.FC = ({ }; const serverIds = new Set(servers || []); const mcpToolPermissions = Object.fromEntries( - Object.entries(values.mcp_tool_permissions || {}).filter(([serverId]) => - serverIds.has(serverId) - ) + Object.entries(values.mcp_tool_permissions || {}).filter(([serverId]) => serverIds.has(serverId)), ); updateData.object_permission = {}; @@ -687,10 +685,7 @@ const TeamInfoView: React.FC = ({ valuePropName="checked" help="Bypass global guardrails for this team" > - + @@ -761,9 +756,9 @@ const TeamInfoView: React.FC = ({
- + Save Changes
diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx index 135d693d27f..ec2b294d9de 100644 --- a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx +++ b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx @@ -359,7 +359,7 @@ export default function KeyInfoView({ icon={TrashIcon} variant="secondary" onClick={() => setIsDeleteModalOpen(true)} - className="flex items-center" + className="flex items-center text-red-500 border-red-500 hover:text-red-700" > Delete Key