From 9719747080b7769fd013ca9c40e1c1ea29230498 Mon Sep 17 00:00:00 2001
From: chahatkesh <ckesharwani4@gmail.com>
Date: Sat, 29 Aug 2026 14:24:34 +0530
Subject: [PATCH 1/2] fix(ui): trim whitespace on delete confirmation input

Copy-pasting a key name into the delete dialog often includes surrounding
spaces, which left the Delete button disabled. Compare against the trimmed
input so a matching name still unlocks deletion.
---
 .../common_components/DeleteResourceModal.test.tsx  | 13 +++++++++++++
 .../common_components/DeleteResourceModal.tsx       |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

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..5e771e804ec 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,19 @@ describe("DeleteResourceModal", () => {
     expect(deleteButton).toBeEnabled();
   });
 
+  it("should enable delete button when the confirmation input matches after surrounding whitespace is trimmed", () => {
+    renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="prod-key" />);
+    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(<DeleteResourceModal {...defaultProps} requiredConfirmation="prod-key" />);
+    fireEvent.change(screen.getByPlaceholderText("prod-key"), { target: { value: "  other-key  " } });
+    expect(screen.getByRole("button", { name: /delete/i })).toBeDisabled();
+  });
+
   it("should reset requiredConfirmation input when modal opens", async () => {
     const user = userEvent.setup();
     const { rerender } = renderWithProviders(<DeleteResourceModal {...defaultProps} requiredConfirmation="DELETE" />);
diff --git a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
index 2d8a523397a..6f9a99cc164 100644
--- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
@@ -101,7 +101,9 @@ export default function DeleteResourceModal({
           <Button
             variant="destructive"
             onClick={onOk}
-            disabled={(!!requiredConfirmation && requiredConfirmationInput !== requiredConfirmation) || confirmLoading}
+            disabled={
+              (!!requiredConfirmation && requiredConfirmationInput.trim() !== requiredConfirmation) || confirmLoading
+            }
           >
             {confirmLoading ? "Deleting..." : "Delete"}
           </Button>

From 9000134849eca1820ad79de286d7abede0eade60 Mon Sep 17 00:00:00 2001
From: chahatkesh <ckesharwani4@gmail.com>
Date: Sat, 29 Aug 2026 14:36:24 +0530
Subject: [PATCH 2/2] fix(ui): trim both sides of delete confirmation compare

A stored team or credential name with surrounding spaces would never
match a trimmed paste. Compare the trimmed stored name too.
---
 .../common_components/DeleteResourceModal.test.tsx          | 6 ++++++
 .../components/common_components/DeleteResourceModal.tsx    | 3 ++-
 2 files changed, 8 insertions(+), 1 deletion(-)

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(<DeleteResourceModal {...defaultProps} requiredConfirmation="  prod-key  " />);
+    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(<DeleteResourceModal {...defaultProps} requiredConfirmation="DELETE" />);
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"}