Merge pull request #17068 from BerriAI/litellm_additional_delete_resource_modal

yuneng-jiang · web-flow · commit babee43ddeb2 · 2025-11-24T20:58:46.000-08:00
[Feature] Change Delete Modals to Common Component
diff --git a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
@@ -57,10 +57,6 @@ export default function DeleteResourceModal({
     >
       <div className="space-y-4">
         {alertMessage && <Alert message={alertMessage} type="warning" />}
-        <div>
-          <Text>{message}</Text>
-        </div>
-
         <div className="mt-4 p-4 bg-red-50 rounded-lg border border-red-200">
           <Title level={5} className="mb-3 text-gray-900">
             {resourceInformationTitle}
@@ -74,18 +70,23 @@ export default function DeleteResourceModal({
               ))}
           </Descriptions>
         </div>
+        <div>
+          <Text>{message}</Text>
+        </div>
         {requiredConfirmation && (
-          <div className="mb-5">
+          <div className="mb-6 mt-4 pt-4 border-t border-gray-200">
             <Text className="block text-base font-medium text-gray-700 mb-2">
-              {`Type `}
-              <span className="underline">{requiredConfirmation}</span>
-              {` to confirm deletion:`}
+              <Text>Type </Text>
+              <Text strong type="danger">
+                {requiredConfirmation}
+              </Text>
+              <Text> to confirm deletion:</Text>
             </Text>
             <Input
               value={requiredConfirmationInput}
               onChange={(e) => setRequiredConfirmationInput(e.target.value)}
               placeholder={requiredConfirmation}
-              className="rounded-md"
+              className="rounded-md text-base border-gray-200"
               autoFocus
             />
           </div>
diff --git a/ui/litellm-dashboard/src/components/guardrails.test.tsx b/ui/litellm-dashboard/src/components/guardrails.test.tsx
@@ -0,0 +1,104 @@
+import { render, screen } from "@testing-library/react";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import GuardrailsPanel from "./guardrails";
+import { getGuardrailsList } from "./networking";
+
+vi.mock("./networking", () => ({
+  getGuardrailsList: vi.fn(),
+  deleteGuardrailCall: vi.fn(),
+}));
+
+vi.mock("./guardrails/add_guardrail_form", () => ({
+  __esModule: true,
+  default: () => <div>Mock Add Guardrail Form</div>,
+}));
+
+vi.mock("./guardrails/guardrail_table", () => ({
+  __esModule: true,
+  default: ({ guardrailsList, onDeleteClick }: any) => (
+    <div>
+      <div>Mock Guardrail Table</div>
+      {guardrailsList.length > 0 && (
+        <button
+          data-testid="delete-button"
+          onClick={() => onDeleteClick(guardrailsList[0].guardrail_id, guardrailsList[0].guardrail_name)}
+        >
+          Delete
+        </button>
+      )}
+    </div>
+  ),
+}));
+
+vi.mock("./guardrails/guardrail_info", () => ({
+  __esModule: true,
+  default: () => <div>Mock Guardrail Info View</div>,
+}));
+
+vi.mock("./guardrails/GuardrailTestPlayground", () => ({
+  __esModule: true,
+  default: () => <div>Mock Guardrail Test Playground</div>,
+}));
+
+vi.mock("@/utils/roles", () => ({
+  isAdminRole: vi.fn((role: string) => role === "admin"),
+}));
+
+vi.mock("./guardrails/guardrail_info_helpers", () => ({
+  getGuardrailLogoAndName: vi.fn(() => ({
+    logo: null,
+    displayName: "Test Provider",
+  })),
+}));
+
+beforeAll(() => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+});
+
+describe("GuardrailsPanel", () => {
+  const defaultProps = {
+    accessToken: "test-token",
+    userRole: "admin",
+  };
+
+  const mockGetGuardrailsList = vi.mocked(getGuardrailsList);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetGuardrailsList.mockResolvedValue({
+      guardrails: [
+        {
+          guardrail_id: "test-guardrail-1",
+          guardrail_name: "Test Guardrail",
+          litellm_params: {
+            guardrail: "test-provider",
+            mode: "async",
+            default_on: true,
+          },
+          guardrail_info: null,
+          created_at: "2024-01-01T00:00:00Z",
+          updated_at: "2024-01-01T00:00:00Z",
+          guardrail_definition_location: "database" as any,
+        },
+      ],
+    });
+  });
+
+  it("should render the component", async () => {
+    render(<GuardrailsPanel {...defaultProps} />);
+    expect(screen.getByText("Guardrails")).toBeInTheDocument();
+    expect(screen.getByText("+ Add New Guardrail")).toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/guardrails.tsx b/ui/litellm-dashboard/src/components/guardrails.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { Button, TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
-import { Modal } from "antd";
 import { getGuardrailsList, deleteGuardrailCall } from "./networking";
 import AddGuardrailForm from "./guardrails/add_guardrail_form";
 import GuardrailTable from "./guardrails/guardrail_table";
@@ -9,6 +8,8 @@ import GuardrailInfoView from "./guardrails/guardrail_info";
 import GuardrailTestPlayground from "./guardrails/GuardrailTestPlayground";
 import NotificationsManager from "./molecules/notifications_manager";
 import { Guardrail, GuardrailDefinitionLocation } from "./guardrails/types";
+import DeleteResourceModal from "./common_components/DeleteResourceModal";
+import { getGuardrailLogoAndName } from "./guardrails/guardrail_info_helpers";
 
 interface GuardrailsPanelProps {
   accessToken: string | null;
@@ -38,7 +39,8 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken, userRole
   const [isAddModalVisible, setIsAddModalVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
-  const [guardrailToDelete, setGuardrailToDelete] = useState<{ id: string; name: string } | null>(null);
+  const [guardrailToDelete, setGuardrailToDelete] = useState<Guardrail | null>(null);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedGuardrailId, setSelectedGuardrailId] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<number>(0);
 
@@ -81,7 +83,9 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken, userRole
   };
 
   const handleDeleteClick = (guardrailId: string, guardrailName: string) => {
-    setGuardrailToDelete({ id: guardrailId, name: guardrailName });
+    const guardrail = guardrailsList.find((g) => g.guardrail_id === guardrailId) || null;
+    setGuardrailToDelete(guardrail);
+    setIsDeleteModalOpen(true);
   };
 
   const handleDeleteConfirm = async () => {
@@ -90,22 +94,29 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken, userRole
     // Log removed to maintain clean production code
     setIsDeleting(true);
     try {
-      await deleteGuardrailCall(accessToken, guardrailToDelete.id);
-      NotificationsManager.success(`Guardrail "${guardrailToDelete.name}" deleted successfully`);
-      fetchGuardrails(); // Refresh the list
+      await deleteGuardrailCall(accessToken, guardrailToDelete.guardrail_id);
+      NotificationsManager.success(`Guardrail "${guardrailToDelete.guardrail_name}" deleted successfully`);
+      await fetchGuardrails(); // Refresh the list
     } catch (error) {
       console.error("Error deleting guardrail:", error);
       NotificationsManager.fromBackend("Failed to delete guardrail");
     } finally {
       setIsDeleting(false);
+      setIsDeleteModalOpen(false);
       setGuardrailToDelete(null);
     }
   };
 
   const handleDeleteCancel = () => {
+    setIsDeleteModalOpen(false);
     setGuardrailToDelete(null);
   };
 
+  const providerDisplayName =
+    guardrailToDelete && guardrailToDelete.litellm_params
+      ? getGuardrailLogoAndName(guardrailToDelete.litellm_params.guardrail).displayName
+      : undefined;
+
   return (
     <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
       <TabGroup index={activeTab} onIndexChange={setActiveTab}>
@@ -148,20 +159,25 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken, userRole
               onSuccess={handleSuccess}
             />
 
-            {guardrailToDelete && (
-              <Modal
-                title="Delete Guardrail"
-                open={guardrailToDelete !== null}
-                onOk={handleDeleteConfirm}
-                onCancel={handleDeleteCancel}
-                confirmLoading={isDeleting}
-                okText="Delete"
-                okButtonProps={{ danger: true }}
-              >
-                <p>Are you sure you want to delete guardrail: {guardrailToDelete.name} ?</p>
-                <p>This action cannot be undone.</p>
-              </Modal>
-            )}
+            <DeleteResourceModal
+              isOpen={isDeleteModalOpen}
+              title="Delete Guardrail"
+              message={`Are you sure you want to delete guardrail: ${guardrailToDelete?.guardrail_name}? This action cannot be undone.`}
+              resourceInformationTitle="Guardrail Information"
+              resourceInformation={[
+                { label: "Name", value: guardrailToDelete?.guardrail_name },
+                { label: "ID", value: guardrailToDelete?.guardrail_id, code: true },
+                { label: "Provider", value: providerDisplayName },
+                { label: "Mode", value: guardrailToDelete?.litellm_params.mode },
+                {
+                  label: "Default On",
+                  value: guardrailToDelete?.litellm_params.default_on ? "Yes" : "No",
+                },
+              ]}
+              onCancel={handleDeleteCancel}
+              onOk={handleDeleteConfirm}
+              confirmLoading={isDeleting}
+            />
           </TabPanel>
 
           <TabPanel>
diff --git a/ui/litellm-dashboard/src/components/organizations.tsx b/ui/litellm-dashboard/src/components/organizations.tsx
@@ -32,6 +32,7 @@ import VectorStoreSelector from "./vector_store_management/VectorStoreSelector";
 import MCPServerSelector from "./mcp_server_management/MCPServerSelector";
 import { formatNumberWithCommas } from "../utils/dataUtils";
 import NotificationsManager from "./molecules/notifications_manager";
+import DeleteResourceModal from "./common_components/DeleteResourceModal";
 
 interface OrganizationsTableProps {
   organizations: Organization[];
@@ -70,6 +71,7 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
   const [editOrg, setEditOrg] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [orgToDelete, setOrgToDelete] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [isOrgModalVisible, setIsOrgModalVisible] = useState(false);
   const [form] = Form.useForm();
   const [expandedAccordions, setExpandedAccordions] = useState<Record<string, boolean>>({});
@@ -91,15 +93,18 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
     if (!orgToDelete || !accessToken) return;
 
     try {
+      setIsDeleting(true);
       await organizationDeleteCall(accessToken, orgToDelete);
       NotificationsManager.success("Organization deleted successfully");
 
       setIsDeleteModalOpen(false);
       setOrgToDelete(null);
       // Refresh organizations list
-      fetchOrganizations(accessToken, setOrganizations);
+      await fetchOrganizations(accessToken, setOrganizations);
     } catch (error) {
       console.error("Error deleting organization:", error);
+    } finally {
+      setIsDeleting(false);
     }
   };
 
@@ -506,40 +511,16 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
         </Form>
       </Modal>
 
-      {isDeleteModalOpen ? (
-        <div className="fixed z-10 inset-0 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div className="fixed inset-0 transition-opacity" aria-hidden="true">
-              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
-            </div>
-
-            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-              &#8203;
-            </span>
-
-            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                <div className="sm:flex sm:items-start">
-                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900">Delete Organization</h3>
-                    <div className="mt-2">
-                      <p className="text-sm text-gray-500">Are you sure you want to delete this organization?</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                <Button onClick={confirmDelete} color="red" className="ml-2">
-                  Delete
-                </Button>
-                <Button onClick={cancelDelete}>Cancel</Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <></>
-      )}
+      <DeleteResourceModal
+        isOpen={isDeleteModalOpen}
+        title="Delete Organization?"
+        message="Are you sure you want to delete this organization? This action cannot be undone."
+        resourceInformationTitle="Organization Information"
+        resourceInformation={[{ label: "Organization ID", value: orgToDelete, code: true }]}
+        onCancel={cancelDelete}
+        onOk={confirmDelete}
+        confirmLoading={isDeleting}
+      />
     </div>
   );
 };
diff --git a/ui/litellm-dashboard/src/components/settings.tsx b/ui/litellm-dashboard/src/components/settings.tsx
diff --git a/ui/litellm-dashboard/src/components/team/team_info.tsx b/ui/litellm-dashboard/src/components/team/team_info.tsx
