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

---
 frontend/src/components/v2/Input/Input.tsx    | 13 ++-----
 .../CreateSecretForm/CreateSecretForm.tsx     | 35 ++++++++++++-------
 .../CreateSecretForm/CreateSecretForm.tsx     | 34 +++++++++++-------
 .../components/SecretListView/SecretItem.tsx  | 32 +++++++++++------
 4 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index 019c80614..398c6410d 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -1,9 +1,6 @@
 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;
@@ -15,7 +12,7 @@ type Props = {
   isReadOnly?: boolean;
   autoCapitalization?: boolean;
   containerClassName?: string;
-  warningMessage?: string | ReactNode;
+  warning?: ReactNode;
 };
 
 const inputVariants = cva(
@@ -88,7 +85,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       size = "md",
       isReadOnly,
       autoCapitalization,
-      warningMessage,
+      warning,
       ...props
     },
     ref
@@ -125,11 +122,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
-        {warningMessage && !rightIcon && (
-          <Tooltip className="w-full max-w-72" content={warningMessage}>
-            <FontAwesomeIcon icon={faWarning} className="absolute right-0 mr-3 text-yellow-500" />
-          </Tooltip>
-        )}
+        {Boolean(warning) && !rightIcon && warning}
         {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 2dc1ddcb0..7c993ee8b 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -1,7 +1,7 @@
 import { ClipboardEvent, useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -12,7 +12,8 @@ import {
   FilterableSelect,
   FormControl,
   Input,
-  PasswordGenerator
+  PasswordGenerator,
+  Tooltip
 } from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
@@ -217,17 +218,27 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
             // @ts-expect-error this is for multiple ref single component
             secretKeyInputRef.current = e;
           }}
-          warningMessage={
+          warning={
             secretKey?.includes(" ") ? (
-              <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">
-                  {secretKey.trim().replaceAll(" ", "%20")}
-                </code>{" "}
-                when making API requests.
-              </div>
+              <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="absolute right-0 mr-3 text-yellow-600"
+                />
+              </Tooltip>
             ) : undefined
           }
           placeholder="Type your secret name"
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 82cc6b5e0..c54f63f84 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -1,12 +1,12 @@
 import { ClipboardEvent, useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, PasswordGenerator } from "@app/components/v2";
+import { Button, FormControl, Input, PasswordGenerator, Tooltip } from "@app/components/v2";
 import { CreatableSelect } from "@app/components/v2/CreatableSelect";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
@@ -178,17 +178,27 @@ export const CreateSecretForm = ({
             // @ts-expect-error this is for multiple ref single component
             secretKeyInputRef.current = e;
           }}
-          warningMessage={
+          warning={
             secretKey?.includes(" ") ? (
-              <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">
-                  {secretKey.trim().replaceAll(" ", "%20")}
-                </code>{" "}
-                when making API requests.
-              </div>
+              <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="absolute right-0 mr-3 text-yellow-600"
+                />
+              </Tooltip>
             ) : undefined
           }
           placeholder="Type your secret name"
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 20c4c34b4..f9b18422a 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
@@ -43,7 +43,7 @@ import { twMerge } from "tailwind-merge";
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEyeSlash, faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
+import { faEyeSlash, faKey, faRotate, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
 import { format } from "date-fns";
 import { CreateReminderForm } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CreateReminderForm";
@@ -487,17 +487,27 @@ export const SecretItem = memo(
                     placeholder={error?.message}
                     isError={Boolean(error)}
                     onKeyUp={() => trigger("key")}
-                    warningMessage={
+                    warning={
                       field.value?.includes(" ") ? (
-                        <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">
-                            {field.value.trim().replaceAll(" ", "%20")}
-                          </code>{" "}
-                          when making API requests.
-                        </div>
+                        <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="absolute right-0 mr-3 text-yellow-600 opacity-60"
+                          />
+                        </Tooltip>
                       ) : undefined
                     }
                     {...field}