diff --git a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx index 4ff13599a2e..2b7bdf7c9f3 100644 --- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx +++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx @@ -121,6 +121,25 @@ describe("DeleteResourceModal", () => { expect(deleteButton).toBeEnabled(); }); + it("should enable delete button when the confirmation input matches after surrounding whitespace is trimmed", () => { + renderWithProviders(); + const input = screen.getByPlaceholderText("prod-key"); + fireEvent.change(input, { target: { value: " prod-key " } }); + expect(screen.getByRole("button", { name: /delete/i })).toBeEnabled(); + }); + + it("should keep delete disabled when trimmed confirmation input still does not match", () => { + renderWithProviders(); + fireEvent.change(screen.getByPlaceholderText("prod-key"), { target: { value: " other-key " } }); + expect(screen.getByRole("button", { name: /delete/i })).toBeDisabled(); + }); + + it("should enable delete when the stored name itself has surrounding whitespace", () => { + renderWithProviders(); + fireEvent.change(screen.getByRole("textbox"), { target: { value: "prod-key" } }); + expect(screen.getByRole("button", { name: /delete/i })).toBeEnabled(); + }); + it("should reset requiredConfirmation input when modal opens", async () => { const user = userEvent.setup(); const { rerender } = renderWithProviders(); diff --git a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx index 2d8a523397a..292b25add81 100644 --- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx +++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx @@ -101,7 +101,10 @@ export default function DeleteResourceModal({