scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-04 02:31:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 69

refactor(ui): move CopyableBadge copy affordance back onto the badge

Browse source 
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
ryan 2026-07-23 00:49:18 +00:00
parent 1022425f30
commit 431e1a2052
2 changed files with 13 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ui/litellm-dashboard/src/components/shared/copyable_badge.test.tsx
View file

@ -22,12 +22,6 @@ const renderBadge = (value: string, maxWidthClassName?: string) =>
</TooltipProvider>,
);
const openTooltip = (value: string) => {
const trigger = screen.getByText(value).parentElement!;
fireEvent.pointerEnter(trigger, { pointerType: "mouse" });
fireEvent.mouseEnter(trigger);
};
describe("CopyableBadge", () => {
it("renders the value truncated in the badge", () => {
renderBadge("app-aigateway-inference-producttech-product-default");
@ -36,22 +30,15 @@ describe("CopyableBadge", () => {
expect(label.className).toContain("max-w-[130px]");
});
it("reveals the full value and copies it from the hover tooltip", async () => {
it("copies the full value from the copy button on the badge", async () => {
renderBadge("team-alias-long-name");
openTooltip("team-alias-long-name");
const copyButton = await screen.findByRole("button", { name: "Copy team-alias-long-name" });
const copyButton = screen.getByRole("button", { name: "Copy team-alias-long-name" });
fireEvent.click(copyButton);
await waitFor(() => expect(writeText).toHaveBeenCalledWith("team-alias-long-name"));
});
it("does not expose the copy affordance until hovered", () => {
renderBadge("my-team");
expect(screen.queryByRole("button", { name: "Copy my-team" })).not.toBeInTheDocument();
});
it("honors a custom max width", () => {
renderBadge("short", "max-w-[120px]");
expect(screen.getByText("short").className).toContain("max-w-[120px]");

29
ui/litellm-dashboard/src/components/shared/copyable_badge.tsx
View file

@ -20,23 +20,16 @@ export function CopyableBadge({
dataTestId,
}: CopyableBadgeProps) {
return (
<Tooltip>
<TooltipTrigger
render={
<Tag color={color} className="m-0 max-w-full cursor-default" data-testid={dataTestId}>
<span className={cn("block truncate", maxWidthClassName)}>{value}</span>
</Tag>
}
/>
<TooltipContent className="max-w-sm">
<span className="break-all">{value}</span>
<CopyButton
value={value}
label={`Copy ${value}`}
iconClassName="size-3"
className="text-background/70 hover:bg-transparent hover:text-background"
/>
</TooltipContent>
</Tooltip>
<Tag color={color} className="m-0 inline-flex max-w-full items-center gap-1" data-testid={dataTestId}>
<Tooltip>
<TooltipTrigger className="max-w-full cursor-default border-0 bg-transparent p-0">
<span className={cn("block truncate", maxWidthClassName)}>{value}</span>
</TooltipTrigger>
<TooltipContent className="max-w-sm">
<span className="break-all">{value}</span>
</TooltipContent>
</Tooltip>
<CopyButton value={value} label={`Copy ${value}`} iconClassName="size-3" />
</Tag>
);
}