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 5e771e804ec..2b7bdf7c9f3 100644 --- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx +++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx @@ -134,6 +134,12 @@ describe("DeleteResourceModal", () => { 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 6f9a99cc164..292b25add81 100644 --- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx +++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx @@ -102,7 +102,8 @@ export default function DeleteResourceModal({ variant="destructive" onClick={onOk} disabled={ - (!!requiredConfirmation && requiredConfirmationInput.trim() !== requiredConfirmation) || confirmLoading + (!!requiredConfirmation && requiredConfirmationInput.trim() !== requiredConfirmation.trim()) || + confirmLoading } > {confirmLoading ? "Deleting..." : "Delete"}