scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-07 02:59:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 103

fix(ui): replace Tremor Icon with TableIconActionButton for attachment delete

Browse source 
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>
This commit is contained in:
Cursor Agent 2026-03-15 01:33:31 +00:00
parent b96f033c90
commit 60f98a05e7
No known key found for this signature in database
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/litellm-dashboard/src/components/policies/attachment_table.test.tsx
View file

@ -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) => {

18
ui/litellm-dashboard/src/components/policies/attachment_table.tsx
View file

@ -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>
);