From 9948cdb3797c2d943b2d9d6e279956994ec1726a Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Tue, 23 Sep 2025 23:36:24 +0400
Subject: [PATCH] requested changes

---
 frontend/src/components/v2/Input/Input.tsx    |  2 +-
 .../components/SecretListView/SecretItem.tsx  | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index 398c6410d..fa3982abd 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -118,7 +118,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           onInput={handleInput}
           className={twMerge(
             leftIcon ? "pl-10" : "pl-2.5",
-            rightIcon ? "pr-10" : "pr-2.5",
+            rightIcon || warning ? "pr-10" : "pr-2.5",
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
index 4f64d950d..8e40ef40d 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
@@ -487,6 +487,30 @@ export const SecretItem = memo(
                     placeholder={error?.message}
                     isError={Boolean(error)}
                     onKeyUp={() => trigger("key")}
+                    warning={
+                      field?.value !== (originalSecret.originalKey || originalSecret.key) &&
+                      field.value?.includes(" ") ? (
+                        <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(field.value.trim())}
+                              </code>{" "}
+                              when making API requests.
+                            </div>
+                          }
+                        >
+                          <FontAwesomeIcon
+                            icon={faWarning}
+                            className="text-yellow-600 opacity-60"
+                          />
+                        </Tooltip>
+                      ) : undefined
+                    }
                     {...field}
                     className="w-full px-0 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
                   />