From 60f98a05e7a2098dded919497e1c455b9fb00e0d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 15 Mar 2026 01:33:31 +0000
Subject: [PATCH] fix(ui): replace Tremor Icon with TableIconActionButton for
 attachment delete
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The delete button in the attachment table used a Tremor Icon component as
the direct child of antd's Tooltip. When antd's Tooltip uses cloneElement
to inject its ref and event handlers, it can interfere with the Icon's
click event propagation, preventing the delete modal from appearing.

Replace with the existing TableIconActionButton common component, which
places a <span> buffer between the Tooltip and the Icon — the same
pattern used in other working table action buttons (e.g. LoggingCallbacksTable).

Co-authored-by: Krish Dholakia <krrishdholakia@gmail.com>
---
 .../policies/attachment_table.test.tsx         |  4 ++++
 .../components/policies/attachment_table.tsx   | 18 ++++++++----------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/policies/attachment_table.test.tsx b/ui/litellm-dashboard/src/components/policies/attachment_table.test.tsx
index 4372983b71a..cb9319dfe33 100644
--- a/ui/litellm-dashboard/src/components/policies/attachment_table.test.tsx
+++ b/ui/litellm-dashboard/src/components/policies/attachment_table.test.tsx
@@ -15,6 +15,10 @@ vi.mock("@heroicons/react/outline", () => ({
   SwitchVerticalIcon: function SwitchVerticalIcon() { return null; },
   ChevronUpIcon: function ChevronUpIcon() { return null; },
   ChevronDownIcon: function ChevronDownIcon() { return null; },
+  PencilAltIcon: function PencilAltIcon() { return null; },
+  PlayIcon: function PlayIcon() { return null; },
+  RefreshIcon: function RefreshIcon() { return null; },
+  ExternalLinkIcon: function ExternalLinkIcon() { return null; },
 }));
 
 vi.mock("@tremor/react", async (importOriginal) => {
diff --git a/ui/litellm-dashboard/src/components/policies/attachment_table.tsx b/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
index d9de8378a8a..11ff32b34ff 100644
--- a/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
+++ b/ui/litellm-dashboard/src/components/policies/attachment_table.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Icon, Badge } from "@tremor/react";
-import { TrashIcon, SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Badge } from "@tremor/react";
+import { SwitchVerticalIcon, ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
 import { Tooltip, Tag } from "antd";
 import {
   ColumnDef,
@@ -12,6 +12,7 @@ import {
 } from "@tanstack/react-table";
 import { PolicyAttachment } from "./types";
 import ImpactPopover from "./impact_popover";
+import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
 
 interface AttachmentTableProps {
   attachments: PolicyAttachment[];
@@ -201,14 +202,11 @@ const AttachmentTable: React.FC<AttachmentTableProps> = ({
           <div className="flex space-x-2">
             <ImpactPopover attachment={attachment} accessToken={accessToken} />
             {isAdmin && (
-              <Tooltip title="Delete attachment">
-                <Icon
-                  icon={TrashIcon}
-                  size="sm"
-                  onClick={() => onDeleteClick(attachment.attachment_id)}
-                  className="cursor-pointer hover:text-red-500"
-                />
-              </Tooltip>
+              <TableIconActionButton
+                variant="Delete"
+                tooltipText="Delete attachment"
+                onClick={() => onDeleteClick(attachment.attachment_id)}
+              />
             )}
           </div>
         );