seen.push(v)} />);
+
+ await user.clear(screen.getByRole("spinbutton", { name: "RPM limit" }));
+
+ expect(seen[seen.length - 1][0].rpm_limit).toBeNull();
+ });
+
+ it("should remove only the clicked row", async () => {
+ const user = userEvent.setup();
+ const initial: TagRateLimitEntry[] = [
+ { id: "r1", tag: "keep-me", rpm_limit: 10 },
+ { id: "r2", tag: "delete-me", rpm_limit: 20 },
+ ];
+ render();
+
+ await user.click(screen.getAllByRole("button", { name: "Remove tag limit" })[1]);
+
+ const tags = screen.getAllByRole("textbox", { name: "Tag" });
+ expect(tags).toHaveLength(1);
+ expect(tags[0]).toHaveValue("keep-me");
+ });
+
+ it("should not submit the surrounding form when a row is removed", async () => {
+ const user = userEvent.setup();
+ let submitted = false;
+ render(
+ ,
+ );
+
+ await user.click(screen.getByRole("button", { name: "Remove tag limit" }));
+
+ expect(submitted).toBe(false);
+ expect(screen.queryAllByRole("textbox", { name: "Tag" })).toHaveLength(0);
+ });
+});
+
+describe("tagRowsToLimits", () => {
+ it("should map named rows with numeric limits into the rpm map", () => {
+ expect(tagRowsToLimits([{ id: "a", tag: "cell-1", rpm_limit: 60 }])).toEqual({ tag_rpm_limit: { "cell-1": 60 } });
+ });
+
+ it("should drop rows with a blank tag or a null limit", () => {
+ const rows: TagRateLimitEntry[] = [
+ { id: "a", tag: " ", rpm_limit: 60 },
+ { id: "b", tag: "cell-2", rpm_limit: null },
+ ];
+ expect(tagRowsToLimits(rows)).toEqual({ tag_rpm_limit: {} });
+ });
+});
+
+describe("tagLimitsToRows", () => {
+ it("should rebuild rows from a stored rpm map", () => {
+ const rows = tagLimitsToRows({ "cell-1": 60 });
+ expect(rows).toHaveLength(1);
+ expect(rows[0]).toMatchObject({ tag: "cell-1", rpm_limit: 60 });
+ });
+
+ it("should ignore non-numeric entries", () => {
+ expect(tagLimitsToRows({ "cell-1": "sixty" })).toEqual([]);
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.tsx
index ee022ee9a75..151e1593765 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/TagRateLimitEditor.tsx
@@ -1,5 +1,6 @@
-import { Button, Input, InputNumber } from "antd";
import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
export interface TagRateLimitEntry {
// Stable identity for React list keys so deleting a middle row doesn't shift
@@ -72,25 +73,29 @@ export function TagRateLimitEditor({ value, onChange }: TagRateLimitEditorProps)
{value.map((row, idx) => (
updateRow(idx, "tag", e.target.value)}
placeholder="Tag (e.g. cell-1)"
style={{ width: 180 }}
/>
- updateRow(idx, "rpm_limit", v ?? null)}
+ value={row.rpm_limit ?? ""}
+ onChange={(e) => updateRow(idx, "rpm_limit", e.target.value === "" ? null : Number(e.target.value))}
placeholder="RPM"
style={{ width: 120 }}
/>
-
))}