fix: allow empty secret names

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.");

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>
     );

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}

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}

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"
                   />