From 294f33bc1e2eb2fc802e0c09e39a76c5cf340c4a Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Tue, 23 Sep 2025 02:59:12 +0400
Subject: [PATCH] fix: allow empty secret names

---
 backend/src/server/lib/schemas.ts                     |  8 +++-----
 frontend/src/components/v2/Input/Input.tsx            | 10 ++++++++++
 .../components/CreateSecretForm/CreateSecretForm.tsx  | 11 +++++++++++
 .../components/CreateSecretForm/CreateSecretForm.tsx  | 11 +++++++++++
 .../components/SecretListView/SecretItem.tsx          | 11 +++++++++++
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/backend/src/server/lib/schemas.ts b/backend/src/server/lib/schemas.ts
index 00651d2cc..d0750926d 100644
--- a/backend/src/server/lib/schemas.ts
+++ b/backend/src/server/lib/schemas.ts
@@ -43,8 +43,6 @@ export const GenericResourceNameSchema = z
 export const BaseSecretNameSchema = z.string().trim().min(1);
 
 export const SecretNameSchema = BaseSecretNameSchema.refine(
-  (el) => !el.includes(" "),
-  "Secret name cannot contain spaces."
-)
-  .refine((el) => !el.includes(":"), "Secret name cannot contain colon.")
-  .refine((el) => !el.includes("/"), "Secret name cannot contain forward slash.");
+  (el) => !el.includes(":"),
+  "Secret name cannot contain colon."
+).refine((el) => !el.includes("/"), "Secret name cannot contain forward slash.");
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index d325719e6..f8814f464 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -1,6 +1,9 @@
 import { ChangeEvent, forwardRef, InputHTMLAttributes, ReactNode } from "react";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { Tooltip } from "../Tooltip";
 
 type Props = {
   placeholder?: string;
@@ -12,6 +15,7 @@ type Props = {
   isReadOnly?: boolean;
   autoCapitalization?: boolean;
   containerClassName?: string;
+  warningMessage?: string | ReactNode;
 };
 
 const inputVariants = cva(
@@ -84,6 +88,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       size = "md",
       isReadOnly,
       autoCapitalization,
+      warningMessage,
       ...props
     },
     ref
@@ -120,6 +125,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
+        {warningMessage && !rightIcon && (
+          <Tooltip className="w-full max-w-64" content={warningMessage}>
+            <FontAwesomeIcon icon={faWarning} className="absolute right-0 mr-3 text-yellow-500" />
+          </Tooltip>
+        )}
         {rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>}
       </div>
     );
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index d4f8bbafe..af6876de9 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -217,6 +217,17 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
             // @ts-expect-error this is for multiple ref single component
             secretKeyInputRef.current = e;
           }}
+          warningMessage={
+            secretKey?.includes(" ") ? (
+              <div>
+                Secret key contains whitespaces.
+                <br />
+                <br /> If this is the desired format, you need to encode it with{" "}
+                <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">%20</code> when making API
+                requests.
+              </div>
+            ) : undefined
+          }
           placeholder="Type your secret name"
           onPaste={handlePaste}
           autoCapitalization={currentProject?.autoCapitalization}
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
index a1ac9c8cb..3378dee01 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -178,6 +178,17 @@ export const CreateSecretForm = ({
             // @ts-expect-error this is for multiple ref single component
             secretKeyInputRef.current = e;
           }}
+          warningMessage={
+            secretKey?.includes(" ") ? (
+              <div>
+                Secret key contains whitespaces.
+                <br />
+                <br /> If this is the desired format, you need to encode it with{" "}
+                <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">%20</code> when making API
+                requests.
+              </div>
+            ) : undefined
+          }
           placeholder="Type your secret name"
           onPaste={handlePaste}
           autoCapitalization={autoCapitalize}
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 6191e2a18..594899474 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,17 @@ export const SecretItem = memo(
                     placeholder={error?.message}
                     isError={Boolean(error)}
                     onKeyUp={() => trigger("key")}
+                    warningMessage={
+                      field.value.includes(" ") ? (
+                        <div>
+                          Secret key contains whitespaces.
+                          <br />
+                          <br /> If this is the desired format, you need to encode it with{" "}
+                          <code className="rounded-md bg-mineshaft-500 px-1 py-0.5">%20</code> when
+                          making API requests.
+                        </div>
+                      ) : undefined
+                    }
                     {...field}
                     className="w-full px-0 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
                   />