From e5c381223930a8d80876b4acfd614e367551b49f Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Tue, 23 Sep 2025 23:58:35 +0400
Subject: [PATCH] Update SecretRenameRow.tsx

---
 .../SecretRenameRow.tsx                       | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
index 5e1f27f57..37ff5aadf 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
-import { faCheck, faClose, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faClose, faCopy, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AnimatePresence, motion } from "framer-motion";
@@ -78,6 +78,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
     control,
     reset,
     trigger,
+    watch,
     getValues,
     formState: { isDirty, isSubmitting, errors }
   } = useForm<TFormSchema>({
@@ -145,14 +146,35 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
     setIsSecNameCopied.on();
   };
 
+  const currentSecretValue = watch("key");
+
   return (
     <form
       onSubmit={handleSubmit(handleFormSubmit)}
       className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
     >
       <div className="flex h-11 flex-1 flex-shrink-0 items-center">
-        <span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-4">
+        <span className="flex h-full min-w-[11rem] items-center justify-between gap-2 border-r-2 border-mineshaft-600 px-4">
           Key
+          {currentSecretValue?.trim()?.includes(" ") &&
+            currentSecretValue?.trim() !== secretKey && (
+              <Tooltip
+                className={"w-full max-w-72"}
+                content={
+                  <div>
+                    Secret key contains whitespaces.
+                    <br />
+                    <br /> If this is the desired format, you need to provide it as{" "}
+                    <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">
+                      {encodeURIComponent(secretKey.trim())}
+                    </code>{" "}
+                    when making API requests.
+                  </div>
+                }
+              >
+                <FontAwesomeIcon icon={faWarning} className="text-yellow-600" />
+              </Tooltip>
+            )}
         </span>
 
         <Controller