From 2f932ad103c4aab5ff34c87379132fc0d4bc8ef1 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Thu, 14 Mar 2024 05:55:23 +0530
Subject: [PATCH 01/36] feat: add basic ui and icons

---
 .../components/v2/SecretInput/SecretInput.tsx | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 2dfafca741..64f6820bb6 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,5 +1,7 @@
 /* eslint-disable react/no-danger */
 import { forwardRef, TextareaHTMLAttributes } from "react";
+import { faChevronRight, faFolder, faKey, faRecycle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { useToggle } from "@app/hooks";
@@ -19,6 +21,10 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);
 
+  // List all the all the variable and the enviroments
+  // On Environment select list all the secret name and folder
+  //
+
   let skipNext = false;
   const formatedContent = content.split(REGEX).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
@@ -61,6 +67,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [isSecretFocused, setIsSecretFocused] = useToggle();
 
     return (
+      // <>
       <div
         className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}
         style={{ maxHeight: `${21 * 7}px` }}
@@ -73,6 +80,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
               </span>
             </code>
           </pre>
+
           <textarea
             style={{ whiteSpace: "break-spaces" }}
             aria-label="secret value"
@@ -90,6 +98,60 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             readOnly={isReadOnly}
           />
         </div>
+
+        <div className="absolute z-10 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
+          <div className="z-10 h-full w-60 flex-col items-center justify-center rounded-md py-4 text-white">
+            {[
+              { name: "SECRET NAME", type: "secret" },
+              { name: "Folder", type: "folder" },
+              { name: "Development", type: "environment" }
+            ].map((e, i) => {
+              return (
+                <div
+                  className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
+                  key={`key-${i + 1}`}
+                >
+                  {e.type === "folder" && (
+                    <>
+                      <div className="flex gap-2">
+                        <div className="flex items-center text-yellow-700">
+                          <FontAwesomeIcon icon={faFolder} />
+                        </div>
+                        <div>{e.name}</div>
+                      </div>
+                      <div className="flex items-center text-bunker-200">
+                        <FontAwesomeIcon icon={faChevronRight} />
+                      </div>
+                    </>
+                  )}
+
+                  {e.type === "environment" && (
+                    <>
+                      <div className="flex gap-2">
+                        <div className="flex items-center text-yellow-700">
+                          <FontAwesomeIcon icon={faRecycle} />
+                        </div>
+                        <div>{e.name}</div>
+                      </div>
+                      <div className="flex items-center text-bunker-200">
+                        <FontAwesomeIcon icon={faChevronRight} />
+                      </div>
+                    </>
+                  )}
+
+                  {e.type === "secret" && (
+                    <div className="flex gap-2">
+                      <div className="flex items-center text-yellow-700">
+                        <FontAwesomeIcon icon={faKey} />
+                      </div>
+                      <div>{e.name}</div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
       </div>
     );
   }

From 126e385046648ea2b34459ed70c38f90508f5fe1 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Thu, 14 Mar 2024 06:01:02 +0530
Subject: [PATCH 02/36] fix: layout gap increment on new lines

---
 .../components/v2/SecretInput/SecretInput.tsx | 68 ++++++++++---------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 64f6820bb6..e815e93197 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -67,40 +67,41 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [isSecretFocused, setIsSecretFocused] = useToggle();
 
     return (
-      // <>
-      <div
-        className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}
-        style={{ maxHeight: `${21 * 7}px` }}
-      >
-        <div className="relative overflow-hidden">
-          <pre aria-hidden className="m-0 ">
-            <code className={`inline-block w-full  ${commonClassName}`}>
-              <span style={{ whiteSpace: "break-spaces" }}>
-                {syntaxHighlight(value, isVisible || isSecretFocused)}
-              </span>
-            </code>
-          </pre>
+      <div>
+        <div
+          className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}
+          style={{ maxHeight: `${21 * 7}px` }}
+        >
+          <div className="relative overflow-hidden">
+            <pre aria-hidden className="m-0 ">
+              <code className={`inline-block w-full  ${commonClassName}`}>
+                <span style={{ whiteSpace: "break-spaces" }}>
+                  {syntaxHighlight(value, isVisible || isSecretFocused)}
+                </span>
+              </code>
+            </pre>
 
-          <textarea
-            style={{ whiteSpace: "break-spaces" }}
-            aria-label="secret value"
-            ref={ref}
-            className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
-            onFocus={() => setIsSecretFocused.on()}
-            disabled={isDisabled}
-            spellCheck={false}
-            onBlur={(evt) => {
-              onBlur?.(evt);
-              setIsSecretFocused.off();
-            }}
-            value={value || ""}
-            {...props}
-            readOnly={isReadOnly}
-          />
+            <textarea
+              style={{ whiteSpace: "break-spaces" }}
+              aria-label="secret value"
+              ref={ref}
+              className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
+              onFocus={() => setIsSecretFocused.on()}
+              disabled={isDisabled}
+              spellCheck={false}
+              onBlur={(evt) => {
+                onBlur?.(evt);
+                setIsSecretFocused.off();
+              }}
+              value={value || ""}
+              {...props}
+              readOnly={isReadOnly}
+            />
+          </div>
         </div>
-
-        <div className="absolute z-10 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
-          <div className="z-10 h-full w-60 flex-col items-center justify-center rounded-md py-4 text-white">
+        {isSecretFocused && (
+        <div className="absolute z-10 mt-2 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
+          <div className="h-full w-full flex-col items-center justify-center rounded-md py-4 text-white">
             {[
               { name: "SECRET NAME", type: "secret" },
               { name: "Folder", type: "folder" },
@@ -151,7 +152,8 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
               );
             })}
           </div>
-        </div>
+          </div>
+          )}
       </div>
     );
   }

From 1fc9e6025452be051e4efa5669eef915ee7775f0 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Thu, 14 Mar 2024 09:39:57 +0530
Subject: [PATCH 03/36] feat: fetch folder and secrets

---
 .../components/v2/SecretInput/SecretInput.tsx | 225 +++++++++++++-----
 .../src/hooks/api/secretFolders/queries.tsx   |   2 +-
 frontend/src/hooks/api/secrets/queries.tsx    |   2 +-
 .../CreateSecretForm/CreateSecretForm.tsx     |   2 +
 .../SecretImportListView/SecretImportItem.tsx |   7 +-
 .../SecretListView/SecretDetaiSidebar.tsx     |   4 +
 .../components/SecretListView/SecretItem.tsx  |   4 +
 .../components/SnapshotView/SecretItem.tsx    |   4 +-
 .../SecretOverviewTableRow/SecretEditRow.tsx  |   2 +-
 .../CreateRotationForm/CreateRotationForm.tsx |   5 +-
 .../steps/RotationInputForm.tsx               |   5 +-
 11 files changed, 202 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index e815e93197..6ffb25f6f8 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,12 +1,16 @@
 /* eslint-disable react/no-danger */
-import { forwardRef, TextareaHTMLAttributes } from "react";
+import React, { forwardRef, TextareaHTMLAttributes, useState } from "react";
 import { faChevronRight, faFolder, faKey, faRecycle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
+import { useWorkspace } from "@app/context";
 import { useToggle } from "@app/hooks";
+import { useGetUserWsKey } from "@app/hooks/api";
+import { fetchProjectFolders } from "@app/hooks/api/secretFolders/queries";
+import { decryptSecrets, fetchProjectEncryptedSecrets } from "@app/hooks/api/secrets/queries";
 
-const REGEX = /(\${([^}]+)})/g;
+const REGEX_REFERENCE = /(\${([^}]*)})/g;
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
   for (let i = 0; i < str.length; i += 1) {
@@ -21,12 +25,8 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);
 
-  // List all the all the variable and the enviroments
-  // On Environment select list all the secret name and folder
-  //
-
   let skipNext = false;
-  const formatedContent = content.split(REGEX).flatMap((el, i) => {
+  const formatedContent = content.split(REGEX_REFERENCE).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
     if (isInterpolationSyntax) {
       skipNext = true;
@@ -55,6 +55,14 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   containerClassName?: string;
+  environment?: string;
+  secretPath?: string;
+};
+
+type VariableType = {
+  name: string;
+  type: "folder" | "secret";
+  slug?: string;
 };
 
 const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
@@ -65,6 +73,113 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     ref
   ) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
+    const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
+    const { currentWorkspace } = useWorkspace();
+    const [listVariables, setListVariables] = useState<VariableType[]>([]);
+
+    const workspaceId = currentWorkspace?.id || "";
+    const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+
+    const { environment, secretPath } = props;
+
+    async function extractReference(refValue: string, refIndex: number) {
+      console.log({ refIndex });
+      const isNested = refValue.includes(".");
+      const currentListVariable: VariableType[] = [];
+
+      let currentEnvironment = environment;
+      let currentSecretPath = secretPath || "/";
+
+      if (isNested) {
+        const [envSlug, ...folderPaths] = refValue.split(".");
+        currentEnvironment = envSlug;
+        currentSecretPath = `/${folderPaths?.join("/")}` || "/";
+      }
+
+      if (!currentEnvironment || !decryptFileKey || !currentSecretPath || !currentWorkspace) {
+        setListVariables(currentListVariable);
+        return;
+      }
+
+      console.log({ currentEnvironment, currentSecretPath });
+      const [encryptSecrets, folders] = await Promise.all([
+        fetchProjectEncryptedSecrets({
+          workspaceId,
+          environment: currentEnvironment,
+          secretPath: currentSecretPath
+        }),
+        // secret reference based on folder only support for nested reference that start with envs
+        isNested ? fetchProjectFolders(workspaceId, currentEnvironment, currentSecretPath) : []
+      ]);
+
+      folders?.forEach((folder) => {
+        currentListVariable.unshift({ name: folder.name, type: "folder" });
+      });
+
+      const secrets = decryptSecrets(encryptSecrets, decryptFileKey);
+
+      secrets?.forEach((secret) => {
+        currentListVariable.unshift({ name: secret.key, type: "secret" });
+      });
+
+      // get list of secrets, folder name and envs
+      // On env select get list of secrets
+      // on env select show list of secrets and folder
+      // on env or folder select replace the text and update the caret?
+      // fetch secrets based on current base environment and the path
+
+      setListVariables(currentListVariable);
+    }
+
+    function handleVariablePopup(element: HTMLTextAreaElement) {
+      const { selectionStart, selectionEnd, value: elValue } = element;
+      if (selectionStart !== selectionEnd || selectionStart === 0) {
+        setShowReferencePopup(false);
+        return;
+      }
+
+      let match = null;
+      for (
+        let matches = REGEX_REFERENCE.exec(elValue);
+        matches !== null;
+        matches = REGEX_REFERENCE.exec(elValue)
+      ) {
+        if (matches.index <= selectionStart && REGEX_REFERENCE.lastIndex >= selectionStart) {
+          match = matches?.[2];
+          extractReference(match, matches.index);
+        }
+      }
+
+      setShowReferencePopup(Boolean(match));
+    }
+
+    function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+      // On Key up or down if the popup is open ignore it
+      if ((showReferencePopup && event.key === "ArrowUp") || event.key === "ArrowDown") {
+        event.preventDefault();
+        // todo: point up or down in the variable popup
+        // return;
+      }
+    }
+
+    function handleKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+      if (event.key === "Escape") {
+        setShowReferencePopup(false);
+        return;
+      }
+      // On Key up or down if the popup is open ignore it
+      if ((showReferencePopup && event.key === "ArrowUp") || event.key === "ArrowDown") {
+        event.preventDefault();
+        // todo: point up or down in the variable popup
+        // return;
+      }
+
+      handleVariablePopup(event.currentTarget);
+    }
+
+    function handleMouseClick(event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) {
+      handleVariablePopup(event.currentTarget);
+    }
 
     return (
       <div>
@@ -87,11 +202,14 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
               ref={ref}
               className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
               onFocus={() => setIsSecretFocused.on()}
+              onKeyDown={handleKeyDown}
+              onKeyUp={handleKeyUp}
+              onClick={handleMouseClick}
               disabled={isDisabled}
               spellCheck={false}
               onBlur={(evt) => {
                 onBlur?.(evt);
-                setIsSecretFocused.off();
+                if (!showReferencePopup) setIsSecretFocused.off();
               }}
               value={value || ""}
               {...props}
@@ -99,61 +217,62 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             />
           </div>
         </div>
-        {isSecretFocused && (
-        <div className="absolute z-10 mt-2 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
-          <div className="h-full w-full flex-col items-center justify-center rounded-md py-4 text-white">
-            {[
-              { name: "SECRET NAME", type: "secret" },
-              { name: "Folder", type: "folder" },
-              { name: "Development", type: "environment" }
-            ].map((e, i) => {
-              return (
-                <div
-                  className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
-                  key={`key-${i + 1}`}
-                >
-                  {e.type === "folder" && (
-                    <>
-                      <div className="flex gap-2">
-                        <div className="flex items-center text-yellow-700">
-                          <FontAwesomeIcon icon={faFolder} />
+        {showReferencePopup && isSecretFocused && (
+          <div className="absolute z-10 mt-2 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
+            <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md py-4 text-white">
+              {listVariables.map((e, i) => {
+                return (
+                  <div
+                    className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
+                    key={`key-${i + 1}`}
+                  >
+                    {e.type === "folder" && (
+                      <>
+                        <div className="flex gap-2">
+                          <div className="flex items-center text-yellow-700">
+                            <FontAwesomeIcon icon={faFolder} />
+                          </div>
+                          <div className="w-48 truncate">{e.name}</div>
                         </div>
-                        <div>{e.name}</div>
-                      </div>
-                      <div className="flex items-center text-bunker-200">
-                        <FontAwesomeIcon icon={faChevronRight} />
-                      </div>
-                    </>
-                  )}
+                        <div className="flex items-center text-bunker-200">
+                          <FontAwesomeIcon icon={faChevronRight} />
+                        </div>
+                      </>
+                    )}
 
-                  {e.type === "environment" && (
-                    <>
+                    {e.type === "secret" && (
                       <div className="flex gap-2">
                         <div className="flex items-center text-yellow-700">
-                          <FontAwesomeIcon icon={faRecycle} />
+                          <FontAwesomeIcon icon={faKey} />
                         </div>
-                        <div>{e.name}</div>
+                        <div className="w-48 truncate">{e.name}</div>
                       </div>
-                      <div className="flex items-center text-bunker-200">
-                        <FontAwesomeIcon icon={faChevronRight} />
-                      </div>
-                    </>
-                  )}
+                    )}
+                  </div>
+                );
+              })}
 
-                  {e.type === "secret" && (
-                    <div className="flex gap-2">
-                      <div className="flex items-center text-yellow-700">
-                        <FontAwesomeIcon icon={faKey} />
-                      </div>
-                      <div>{e.name}</div>
+              <div className="flex w-full justify-center gap-2">All Secrets</div>
+
+              {currentWorkspace?.environments.map((env, i) => (
+                <div
+                  className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
+                  key={`key-${i + 1}`}
+                >
+                  <div className="flex gap-2">
+                    <div className="flex items-center text-yellow-700">
+                      <FontAwesomeIcon icon={faRecycle} />
                     </div>
-                  )}
+                    <div className="w-48 truncate">{env.name}</div>
+                  </div>
+                  <div className="flex items-center text-bunker-200">
+                    <FontAwesomeIcon icon={faChevronRight} />
+                  </div>
                 </div>
-              );
-            })}
-          </div>
+              ))}
+            </div>
           </div>
-          )}
+        )}
       </div>
     );
   }
diff --git a/frontend/src/hooks/api/secretFolders/queries.tsx b/frontend/src/hooks/api/secretFolders/queries.tsx
index bcda2b0a49..968fe06bd7 100644
--- a/frontend/src/hooks/api/secretFolders/queries.tsx
+++ b/frontend/src/hooks/api/secretFolders/queries.tsx
@@ -24,7 +24,7 @@ export const folderQueryKeys = {
     ["secret-folders", { projectId, environment, path }] as const
 };
 
-const fetchProjectFolders = async (workspaceId: string, environment: string, path = "/") => {
+export const fetchProjectFolders = async (workspaceId: string, environment: string, path = "/") => {
   const { data } = await apiRequest.get<{ folders: TSecretFolder[] }>("/api/v1/folders", {
     params: {
       workspaceId,
diff --git a/frontend/src/hooks/api/secrets/queries.tsx b/frontend/src/hooks/api/secrets/queries.tsx
index 1ba9a52518..28999389e9 100644
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -98,7 +98,7 @@ export const decryptSecrets = (
   return secrets;
 };
 
-const fetchProjectEncryptedSecrets = async ({
+export const fetchProjectEncryptedSecrets = async ({
   workspaceId,
   environment,
   secretPath
diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
index a8e1fb3363..5743a9f74c 100644
--- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -105,6 +105,8 @@ export const CreateSecretForm = ({
               >
                 <SecretInput
                   {...field}
+                  environment={environment}
+                  secretPath={secretPath}
                   containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
                 />
               </FormControl>
diff --git a/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
index dd0f5fbecc..0070ef2481 100644
--- a/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
@@ -172,7 +172,12 @@ export const SecretImportItem = ({
                           {key}
                         </td>
                         <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
-                          <SecretInput value={value} isReadOnly />
+                          <SecretInput
+                            value={value}
+                            isReadOnly 
+                            environment={overriden?.env}
+                            secretPath={overriden?.secretPath}
+                          />
                         </td>
                         <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
                           <EnvFolderIcon env={overriden?.env} secretPath={overriden?.secretPath} />
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index 092495597c..772bb2da03 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -206,6 +206,8 @@ export const SecretDetailSidebar = ({
                       <FormControl label="Value">
                         <SecretInput
                           isReadOnly={isReadOnly}
+                          environment={environment}
+                          secretPath={secretPath}
                           key="secret-value"
                           isDisabled={isOverridden || !isAllowed}
                           containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
@@ -242,6 +244,8 @@ export const SecretDetailSidebar = ({
                     <FormControl label="Value Override">
                       <SecretInput
                         isReadOnly={isReadOnly}
+                        environment={environment}
+                        secretPath={secretPath}
                         containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
                         {...field}
                       />
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
index 7996d932cd..b459d55089 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
@@ -267,6 +267,8 @@ export const SecretItem = memo(
                         key="value-overriden"
                         isVisible={isVisible}
                         isReadOnly={isReadOnly}
+                        environment={environment}
+                        secretPath={secretPath}
                         {...field}
                         containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                       />
@@ -282,6 +284,8 @@ export const SecretItem = memo(
                         isReadOnly={isReadOnly}
                         key="secret-value"
                         isVisible={isVisible}
+                        environment={environment}
+                        secretPath={secretPath}
                         {...field}
                         containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                       />
diff --git a/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx
index 2497276555..a571ca5d33 100644
--- a/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SnapshotView/SecretItem.tsx
@@ -120,7 +120,9 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                   <Td className="border-r border-mineshaft-600">Value</Td>
                   {isModified && (
                     <Td className="border-r border-mineshaft-600">
-                      <SecretInput value={preSecret?.value} />
+                      <SecretInput
+                        value={preSecret?.value}
+                      />
                     </Td>
                   )}
                   <Td>
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 478d990861..10c6e229a9 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -93,7 +93,7 @@ export const SecretEditRow = ({
           control={control}
           name="value"
           render={({ field }) => (
-            <SecretInput {...field} value={field.value as string} isVisible={isVisible} />
+            <SecretInput {...field} value={field.value as string} isVisible={isVisible} secretPath={secretPath} environment={environment} />
           )}
         />
       </div>
diff --git a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
index ed7b571e34..c83c400fff 100644
--- a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
+++ b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
@@ -102,7 +102,8 @@ export const CreateRotationForm = ({
           ))}
         </Stepper>
         <AnimatePresence exitBeforeEnter>
-          {wizardStep === 0 && (
+          {/* TODO: Check this before merge */}
+          {wizardStep === 0 && wizardData.current.output && (
             <motion.div
               key="input-step"
               transition={{ duration: 0.1 }}
@@ -117,6 +118,8 @@ export const CreateRotationForm = ({
                   setWizardStep((state) => state + 1);
                 }}
                 inputSchema={provider.template?.inputs || {}}
+                secretPath={wizardData.current.output.secretPath}
+                environment={wizardData.current.output.environment}
               />
             </motion.div>
           )}
diff --git a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
index 125515bf15..783abfec82 100644
--- a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
+++ b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
@@ -13,11 +13,13 @@ type Props = {
     properties: Record<string, { type: string; desc?: string; default?: string }>;
     required: string[];
   };
+  secretPath: string;
+  environment: string;
 };
 
 const formSchema = z.record(z.string().trim().optional());
 
-export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) => {
+export const RotationInputForm = ({ onSubmit, onCancel, inputSchema, secretPath, environment }: Props) => {
   const {
     control,
     handleSubmit,
@@ -60,6 +62,7 @@ export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) =>
                 {...field}
                 containerClassName="normal-case text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
                 required={inputSchema.required.includes(inputName)}
+                secretPath={secretPath} environment={environment}
               />
             </FormControl>
           )}

From 1bcc7424667d63c71477d1eeac8eec0d65c20e5f Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 02:22:09 +0530
Subject: [PATCH 04/36] feat: improve reference match, auto closing tag and
 reference select

---
 .../components/v2/SecretInput/SecretInput.tsx | 215 +++++++++++++-----
 1 file changed, 162 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 6ffb25f6f8..d8febae80c 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React, { forwardRef, TextareaHTMLAttributes, useState } from "react";
+import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react";
 import { faChevronRight, faFolder, faKey, faRecycle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
@@ -32,7 +32,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
       skipNext = true;
       return (
         <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
-          &#36;&#123;<span className="ph-no-capture text-yello-200/80">{el.slice(2, -1)}</span>
+          &#36;&#123;<span className="ph-no-capture text-yellow-200/80">{el.slice(2, -1)}</span>
           &#125;
         </span>
       );
@@ -69,21 +69,33 @@ const commonClassName = "font-mono text-sm caret-white border-none outline-none
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   (
-    { value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
+    {
+      value: propValue,
+      isVisible,
+      containerClassName,
+      onBlur,
+      isDisabled,
+      isReadOnly,
+      onFocus,
+      secretPath,
+      environment,
+      onChange,
+      ...props
+    },
     ref
   ) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
     const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
+    const [value, setValue] = useState<string>(propValue || "");
     const { currentWorkspace } = useWorkspace();
     const [listVariables, setListVariables] = useState<VariableType[]>([]);
+    const [lastSelectionIndex, setLastSelectionIndex] = useState<number>(0);
+    const childRef = useRef<HTMLTextAreaElement>(null);
 
     const workspaceId = currentWorkspace?.id || "";
     const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
 
-    const { environment, secretPath } = props;
-
-    async function extractReference(refValue: string, refIndex: number) {
-      console.log({ refIndex });
+    async function extractReference(refValue: string) {
       const isNested = refValue.includes(".");
       const currentListVariable: VariableType[] = [];
 
@@ -101,7 +113,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         return;
       }
 
-      console.log({ currentEnvironment, currentSecretPath });
+      // Move to react query
       const [encryptSecrets, folders] = await Promise.all([
         fetchProjectEncryptedSecrets({
           workspaceId,
@@ -122,44 +134,53 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         currentListVariable.unshift({ name: secret.key, type: "secret" });
       });
 
-      // get list of secrets, folder name and envs
-      // On env select get list of secrets
-      // on env select show list of secrets and folder
-      // on env or folder select replace the text and update the caret?
-      // fetch secrets based on current base environment and the path
-
       setListVariables(currentListVariable);
+      setShowReferencePopup(true);
     }
 
-    function handleVariablePopup(element: HTMLTextAreaElement) {
-      const { selectionStart, selectionEnd, value: elValue } = element;
-      if (selectionStart !== selectionEnd || selectionStart === 0) {
-        setShowReferencePopup(false);
-        return;
+    function findMatch(str: string, start: number) {
+      const matches = [...str.matchAll(REGEX_REFERENCE)];
+      for (let i = 0; i < matches.length; i += 1) {
+        const match = matches[i];
+        if (
+          match &&
+          typeof match.index !== "undefined" &&
+          match.index <= start &&
+          start < match.index + match[0].length
+        ) {
+          return match;
+        }
       }
+      return null;
+    }
 
-      let match = null;
-      for (
-        let matches = REGEX_REFERENCE.exec(elValue);
-        matches !== null;
-        matches = REGEX_REFERENCE.exec(elValue)
-      ) {
-        if (matches.index <= selectionStart && REGEX_REFERENCE.lastIndex >= selectionStart) {
-          match = matches?.[2];
-          extractReference(match, matches.index);
-        }
+    function setCaretPos(caretPos: number) {
+      if (childRef?.current) {
+        childRef.current.focus();
+        setTimeout(() => {
+          if (!childRef?.current) return;
+          childRef.current.selectionStart = caretPos;
+          childRef.current.selectionEnd = caretPos;
+        }, 200);
+      }
+    }
+
+    function referencePopup(text: string, pos: number) {
+      const match = findMatch(text, pos);
+      if (match && typeof match.index !== "undefined") {
+        setLastSelectionIndex(pos);
+        extractReference(match?.[2]);
       }
 
-      setShowReferencePopup(Boolean(match));
+      setShowReferencePopup(!!match);
     }
 
-    function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
-      // On Key up or down if the popup is open ignore it
-      if ((showReferencePopup && event.key === "ArrowUp") || event.key === "ArrowDown") {
-        event.preventDefault();
-        // todo: point up or down in the variable popup
-        // return;
+    function handleReferencePopup(element: HTMLTextAreaElement) {
+      const { selectionStart, selectionEnd, value: text } = element;
+      if (selectionStart !== selectionEnd || selectionStart === 0) {
+        return;
       }
+      referencePopup(text, selectionStart);
     }
 
     function handleKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
@@ -167,18 +188,94 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         setShowReferencePopup(false);
         return;
       }
+
+      if (event.key === "{") {
+        // auto close the tag
+        const currCaretPos = event.currentTarget.selectionEnd;
+        const isPrevDollar = value[currCaretPos - 2] === "$";
+        if (!isPrevDollar) return;
+
+        const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
+
+        setValue(newValue);
+        if (event.currentTarget) {
+          setCaretPos(currCaretPos);
+          setTimeout(() => {
+            // on next tick
+            referencePopup(newValue, currCaretPos);
+          }, 200);
+
+          return;
+        }
+      }
       // On Key up or down if the popup is open ignore it
       if ((showReferencePopup && event.key === "ArrowUp") || event.key === "ArrowDown") {
         event.preventDefault();
-        // todo: point up or down in the variable popup
-        // return;
       }
 
-      handleVariablePopup(event.currentTarget);
+      handleReferencePopup(event.currentTarget);
     }
 
     function handleMouseClick(event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) {
-      handleVariablePopup(event.currentTarget);
+      handleReferencePopup(event.currentTarget);
+    }
+
+
+    async function handleReferenceSelect({
+      name,
+      type,
+      slug
+    }: {
+      name: string;
+      type: "folder" | "secret" | "environment";
+      slug?: string;
+    }) {
+      setShowReferencePopup(false);
+
+      // forward ref for parent component
+      if (typeof ref === "function") {
+        ref(childRef.current);
+      } else if (ref && "current" in ref) {
+        const refCopy = ref;
+        refCopy.current = childRef.current;
+      }
+
+      let newValue = value || "";
+      const match = findMatch(newValue, lastSelectionIndex);
+      const referenceStartIndex = match?.index || 0;
+      const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
+      const [start, oldReference, end] = [
+        value.slice(0, referenceStartIndex),
+        value.slice(referenceStartIndex, referenceEndIndex),
+        value.slice(referenceEndIndex)
+      ];
+
+      const oldReferenceStr = oldReference.slice(2, oldReference.length - 1); // remove template
+      let replaceReference = "";
+      let offset = 3;
+      switch (type) {
+        case "folder":
+          replaceReference = `${oldReferenceStr}${name}.`;
+          offset -= 1;
+          break;
+        case "secret":
+          replaceReference = `${oldReferenceStr}${name}`;
+          break;
+        case "environment":
+          replaceReference = `${slug}.`;
+          offset -= 1;
+          break;
+        default:
+      }
+      newValue = `${start}$\{${replaceReference}}${end}`;
+      setValue(newValue);
+      setCaretPos(start.length + replaceReference.length + offset);
+      if (type !== "secret") extractReference(replaceReference);
+    }
+
+    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+      setValue(event.target.value);
+      return onChange;
     }
 
     return (
@@ -199,32 +296,38 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             <textarea
               style={{ whiteSpace: "break-spaces" }}
               aria-label="secret value"
-              ref={ref}
-              className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
+              ref={childRef}
+              className={twMerge(
+                "absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0",
+                commonClassName
+              )}
               onFocus={() => setIsSecretFocused.on()}
-              onKeyDown={handleKeyDown}
               onKeyUp={handleKeyUp}
               onClick={handleMouseClick}
+              onChange={handleChange}
               disabled={isDisabled}
               spellCheck={false}
               onBlur={(evt) => {
                 onBlur?.(evt);
                 if (!showReferencePopup) setIsSecretFocused.off();
               }}
-              value={value || ""}
               {...props}
+              value={value}
               readOnly={isReadOnly}
             />
           </div>
         </div>
+        {/* TODO(radix): Move to radix select component and scroll element */}
         {showReferencePopup && isSecretFocused && (
-          <div className="absolute z-10 mt-2 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
+          <div className="fixed z-[100] mt-2 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
             <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md py-4 text-white">
               {listVariables.map((e, i) => {
                 return (
-                  <div
-                    className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
+                  <button
+                    className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 text-left last:border-b-0"
                     key={`key-${i + 1}`}
+                    onClick={() => handleReferenceSelect({ name: e.name, type: e.type })}
+                    type="button"
                   >
                     {e.type === "folder" && (
                       <>
@@ -245,30 +348,36 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
                         <div className="flex items-center text-yellow-700">
                           <FontAwesomeIcon icon={faKey} />
                         </div>
-                        <div className="w-48 truncate">{e.name}</div>
+                        <div className="w-48 truncate text-left">{e.name}</div>
                       </div>
                     )}
-                  </div>
+                  </button>
                 );
               })}
 
-              <div className="flex w-full justify-center gap-2">All Secrets</div>
+              <div className="flex w-full justify-center gap-2 pt-1 text-xs text-bunker-300">
+                All Secrets
+              </div>
 
               {currentWorkspace?.environments.map((env, i) => (
-                <div
+                <button
                   className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
                   key={`key-${i + 1}`}
+                  onClick={() =>
+                    handleReferenceSelect({ name: env.name, type: "environment", slug: env.slug })
+                  }
+                  type="button"
                 >
                   <div className="flex gap-2">
                     <div className="flex items-center text-yellow-700">
                       <FontAwesomeIcon icon={faRecycle} />
                     </div>
-                    <div className="w-48 truncate">{env.name}</div>
+                    <div className="w-48 truncate text-left">{env.name}</div>
                   </div>
                   <div className="flex items-center text-bunker-200">
                     <FontAwesomeIcon icon={faChevronRight} />
                   </div>
-                </div>
+                </button>
               ))}
             </div>
           </div>

From 273c78c0a5efaf39cc4d4dc09f4cbcc29221ccd6 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 03:04:36 +0530
Subject: [PATCH 05/36] fix: hot fix for onChange

---
 .../components/v2/SecretInput/SecretInput.tsx    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index d8febae80c..bd416edd46 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -190,7 +190,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       }
 
       if (event.key === "{") {
-        // auto close the tag
+        // auto close the bracket
         const currCaretPos = event.currentTarget.selectionEnd;
         const isPrevDollar = value[currCaretPos - 2] === "$";
         if (!isPrevDollar) return;
@@ -198,6 +198,8 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
 
         setValue(newValue);
+        onChange?.({ target: { value: newValue } } as any);
+
         if (event.currentTarget) {
           setCaretPos(currCaretPos);
           setTimeout(() => {
@@ -220,7 +222,6 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       handleReferencePopup(event.currentTarget);
     }
 
-
     async function handleReferenceSelect({
       name,
       type,
@@ -250,7 +251,8 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         value.slice(referenceEndIndex)
       ];
 
-      const oldReferenceStr = oldReference.slice(2, oldReference.length - 1); // remove template
+      let oldReferenceStr = oldReference.slice(2, oldReference.length - 1);
+
       let replaceReference = "";
       let offset = 3;
       switch (type) {
@@ -258,9 +260,11 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
           replaceReference = `${oldReferenceStr}${name}.`;
           offset -= 1;
           break;
-        case "secret":
+        case "secret": {
+          if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = "";
           replaceReference = `${oldReferenceStr}${name}`;
           break;
+        }
         case "environment":
           replaceReference = `${slug}.`;
           offset -= 1;
@@ -269,16 +273,18 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       }
       newValue = `${start}$\{${replaceReference}}${end}`;
       setValue(newValue);
+      onChange?.({ target: { value: newValue } } as any);
       setCaretPos(start.length + replaceReference.length + offset);
       if (type !== "secret") extractReference(replaceReference);
     }
 
     function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
       setValue(event.target.value);
-      return onChange;
+      if (typeof onChange === "function") onChange(event);
     }
 
     return (
+      // TODO: hide popup if the focus within the child component left
       <div>
         <div
           className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}

From 5e453ab8a644768944f758f04edd16da283eefbb Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 03:26:49 +0530
Subject: [PATCH 06/36] fix: try dynamic height based on text area height

---
 .../components/v2/SecretInput/SecretInput.tsx | 89 +++++++++++--------
 1 file changed, 50 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index bd416edd46..af8f5b5011 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -285,47 +285,23 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
 
     return (
       // TODO: hide popup if the focus within the child component left
-      <div>
-        <div
-          className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}
-          style={{ maxHeight: `${21 * 7}px` }}
-        >
-          <div className="relative overflow-hidden">
-            <pre aria-hidden className="m-0 ">
-              <code className={`inline-block w-full  ${commonClassName}`}>
-                <span style={{ whiteSpace: "break-spaces" }}>
-                  {syntaxHighlight(value, isVisible || isSecretFocused)}
-                </span>
-              </code>
-            </pre>
-
-            <textarea
-              style={{ whiteSpace: "break-spaces" }}
-              aria-label="secret value"
-              ref={childRef}
-              className={twMerge(
-                "absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0",
-                commonClassName
-              )}
-              onFocus={() => setIsSecretFocused.on()}
-              onKeyUp={handleKeyUp}
-              onClick={handleMouseClick}
-              onChange={handleChange}
-              disabled={isDisabled}
-              spellCheck={false}
-              onBlur={(evt) => {
-                onBlur?.(evt);
-                if (!showReferencePopup) setIsSecretFocused.off();
-              }}
-              {...props}
-              value={value}
-              readOnly={isReadOnly}
-            />
-          </div>
-        </div>
+      <div
+        className={twMerge(
+          "flex w-full flex-col gap-4 overflow-auto rounded-md no-scrollbar",
+          containerClassName
+        )}
+        // style={{ maxHeight: `${21 * 7}px` }}
+      >
         {/* TODO(radix): Move to radix select component and scroll element */}
         {showReferencePopup && isSecretFocused && (
-          <div className="fixed z-[100] mt-2 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
+          <div
+            className={twMerge(
+              "fixed z-[100] w-60 translate-y-2 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200"
+            )}
+            style={{
+              marginTop: `${Math.min(childRef.current?.clientHeight || 21 * 7, 21 * 7)}px`
+            }}
+          >
             <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md py-4 text-white">
               {listVariables.map((e, i) => {
                 return (
@@ -388,6 +364,41 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             </div>
           </div>
         )}
+
+        <div style={{ maxHeight: `${21 * 7}px` }}>
+          <div className="relative overflow-hidden">
+            <pre aria-hidden className="m-0 ">
+              <code className={`inline-block w-full  ${commonClassName}`}>
+                <span style={{ whiteSpace: "break-spaces" }}>
+                  {syntaxHighlight(value, isVisible || isSecretFocused)}
+                </span>
+              </code>
+            </pre>
+
+            <textarea
+              style={{ whiteSpace: "break-spaces" }}
+              aria-label="secret value"
+              ref={childRef}
+              className={twMerge(
+                "absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0",
+                commonClassName
+              )}
+              onFocus={() => setIsSecretFocused.on()}
+              onKeyUp={handleKeyUp}
+              onClick={handleMouseClick}
+              onChange={handleChange}
+              disabled={isDisabled}
+              spellCheck={false}
+              onBlur={(evt) => {
+                onBlur?.(evt);
+                if (!showReferencePopup) setIsSecretFocused.off();
+              }}
+              {...props}
+              value={value}
+              readOnly={isReadOnly}
+            />
+          </div>
+        </div>
       </div>
     );
   }

From 393c0c9e9030ec56649a2c195c2cc7597e4eb9ca Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 03:30:11 +0530
Subject: [PATCH 07/36] fix: add todo

---
 frontend/src/components/v2/SecretInput/SecretInput.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index af8f5b5011..a317ec54f6 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -113,7 +113,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         return;
       }
 
-      // Move to react query
+      // Todo: Move to react query
       const [encryptSecrets, folders] = await Promise.all([
         fetchProjectEncryptedSecrets({
           workspaceId,
@@ -198,6 +198,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
 
         setValue(newValue);
+        // TODO: there should be a better way to do
         onChange?.({ target: { value: newValue } } as any);
 
         if (event.currentTarget) {
@@ -273,6 +274,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       }
       newValue = `${start}$\{${replaceReference}}${end}`;
       setValue(newValue);
+      // TODO: there should be a better way to do
       onChange?.({ target: { value: newValue } } as any);
       setCaretPos(start.length + replaceReference.length + offset);
       if (type !== "secret") extractReference(replaceReference);

From 3ae27e088f08ac95cf004bf706da17e0832023c4 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 17:17:39 +0530
Subject: [PATCH 08/36] feat: move to react query

---
 .../components/v2/SecretInput/SecretInput.tsx | 110 +++++++++++-------
 .../src/hooks/api/secretFolders/queries.tsx   |   2 +-
 frontend/src/hooks/api/secrets/queries.tsx    |   2 +-
 3 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index a317ec54f6..deb33ec816 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react";
+import React, { forwardRef, TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
 import { faChevronRight, faFolder, faKey, faRecycle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
@@ -7,8 +7,8 @@ import { twMerge } from "tailwind-merge";
 import { useWorkspace } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetUserWsKey } from "@app/hooks/api";
-import { fetchProjectFolders } from "@app/hooks/api/secretFolders/queries";
-import { decryptSecrets, fetchProjectEncryptedSecrets } from "@app/hooks/api/secrets/queries";
+import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
+import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
 
 const REGEX_REFERENCE = /(\${([^}]*)})/g;
 const replaceContentWithDot = (str: string) => {
@@ -26,7 +26,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   if (!isVisible) return replaceContentWithDot(content);
 
   let skipNext = false;
-  const formatedContent = content.split(REGEX_REFERENCE).flatMap((el, i) => {
+  const formattedContent = content.split(REGEX_REFERENCE).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
     if (isInterpolationSyntax) {
       skipNext = true;
@@ -46,7 +46,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
 
   // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
   // when break is added a line break works properly
-  return formatedContent.concat(<br />);
+  return formattedContent.concat(<br />);
 };
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -59,7 +59,7 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   secretPath?: string;
 };
 
-type VariableType = {
+type ReferenceType = {
   name: string;
   type: "folder" | "secret";
   slug?: string;
@@ -77,66 +77,90 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       isDisabled,
       isReadOnly,
       onFocus,
-      secretPath,
-      environment,
+      secretPath: propSecretPath,
+      environment: propEnvironment,
       onChange,
       ...props
     },
     ref
   ) => {
+    const childRef = useRef<HTMLTextAreaElement>(null);
+
     const [isSecretFocused, setIsSecretFocused] = useToggle();
-    const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
     const [value, setValue] = useState<string>(propValue || "");
     const { currentWorkspace } = useWorkspace();
-    const [listVariables, setListVariables] = useState<VariableType[]>([]);
+    const [listReference, setListReference] = useState<ReferenceType[]>([]);
+    const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
+    const [referenceKey, setReferenceKey] = useState<string>();
     const [lastSelectionIndex, setLastSelectionIndex] = useState<number>(0);
-    const childRef = useRef<HTMLTextAreaElement>(null);
+    const [secretPath, setSecretPath] = useState<string>(
+      propSecretPath || currentWorkspace?.environments?.[0].slug!
+    );
+    const [environment, setEnvironment] = useState<string>(
+      propEnvironment || currentWorkspace?.environments?.[0].slug!
+    );
 
     const workspaceId = currentWorkspace?.id || "";
     const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+    const { data: secrets } = useGetProjectSecrets({
+      decryptFileKey: decryptFileKey!,
+      environment,
+      secretPath,
+      workspaceId
+    });
+    const { folderNames: folders } = useGetFoldersByEnv({
+      path: secretPath,
+      environments: [environment],
+      projectId: workspaceId
+    });
+
+    useEffect(() => {
+
+      let currentEnvironment = propEnvironment;
+      let currentSecretPath = propSecretPath || "/";
+
+      if (!referenceKey) {
+        setSecretPath(currentSecretPath);
+        setEnvironment(currentEnvironment!);
+        return;
+      }
 
-    async function extractReference(refValue: string) {
-      const isNested = refValue.includes(".");
-      const currentListVariable: VariableType[] = [];
-
-      let currentEnvironment = environment;
-      let currentSecretPath = secretPath || "/";
+      const isNested = referenceKey.includes(".");
+      const currentListReference: ReferenceType[] = [];
 
       if (isNested) {
-        const [envSlug, ...folderPaths] = refValue.split(".");
+        const [envSlug, ...folderPaths] = referenceKey.split(".");
         currentEnvironment = envSlug;
         currentSecretPath = `/${folderPaths?.join("/")}` || "/";
       }
 
-      if (!currentEnvironment || !decryptFileKey || !currentSecretPath || !currentWorkspace) {
-        setListVariables(currentListVariable);
+      if (!currentEnvironment || !decryptFileKey || !currentSecretPath || !currentWorkspace || !referenceKey) {
+        // this need to clean up?
+        setListReference(currentListReference);
         return;
       }
+      setSecretPath(currentSecretPath);
+      setEnvironment(currentEnvironment);
+      setShowReferencePopup(true);
+      
+    }, [referenceKey])
 
-      // Todo: Move to react query
-      const [encryptSecrets, folders] = await Promise.all([
-        fetchProjectEncryptedSecrets({
-          workspaceId,
-          environment: currentEnvironment,
-          secretPath: currentSecretPath
-        }),
-        // secret reference based on folder only support for nested reference that start with envs
-        isNested ? fetchProjectFolders(workspaceId, currentEnvironment, currentSecretPath) : []
-      ]);
-
-      folders?.forEach((folder) => {
-        currentListVariable.unshift({ name: folder.name, type: "folder" });
-      });
+    useEffect(() => {
+      const currentListReference: ReferenceType[] = [];
+      const isNested = referenceKey?.includes(".");
 
-      const secrets = decryptSecrets(encryptSecrets, decryptFileKey);
+      if (isNested) {
+        folders?.forEach((folder) => {
+          currentListReference.unshift({ name: folder, type: "folder" });
+        });
+      }
 
       secrets?.forEach((secret) => {
-        currentListVariable.unshift({ name: secret.key, type: "secret" });
+        currentListReference.unshift({ name: secret.key, type: "secret" });
       });
 
-      setListVariables(currentListVariable);
-      setShowReferencePopup(true);
-    }
+      setListReference(currentListReference);
+    }, [secrets, referenceKey]);
 
     function findMatch(str: string, start: number) {
       const matches = [...str.matchAll(REGEX_REFERENCE)];
@@ -169,7 +193,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       const match = findMatch(text, pos);
       if (match && typeof match.index !== "undefined") {
         setLastSelectionIndex(pos);
-        extractReference(match?.[2]);
+        setReferenceKey(match?.[2]);
       }
 
       setShowReferencePopup(!!match);
@@ -252,7 +276,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         value.slice(referenceEndIndex)
       ];
 
-      let oldReferenceStr = oldReference.slice(2, oldReference.length - 1);
+      let oldReferenceStr = oldReference.slice(2, -1);
 
       let replaceReference = "";
       let offset = 3;
@@ -277,7 +301,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       // TODO: there should be a better way to do
       onChange?.({ target: { value: newValue } } as any);
       setCaretPos(start.length + replaceReference.length + offset);
-      if (type !== "secret") extractReference(replaceReference);
+      if (type !== "secret") setReferenceKey(replaceReference);
     }
 
     function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
@@ -305,7 +329,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             }}
           >
             <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md py-4 text-white">
-              {listVariables.map((e, i) => {
+              {listReference.map((e, i) => {
                 return (
                   <button
                     className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 text-left last:border-b-0"
diff --git a/frontend/src/hooks/api/secretFolders/queries.tsx b/frontend/src/hooks/api/secretFolders/queries.tsx
index 968fe06bd7..bcda2b0a49 100644
--- a/frontend/src/hooks/api/secretFolders/queries.tsx
+++ b/frontend/src/hooks/api/secretFolders/queries.tsx
@@ -24,7 +24,7 @@ export const folderQueryKeys = {
     ["secret-folders", { projectId, environment, path }] as const
 };
 
-export const fetchProjectFolders = async (workspaceId: string, environment: string, path = "/") => {
+const fetchProjectFolders = async (workspaceId: string, environment: string, path = "/") => {
   const { data } = await apiRequest.get<{ folders: TSecretFolder[] }>("/api/v1/folders", {
     params: {
       workspaceId,
diff --git a/frontend/src/hooks/api/secrets/queries.tsx b/frontend/src/hooks/api/secrets/queries.tsx
index 28999389e9..1ba9a52518 100644
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/frontend/src/hooks/api/secrets/queries.tsx
@@ -98,7 +98,7 @@ export const decryptSecrets = (
   return secrets;
 };
 
-export const fetchProjectEncryptedSecrets = async ({
+const fetchProjectEncryptedSecrets = async ({
   workspaceId,
   environment,
   secretPath

From ee2b8a594a0f8782140e502bf5eda754732aada2 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 20:21:27 +0530
Subject: [PATCH 09/36] fix: handle skip and slash in environment slug

---
 .../server/routes/v1/project-env-router.ts    | 11 ++++++--
 .../dialog/AddUpdateEnvironmentDialog.tsx     |  1 +
 .../components/v2/SecretInput/SecretInput.tsx | 25 +++++++++++--------
 .../AddEnvironmentModal.tsx                   |  2 +-
 .../UpdateEnvironmentModal.tsx                |  2 +-
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/backend/src/server/routes/v1/project-env-router.ts b/backend/src/server/routes/v1/project-env-router.ts
index b93ffe9283..b2f7ffc2c3 100644
--- a/backend/src/server/routes/v1/project-env-router.ts
+++ b/backend/src/server/routes/v1/project-env-router.ts
@@ -22,7 +22,10 @@ export const registerProjectEnvRouter = async (server: FastifyZodProvider) => {
       }),
       body: z.object({
         name: z.string().trim(),
-        slug: z.string().trim()
+        slug: z
+          .string()
+          .regex(/^[^./]*$/g)
+          .trim()
       }),
       response: {
         200: z.object({
@@ -77,7 +80,11 @@ export const registerProjectEnvRouter = async (server: FastifyZodProvider) => {
         id: z.string().trim()
       }),
       body: z.object({
-        slug: z.string().trim().optional(),
+        slug: z
+          .string()
+          .regex(/^[^./]*$/g)
+          .trim()
+          .optional(),
         name: z.string().trim().optional(),
         position: z.number().optional()
       }),
diff --git a/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx b/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
index de5337ae69..e55fc58437 100644
--- a/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
+++ b/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
@@ -17,6 +17,7 @@ type Props = {
 };
 
 // TODO: Migrate to better form management and validation. Preferable react-hook-form + yup
+// We should remove this?
 /**
  * The dialog modal for when the user wants to create a new workspace
  * @param {*} param0
diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index deb33ec816..d6a580ee30 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -115,7 +115,6 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     });
 
     useEffect(() => {
-
       let currentEnvironment = propEnvironment;
       let currentSecretPath = propSecretPath || "/";
 
@@ -134,7 +133,13 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         currentSecretPath = `/${folderPaths?.join("/")}` || "/";
       }
 
-      if (!currentEnvironment || !decryptFileKey || !currentSecretPath || !currentWorkspace || !referenceKey) {
+      if (
+        !currentEnvironment ||
+        !decryptFileKey ||
+        !currentSecretPath ||
+        !currentWorkspace ||
+        !referenceKey
+      ) {
         // this need to clean up?
         setListReference(currentListReference);
         return;
@@ -142,8 +147,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       setSecretPath(currentSecretPath);
       setEnvironment(currentEnvironment);
       setShowReferencePopup(true);
-      
-    }, [referenceKey])
+    }, [referenceKey]);
 
     useEffect(() => {
       const currentListReference: ReferenceType[] = [];
@@ -195,7 +199,6 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         setLastSelectionIndex(pos);
         setReferenceKey(match?.[2]);
       }
-
       setShowReferencePopup(!!match);
     }
 
@@ -224,11 +227,10 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
         setValue(newValue);
         // TODO: there should be a better way to do
         onChange?.({ target: { value: newValue } } as any);
+        setCaretPos(currCaretPos);
 
         if (event.currentTarget) {
-          setCaretPos(currCaretPos);
           setTimeout(() => {
-            // on next tick
             referencePopup(newValue, currCaretPos);
           }, 200);
 
@@ -277,25 +279,28 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       ];
 
       let oldReferenceStr = oldReference.slice(2, -1);
+      let currentPath = type === "environment" ? slug! : name;
+      currentPath = currentPath.replace(/\./g, "\\.");
 
       let replaceReference = "";
       let offset = 3;
       switch (type) {
         case "folder":
-          replaceReference = `${oldReferenceStr}${name}.`;
+          replaceReference = `${oldReferenceStr}${currentPath}.`;
           offset -= 1;
           break;
         case "secret": {
           if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = "";
-          replaceReference = `${oldReferenceStr}${name}`;
+          replaceReference = `${oldReferenceStr}${currentPath}`;
           break;
         }
         case "environment":
-          replaceReference = `${slug}.`;
+          replaceReference = `${currentPath}.`;
           offset -= 1;
           break;
         default:
       }
+      replaceReference = replaceReference.replace(/[//]/g, "");
       newValue = `${start}$\{${replaceReference}}${end}`;
       setValue(newValue);
       // TODO: there should be a better way to do
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
index 477816670c..2525d57ef6 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
@@ -16,7 +16,7 @@ type Props = {
 
 const schema = yup.object({
   environmentName: yup.string().label("Environment Name").required(),
-  environmentSlug: yup.string().label("Environment Slug").required()
+  environmentSlug: yup.string().label("Environment Slug").matches(/^[^./]*$/g, { message: "Invalid [.] or [/] not allowed"}).required()
 });
 
 export type FormData = yup.InferType<typeof schema>;
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx
index ecd91303d3..16b0b71c67 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx
@@ -16,7 +16,7 @@ type Props = {
 
 const schema = yup.object({
   name: yup.string().label("Environment Name").required(),
-  slug: yup.string().label("Environment Slug").required()
+  slug: yup.string().label("Environment Slug").matches(/^[^./]*$/g, { message: "Invalid [.] or [/] not allowed"}).required()
 });
 
 export type FormData = yup.InferType<typeof schema>;

From c908310f6e074aec8495894400803f33cd8b059d Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 21:07:13 +0530
Subject: [PATCH 10/36] fix: add lint line for reference

---
 frontend/src/components/v2/SecretInput/SecretInput.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index d6a580ee30..f08706da02 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -11,6 +11,7 @@ import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
 import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
 
 const REGEX_REFERENCE = /(\${([^}]*)})/g;
+const REGEX_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/g
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
   for (let i = 0; i < str.length; i += 1) {
@@ -32,7 +33,12 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
       skipNext = true;
       return (
         <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
-          &#36;&#123;<span className="ph-no-capture text-yellow-200/80">{el.slice(2, -1)}</span>
+          &#36;&#123;<span
+            className={twMerge(
+              "ph-no-capture text-yellow-200/80",
+              REGEX_REFERENCE_INVALID.test(el.slice(2, -1)) && "underline decoration-wavy decoration-red"
+            )}
+          >{el.slice(2, -1)}</span>
           &#125;
         </span>
       );

From ec6475379586cf3c54ce89d1c7b718477c4adab1 Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Fri, 15 Mar 2024 22:49:40 +0530
Subject: [PATCH 11/36] fix: refactor and onyl valid env

---
 .../components/v2/SecretInput/SecretInput.tsx | 59 +++++++++----------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index f08706da02..b91025e89c 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -11,7 +11,8 @@ import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
 import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
 
 const REGEX_REFERENCE = /(\${([^}]*)})/g;
-const REGEX_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/g
+const REGEX_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/g;
+
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
   for (let i = 0; i < str.length; i += 1) {
@@ -33,12 +34,16 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
       skipNext = true;
       return (
         <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
-          &#36;&#123;<span
+          &#36;&#123;
+          <span
             className={twMerge(
               "ph-no-capture text-yellow-200/80",
-              REGEX_REFERENCE_INVALID.test(el.slice(2, -1)) && "underline decoration-wavy decoration-red"
+              REGEX_REFERENCE_INVALID.test(el.slice(2, -1)) &&
+                "underline decoration-red decoration-wavy"
             )}
-          >{el.slice(2, -1)}</span>
+          >
+            {el.slice(2, -1)}
+          </span>
           &#125;
         </span>
       );
@@ -98,25 +103,21 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [listReference, setListReference] = useState<ReferenceType[]>([]);
     const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
     const [referenceKey, setReferenceKey] = useState<string>();
-    const [lastSelectionIndex, setLastSelectionIndex] = useState<number>(0);
-    const [secretPath, setSecretPath] = useState<string>(
-      propSecretPath || currentWorkspace?.environments?.[0].slug!
-    );
-    const [environment, setEnvironment] = useState<string>(
-      propEnvironment || currentWorkspace?.environments?.[0].slug!
-    );
+    const [lastCaretPos, setLastCaretPos] = useState<number>(0);
+    const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
+    const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
 
     const workspaceId = currentWorkspace?.id || "";
     const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
     const { data: secrets } = useGetProjectSecrets({
       decryptFileKey: decryptFileKey!,
-      environment,
+      environment: environment || currentWorkspace?.environments?.[0].slug!,
       secretPath,
       workspaceId
     });
     const { folderNames: folders } = useGetFoldersByEnv({
       path: secretPath,
-      environments: [environment],
+      environments: [environment || currentWorkspace?.environments?.[0].slug!],
       projectId: workspaceId
     });
 
@@ -131,34 +132,28 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       }
 
       const isNested = referenceKey.includes(".");
-      const currentListReference: ReferenceType[] = [];
 
       if (isNested) {
         const [envSlug, ...folderPaths] = referenceKey.split(".");
-        currentEnvironment = envSlug;
+        const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
+        currentEnvironment = isValidEnvSlug ? envSlug : undefined;
         currentSecretPath = `/${folderPaths?.join("/")}` || "/";
       }
 
-      if (
-        !currentEnvironment ||
-        !decryptFileKey ||
-        !currentSecretPath ||
-        !currentWorkspace ||
-        !referenceKey
-      ) {
-        // this need to clean up?
-        setListReference(currentListReference);
-        return;
-      }
       setSecretPath(currentSecretPath);
       setEnvironment(currentEnvironment);
-      setShowReferencePopup(true);
     }, [referenceKey]);
 
     useEffect(() => {
       const currentListReference: ReferenceType[] = [];
       const isNested = referenceKey?.includes(".");
 
+      if (!environment) {
+        setListReference(currentListReference);
+        setShowReferencePopup(true);
+        return;
+      }
+
       if (isNested) {
         folders?.forEach((folder) => {
           currentListReference.unshift({ name: folder, type: "folder" });
@@ -170,15 +165,15 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       });
 
       setListReference(currentListReference);
-    }, [secrets, referenceKey]);
+      setShowReferencePopup(true);
+    }, [secrets, environment, referenceKey]);
 
     function findMatch(str: string, start: number) {
       const matches = [...str.matchAll(REGEX_REFERENCE)];
       for (let i = 0; i < matches.length; i += 1) {
         const match = matches[i];
         if (
-          match &&
-          typeof match.index !== "undefined" &&
+          typeof match?.index !== "undefined" &&
           match.index <= start &&
           start < match.index + match[0].length
         ) {
@@ -202,7 +197,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     function referencePopup(text: string, pos: number) {
       const match = findMatch(text, pos);
       if (match && typeof match.index !== "undefined") {
-        setLastSelectionIndex(pos);
+        setLastCaretPos(pos);
         setReferenceKey(match?.[2]);
       }
       setShowReferencePopup(!!match);
@@ -275,7 +270,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       }
 
       let newValue = value || "";
-      const match = findMatch(newValue, lastSelectionIndex);
+      const match = findMatch(newValue, lastCaretPos);
       const referenceStartIndex = match?.index || 0;
       const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
       const [start, oldReference, end] = [

From 1193e33890d7e165e58463e768dd8a875d1e47cf Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Sat, 16 Mar 2024 00:12:50 +0530
Subject: [PATCH 12/36] feat: improve validation secret reference

---
 .../components/v2/SecretInput/SecretInput.tsx | 10 +++----
 frontend/src/helpers/secret-reference.ts      | 27 +++++++++++++++++++
 frontend/src/hooks/api/secrets/mutations.tsx  |  3 +++
 3 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/helpers/secret-reference.ts

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index b91025e89c..4a03533f9f 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -5,14 +5,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { useWorkspace } from "@app/context";
+import { REGEX_SECRET_REFERENCE_FIND, REGEX_SECRET_REFERENCE_INVALID } from "@app/helpers/secret-reference";
 import { useToggle } from "@app/hooks";
 import { useGetUserWsKey } from "@app/hooks/api";
 import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
 import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
 
-const REGEX_REFERENCE = /(\${([^}]*)})/g;
-const REGEX_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/g;
-
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
   for (let i = 0; i < str.length; i += 1) {
@@ -28,7 +26,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   if (!isVisible) return replaceContentWithDot(content);
 
   let skipNext = false;
-  const formattedContent = content.split(REGEX_REFERENCE).flatMap((el, i) => {
+  const formattedContent = content.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
     if (isInterpolationSyntax) {
       skipNext = true;
@@ -38,7 +36,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
           <span
             className={twMerge(
               "ph-no-capture text-yellow-200/80",
-              REGEX_REFERENCE_INVALID.test(el.slice(2, -1)) &&
+              REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)) &&
                 "underline decoration-red decoration-wavy"
             )}
           >
@@ -169,7 +167,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     }, [secrets, environment, referenceKey]);
 
     function findMatch(str: string, start: number) {
-      const matches = [...str.matchAll(REGEX_REFERENCE)];
+      const matches = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)];
       for (let i = 0; i < matches.length; i += 1) {
         const match = matches[i];
         if (
diff --git a/frontend/src/helpers/secret-reference.ts b/frontend/src/helpers/secret-reference.ts
new file mode 100644
index 0000000000..03af998187
--- /dev/null
+++ b/frontend/src/helpers/secret-reference.ts
@@ -0,0 +1,27 @@
+export const REGEX_SECRET_REFERENCE_FIND = /(\${([^}]*)})/g;
+export const REGEX_SECRET_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/;
+
+export function isValidSecretReferenceValue(str: string): boolean {
+  try {
+    if (!str) return true;
+    let skipNext = false;
+    str.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el) => {
+      if (skipNext) {
+        skipNext = false;
+        return [];
+      }
+
+      const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
+      if (!isInterpolationSyntax) return [];
+
+      skipNext = true;
+      if (REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)))
+        throw new Error("Invalid reference");
+
+      return el;
+    });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/frontend/src/hooks/api/secrets/mutations.tsx b/frontend/src/hooks/api/secrets/mutations.tsx
index 448daee3be..13767b13e5 100644
--- a/frontend/src/hooks/api/secrets/mutations.tsx
+++ b/frontend/src/hooks/api/secrets/mutations.tsx
@@ -7,6 +7,7 @@ import {
   encryptSymmetric
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
+import { isValidSecretReferenceValue } from "@app/helpers/secret-reference";
 
 import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
@@ -83,6 +84,7 @@ export const useCreateSecretV3 = ({
       secretComment,
       skipMultilineEncoding
     }) => {
+      if (!isValidSecretReferenceValue(secretValue)) throw new Error("Invalid secret reference");
       const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
 
       const randomBytes = latestFileKey
@@ -144,6 +146,7 @@ export const useUpdateSecretV3 = ({
       newSecretName,
       skipMultilineEncoding
     }) => {
+      if (!isValidSecretReferenceValue(secretValue)) throw new Error("Invalid secret reference");
       const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
 
       const randomBytes = latestFileKey

From f9957e111c5bad4375be48a34b70badbc8c2989a Mon Sep 17 00:00:00 2001
From: Salman <salmanhammed77@gmail.com>
Date: Sat, 16 Mar 2024 06:40:15 +0530
Subject: [PATCH 13/36] feat: move to radix select component

---
 .../components/v2/SecretInput/SecretInput.tsx | 215 +++++-------------
 .../v2/SecretInput/SecretReferenceSelect.tsx  | 211 +++++++++++++++++
 2 files changed, 262 insertions(+), 164 deletions(-)
 create mode 100644 frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 4a03533f9f..bfb858892f 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,15 +1,14 @@
 /* eslint-disable react/no-danger */
-import React, { forwardRef, TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
-import { faChevronRight, faFolder, faKey, faRecycle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
-import { useWorkspace } from "@app/context";
-import { REGEX_SECRET_REFERENCE_FIND, REGEX_SECRET_REFERENCE_INVALID } from "@app/helpers/secret-reference";
+import {
+  REGEX_SECRET_REFERENCE_FIND,
+  REGEX_SECRET_REFERENCE_INVALID
+} from "@app/helpers/secret-reference";
 import { useToggle } from "@app/hooks";
-import { useGetUserWsKey } from "@app/hooks/api";
-import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
-import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
+
+import SecretReferenceSelect from "./SecretReferenceSelect";
 
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
@@ -68,12 +67,6 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   secretPath?: string;
 };
 
-type ReferenceType = {
-  name: string;
-  type: "folder" | "secret";
-  slug?: string;
-};
-
 const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
@@ -97,76 +90,11 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
 
     const [isSecretFocused, setIsSecretFocused] = useToggle();
     const [value, setValue] = useState<string>(propValue || "");
-    const { currentWorkspace } = useWorkspace();
-    const [listReference, setListReference] = useState<ReferenceType[]>([]);
     const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
     const [referenceKey, setReferenceKey] = useState<string>();
     const [lastCaretPos, setLastCaretPos] = useState<number>(0);
-    const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
-    const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
-
-    const workspaceId = currentWorkspace?.id || "";
-    const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
-    const { data: secrets } = useGetProjectSecrets({
-      decryptFileKey: decryptFileKey!,
-      environment: environment || currentWorkspace?.environments?.[0].slug!,
-      secretPath,
-      workspaceId
-    });
-    const { folderNames: folders } = useGetFoldersByEnv({
-      path: secretPath,
-      environments: [environment || currentWorkspace?.environments?.[0].slug!],
-      projectId: workspaceId
-    });
-
-    useEffect(() => {
-      let currentEnvironment = propEnvironment;
-      let currentSecretPath = propSecretPath || "/";
-
-      if (!referenceKey) {
-        setSecretPath(currentSecretPath);
-        setEnvironment(currentEnvironment!);
-        return;
-      }
-
-      const isNested = referenceKey.includes(".");
-
-      if (isNested) {
-        const [envSlug, ...folderPaths] = referenceKey.split(".");
-        const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
-        currentEnvironment = isValidEnvSlug ? envSlug : undefined;
-        currentSecretPath = `/${folderPaths?.join("/")}` || "/";
-      }
-
-      setSecretPath(currentSecretPath);
-      setEnvironment(currentEnvironment);
-    }, [referenceKey]);
-
-    useEffect(() => {
-      const currentListReference: ReferenceType[] = [];
-      const isNested = referenceKey?.includes(".");
-
-      if (!environment) {
-        setListReference(currentListReference);
-        setShowReferencePopup(true);
-        return;
-      }
-
-      if (isNested) {
-        folders?.forEach((folder) => {
-          currentListReference.unshift({ name: folder, type: "folder" });
-        });
-      }
 
-      secrets?.forEach((secret) => {
-        currentListReference.unshift({ name: secret.key, type: "secret" });
-      });
-
-      setListReference(currentListReference);
-      setShowReferencePopup(true);
-    }, [secrets, environment, referenceKey]);
-
-    function findMatch(str: string, start: number) {
+    function isCaretInsideReference(str: string, start: number) {
       const matches = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)];
       for (let i = 0; i < matches.length; i += 1) {
         const match = matches[i];
@@ -193,7 +121,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     }
 
     function referencePopup(text: string, pos: number) {
-      const match = findMatch(text, pos);
+      const match = isCaretInsideReference(text, pos);
       if (match && typeof match.index !== "undefined") {
         setLastCaretPos(pos);
         setReferenceKey(match?.[2]);
@@ -236,12 +164,22 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
           return;
         }
       }
-      // On Key up or down if the popup is open ignore it
-      if ((showReferencePopup && event.key === "ArrowUp") || event.key === "ArrowDown") {
-        event.preventDefault();
+      if (!(event.key.startsWith("Arrow") || event.key === "Backspace" || event.key === "Delete")) {
+        handleReferencePopup(event.currentTarget);
       }
+    }
 
-      handleReferencePopup(event.currentTarget);
+    function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+      if (
+        !(
+          event.key.startsWith("Arrow") ||
+          ["Backspace", "Delete", "."].includes(event.key) ||
+          (event.metaKey && event.key.toLowerCase() === "a")
+        )
+      ) {
+        const match = isCaretInsideReference(value, event.currentTarget.selectionEnd);
+        if (match) event.preventDefault();
+      }
     }
 
     function handleMouseClick(event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) {
@@ -268,7 +206,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       }
 
       let newValue = value || "";
-      const match = findMatch(newValue, lastCaretPos);
+      const match = isCaretInsideReference(newValue, lastCaretPos);
       const referenceStartIndex = match?.index || 0;
       const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
       const [start, oldReference, end] = [
@@ -304,8 +242,13 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       setValue(newValue);
       // TODO: there should be a better way to do
       onChange?.({ target: { value: newValue } } as any);
-      setCaretPos(start.length + replaceReference.length + offset);
-      if (type !== "secret") setReferenceKey(replaceReference);
+      setShowReferencePopup(type !== "secret");
+      setTimeout(() => {
+        setIsSecretFocused.on();
+        if (type !== "secret") setReferenceKey(replaceReference);
+        const caretPos = start.length + replaceReference.length + offset;
+        setCaretPos(caretPos);
+      }, 100);
     }
 
     function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
@@ -313,88 +256,17 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       if (typeof onChange === "function") onChange(event);
     }
 
+    function handleReferenceOpenChange(currOpen: boolean) {
+      if (!currOpen) setShowReferencePopup(false);
+    }
+
     return (
-      // TODO: hide popup if the focus within the child component left
       <div
         className={twMerge(
-          "flex w-full flex-col gap-4 overflow-auto rounded-md no-scrollbar",
+          "flex w-full flex-col overflow-auto rounded-md no-scrollbar",
           containerClassName
         )}
-        // style={{ maxHeight: `${21 * 7}px` }}
       >
-        {/* TODO(radix): Move to radix select component and scroll element */}
-        {showReferencePopup && isSecretFocused && (
-          <div
-            className={twMerge(
-              "fixed z-[100] w-60 translate-y-2 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200"
-            )}
-            style={{
-              marginTop: `${Math.min(childRef.current?.clientHeight || 21 * 7, 21 * 7)}px`
-            }}
-          >
-            <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md py-4 text-white">
-              {listReference.map((e, i) => {
-                return (
-                  <button
-                    className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 text-left last:border-b-0"
-                    key={`key-${i + 1}`}
-                    onClick={() => handleReferenceSelect({ name: e.name, type: e.type })}
-                    type="button"
-                  >
-                    {e.type === "folder" && (
-                      <>
-                        <div className="flex gap-2">
-                          <div className="flex items-center text-yellow-700">
-                            <FontAwesomeIcon icon={faFolder} />
-                          </div>
-                          <div className="w-48 truncate">{e.name}</div>
-                        </div>
-                        <div className="flex items-center text-bunker-200">
-                          <FontAwesomeIcon icon={faChevronRight} />
-                        </div>
-                      </>
-                    )}
-
-                    {e.type === "secret" && (
-                      <div className="flex gap-2">
-                        <div className="flex items-center text-yellow-700">
-                          <FontAwesomeIcon icon={faKey} />
-                        </div>
-                        <div className="w-48 truncate text-left">{e.name}</div>
-                      </div>
-                    )}
-                  </button>
-                );
-              })}
-
-              <div className="flex w-full justify-center gap-2 pt-1 text-xs text-bunker-300">
-                All Secrets
-              </div>
-
-              {currentWorkspace?.environments.map((env, i) => (
-                <button
-                  className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
-                  key={`key-${i + 1}`}
-                  onClick={() =>
-                    handleReferenceSelect({ name: env.name, type: "environment", slug: env.slug })
-                  }
-                  type="button"
-                >
-                  <div className="flex gap-2">
-                    <div className="flex items-center text-yellow-700">
-                      <FontAwesomeIcon icon={faRecycle} />
-                    </div>
-                    <div className="w-48 truncate text-left">{env.name}</div>
-                  </div>
-                  <div className="flex items-center text-bunker-200">
-                    <FontAwesomeIcon icon={faChevronRight} />
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
         <div style={{ maxHeight: `${21 * 7}px` }}>
           <div className="relative overflow-hidden">
             <pre aria-hidden className="m-0 ">
@@ -415,6 +287,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
               )}
               onFocus={() => setIsSecretFocused.on()}
               onKeyUp={handleKeyUp}
+              onKeyDown={handleKeyDown}
               onClick={handleMouseClick}
               onChange={handleChange}
               disabled={isDisabled}
@@ -429,6 +302,20 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             />
           </div>
         </div>
+
+        <SecretReferenceSelect
+          reference={referenceKey}
+          secretPath={propSecretPath}
+          environment={propEnvironment}
+          open={showReferencePopup}
+          handleOpenChange={(isOpen) => handleReferenceOpenChange(isOpen)}
+          onSelect={(refValue) => handleReferenceSelect(refValue)}
+          onEscapeKeyDown={() => {
+            setTimeout(() => {
+              setCaretPos(lastCaretPos);
+            }, 200);
+          }}
+        />
       </div>
     );
   }
diff --git a/frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx b/frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx
new file mode 100644
index 0000000000..da8cff98f4
--- /dev/null
+++ b/frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx
@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from "react";
+import {
+  faCaretDown,
+  faCaretUp,
+  faChevronRight,
+  faFolder,
+  faKey,
+  faRecycle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { twMerge } from "tailwind-merge";
+
+import { useWorkspace } from "@app/context";
+import { useGetUserWsKey } from "@app/hooks/api";
+import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
+import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
+
+type ReferenceType = "environment" | "folder" | "secret";
+
+type Props = {
+  open: boolean;
+  reference?: string;
+  secretPath?: string;
+  environment?: string;
+  handleOpenChange: (params: boolean) => void;
+  onEscapeKeyDown: () => void;
+  onSelect: (params: { type: ReferenceType; name: string; slug?: string }) => void;
+};
+
+type ReferenceItem = {
+  name: string;
+  type: "folder" | "secret";
+  slug?: string;
+};
+
+export default function SecretReferenceSelect({
+  open,
+  secretPath: propSecretPath,
+  environment: propEnvironment,
+  handleOpenChange,
+  reference,
+  onSelect,
+  onEscapeKeyDown
+}: Props) {
+  const { currentWorkspace } = useWorkspace();
+  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
+  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
+  const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
+  const workspaceId = currentWorkspace?.id || "";
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+  const { data: secrets } = useGetProjectSecrets({
+    decryptFileKey: decryptFileKey!,
+    environment: environment || currentWorkspace?.environments?.[0].slug!,
+    secretPath,
+    workspaceId
+  });
+  const { folderNames: folders } = useGetFoldersByEnv({
+    path: secretPath,
+    environments: [environment || currentWorkspace?.environments?.[0].slug!],
+    projectId: workspaceId
+  });
+
+  useEffect(() => {
+    let currentEnvironment = propEnvironment;
+    let currentSecretPath = propSecretPath || "/";
+
+    if (!reference) {
+      setSecretPath(currentSecretPath);
+      setEnvironment(currentEnvironment!);
+      return;
+    }
+
+    const isNested = reference.includes(".");
+
+    if (isNested) {
+      const [envSlug, ...folderPaths] = reference.split(".");
+      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
+      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
+      currentSecretPath = `/${folderPaths?.join("/")}` || "/";
+    }
+
+    setSecretPath(currentSecretPath);
+    setEnvironment(currentEnvironment);
+  }, [reference]);
+
+  useEffect(() => {
+    const currentListReference: ReferenceItem[] = [];
+    const isNested = reference?.includes(".");
+
+    if (!environment) {
+      setListReference(currentListReference);
+      return;
+    }
+
+    if (isNested) {
+      folders?.forEach((folder) => {
+        currentListReference.unshift({ name: folder, type: "folder" });
+      });
+    }
+
+    secrets?.forEach((secret) => {
+      currentListReference.unshift({ name: secret.key, type: "secret" });
+    });
+
+    setListReference(currentListReference);
+  }, [secrets, environment, reference]);
+
+  return (
+    <SelectPrimitive.Root
+      open={open}
+      onOpenChange={handleOpenChange}
+      onValueChange={(str) => onSelect(JSON.parse(str))}
+    >
+      <SelectPrimitive.Trigger>
+        <SelectPrimitive.Value>
+          <div />
+        </SelectPrimitive.Value>
+      </SelectPrimitive.Trigger>
+
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className={twMerge(
+            "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
+          )}
+          position="popper"
+          side="left"
+          onEscapeKeyDown={onEscapeKeyDown}
+          style={{
+            width: "300px",
+            maxHeight: "var(--radix-select-content-available-height)"
+          }}
+        >
+          <SelectPrimitive.ScrollUpButton>
+            <div className="flex items-center justify-center">
+              <FontAwesomeIcon icon={faCaretUp} size="sm" />
+            </div>
+          </SelectPrimitive.ScrollUpButton>
+          <SelectPrimitive.Viewport className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-4 text-white">
+            <SelectPrimitive.Group>
+              {listReference.map((e, i) => {
+                return (
+                  <SelectPrimitive.Item
+                    className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+                    key={`secret-reference-secret-${i + 1}`}
+                    value={JSON.stringify(e)}
+                    asChild
+                  >
+                    <SelectPrimitive.ItemText asChild>
+                      <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
+                        <div className="flex gap-2">
+                          <div className="flex items-center text-yellow-700">
+                            <FontAwesomeIcon icon={e.type === "secret" ? faKey : faFolder} />
+                          </div>
+                          <div className="text-md w-48 truncate text-left">{e.name}</div>
+                        </div>
+                        {e.type === "folder" && (
+                          <div className="flex items-center text-bunker-200">
+                            <FontAwesomeIcon icon={faChevronRight} />
+                          </div>
+                        )}
+                      </div>
+                    </SelectPrimitive.ItemText>
+                  </SelectPrimitive.Item>
+                );
+              })}
+
+              {listReference.length !== 0 && (
+                <SelectPrimitive.Separator className="m-1 h-[1px] mb-2 bg-mineshaft-400" />
+              )}
+            </SelectPrimitive.Group>
+
+            <SelectPrimitive.Group>
+              <SelectPrimitive.Label className="flex w-full justify-center gap-2 pt-1 text-sm text-bunker-300">
+                All Secrets
+              </SelectPrimitive.Label>
+
+              {currentWorkspace?.environments.map((env, i) => (
+                <SelectPrimitive.Item
+                  className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+                  key={`secret-reference-env-${i + 1}`}
+                  value={JSON.stringify({ ...env, type: "environment" })}
+                  asChild
+                >
+                  <SelectPrimitive.ItemText asChild>
+                    <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
+                      <div className="flex gap-2">
+                        <div className="flex items-center text-yellow-700">
+                          <FontAwesomeIcon icon={faRecycle} />
+                        </div>
+                        <div className="text-md w-48 truncate text-left">{env.name}</div>
+                      </div>
+                      <div className="flex items-center text-bunker-200">
+                        <FontAwesomeIcon icon={faChevronRight} />
+                      </div>
+                    </div>
+                  </SelectPrimitive.ItemText>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Group>
+          </SelectPrimitive.Viewport>
+          <SelectPrimitive.ScrollDownButton>
+            <div className="flex items-center justify-center">
+              <FontAwesomeIcon icon={faCaretDown} size="sm" />
+            </div>
+          </SelectPrimitive.ScrollDownButton>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}

From 0899fdb7d538be364c404ab1c37b8831d5f1587b Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Mon, 22 Apr 2024 22:22:48 +0800
Subject: [PATCH 14/36] adjustment: migrated to InfisicalSecretInput component

---
 .../InfisicalSecretInput.tsx                  | 324 ++++++++++++++++++
 .../SecretReferenceSelect.tsx                 | 211 ++++++++++++
 .../CreateSecretForm/CreateSecretForm.tsx     |   5 +-
 .../SecretImportListView/SecretImportItem.tsx |   7 +-
 .../SecretListView/SecretDetaiSidebar.tsx     |   6 +-
 .../components/SecretListView/SecretItem.tsx  |   6 +-
 .../SecretOverviewTableRow/SecretEditRow.tsx  |  13 +-
 7 files changed, 555 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
 create mode 100644 frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
new file mode 100644
index 0000000000..be24b1cf1b
--- /dev/null
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -0,0 +1,324 @@
+/* eslint-disable react/no-danger */
+import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+import {
+  REGEX_SECRET_REFERENCE_FIND,
+  REGEX_SECRET_REFERENCE_INVALID
+} from "@app/helpers/secret-reference";
+import { useToggle } from "@app/hooks";
+
+import SecretReferenceSelect from "./SecretReferenceSelect";
+
+const replaceContentWithDot = (str: string) => {
+  let finalStr = "";
+  for (let i = 0; i < str.length; i += 1) {
+    const char = str.at(i);
+    finalStr += char === "\n" ? "\n" : "*";
+  }
+  return finalStr;
+};
+
+const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
+  if (content === "") return "EMPTY";
+  if (!content) return "EMPTY";
+  if (!isVisible) return replaceContentWithDot(content);
+
+  let skipNext = false;
+  const formattedContent = content.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el, i) => {
+    const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
+    if (isInterpolationSyntax) {
+      skipNext = true;
+      return (
+        <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
+          &#36;&#123;
+          <span
+            className={twMerge(
+              "ph-no-capture text-yellow-200/80",
+              REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)) &&
+                "underline decoration-red decoration-wavy"
+            )}
+          >
+            {el.slice(2, -1)}
+          </span>
+          &#125;
+        </span>
+      );
+    }
+    if (skipNext) {
+      skipNext = false;
+      return [];
+    }
+    return el;
+  });
+
+  // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
+  // when break is added a line break works properly
+  return formattedContent.concat(<br />);
+};
+
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  value?: string | null;
+  isVisible?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  containerClassName?: string;
+  environment?: string;
+  secretPath?: string;
+};
+
+const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
+
+export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
+  (
+    {
+      value: propValue,
+      isVisible,
+      containerClassName,
+      onBlur,
+      isDisabled,
+      isReadOnly,
+      onFocus,
+      secretPath: propSecretPath,
+      environment: propEnvironment,
+      onChange,
+      ...props
+    },
+    ref
+  ) => {
+    const childRef = useRef<HTMLTextAreaElement>(null);
+
+    const [isSecretFocused, setIsSecretFocused] = useToggle();
+    const [value, setValue] = useState<string>(propValue || "");
+    const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
+    const [referenceKey, setReferenceKey] = useState<string>();
+    const [lastCaretPos, setLastCaretPos] = useState<number>(0);
+
+    function isCaretInsideReference(str: string, start: number) {
+      const matches = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)];
+      for (let i = 0; i < matches.length; i += 1) {
+        const match = matches[i];
+        if (
+          typeof match?.index !== "undefined" &&
+          match.index <= start &&
+          start < match.index + match[0].length
+        ) {
+          return match;
+        }
+      }
+      return null;
+    }
+
+    function setCaretPos(caretPos: number) {
+      if (childRef?.current) {
+        childRef.current.focus();
+        setTimeout(() => {
+          if (!childRef?.current) return;
+          childRef.current.selectionStart = caretPos;
+          childRef.current.selectionEnd = caretPos;
+        }, 200);
+      }
+    }
+
+    function referencePopup(text: string, pos: number) {
+      const match = isCaretInsideReference(text, pos);
+      if (match && typeof match.index !== "undefined") {
+        setLastCaretPos(pos);
+        setReferenceKey(match?.[2]);
+      }
+      setShowReferencePopup(!!match);
+    }
+
+    function handleReferencePopup(element: HTMLTextAreaElement) {
+      const { selectionStart, selectionEnd, value: text } = element;
+      if (selectionStart !== selectionEnd || selectionStart === 0) {
+        return;
+      }
+      referencePopup(text, selectionStart);
+    }
+
+    function handleKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+      if (event.key === "Escape") {
+        setShowReferencePopup(false);
+        return;
+      }
+
+      if (event.key === "{") {
+        // auto close the bracket
+        const currCaretPos = event.currentTarget.selectionEnd;
+        const isPrevDollar = value[currCaretPos - 2] === "$";
+        if (!isPrevDollar) return;
+
+        const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
+
+        setValue(newValue);
+        // TODO: there should be a better way to do
+        onChange?.({ target: { value: newValue } } as any);
+        setCaretPos(currCaretPos);
+
+        if (event.currentTarget) {
+          setTimeout(() => {
+            referencePopup(newValue, currCaretPos);
+          }, 200);
+
+          return;
+        }
+      }
+      if (!(event.key.startsWith("Arrow") || event.key === "Backspace" || event.key === "Delete")) {
+        handleReferencePopup(event.currentTarget);
+      }
+    }
+
+    function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+      if (
+        !(
+          event.key.startsWith("Arrow") ||
+          ["Backspace", "Delete", "."].includes(event.key) ||
+          (event.metaKey && event.key.toLowerCase() === "a")
+        )
+      ) {
+        const match = isCaretInsideReference(value, event.currentTarget.selectionEnd);
+        if (match) event.preventDefault();
+      }
+    }
+
+    function handleMouseClick(event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) {
+      handleReferencePopup(event.currentTarget);
+    }
+
+    async function handleReferenceSelect({
+      name,
+      type,
+      slug
+    }: {
+      name: string;
+      type: "folder" | "secret" | "environment";
+      slug?: string;
+    }) {
+      setShowReferencePopup(false);
+
+      // forward ref for parent component
+      if (typeof ref === "function") {
+        ref(childRef.current);
+      } else if (ref && "current" in ref) {
+        const refCopy = ref;
+        refCopy.current = childRef.current;
+      }
+
+      let newValue = value || "";
+      const match = isCaretInsideReference(newValue, lastCaretPos);
+      const referenceStartIndex = match?.index || 0;
+      const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
+      const [start, oldReference, end] = [
+        value.slice(0, referenceStartIndex),
+        value.slice(referenceStartIndex, referenceEndIndex),
+        value.slice(referenceEndIndex)
+      ];
+
+      let oldReferenceStr = oldReference.slice(2, -1);
+      let currentPath = type === "environment" ? slug! : name;
+      currentPath = currentPath.replace(/\./g, "\\.");
+
+      let replaceReference = "";
+      let offset = 3;
+      switch (type) {
+        case "folder":
+          replaceReference = `${oldReferenceStr}${currentPath}.`;
+          offset -= 1;
+          break;
+        case "secret": {
+          if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = "";
+          replaceReference = `${oldReferenceStr}${currentPath}`;
+          break;
+        }
+        case "environment":
+          replaceReference = `${currentPath}.`;
+          offset -= 1;
+          break;
+        default:
+      }
+      replaceReference = replaceReference.replace(/[//]/g, "");
+      newValue = `${start}$\{${replaceReference}}${end}`;
+      setValue(newValue);
+      // TODO: there should be a better way to do
+      onChange?.({ target: { value: newValue } } as any);
+      setShowReferencePopup(type !== "secret");
+      setTimeout(() => {
+        setIsSecretFocused.on();
+        if (type !== "secret") setReferenceKey(replaceReference);
+        const caretPos = start.length + replaceReference.length + offset;
+        setCaretPos(caretPos);
+      }, 100);
+    }
+
+    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+      setValue(event.target.value);
+      if (typeof onChange === "function") onChange(event);
+    }
+
+    function handleReferenceOpenChange(currOpen: boolean) {
+      if (!currOpen) setShowReferencePopup(false);
+    }
+
+    return (
+      <div
+        className={twMerge(
+          "flex w-full flex-col overflow-auto rounded-md no-scrollbar",
+          containerClassName
+        )}
+      >
+        <div style={{ maxHeight: `${21 * 7}px` }}>
+          <div className="relative overflow-hidden">
+            <pre aria-hidden className="m-0 ">
+              <code className={`inline-block w-full  ${commonClassName}`}>
+                <span style={{ whiteSpace: "break-spaces" }}>
+                  {syntaxHighlight(value, isVisible || isSecretFocused)}
+                </span>
+              </code>
+            </pre>
+
+            <textarea
+              style={{ whiteSpace: "break-spaces" }}
+              aria-label="secret value"
+              ref={childRef}
+              className={twMerge(
+                "absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0",
+                commonClassName
+              )}
+              onFocus={() => setIsSecretFocused.on()}
+              onKeyUp={handleKeyUp}
+              onKeyDown={handleKeyDown}
+              onClick={handleMouseClick}
+              onChange={handleChange}
+              disabled={isDisabled}
+              spellCheck={false}
+              onBlur={(evt) => {
+                onBlur?.(evt);
+                if (!showReferencePopup) setIsSecretFocused.off();
+              }}
+              {...props}
+              value={value}
+              readOnly={isReadOnly}
+            />
+          </div>
+        </div>
+
+        <SecretReferenceSelect
+          reference={referenceKey}
+          secretPath={propSecretPath}
+          environment={propEnvironment}
+          open={showReferencePopup}
+          handleOpenChange={(isOpen) => handleReferenceOpenChange(isOpen)}
+          onSelect={(refValue) => handleReferenceSelect(refValue)}
+          onEscapeKeyDown={() => {
+            setTimeout(() => {
+              setCaretPos(lastCaretPos);
+            }, 200);
+          }}
+        />
+      </div>
+    );
+  }
+);
+
+InfisicalSecretInput.displayName = "SecretInput";
diff --git a/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx b/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
new file mode 100644
index 0000000000..da8cff98f4
--- /dev/null
+++ b/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from "react";
+import {
+  faCaretDown,
+  faCaretUp,
+  faChevronRight,
+  faFolder,
+  faKey,
+  faRecycle
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { twMerge } from "tailwind-merge";
+
+import { useWorkspace } from "@app/context";
+import { useGetUserWsKey } from "@app/hooks/api";
+import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
+import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
+
+type ReferenceType = "environment" | "folder" | "secret";
+
+type Props = {
+  open: boolean;
+  reference?: string;
+  secretPath?: string;
+  environment?: string;
+  handleOpenChange: (params: boolean) => void;
+  onEscapeKeyDown: () => void;
+  onSelect: (params: { type: ReferenceType; name: string; slug?: string }) => void;
+};
+
+type ReferenceItem = {
+  name: string;
+  type: "folder" | "secret";
+  slug?: string;
+};
+
+export default function SecretReferenceSelect({
+  open,
+  secretPath: propSecretPath,
+  environment: propEnvironment,
+  handleOpenChange,
+  reference,
+  onSelect,
+  onEscapeKeyDown
+}: Props) {
+  const { currentWorkspace } = useWorkspace();
+  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
+  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
+  const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
+  const workspaceId = currentWorkspace?.id || "";
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+  const { data: secrets } = useGetProjectSecrets({
+    decryptFileKey: decryptFileKey!,
+    environment: environment || currentWorkspace?.environments?.[0].slug!,
+    secretPath,
+    workspaceId
+  });
+  const { folderNames: folders } = useGetFoldersByEnv({
+    path: secretPath,
+    environments: [environment || currentWorkspace?.environments?.[0].slug!],
+    projectId: workspaceId
+  });
+
+  useEffect(() => {
+    let currentEnvironment = propEnvironment;
+    let currentSecretPath = propSecretPath || "/";
+
+    if (!reference) {
+      setSecretPath(currentSecretPath);
+      setEnvironment(currentEnvironment!);
+      return;
+    }
+
+    const isNested = reference.includes(".");
+
+    if (isNested) {
+      const [envSlug, ...folderPaths] = reference.split(".");
+      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
+      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
+      currentSecretPath = `/${folderPaths?.join("/")}` || "/";
+    }
+
+    setSecretPath(currentSecretPath);
+    setEnvironment(currentEnvironment);
+  }, [reference]);
+
+  useEffect(() => {
+    const currentListReference: ReferenceItem[] = [];
+    const isNested = reference?.includes(".");
+
+    if (!environment) {
+      setListReference(currentListReference);
+      return;
+    }
+
+    if (isNested) {
+      folders?.forEach((folder) => {
+        currentListReference.unshift({ name: folder, type: "folder" });
+      });
+    }
+
+    secrets?.forEach((secret) => {
+      currentListReference.unshift({ name: secret.key, type: "secret" });
+    });
+
+    setListReference(currentListReference);
+  }, [secrets, environment, reference]);
+
+  return (
+    <SelectPrimitive.Root
+      open={open}
+      onOpenChange={handleOpenChange}
+      onValueChange={(str) => onSelect(JSON.parse(str))}
+    >
+      <SelectPrimitive.Trigger>
+        <SelectPrimitive.Value>
+          <div />
+        </SelectPrimitive.Value>
+      </SelectPrimitive.Trigger>
+
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+          className={twMerge(
+            "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
+          )}
+          position="popper"
+          side="left"
+          onEscapeKeyDown={onEscapeKeyDown}
+          style={{
+            width: "300px",
+            maxHeight: "var(--radix-select-content-available-height)"
+          }}
+        >
+          <SelectPrimitive.ScrollUpButton>
+            <div className="flex items-center justify-center">
+              <FontAwesomeIcon icon={faCaretUp} size="sm" />
+            </div>
+          </SelectPrimitive.ScrollUpButton>
+          <SelectPrimitive.Viewport className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-4 text-white">
+            <SelectPrimitive.Group>
+              {listReference.map((e, i) => {
+                return (
+                  <SelectPrimitive.Item
+                    className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+                    key={`secret-reference-secret-${i + 1}`}
+                    value={JSON.stringify(e)}
+                    asChild
+                  >
+                    <SelectPrimitive.ItemText asChild>
+                      <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
+                        <div className="flex gap-2">
+                          <div className="flex items-center text-yellow-700">
+                            <FontAwesomeIcon icon={e.type === "secret" ? faKey : faFolder} />
+                          </div>
+                          <div className="text-md w-48 truncate text-left">{e.name}</div>
+                        </div>
+                        {e.type === "folder" && (
+                          <div className="flex items-center text-bunker-200">
+                            <FontAwesomeIcon icon={faChevronRight} />
+                          </div>
+                        )}
+                      </div>
+                    </SelectPrimitive.ItemText>
+                  </SelectPrimitive.Item>
+                );
+              })}
+
+              {listReference.length !== 0 && (
+                <SelectPrimitive.Separator className="m-1 h-[1px] mb-2 bg-mineshaft-400" />
+              )}
+            </SelectPrimitive.Group>
+
+            <SelectPrimitive.Group>
+              <SelectPrimitive.Label className="flex w-full justify-center gap-2 pt-1 text-sm text-bunker-300">
+                All Secrets
+              </SelectPrimitive.Label>
+
+              {currentWorkspace?.environments.map((env, i) => (
+                <SelectPrimitive.Item
+                  className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+                  key={`secret-reference-env-${i + 1}`}
+                  value={JSON.stringify({ ...env, type: "environment" })}
+                  asChild
+                >
+                  <SelectPrimitive.ItemText asChild>
+                    <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
+                      <div className="flex gap-2">
+                        <div className="flex items-center text-yellow-700">
+                          <FontAwesomeIcon icon={faRecycle} />
+                        </div>
+                        <div className="text-md w-48 truncate text-left">{env.name}</div>
+                      </div>
+                      <div className="flex items-center text-bunker-200">
+                        <FontAwesomeIcon icon={faChevronRight} />
+                      </div>
+                    </div>
+                  </SelectPrimitive.ItemText>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Group>
+          </SelectPrimitive.Viewport>
+          <SelectPrimitive.ScrollDownButton>
+            <div className="flex items-center justify-center">
+              <FontAwesomeIcon icon={faCaretDown} size="sm" />
+            </div>
+          </SelectPrimitive.ScrollDownButton>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
+    </SelectPrimitive.Root>
+  );
+}
diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
index 5743a9f74c..edd5d8df99 100644
--- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -3,7 +3,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { Button, FormControl, Input, Modal, ModalContent, SecretInput } from "@app/components/v2";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
 import { useCreateSecretV3 } from "@app/hooks/api";
 import { UserWsKeyPair } from "@app/hooks/api/types";
 
@@ -103,7 +104,7 @@ export const CreateSecretForm = ({
                 isError={Boolean(errors?.value)}
                 errorText={errors?.value?.message}
               >
-                <SecretInput
+                <InfisicalSecretInput
                   {...field}
                   environment={environment}
                   secretPath={secretPath}
diff --git a/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
index 0070ef2481..dd0f5fbecc 100644
--- a/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
@@ -172,12 +172,7 @@ export const SecretImportItem = ({
                           {key}
                         </td>
                         <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
-                          <SecretInput
-                            value={value}
-                            isReadOnly 
-                            environment={overriden?.env}
-                            secretPath={overriden?.secretPath}
-                          />
+                          <SecretInput value={value} isReadOnly />
                         </td>
                         <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
                           <EnvFolderIcon env={overriden?.env} secretPath={overriden?.secretPath} />
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index 772bb2da03..acd3e77526 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -27,12 +27,12 @@ import {
   FormControl,
   IconButton,
   Input,
-  SecretInput,
   Switch,
   Tag,
   TextArea,
   Tooltip
 } from "@app/components/v2";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetSecretVersion } from "@app/hooks/api";
@@ -204,7 +204,7 @@ export const SecretDetailSidebar = ({
                     control={control}
                     render={({ field }) => (
                       <FormControl label="Value">
-                        <SecretInput
+                        <InfisicalSecretInput
                           isReadOnly={isReadOnly}
                           environment={environment}
                           secretPath={secretPath}
@@ -242,7 +242,7 @@ export const SecretDetailSidebar = ({
                   control={control}
                   render={({ field }) => (
                     <FormControl label="Value Override">
-                      <SecretInput
+                      <InfisicalSecretInput
                         isReadOnly={isReadOnly}
                         environment={environment}
                         secretPath={secretPath}
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
index b459d55089..3044646417 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
@@ -14,7 +14,6 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-  SecretInput,
   Spinner,
   TextArea,
   Tooltip
@@ -49,6 +48,7 @@ import { memo, useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { twMerge } from "tailwind-merge";
 
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
@@ -263,7 +263,7 @@ export const SecretItem = memo(
                     key="value-overriden"
                     control={control}
                     render={({ field }) => (
-                      <SecretInput
+                      <InfisicalSecretInput
                         key="value-overriden"
                         isVisible={isVisible}
                         isReadOnly={isReadOnly}
@@ -280,7 +280,7 @@ export const SecretItem = memo(
                     key="secret-value"
                     control={control}
                     render={({ field }) => (
-                      <SecretInput
+                      <InfisicalSecretInput
                         isReadOnly={isReadOnly}
                         key="secret-value"
                         isVisible={isVisible}
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 10c6e229a9..6f70bb59bb 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -5,7 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { IconButton, SecretInput, Tooltip } from "@app/components/v2";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
 
@@ -87,13 +88,19 @@ export const SecretEditRow = ({
   };
 
   return (
-    <div className="group flex w-full cursor-text space-x-2 items-center">
+    <div className="group flex w-full cursor-text items-center space-x-2">
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
           control={control}
           name="value"
           render={({ field }) => (
-            <SecretInput {...field} value={field.value as string} isVisible={isVisible} secretPath={secretPath} environment={environment} />
+            <InfisicalSecretInput
+              {...field}
+              value={field.value as string}
+              isVisible={isVisible}
+              secretPath={secretPath}
+              environment={environment}
+            />
           )}
         />
       </div>

From 358ca3decda3fe45da29a8b4ceff9df30906073b Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Mon, 22 Apr 2024 23:26:44 +0800
Subject: [PATCH 15/36] adjustment: reverted changes made to SecretInput

---
 .../components/v2/SecretInput/SecretInput.tsx | 290 ++----------------
 1 file changed, 32 insertions(+), 258 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index bfb858892f..2dfafca741 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,15 +1,10 @@
 /* eslint-disable react/no-danger */
-import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react";
+import { forwardRef, TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
-import {
-  REGEX_SECRET_REFERENCE_FIND,
-  REGEX_SECRET_REFERENCE_INVALID
-} from "@app/helpers/secret-reference";
 import { useToggle } from "@app/hooks";
 
-import SecretReferenceSelect from "./SecretReferenceSelect";
-
+const REGEX = /(\${([^}]+)})/g;
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
   for (let i = 0; i < str.length; i += 1) {
@@ -25,22 +20,13 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   if (!isVisible) return replaceContentWithDot(content);
 
   let skipNext = false;
-  const formattedContent = content.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el, i) => {
+  const formatedContent = content.split(REGEX).flatMap((el, i) => {
     const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
     if (isInterpolationSyntax) {
       skipNext = true;
       return (
         <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
-          &#36;&#123;
-          <span
-            className={twMerge(
-              "ph-no-capture text-yellow-200/80",
-              REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)) &&
-                "underline decoration-red decoration-wavy"
-            )}
-          >
-            {el.slice(2, -1)}
-          </span>
+          &#36;&#123;<span className="ph-no-capture text-yello-200/80">{el.slice(2, -1)}</span>
           &#125;
         </span>
       );
@@ -54,7 +40,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
 
   // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
   // when break is added a line break works properly
-  return formattedContent.concat(<br />);
+  return formatedContent.concat(<br />);
 };
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
@@ -63,259 +49,47 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   containerClassName?: string;
-  environment?: string;
-  secretPath?: string;
 };
 
 const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   (
-    {
-      value: propValue,
-      isVisible,
-      containerClassName,
-      onBlur,
-      isDisabled,
-      isReadOnly,
-      onFocus,
-      secretPath: propSecretPath,
-      environment: propEnvironment,
-      onChange,
-      ...props
-    },
+    { value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
     ref
   ) => {
-    const childRef = useRef<HTMLTextAreaElement>(null);
-
     const [isSecretFocused, setIsSecretFocused] = useToggle();
-    const [value, setValue] = useState<string>(propValue || "");
-    const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
-    const [referenceKey, setReferenceKey] = useState<string>();
-    const [lastCaretPos, setLastCaretPos] = useState<number>(0);
-
-    function isCaretInsideReference(str: string, start: number) {
-      const matches = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)];
-      for (let i = 0; i < matches.length; i += 1) {
-        const match = matches[i];
-        if (
-          typeof match?.index !== "undefined" &&
-          match.index <= start &&
-          start < match.index + match[0].length
-        ) {
-          return match;
-        }
-      }
-      return null;
-    }
-
-    function setCaretPos(caretPos: number) {
-      if (childRef?.current) {
-        childRef.current.focus();
-        setTimeout(() => {
-          if (!childRef?.current) return;
-          childRef.current.selectionStart = caretPos;
-          childRef.current.selectionEnd = caretPos;
-        }, 200);
-      }
-    }
-
-    function referencePopup(text: string, pos: number) {
-      const match = isCaretInsideReference(text, pos);
-      if (match && typeof match.index !== "undefined") {
-        setLastCaretPos(pos);
-        setReferenceKey(match?.[2]);
-      }
-      setShowReferencePopup(!!match);
-    }
-
-    function handleReferencePopup(element: HTMLTextAreaElement) {
-      const { selectionStart, selectionEnd, value: text } = element;
-      if (selectionStart !== selectionEnd || selectionStart === 0) {
-        return;
-      }
-      referencePopup(text, selectionStart);
-    }
-
-    function handleKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
-      if (event.key === "Escape") {
-        setShowReferencePopup(false);
-        return;
-      }
-
-      if (event.key === "{") {
-        // auto close the bracket
-        const currCaretPos = event.currentTarget.selectionEnd;
-        const isPrevDollar = value[currCaretPos - 2] === "$";
-        if (!isPrevDollar) return;
-
-        const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
-
-        setValue(newValue);
-        // TODO: there should be a better way to do
-        onChange?.({ target: { value: newValue } } as any);
-        setCaretPos(currCaretPos);
-
-        if (event.currentTarget) {
-          setTimeout(() => {
-            referencePopup(newValue, currCaretPos);
-          }, 200);
-
-          return;
-        }
-      }
-      if (!(event.key.startsWith("Arrow") || event.key === "Backspace" || event.key === "Delete")) {
-        handleReferencePopup(event.currentTarget);
-      }
-    }
-
-    function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
-      if (
-        !(
-          event.key.startsWith("Arrow") ||
-          ["Backspace", "Delete", "."].includes(event.key) ||
-          (event.metaKey && event.key.toLowerCase() === "a")
-        )
-      ) {
-        const match = isCaretInsideReference(value, event.currentTarget.selectionEnd);
-        if (match) event.preventDefault();
-      }
-    }
-
-    function handleMouseClick(event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) {
-      handleReferencePopup(event.currentTarget);
-    }
-
-    async function handleReferenceSelect({
-      name,
-      type,
-      slug
-    }: {
-      name: string;
-      type: "folder" | "secret" | "environment";
-      slug?: string;
-    }) {
-      setShowReferencePopup(false);
-
-      // forward ref for parent component
-      if (typeof ref === "function") {
-        ref(childRef.current);
-      } else if (ref && "current" in ref) {
-        const refCopy = ref;
-        refCopy.current = childRef.current;
-      }
-
-      let newValue = value || "";
-      const match = isCaretInsideReference(newValue, lastCaretPos);
-      const referenceStartIndex = match?.index || 0;
-      const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
-      const [start, oldReference, end] = [
-        value.slice(0, referenceStartIndex),
-        value.slice(referenceStartIndex, referenceEndIndex),
-        value.slice(referenceEndIndex)
-      ];
-
-      let oldReferenceStr = oldReference.slice(2, -1);
-      let currentPath = type === "environment" ? slug! : name;
-      currentPath = currentPath.replace(/\./g, "\\.");
-
-      let replaceReference = "";
-      let offset = 3;
-      switch (type) {
-        case "folder":
-          replaceReference = `${oldReferenceStr}${currentPath}.`;
-          offset -= 1;
-          break;
-        case "secret": {
-          if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = "";
-          replaceReference = `${oldReferenceStr}${currentPath}`;
-          break;
-        }
-        case "environment":
-          replaceReference = `${currentPath}.`;
-          offset -= 1;
-          break;
-        default:
-      }
-      replaceReference = replaceReference.replace(/[//]/g, "");
-      newValue = `${start}$\{${replaceReference}}${end}`;
-      setValue(newValue);
-      // TODO: there should be a better way to do
-      onChange?.({ target: { value: newValue } } as any);
-      setShowReferencePopup(type !== "secret");
-      setTimeout(() => {
-        setIsSecretFocused.on();
-        if (type !== "secret") setReferenceKey(replaceReference);
-        const caretPos = start.length + replaceReference.length + offset;
-        setCaretPos(caretPos);
-      }, 100);
-    }
-
-    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-      setValue(event.target.value);
-      if (typeof onChange === "function") onChange(event);
-    }
-
-    function handleReferenceOpenChange(currOpen: boolean) {
-      if (!currOpen) setShowReferencePopup(false);
-    }
 
     return (
       <div
-        className={twMerge(
-          "flex w-full flex-col overflow-auto rounded-md no-scrollbar",
-          containerClassName
-        )}
+        className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}
+        style={{ maxHeight: `${21 * 7}px` }}
       >
-        <div style={{ maxHeight: `${21 * 7}px` }}>
-          <div className="relative overflow-hidden">
-            <pre aria-hidden className="m-0 ">
-              <code className={`inline-block w-full  ${commonClassName}`}>
-                <span style={{ whiteSpace: "break-spaces" }}>
-                  {syntaxHighlight(value, isVisible || isSecretFocused)}
-                </span>
-              </code>
-            </pre>
-
-            <textarea
-              style={{ whiteSpace: "break-spaces" }}
-              aria-label="secret value"
-              ref={childRef}
-              className={twMerge(
-                "absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0",
-                commonClassName
-              )}
-              onFocus={() => setIsSecretFocused.on()}
-              onKeyUp={handleKeyUp}
-              onKeyDown={handleKeyDown}
-              onClick={handleMouseClick}
-              onChange={handleChange}
-              disabled={isDisabled}
-              spellCheck={false}
-              onBlur={(evt) => {
-                onBlur?.(evt);
-                if (!showReferencePopup) setIsSecretFocused.off();
-              }}
-              {...props}
-              value={value}
-              readOnly={isReadOnly}
-            />
-          </div>
+        <div className="relative overflow-hidden">
+          <pre aria-hidden className="m-0 ">
+            <code className={`inline-block w-full  ${commonClassName}`}>
+              <span style={{ whiteSpace: "break-spaces" }}>
+                {syntaxHighlight(value, isVisible || isSecretFocused)}
+              </span>
+            </code>
+          </pre>
+          <textarea
+            style={{ whiteSpace: "break-spaces" }}
+            aria-label="secret value"
+            ref={ref}
+            className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
+            onFocus={() => setIsSecretFocused.on()}
+            disabled={isDisabled}
+            spellCheck={false}
+            onBlur={(evt) => {
+              onBlur?.(evt);
+              setIsSecretFocused.off();
+            }}
+            value={value || ""}
+            {...props}
+            readOnly={isReadOnly}
+          />
         </div>
-
-        <SecretReferenceSelect
-          reference={referenceKey}
-          secretPath={propSecretPath}
-          environment={propEnvironment}
-          open={showReferencePopup}
-          handleOpenChange={(isOpen) => handleReferenceOpenChange(isOpen)}
-          onSelect={(refValue) => handleReferenceSelect(refValue)}
-          onEscapeKeyDown={() => {
-            setTimeout(() => {
-              setCaretPos(lastCaretPos);
-            }, 200);
-          }}
-        />
       </div>
     );
   }

From 31a499c9cdde1194a9895148b1b7f85435d716d2 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 02:10:15 +0800
Subject: [PATCH 16/36] adjustment: added clearTimeout

---
 .../InfisicalSecretInput/InfisicalSecretInput.tsx  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index be24b1cf1b..9f1a92a2b8 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -112,10 +112,11 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
     function setCaretPos(caretPos: number) {
       if (childRef?.current) {
         childRef.current.focus();
-        setTimeout(() => {
+        const timeout = setTimeout(() => {
           if (!childRef?.current) return;
           childRef.current.selectionStart = caretPos;
           childRef.current.selectionEnd = caretPos;
+          clearTimeout(timeout);
         }, 200);
       }
     }
@@ -157,8 +158,9 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         setCaretPos(currCaretPos);
 
         if (event.currentTarget) {
-          setTimeout(() => {
+          const timeout = setTimeout(() => {
             referencePopup(newValue, currCaretPos);
+            clearTimeout(timeout);
           }, 200);
 
           return;
@@ -243,11 +245,12 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       // TODO: there should be a better way to do
       onChange?.({ target: { value: newValue } } as any);
       setShowReferencePopup(type !== "secret");
-      setTimeout(() => {
+      const timeout = setTimeout(() => {
         setIsSecretFocused.on();
         if (type !== "secret") setReferenceKey(replaceReference);
         const caretPos = start.length + replaceReference.length + offset;
         setCaretPos(caretPos);
+        clearTimeout(timeout);
       }, 100);
     }
 
@@ -311,8 +314,9 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
           handleOpenChange={(isOpen) => handleReferenceOpenChange(isOpen)}
           onSelect={(refValue) => handleReferenceSelect(refValue)}
           onEscapeKeyDown={() => {
-            setTimeout(() => {
+            const timeout = setTimeout(() => {
               setCaretPos(lastCaretPos);
+              clearTimeout(timeout);
             }, 200);
           }}
         />
@@ -321,4 +325,4 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
   }
 );
 
-InfisicalSecretInput.displayName = "SecretInput";
+InfisicalSecretInput.displayName = "InfisicalSecretInput";

From 6daeed68a0a15a1fbdaf4173bf9968d27ed05379 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 02:28:42 +0800
Subject: [PATCH 17/36] adjustment: converted callback functions to use arrow
 notation

---
 .../InfisicalSecretInput.tsx                  | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 9f1a92a2b8..5987e9278b 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -94,7 +94,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [referenceKey, setReferenceKey] = useState<string>();
     const [lastCaretPos, setLastCaretPos] = useState<number>(0);
 
-    function isCaretInsideReference(str: string, start: number) {
+    const isCaretInsideReference = (str: string, start: number) => {
       const matches = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)];
       for (let i = 0; i < matches.length; i += 1) {
         const match = matches[i];
@@ -107,9 +107,9 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         }
       }
       return null;
-    }
+    };
 
-    function setCaretPos(caretPos: number) {
+    const setCaretPos = (caretPos: number) => {
       if (childRef?.current) {
         childRef.current.focus();
         const timeout = setTimeout(() => {
@@ -119,26 +119,26 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
           clearTimeout(timeout);
         }, 200);
       }
-    }
+    };
 
-    function referencePopup(text: string, pos: number) {
+    const referencePopup = (text: string, pos: number) => {
       const match = isCaretInsideReference(text, pos);
       if (match && typeof match.index !== "undefined") {
         setLastCaretPos(pos);
         setReferenceKey(match?.[2]);
       }
       setShowReferencePopup(!!match);
-    }
+    };
 
-    function handleReferencePopup(element: HTMLTextAreaElement) {
+    const handleReferencePopup = (element: HTMLTextAreaElement) => {
       const { selectionStart, selectionEnd, value: text } = element;
       if (selectionStart !== selectionEnd || selectionStart === 0) {
         return;
       }
       referencePopup(text, selectionStart);
-    }
+    };
 
-    function handleKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+    const handleKeyUp = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (event.key === "Escape") {
         setShowReferencePopup(false);
         return;
@@ -169,9 +169,9 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       if (!(event.key.startsWith("Arrow") || event.key === "Backspace" || event.key === "Delete")) {
         handleReferencePopup(event.currentTarget);
       }
-    }
+    };
 
-    function handleKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (
         !(
           event.key.startsWith("Arrow") ||
@@ -182,13 +182,13 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         const match = isCaretInsideReference(value, event.currentTarget.selectionEnd);
         if (match) event.preventDefault();
       }
-    }
+    };
 
-    function handleMouseClick(event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) {
+    const handleMouseClick = (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => {
       handleReferencePopup(event.currentTarget);
-    }
+    };
 
-    async function handleReferenceSelect({
+    const handleReferenceSelect = ({
       name,
       type,
       slug
@@ -196,7 +196,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       name: string;
       type: "folder" | "secret" | "environment";
       slug?: string;
-    }) {
+    }) => {
       setShowReferencePopup(false);
 
       // forward ref for parent component
@@ -252,16 +252,16 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         setCaretPos(caretPos);
         clearTimeout(timeout);
       }, 100);
-    }
+    };
 
-    function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
+    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
       setValue(event.target.value);
       if (typeof onChange === "function") onChange(event);
-    }
+    };
 
-    function handleReferenceOpenChange(currOpen: boolean) {
+    const handleReferenceOpenChange = (currOpen: boolean) => {
       if (!currOpen) setShowReferencePopup(false);
-    }
+    };
 
     return (
       <div

From 738e8cfc5c8a40ce5cddbcb2b12b2e9e393410fc Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 10:25:36 +0800
Subject: [PATCH 18/36] adjustment: standardized slug validation

---
 .../server/routes/v1/project-env-router.ts    |  5 +-
 frontend/package-lock.json                    | 52 +++++++++++++++++++
 frontend/package.json                         |  1 +
 .../SecretReferenceSelect.tsx                 |  2 +-
 .../AddEnvironmentModal.tsx                   | 10 +++-
 5 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/backend/src/server/routes/v1/project-env-router.ts b/backend/src/server/routes/v1/project-env-router.ts
index b2f7ffc2c3..db35e16f65 100644
--- a/backend/src/server/routes/v1/project-env-router.ts
+++ b/backend/src/server/routes/v1/project-env-router.ts
@@ -1,3 +1,4 @@
+import slugify from "@sindresorhus/slugify";
 import { z } from "zod";
 
 import { ProjectEnvironmentsSchema } from "@app/db/schemas";
@@ -24,8 +25,10 @@ export const registerProjectEnvRouter = async (server: FastifyZodProvider) => {
         name: z.string().trim(),
         slug: z
           .string()
-          .regex(/^[^./]*$/g)
           .trim()
+          .refine((v) => slugify(v) === v, {
+            message: "Slug must be a valid slug"
+          })
       }),
       response: {
         200: z.object({
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5e30edfc3e..4b7907b60f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -38,6 +38,7 @@
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@reduxjs/toolkit": "^1.8.3",
+        "@sindresorhus/slugify": "^2.2.1",
         "@stripe/react-stripe-js": "^1.16.3",
         "@stripe/stripe-js": "^1.46.0",
         "@tanstack/react-query": "^4.23.0",
@@ -5774,6 +5775,57 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "node_modules/@sindresorhus/slugify": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-2.2.1.tgz",
+      "integrity": "sha512-MkngSCRZ8JdSOCHRaYd+D01XhvU3Hjy6MGl06zhOk614hp9EOAp5gIkBeQg7wtmxpitU6eAL4kdiRMcJa2dlrw==",
+      "dependencies": {
+        "@sindresorhus/transliterate": "^1.0.0",
+        "escape-string-regexp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/slugify/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/transliterate": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/transliterate/-/transliterate-1.6.0.tgz",
+      "integrity": "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==",
+      "dependencies": {
+        "escape-string-regexp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@sindresorhus/transliterate/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@storybook/addon-actions": {
       "version": "7.6.8",
       "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6a1666f056..cae75f0c8e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -46,6 +46,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@reduxjs/toolkit": "^1.8.3",
+    "@sindresorhus/slugify": "^2.2.1",
     "@stripe/react-stripe-js": "^1.16.3",
     "@stripe/stripe-js": "^1.46.0",
     "@tanstack/react-query": "^4.23.0",
diff --git a/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx b/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
index da8cff98f4..454e3600c7 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
@@ -166,7 +166,7 @@ export default function SecretReferenceSelect({
               })}
 
               {listReference.length !== 0 && (
-                <SelectPrimitive.Separator className="m-1 h-[1px] mb-2 bg-mineshaft-400" />
+                <SelectPrimitive.Separator className="m-1 mb-2 h-[1px] bg-mineshaft-400" />
               )}
             </SelectPrimitive.Group>
 
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
index 2525d57ef6..f12dcfa4d1 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
@@ -1,5 +1,6 @@
 import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
+import slugify from "@sindresorhus/slugify";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -16,7 +17,14 @@ type Props = {
 
 const schema = yup.object({
   environmentName: yup.string().label("Environment Name").required(),
-  environmentSlug: yup.string().label("Environment Slug").matches(/^[^./]*$/g, { message: "Invalid [.] or [/] not allowed"}).required()
+  environmentSlug: yup
+    .string()
+    .label("Environment Slug")
+    .test({
+      test: (slug) => slugify(slug as string) === slug,
+      message: "Slug must be a valid slug"
+    })
+    .required()
 });
 
 export type FormData = yup.InferType<typeof schema>;

From 729c75112b3590dba3f616b65afd2332e7d04379 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 10:26:41 +0800
Subject: [PATCH 19/36] adjustment: deleted unused reference select component

---
 .../v2/SecretInput/SecretReferenceSelect.tsx  | 211 ------------------
 1 file changed, 211 deletions(-)
 delete mode 100644 frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx

diff --git a/frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx b/frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx
deleted file mode 100644
index da8cff98f4..0000000000
--- a/frontend/src/components/v2/SecretInput/SecretReferenceSelect.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  faCaretDown,
-  faCaretUp,
-  faChevronRight,
-  faFolder,
-  faKey,
-  faRecycle
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { twMerge } from "tailwind-merge";
-
-import { useWorkspace } from "@app/context";
-import { useGetUserWsKey } from "@app/hooks/api";
-import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
-import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
-
-type ReferenceType = "environment" | "folder" | "secret";
-
-type Props = {
-  open: boolean;
-  reference?: string;
-  secretPath?: string;
-  environment?: string;
-  handleOpenChange: (params: boolean) => void;
-  onEscapeKeyDown: () => void;
-  onSelect: (params: { type: ReferenceType; name: string; slug?: string }) => void;
-};
-
-type ReferenceItem = {
-  name: string;
-  type: "folder" | "secret";
-  slug?: string;
-};
-
-export default function SecretReferenceSelect({
-  open,
-  secretPath: propSecretPath,
-  environment: propEnvironment,
-  handleOpenChange,
-  reference,
-  onSelect,
-  onEscapeKeyDown
-}: Props) {
-  const { currentWorkspace } = useWorkspace();
-  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
-  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
-  const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
-  const workspaceId = currentWorkspace?.id || "";
-  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
-  const { data: secrets } = useGetProjectSecrets({
-    decryptFileKey: decryptFileKey!,
-    environment: environment || currentWorkspace?.environments?.[0].slug!,
-    secretPath,
-    workspaceId
-  });
-  const { folderNames: folders } = useGetFoldersByEnv({
-    path: secretPath,
-    environments: [environment || currentWorkspace?.environments?.[0].slug!],
-    projectId: workspaceId
-  });
-
-  useEffect(() => {
-    let currentEnvironment = propEnvironment;
-    let currentSecretPath = propSecretPath || "/";
-
-    if (!reference) {
-      setSecretPath(currentSecretPath);
-      setEnvironment(currentEnvironment!);
-      return;
-    }
-
-    const isNested = reference.includes(".");
-
-    if (isNested) {
-      const [envSlug, ...folderPaths] = reference.split(".");
-      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
-      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
-      currentSecretPath = `/${folderPaths?.join("/")}` || "/";
-    }
-
-    setSecretPath(currentSecretPath);
-    setEnvironment(currentEnvironment);
-  }, [reference]);
-
-  useEffect(() => {
-    const currentListReference: ReferenceItem[] = [];
-    const isNested = reference?.includes(".");
-
-    if (!environment) {
-      setListReference(currentListReference);
-      return;
-    }
-
-    if (isNested) {
-      folders?.forEach((folder) => {
-        currentListReference.unshift({ name: folder, type: "folder" });
-      });
-    }
-
-    secrets?.forEach((secret) => {
-      currentListReference.unshift({ name: secret.key, type: "secret" });
-    });
-
-    setListReference(currentListReference);
-  }, [secrets, environment, reference]);
-
-  return (
-    <SelectPrimitive.Root
-      open={open}
-      onOpenChange={handleOpenChange}
-      onValueChange={(str) => onSelect(JSON.parse(str))}
-    >
-      <SelectPrimitive.Trigger>
-        <SelectPrimitive.Value>
-          <div />
-        </SelectPrimitive.Value>
-      </SelectPrimitive.Trigger>
-
-      <SelectPrimitive.Portal>
-        <SelectPrimitive.Content
-          className={twMerge(
-            "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
-          )}
-          position="popper"
-          side="left"
-          onEscapeKeyDown={onEscapeKeyDown}
-          style={{
-            width: "300px",
-            maxHeight: "var(--radix-select-content-available-height)"
-          }}
-        >
-          <SelectPrimitive.ScrollUpButton>
-            <div className="flex items-center justify-center">
-              <FontAwesomeIcon icon={faCaretUp} size="sm" />
-            </div>
-          </SelectPrimitive.ScrollUpButton>
-          <SelectPrimitive.Viewport className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-4 text-white">
-            <SelectPrimitive.Group>
-              {listReference.map((e, i) => {
-                return (
-                  <SelectPrimitive.Item
-                    className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
-                    key={`secret-reference-secret-${i + 1}`}
-                    value={JSON.stringify(e)}
-                    asChild
-                  >
-                    <SelectPrimitive.ItemText asChild>
-                      <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
-                        <div className="flex gap-2">
-                          <div className="flex items-center text-yellow-700">
-                            <FontAwesomeIcon icon={e.type === "secret" ? faKey : faFolder} />
-                          </div>
-                          <div className="text-md w-48 truncate text-left">{e.name}</div>
-                        </div>
-                        {e.type === "folder" && (
-                          <div className="flex items-center text-bunker-200">
-                            <FontAwesomeIcon icon={faChevronRight} />
-                          </div>
-                        )}
-                      </div>
-                    </SelectPrimitive.ItemText>
-                  </SelectPrimitive.Item>
-                );
-              })}
-
-              {listReference.length !== 0 && (
-                <SelectPrimitive.Separator className="m-1 h-[1px] mb-2 bg-mineshaft-400" />
-              )}
-            </SelectPrimitive.Group>
-
-            <SelectPrimitive.Group>
-              <SelectPrimitive.Label className="flex w-full justify-center gap-2 pt-1 text-sm text-bunker-300">
-                All Secrets
-              </SelectPrimitive.Label>
-
-              {currentWorkspace?.environments.map((env, i) => (
-                <SelectPrimitive.Item
-                  className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
-                  key={`secret-reference-env-${i + 1}`}
-                  value={JSON.stringify({ ...env, type: "environment" })}
-                  asChild
-                >
-                  <SelectPrimitive.ItemText asChild>
-                    <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
-                      <div className="flex gap-2">
-                        <div className="flex items-center text-yellow-700">
-                          <FontAwesomeIcon icon={faRecycle} />
-                        </div>
-                        <div className="text-md w-48 truncate text-left">{env.name}</div>
-                      </div>
-                      <div className="flex items-center text-bunker-200">
-                        <FontAwesomeIcon icon={faChevronRight} />
-                      </div>
-                    </div>
-                  </SelectPrimitive.ItemText>
-                </SelectPrimitive.Item>
-              ))}
-            </SelectPrimitive.Group>
-          </SelectPrimitive.Viewport>
-          <SelectPrimitive.ScrollDownButton>
-            <div className="flex items-center justify-center">
-              <FontAwesomeIcon icon={faCaretDown} size="sm" />
-            </div>
-          </SelectPrimitive.ScrollDownButton>
-        </SelectPrimitive.Content>
-      </SelectPrimitive.Portal>
-    </SelectPrimitive.Root>
-  );
-}

From 918734b26bd28ee679745f879bad6b78f732260c Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 10:43:10 +0800
Subject: [PATCH 20/36] adjustment: used enum for reference type

---
 .../InfisicalSecretInput.tsx                     | 16 ++++++++--------
 .../SecretReferenceSelect.tsx                    | 14 +++++++++-----
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 5987e9278b..09f42ff7dc 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -8,7 +8,7 @@ import {
 } from "@app/helpers/secret-reference";
 import { useToggle } from "@app/hooks";
 
-import SecretReferenceSelect from "./SecretReferenceSelect";
+import SecretReferenceSelect, { ReferenceType } from "./SecretReferenceSelect";
 
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
@@ -194,7 +194,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       slug
     }: {
       name: string;
-      type: "folder" | "secret" | "environment";
+      type: ReferenceType;
       slug?: string;
     }) => {
       setShowReferencePopup(false);
@@ -218,22 +218,22 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       ];
 
       let oldReferenceStr = oldReference.slice(2, -1);
-      let currentPath = type === "environment" ? slug! : name;
+      let currentPath = type === ReferenceType.ENVIRONMENT ? slug! : name;
       currentPath = currentPath.replace(/\./g, "\\.");
 
       let replaceReference = "";
       let offset = 3;
       switch (type) {
-        case "folder":
+        case ReferenceType.FOLDER:
           replaceReference = `${oldReferenceStr}${currentPath}.`;
           offset -= 1;
           break;
-        case "secret": {
+        case ReferenceType.SECRET: {
           if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = "";
           replaceReference = `${oldReferenceStr}${currentPath}`;
           break;
         }
-        case "environment":
+        case ReferenceType.ENVIRONMENT:
           replaceReference = `${currentPath}.`;
           offset -= 1;
           break;
@@ -244,10 +244,10 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       setValue(newValue);
       // TODO: there should be a better way to do
       onChange?.({ target: { value: newValue } } as any);
-      setShowReferencePopup(type !== "secret");
+      setShowReferencePopup(type !== ReferenceType.SECRET);
       const timeout = setTimeout(() => {
         setIsSecretFocused.on();
-        if (type !== "secret") setReferenceKey(replaceReference);
+        if (type !== ReferenceType.SECRET) setReferenceKey(replaceReference);
         const caretPos = start.length + replaceReference.length + offset;
         setCaretPos(caretPos);
         clearTimeout(timeout);
diff --git a/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx b/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
index 454e3600c7..6d2157af3d 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
@@ -16,7 +16,11 @@ import { useGetUserWsKey } from "@app/hooks/api";
 import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
 import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
 
-type ReferenceType = "environment" | "folder" | "secret";
+export enum ReferenceType {
+  ENVIRONMENT = "environment",
+  FOLDER = "folder",
+  SECRET = "secret"
+}
 
 type Props = {
   open: boolean;
@@ -30,7 +34,7 @@ type Props = {
 
 type ReferenceItem = {
   name: string;
-  type: "folder" | "secret";
+  type: ReferenceType.FOLDER | ReferenceType.SECRET;
   slug?: string;
 };
 
@@ -95,12 +99,12 @@ export default function SecretReferenceSelect({
 
     if (isNested) {
       folders?.forEach((folder) => {
-        currentListReference.unshift({ name: folder, type: "folder" });
+        currentListReference.unshift({ name: folder, type: ReferenceType.FOLDER });
       });
     }
 
     secrets?.forEach((secret) => {
-      currentListReference.unshift({ name: secret.key, type: "secret" });
+      currentListReference.unshift({ name: secret.key, type: ReferenceType.SECRET });
     });
 
     setListReference(currentListReference);
@@ -179,7 +183,7 @@ export default function SecretReferenceSelect({
                 <SelectPrimitive.Item
                   className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
                   key={`secret-reference-env-${i + 1}`}
-                  value={JSON.stringify({ ...env, type: "environment" })}
+                  value={JSON.stringify({ ...env, type: ReferenceType.ENVIRONMENT })}
                   asChild
                 >
                   <SelectPrimitive.ItemText asChild>

From 2200bd646efa6b7497daa45922b6b60efc55a754 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 11:17:12 +0800
Subject: [PATCH 21/36] adjustment: added isImport handling

---
 .../v2/InfisicalSecretInput/InfisicalSecretInput.tsx       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 09f42ff7dc..29e91f1109 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -19,7 +19,8 @@ const replaceContentWithDot = (str: string) => {
   return finalStr;
 };
 
-const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
+const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
+  if (isImport) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);
@@ -59,6 +60,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
+  isImport?: boolean;
   isVisible?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
@@ -77,6 +79,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       containerClassName,
       onBlur,
       isDisabled,
+      isImport,
       isReadOnly,
       onFocus,
       secretPath: propSecretPath,
@@ -275,7 +278,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
             <pre aria-hidden className="m-0 ">
               <code className={`inline-block w-full  ${commonClassName}`}>
                 <span style={{ whiteSpace: "break-spaces" }}>
-                  {syntaxHighlight(value, isVisible || isSecretFocused)}
+                  {syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
                 </span>
               </code>
             </pre>

From 20898c00c64b9d0bc519349ad9f7f97d72fb170d Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 11:35:17 +0800
Subject: [PATCH 22/36] feat: added referencing autocomplete to remaining
 components

---
 .../CreateSecretForm/CreateSecretForm.tsx        |  6 ++----
 .../steps/RotationInputForm.tsx                  | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index f7605aa93b..dbcf1cb908 100644
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -13,9 +13,9 @@ import {
   Input,
   Modal,
   ModalContent,
-  SecretInput,
   Tooltip
 } from "@app/components/v2";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
 import { useWorkspace } from "@app/context";
 import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
 import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
@@ -64,8 +64,6 @@ export const CreateSecretForm = ({
   const workspaceId = currentWorkspace?.id || "";
   const environments = currentWorkspace?.environments || [];
 
-  
-
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
   const { mutateAsync: createFolder } = useCreateFolder();
@@ -163,7 +161,7 @@ export const CreateSecretForm = ({
                 isError={Boolean(errors?.value)}
                 errorText={errors?.value?.message}
               >
-                <SecretInput
+                <InfisicalSecretInput
                   {...field}
                   containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
                 />
diff --git a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
index fe57bb464f..0a570b89a5 100644
--- a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
+++ b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { Button, FormControl, FormLabel, SecretInput, Tooltip } from "@app/components/v2";
+import { Button, FormControl, FormLabel, Tooltip } from "@app/components/v2";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
 
 type Props = {
   onSubmit: (data: Record<string, string>) => void;
@@ -19,7 +20,13 @@ type Props = {
 
 const formSchema = z.record(z.string().trim().optional());
 
-export const RotationInputForm = ({ onSubmit, onCancel, inputSchema, secretPath, environment }: Props) => {
+export const RotationInputForm = ({
+  onSubmit,
+  onCancel,
+  inputSchema,
+  secretPath,
+  environment
+}: Props) => {
   const {
     control,
     handleSubmit,
@@ -58,11 +65,12 @@ export const RotationInputForm = ({ onSubmit, onCancel, inputSchema, secretPath,
                 </div>
               }
             >
-              <SecretInput
+              <InfisicalSecretInput
                 {...field}
                 containerClassName="normal-case text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
                 required={inputSchema.required.includes(inputName)}
-                secretPath={secretPath} environment={environment}
+                secretPath={secretPath}
+                environment={environment}
               />
             </FormControl>
           )}

From 80b0dc689567f396b77a4be47681d3fc4e05b85f Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 20:55:43 +0800
Subject: [PATCH 23/36] adjustment: removed autocomplete from RotationInputForm

---
 .../CreateRotationForm/CreateRotationForm.tsx   |  5 +----
 .../steps/RotationInputForm.tsx                 | 17 +++--------------
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
index 23901136c9..cdaeb32c40 100644
--- a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
+++ b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
@@ -102,8 +102,7 @@ export const CreateRotationForm = ({
           ))}
         </Stepper>
         <AnimatePresence exitBeforeEnter>
-          {/* TODO: Check this before merge */}
-          {wizardStep === 0 && wizardData.current.output && (
+          {wizardStep === 0 && (
             <motion.div
               key="input-step"
               transition={{ duration: 0.1 }}
@@ -118,8 +117,6 @@ export const CreateRotationForm = ({
                   setWizardStep((state) => state + 1);
                 }}
                 inputSchema={provider.template?.inputs || {}}
-                secretPath={wizardData.current.output.secretPath}
-                environment={wizardData.current.output.environment}
               />
             </motion.div>
           )}
diff --git a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
index 0a570b89a5..3b336a750c 100644
--- a/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
+++ b/frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx
@@ -4,8 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { Button, FormControl, FormLabel, Tooltip } from "@app/components/v2";
-import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
+import { Button, FormControl, FormLabel, SecretInput, Tooltip } from "@app/components/v2";
 
 type Props = {
   onSubmit: (data: Record<string, string>) => void;
@@ -14,19 +13,11 @@ type Props = {
     properties: Record<string, { type: string; desc?: string; default?: string }>;
     required: string[];
   };
-  secretPath: string;
-  environment: string;
 };
 
 const formSchema = z.record(z.string().trim().optional());
 
-export const RotationInputForm = ({
-  onSubmit,
-  onCancel,
-  inputSchema,
-  secretPath,
-  environment
-}: Props) => {
+export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) => {
   const {
     control,
     handleSubmit,
@@ -65,12 +56,10 @@ export const RotationInputForm = ({
                 </div>
               }
             >
-              <InfisicalSecretInput
+              <SecretInput
                 {...field}
                 containerClassName="normal-case text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
                 required={inputSchema.required.includes(inputName)}
-                secretPath={secretPath}
-                environment={environment}
               />
             </FormControl>
           )}

From 872f8bdad820ff053af264991e4cad92782b2d6b Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 21:14:33 +0800
Subject: [PATCH 24/36] adjustment: converted remaining salug validation to use
 slugify

---
 .../basic/dialog/AddUpdateEnvironmentDialog.tsx |  1 -
 .../UpdateEnvironmentModal.tsx                  | 17 ++++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx b/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
index f984175466..7d014f80f0 100644
--- a/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
+++ b/frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx
@@ -17,7 +17,6 @@ type Props = {
 };
 
 // TODO: Migrate to better form management and validation. Preferable react-hook-form + yup
-// We should remove this?
 /**
  * The dialog modal for when the user wants to create a new workspace
  * @param {*} param0
diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx
index 765a6429bd..c6b2152ccb 100644
--- a/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx
+++ b/frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/UpdateEnvironmentModal.tsx
@@ -1,5 +1,6 @@
 import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
+import slugify from "@sindresorhus/slugify";
 import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
@@ -16,13 +17,19 @@ type Props = {
 
 const schema = yup.object({
   name: yup.string().label("Environment Name").required(),
-  slug: yup.string().label("Environment Slug").matches(/^[^./]*$/g, { message: "Invalid [.] or [/] not allowed"}).required()
+  slug: yup
+    .string()
+    .label("Environment Slug")
+    .test({
+      test: (slug) => slugify(slug as string) === slug,
+      message: "Slug must be a valid slug"
+    })
+    .required()
 });
 
 export type FormData = yup.InferType<typeof schema>;
 
 export const UpdateEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
-  
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useUpdateWsEnvironment();
   const { control, handleSubmit, reset } = useForm<FormData>({
@@ -108,7 +115,11 @@ export const UpdateEnvironmentModal = ({ popUp, handlePopUpClose, handlePopUpTog
               Update
             </Button>
 
-            <Button onClick={() => handlePopUpClose("updateEnv")} colorSchema="secondary" variant="plain">
+            <Button
+              onClick={() => handlePopUpClose("updateEnv")}
+              colorSchema="secondary"
+              variant="plain"
+            >
               Cancel
             </Button>
           </div>

From 9b7ef55ad73c4398ba223d81f5e780daefdd4aee Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 21:43:01 +0800
Subject: [PATCH 25/36] adjustment: simplified caret helper

---
 .../InfisicalSecretInput.tsx                  | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 29e91f1109..965a247611 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -98,18 +98,14 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [lastCaretPos, setLastCaretPos] = useState<number>(0);
 
     const isCaretInsideReference = (str: string, start: number) => {
-      const matches = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)];
-      for (let i = 0; i < matches.length; i += 1) {
-        const match = matches[i];
-        if (
-          typeof match?.index !== "undefined" &&
-          match.index <= start &&
-          start < match.index + match[0].length
-        ) {
-          return match;
-        }
-      }
-      return null;
+      const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
+        (entry) =>
+          typeof entry?.index !== "undefined" &&
+          entry.index <= start &&
+          start < entry.index + entry[0].length
+      );
+
+      return match || null;
     };
 
     const setCaretPos = (caretPos: number) => {

From b135ba263c91611797ce584960e689af98e43d38 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Tue, 23 Apr 2024 22:49:00 +0800
Subject: [PATCH 26/36] adjustment: finalized InfisicalSecretInput

---
 .../InfisicalSecretInput.tsx                  | 26 ++++++++++++-------
 .../SecretOverviewTableRow/SecretEditRow.tsx  |  1 +
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 965a247611..9cb0a0bbc9 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react";
+import React, { forwardRef, TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 import {
@@ -97,15 +97,23 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
     const [referenceKey, setReferenceKey] = useState<string>();
     const [lastCaretPos, setLastCaretPos] = useState<number>(0);
 
+    useEffect(() => {
+      setValue(propValue as string);
+    }, [propValue]);
+
     const isCaretInsideReference = (str: string, start: number) => {
-      const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
-        (entry) =>
-          typeof entry?.index !== "undefined" &&
-          entry.index <= start &&
-          start < entry.index + entry[0].length
-      );
+      if (str) {
+        const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
+          (entry) =>
+            typeof entry?.index !== "undefined" &&
+            entry.index <= start &&
+            start < entry.index + entry[0].length
+        );
+
+        return match || null;
+      }
 
-      return match || null;
+      return null;
     };
 
     const setCaretPos = (caretPos: number) => {
@@ -299,7 +307,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
                 if (!showReferencePopup) setIsSecretFocused.off();
               }}
               {...props}
-              value={value}
+              value={value || ""}
               readOnly={isReadOnly}
             />
           </div>
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 5dd8db4d61..58eaf429fc 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -100,6 +100,7 @@ export const SecretEditRow = ({
             <InfisicalSecretInput
               {...field}
               value={field.value as string}
+              key="secret-input"
               isVisible={isVisible}
               secretPath={secretPath}
               environment={environment}

From 26778d92d36ac9a8a0b2047faeabeea97f2e12a1 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 24 Apr 2024 01:40:46 +0800
Subject: [PATCH 27/36] adjustment: unified logic for InfisicalSecretInput

---
 .../InfisicalSecretInput.tsx                  | 55 +++++++++++++++++--
 frontend/src/helpers/secret-reference.ts      | 27 ---------
 frontend/src/hooks/api/secrets/mutations.tsx  |  3 -
 3 files changed, 49 insertions(+), 36 deletions(-)
 delete mode 100644 frontend/src/helpers/secret-reference.ts

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 9cb0a0bbc9..c88b26a230 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -2,14 +2,38 @@
 import React, { forwardRef, TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
-import {
-  REGEX_SECRET_REFERENCE_FIND,
-  REGEX_SECRET_REFERENCE_INVALID
-} from "@app/helpers/secret-reference";
 import { useToggle } from "@app/hooks";
 
 import SecretReferenceSelect, { ReferenceType } from "./SecretReferenceSelect";
 
+const REGEX_SECRET_REFERENCE_FIND = /(\${([^}]*)})/g;
+const REGEX_SECRET_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/;
+
+const isValidSecretReferenceValue = (str: string): boolean => {
+  try {
+    if (!str) return true;
+    let skipNext = false;
+    str.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el) => {
+      if (skipNext) {
+        skipNext = false;
+        return [];
+      }
+
+      const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
+      if (!isInterpolationSyntax) return [];
+
+      skipNext = true;
+      if (REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)))
+        throw new Error("Invalid reference");
+
+      return el;
+    });
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
   for (let i = 0; i < str.length; i += 1) {
@@ -160,7 +184,6 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
         const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
 
         setValue(newValue);
-        // TODO: there should be a better way to do
         onChange?.({ target: { value: newValue } } as any);
         setCaretPos(currCaretPos);
 
@@ -318,9 +341,29 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
           secretPath={propSecretPath}
           environment={propEnvironment}
           open={showReferencePopup}
-          handleOpenChange={(isOpen) => handleReferenceOpenChange(isOpen)}
+          handleOpenChange={(isOpen) => {
+            if (!isOpen && !isValidSecretReferenceValue(value)) {
+              return;
+            }
+            handleReferenceOpenChange(isOpen);
+          }}
           onSelect={(refValue) => handleReferenceSelect(refValue)}
           onEscapeKeyDown={() => {
+            if (showReferencePopup && !isValidSecretReferenceValue(value)) {
+              // remove incomplete reference
+              const match = isCaretInsideReference(value, lastCaretPos);
+              const referenceStartIndex = match?.index || 0;
+              const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
+              const [start, end] = [
+                value.slice(0, referenceStartIndex),
+                value.slice(referenceEndIndex)
+              ];
+
+              const newValue = start + end;
+              setValue(newValue);
+              onChange?.({ target: { value: newValue } } as any);
+            }
+
             const timeout = setTimeout(() => {
               setCaretPos(lastCaretPos);
               clearTimeout(timeout);
diff --git a/frontend/src/helpers/secret-reference.ts b/frontend/src/helpers/secret-reference.ts
deleted file mode 100644
index 03af998187..0000000000
--- a/frontend/src/helpers/secret-reference.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export const REGEX_SECRET_REFERENCE_FIND = /(\${([^}]*)})/g;
-export const REGEX_SECRET_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/;
-
-export function isValidSecretReferenceValue(str: string): boolean {
-  try {
-    if (!str) return true;
-    let skipNext = false;
-    str.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el) => {
-      if (skipNext) {
-        skipNext = false;
-        return [];
-      }
-
-      const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
-      if (!isInterpolationSyntax) return [];
-
-      skipNext = true;
-      if (REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)))
-        throw new Error("Invalid reference");
-
-      return el;
-    });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
diff --git a/frontend/src/hooks/api/secrets/mutations.tsx b/frontend/src/hooks/api/secrets/mutations.tsx
index 13767b13e5..448daee3be 100644
--- a/frontend/src/hooks/api/secrets/mutations.tsx
+++ b/frontend/src/hooks/api/secrets/mutations.tsx
@@ -7,7 +7,6 @@ import {
   encryptSymmetric
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
-import { isValidSecretReferenceValue } from "@app/helpers/secret-reference";
 
 import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
 import { secretSnapshotKeys } from "../secretSnapshots/queries";
@@ -84,7 +83,6 @@ export const useCreateSecretV3 = ({
       secretComment,
       skipMultilineEncoding
     }) => {
-      if (!isValidSecretReferenceValue(secretValue)) throw new Error("Invalid secret reference");
       const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
 
       const randomBytes = latestFileKey
@@ -146,7 +144,6 @@ export const useUpdateSecretV3 = ({
       newSecretName,
       skipMultilineEncoding
     }) => {
-      if (!isValidSecretReferenceValue(secretValue)) throw new Error("Invalid secret reference");
       const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
 
       const randomBytes = latestFileKey

From 9ab1fce0e0b1fc0a5e18cfc528093fd13d4b01f7 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 25 Apr 2024 04:02:34 +0800
Subject: [PATCH 28/36] feature: created new secret input component

---
 .../InfisicalSecretInputV2.tsx                | 295 ++++++++++++++++++
 1 file changed, 295 insertions(+)
 create mode 100644 frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx
new file mode 100644
index 0000000000..28a7261e53
--- /dev/null
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx
@@ -0,0 +1,295 @@
+import { TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
+import { faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Popover from "@radix-ui/react-popover";
+import { twMerge } from "tailwind-merge";
+
+import { useWorkspace } from "@app/context";
+import { useGetFoldersByEnv, useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
+
+import { SecretInput } from "../SecretInput";
+
+const REGEX_UNCLOSED_SECRET_REFERENCE = /\${(?![^{}]*\})/g;
+
+export enum ReferenceType {
+  ENVIRONMENT = "environment",
+  FOLDER = "folder",
+  SECRET = "secret"
+}
+
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  value?: string | null;
+  isImport?: boolean;
+  isVisible?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+  secretPath?: string;
+  environment?: string;
+  containerClassName?: string;
+};
+
+type ReferenceItem = {
+  name: string;
+  type: ReferenceType;
+  slug?: string;
+};
+
+export const InfisicalSecretInput = ({
+  value: propValue,
+  isVisible,
+  containerClassName,
+  onBlur,
+  isDisabled,
+  isImport,
+  isReadOnly,
+  secretPath: propSecretPath,
+  environment: propEnvironment,
+  onChange,
+  ...props
+}: Props) => {
+  const [inputValue, setInputValue] = useState(propValue ?? "");
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
+  const [currentCursorPosition, setCurrentCursorPosition] = useState(0);
+  const [currentReference, setCurrentReference] = useState<string>("");
+  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
+  const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?.id || "";
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+  const { data: secrets } = useGetProjectSecrets({
+    decryptFileKey: decryptFileKey!,
+    environment: environment || currentWorkspace?.environments?.[0].slug!,
+    secretPath,
+    workspaceId
+  });
+  const { folderNames: folders } = useGetFoldersByEnv({
+    path: secretPath,
+    environments: [environment || currentWorkspace?.environments?.[0].slug!],
+    projectId: workspaceId
+  });
+
+  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setInputValue(propValue ?? "");
+  }, [propValue]);
+
+  useEffect(() => {
+    let currentEnvironment = propEnvironment;
+    let currentSecretPath = propSecretPath || "/";
+
+    if (!currentReference) {
+      setSecretPath(currentSecretPath);
+      setEnvironment(currentEnvironment!);
+      return;
+    }
+
+    const isNested = currentReference.includes(".");
+
+    if (isNested) {
+      const [envSlug, ...folderPaths] = currentReference.split(".");
+      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
+      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
+      currentSecretPath = `/${folderPaths?.join("/")}` || "/";
+    }
+
+    setSecretPath(currentSecretPath);
+    setEnvironment(currentEnvironment);
+  }, [currentReference]);
+
+  useEffect(() => {
+    const currentListReference: ReferenceItem[] = [];
+    const isNested = currentReference?.includes(".");
+
+    if (!environment || !currentReference) {
+      setListReference(currentListReference);
+      return;
+    }
+
+    if (isNested) {
+      folders?.forEach((folder) => {
+        currentListReference.unshift({ name: folder, type: ReferenceType.FOLDER });
+      });
+    } else {
+      currentWorkspace?.environments.forEach((env) => {
+        currentListReference.unshift({
+          name: env.slug,
+          type: ReferenceType.ENVIRONMENT
+        });
+      });
+    }
+
+    secrets?.forEach((secret) => {
+      currentListReference.unshift({ name: secret.key, type: ReferenceType.SECRET });
+    });
+
+    // Get fragment inside currentReference
+    const searchFragment = isNested ? currentReference.split(".").pop() || "" : currentReference;
+    setListReference(
+      currentListReference.filter((suggestionEntry) =>
+        suggestionEntry.name.toUpperCase().includes(searchFragment.toUpperCase())
+      )
+    );
+  }, [secrets, environment, currentReference]);
+
+  const getIndexOfUnclosedRefToTheLeft = (pos: number) => {
+    // take substring up to pos in order to consider edits for closed references
+    const unclosedReferenceIndexMatches = [
+      ...inputValue.substring(0, pos).matchAll(REGEX_UNCLOSED_SECRET_REFERENCE)
+    ].map((match) => match.index);
+
+    // find unclosed reference index less than the current cursor position
+    let indexIter = -1;
+    unclosedReferenceIndexMatches.forEach((index) => {
+      if (index > indexIter && index < pos) {
+        indexIter = index;
+      }
+    });
+
+    return indexIter;
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // open suggestions if current position is to the right of an unclosed secret reference
+    const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
+    if (indexIter === -1) {
+      return;
+    }
+
+    setIsSuggestionsOpen(true);
+
+    if (e.key !== "Enter") {
+      // current reference is then going to be based on the text from the closest ${ to the right
+      // until the current cursor position
+      const openReferenceValue = inputValue.slice(indexIter + 2, currentCursorPosition);
+      setCurrentReference(openReferenceValue);
+    }
+  };
+
+  const handleSuggestionSelect = () => {
+    const selectedSuggestion = listReference[highlightedIndex];
+    // update current reference based on selection
+    const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
+    if (indexIter === -1) {
+      return;
+    }
+
+    let newValue = "";
+    const currentOpenRef = inputValue.slice(indexIter + 2, currentCursorPosition);
+    if (currentOpenRef.includes(".")) {
+      // append suggestion after last DOT
+      const lastDotIndex = currentReference.lastIndexOf(".");
+      const existingPath = currentReference.slice(0, lastDotIndex);
+      const refEndAfterAppending =
+        indexIter +
+        3 +
+        existingPath.length +
+        selectedSuggestion.name.length +
+        Number(selectedSuggestion.type !== ReferenceType.SECRET);
+
+      newValue = `${inputValue.slice(0, indexIter + 2)}${existingPath}.${selectedSuggestion.name}${
+        selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
+      }${inputValue.slice(refEndAfterAppending)}`;
+      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
+      setCurrentReference(openReferenceValue);
+      setCurrentCursorPosition(refEndAfterAppending);
+    } else {
+      // append selectedSuggestion at position after unclosed ${
+      const refEndAfterAppending =
+        selectedSuggestion.name.length +
+        indexIter +
+        2 +
+        Number(selectedSuggestion.type !== ReferenceType.SECRET);
+
+      newValue = `${inputValue.slice(0, indexIter + 2)}${selectedSuggestion.name}${
+        selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
+      }${inputValue.slice(refEndAfterAppending)}`;
+
+      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
+      setCurrentReference(openReferenceValue);
+      setCurrentCursorPosition(refEndAfterAppending);
+    }
+
+    setInputValue(newValue);
+    setHighlightedIndex(-1);
+    setIsSuggestionsOpen(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const mod = (n: number, m: number) => ((n % m) + m) % m;
+    if (e.key === "ArrowDown") {
+      setHighlightedIndex((prevIndex) => mod(prevIndex + 1, listReference.length));
+    } else if (e.key === "ArrowUp") {
+      setHighlightedIndex((prevIndex) => mod(prevIndex - 1, listReference.length));
+    } else if (e.key === "Enter" && highlightedIndex >= 0) {
+      handleSuggestionSelect();
+    }
+    if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const setIsOpen = (isOpen: boolean) => {
+    setHighlightedIndex(-1);
+
+    if (isSuggestionsOpen) {
+      setIsSuggestionsOpen(isOpen);
+    }
+  };
+
+  const handleSecretChange = (e: any) => {
+    setCurrentCursorPosition(inputRef.current?.selectionStart || 0);
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <Popover.Root open={isSuggestionsOpen && listReference.length > 0} onOpenChange={setIsOpen}>
+      <Popover.Trigger asChild>
+        <SecretInput
+          {...props}
+          ref={inputRef}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          value={inputValue}
+          onChange={handleSecretChange}
+          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+        />
+      </Popover.Trigger>
+      <Popover.Content
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        className={twMerge(
+          "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
+        )}
+        style={{
+          width: "300px",
+          maxHeight: "var(--radix-select-content-available-height)"
+        }}
+      >
+        <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-2 text-white">
+          {listReference.map((item, i) => (
+            <div
+              style={{ pointerEvents: "auto" }}
+              className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+              key={`secret-reference-secret-${i + 1}`}
+            >
+              <div
+                className={`${
+                  highlightedIndex === i ? "bg-gray-600" : ""
+                } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+              >
+                <div className="flex gap-2">
+                  <div className="flex items-center text-yellow-700">
+                    <FontAwesomeIcon icon={item.type === "secret" ? faKey : faFolder} />
+                  </div>
+                  <div className="text-md w-48 truncate text-left">{item.name}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

From 4bae65cc55a24f0106f0206d3d3f9ee57c72a46d Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 25 Apr 2024 12:44:01 +0800
Subject: [PATCH 29/36] adjustment: ux finalization

---
 .../InfisicalSecretInput.tsx                  | 633 ++++++++----------
 .../InfisicalSecretInputV2.tsx                | 295 --------
 .../v2/InfisicalSecretInput/index.tsx         |   1 +
 .../CreateSecretForm/CreateSecretForm.tsx     |   2 +-
 .../SecretListView/SecretDetaiSidebar.tsx     |   3 +-
 .../components/SecretListView/SecretItem.tsx  |   2 +-
 .../CreateSecretForm/CreateSecretForm.tsx     |   2 +-
 .../SecretOverviewTableRow/SecretEditRow.tsx  |   2 +-
 8 files changed, 293 insertions(+), 647 deletions(-)
 delete mode 100644 frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx
 create mode 100644 frontend/src/components/v2/InfisicalSecretInput/index.tsx

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index c88b26a230..b6888ba8c7 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -1,86 +1,22 @@
-/* eslint-disable react/no-danger */
-import React, { forwardRef, TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
+import { TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
+import { faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Popover from "@radix-ui/react-popover";
 import { twMerge } from "tailwind-merge";
 
-import { useToggle } from "@app/hooks";
+import { useWorkspace } from "@app/context";
+import { useDebounce } from "@app/hooks";
+import { useGetFoldersByEnv, useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
 
-import SecretReferenceSelect, { ReferenceType } from "./SecretReferenceSelect";
+import { SecretInput } from "../SecretInput";
 
-const REGEX_SECRET_REFERENCE_FIND = /(\${([^}]*)})/g;
-const REGEX_SECRET_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/;
+const REGEX_UNCLOSED_SECRET_REFERENCE = /\${(?![^{}]*\})/g;
 
-const isValidSecretReferenceValue = (str: string): boolean => {
-  try {
-    if (!str) return true;
-    let skipNext = false;
-    str.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el) => {
-      if (skipNext) {
-        skipNext = false;
-        return [];
-      }
-
-      const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
-      if (!isInterpolationSyntax) return [];
-
-      skipNext = true;
-      if (REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)))
-        throw new Error("Invalid reference");
-
-      return el;
-    });
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-const replaceContentWithDot = (str: string) => {
-  let finalStr = "";
-  for (let i = 0; i < str.length; i += 1) {
-    const char = str.at(i);
-    finalStr += char === "\n" ? "\n" : "*";
-  }
-  return finalStr;
-};
-
-const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
-  if (isImport) return "IMPORTED";
-  if (content === "") return "EMPTY";
-  if (!content) return "EMPTY";
-  if (!isVisible) return replaceContentWithDot(content);
-
-  let skipNext = false;
-  const formattedContent = content.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el, i) => {
-    const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
-    if (isInterpolationSyntax) {
-      skipNext = true;
-      return (
-        <span className="ph-no-capture text-yellow" key={`secret-value-${i + 1}`}>
-          &#36;&#123;
-          <span
-            className={twMerge(
-              "ph-no-capture text-yellow-200/80",
-              REGEX_SECRET_REFERENCE_INVALID.test(el.slice(2, -1)) &&
-                "underline decoration-red decoration-wavy"
-            )}
-          >
-            {el.slice(2, -1)}
-          </span>
-          &#125;
-        </span>
-      );
-    }
-    if (skipNext) {
-      skipNext = false;
-      return [];
-    }
-    return el;
-  });
-
-  // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough
-  // when break is added a line break works properly
-  return formattedContent.concat(<br />);
-};
+export enum ReferenceType {
+  ENVIRONMENT = "environment",
+  FOLDER = "folder",
+  SECRET = "secret"
+}
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
@@ -88,291 +24,296 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   isVisible?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
-  containerClassName?: string;
-  environment?: string;
   secretPath?: string;
+  environment?: string;
+  containerClassName?: string;
 };
 
-const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all";
-
-export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
-  (
-    {
-      value: propValue,
-      isVisible,
-      containerClassName,
-      onBlur,
-      isDisabled,
-      isImport,
-      isReadOnly,
-      onFocus,
-      secretPath: propSecretPath,
-      environment: propEnvironment,
-      onChange,
-      ...props
-    },
-    ref
-  ) => {
-    const childRef = useRef<HTMLTextAreaElement>(null);
-
-    const [isSecretFocused, setIsSecretFocused] = useToggle();
-    const [value, setValue] = useState<string>(propValue || "");
-    const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
-    const [referenceKey, setReferenceKey] = useState<string>();
-    const [lastCaretPos, setLastCaretPos] = useState<number>(0);
-
-    useEffect(() => {
-      setValue(propValue as string);
-    }, [propValue]);
-
-    const isCaretInsideReference = (str: string, start: number) => {
-      if (str) {
-        const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
-          (entry) =>
-            typeof entry?.index !== "undefined" &&
-            entry.index <= start &&
-            start < entry.index + entry[0].length
-        );
-
-        return match || null;
-      }
+type ReferenceItem = {
+  name: string;
+  type: ReferenceType;
+  slug?: string;
+};
 
-      return null;
-    };
-
-    const setCaretPos = (caretPos: number) => {
-      if (childRef?.current) {
-        childRef.current.focus();
-        const timeout = setTimeout(() => {
-          if (!childRef?.current) return;
-          childRef.current.selectionStart = caretPos;
-          childRef.current.selectionEnd = caretPos;
-          clearTimeout(timeout);
-        }, 200);
-      }
-    };
+export const InfisicalSecretInput = ({
+  value: propValue,
+  isVisible,
+  containerClassName,
+  onBlur,
+  isDisabled,
+  isImport,
+  isReadOnly,
+  secretPath: propSecretPath,
+  environment: propEnvironment,
+  onChange,
+  ...props
+}: Props) => {
+  const [inputValue, setInputValue] = useState(propValue ?? "");
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
+  const [currentCursorPosition, setCurrentCursorPosition] = useState(0);
+  const [currentReference, setCurrentReference] = useState<string>("");
+  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
+  const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?.id || "";
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+  const { data: secrets } = useGetProjectSecrets({
+    decryptFileKey: decryptFileKey!,
+    environment: environment || currentWorkspace?.environments?.[0].slug!,
+    secretPath,
+    workspaceId
+  });
+  const { folderNames: folders } = useGetFoldersByEnv({
+    path: secretPath,
+    environments: [environment || currentWorkspace?.environments?.[0].slug!],
+    projectId: workspaceId
+  });
 
-    const referencePopup = (text: string, pos: number) => {
-      const match = isCaretInsideReference(text, pos);
-      if (match && typeof match.index !== "undefined") {
-        setLastCaretPos(pos);
-        setReferenceKey(match?.[2]);
-      }
-      setShowReferencePopup(!!match);
-    };
+  const debouncedCurrentReference = useDebounce(currentReference, 100);
 
-    const handleReferencePopup = (element: HTMLTextAreaElement) => {
-      const { selectionStart, selectionEnd, value: text } = element;
-      if (selectionStart !== selectionEnd || selectionStart === 0) {
-        return;
-      }
-      referencePopup(text, selectionStart);
-    };
+  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
-    const handleKeyUp = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (event.key === "Escape") {
-        setShowReferencePopup(false);
-        return;
-      }
+  useEffect(() => {
+    setInputValue(propValue ?? "");
+  }, [propValue]);
 
-      if (event.key === "{") {
-        // auto close the bracket
-        const currCaretPos = event.currentTarget.selectionEnd;
-        const isPrevDollar = value[currCaretPos - 2] === "$";
-        if (!isPrevDollar) return;
+  useEffect(() => {
+    let currentEnvironment = propEnvironment;
+    let currentSecretPath = propSecretPath || "/";
 
-        const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
+    if (!currentReference) {
+      setSecretPath(currentSecretPath);
+      setEnvironment(currentEnvironment);
+      return;
+    }
 
-        setValue(newValue);
-        onChange?.({ target: { value: newValue } } as any);
-        setCaretPos(currCaretPos);
+    const isNested = currentReference.includes(".");
 
-        if (event.currentTarget) {
-          const timeout = setTimeout(() => {
-            referencePopup(newValue, currCaretPos);
-            clearTimeout(timeout);
-          }, 200);
+    if (isNested) {
+      const [envSlug, ...folderPaths] = currentReference.split(".");
+      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
+      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
 
-          return;
-        }
-      }
-      if (!(event.key.startsWith("Arrow") || event.key === "Backspace" || event.key === "Delete")) {
-        handleReferencePopup(event.currentTarget);
-      }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (
-        !(
-          event.key.startsWith("Arrow") ||
-          ["Backspace", "Delete", "."].includes(event.key) ||
-          (event.metaKey && event.key.toLowerCase() === "a")
-        )
-      ) {
-        const match = isCaretInsideReference(value, event.currentTarget.selectionEnd);
-        if (match) event.preventDefault();
-      }
-    };
-
-    const handleMouseClick = (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => {
-      handleReferencePopup(event.currentTarget);
-    };
-
-    const handleReferenceSelect = ({
-      name,
-      type,
-      slug
-    }: {
-      name: string;
-      type: ReferenceType;
-      slug?: string;
-    }) => {
-      setShowReferencePopup(false);
-
-      // forward ref for parent component
-      if (typeof ref === "function") {
-        ref(childRef.current);
-      } else if (ref && "current" in ref) {
-        const refCopy = ref;
-        refCopy.current = childRef.current;
-      }
+      // should be based on the last valid section (with .)
+      folderPaths.pop();
+      currentSecretPath = `/${folderPaths?.join("/")}`;
+    }
 
-      let newValue = value || "";
-      const match = isCaretInsideReference(newValue, lastCaretPos);
-      const referenceStartIndex = match?.index || 0;
-      const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
-      const [start, oldReference, end] = [
-        value.slice(0, referenceStartIndex),
-        value.slice(referenceStartIndex, referenceEndIndex),
-        value.slice(referenceEndIndex)
-      ];
-
-      let oldReferenceStr = oldReference.slice(2, -1);
-      let currentPath = type === ReferenceType.ENVIRONMENT ? slug! : name;
-      currentPath = currentPath.replace(/\./g, "\\.");
-
-      let replaceReference = "";
-      let offset = 3;
-      switch (type) {
-        case ReferenceType.FOLDER:
-          replaceReference = `${oldReferenceStr}${currentPath}.`;
-          offset -= 1;
-          break;
-        case ReferenceType.SECRET: {
-          if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = "";
-          replaceReference = `${oldReferenceStr}${currentPath}`;
-          break;
-        }
-        case ReferenceType.ENVIRONMENT:
-          replaceReference = `${currentPath}.`;
-          offset -= 1;
-          break;
-        default:
+    setSecretPath(currentSecretPath);
+    setEnvironment(currentEnvironment);
+  }, [debouncedCurrentReference]);
+
+  useEffect(() => {
+    const currentListReference: ReferenceItem[] = [];
+    const isNested = currentReference?.includes(".");
+
+    if (!environment) {
+      currentWorkspace?.environments.forEach((env) => {
+        currentListReference.unshift({
+          name: env.slug,
+          type: ReferenceType.ENVIRONMENT
+        });
+      });
+    }
+
+    if (!environment || !currentReference) {
+      setListReference(currentListReference);
+      return;
+    }
+
+    if (isNested) {
+      folders?.forEach((folder) => {
+        currentListReference.unshift({ name: folder, type: ReferenceType.FOLDER });
+      });
+    } else {
+      currentWorkspace?.environments.forEach((env) => {
+        currentListReference.unshift({
+          name: env.slug,
+          type: ReferenceType.ENVIRONMENT
+        });
+      });
+    }
+
+    secrets?.forEach((secret) => {
+      currentListReference.unshift({ name: secret.key, type: ReferenceType.SECRET });
+    });
+
+    // Get fragment inside currentReference
+    const searchFragment = isNested ? currentReference.split(".").pop() || "" : currentReference;
+    const filteredListRef = currentListReference.filter((suggestionEntry) =>
+      suggestionEntry.name.toUpperCase().startsWith(searchFragment.toUpperCase())
+    );
+    setListReference(filteredListRef);
+  }, [secrets, environment, debouncedCurrentReference]);
+
+  const getIndexOfUnclosedRefToTheLeft = (pos: number) => {
+    // take substring up to pos in order to consider edits for closed references
+    const unclosedReferenceIndexMatches = [
+      ...inputValue.substring(0, pos).matchAll(REGEX_UNCLOSED_SECRET_REFERENCE)
+    ].map((match) => match.index);
+
+    // find unclosed reference index less than the current cursor position
+    let indexIter = -1;
+    unclosedReferenceIndexMatches.forEach((index) => {
+      if (index > indexIter && index < pos) {
+        indexIter = index;
       }
-      replaceReference = replaceReference.replace(/[//]/g, "");
-      newValue = `${start}$\{${replaceReference}}${end}`;
-      setValue(newValue);
-      // TODO: there should be a better way to do
-      onChange?.({ target: { value: newValue } } as any);
-      setShowReferencePopup(type !== ReferenceType.SECRET);
-      const timeout = setTimeout(() => {
-        setIsSecretFocused.on();
-        if (type !== ReferenceType.SECRET) setReferenceKey(replaceReference);
-        const caretPos = start.length + replaceReference.length + offset;
-        setCaretPos(caretPos);
-        clearTimeout(timeout);
-      }, 100);
-    };
-
-    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setValue(event.target.value);
-      if (typeof onChange === "function") onChange(event);
-    };
-
-    const handleReferenceOpenChange = (currOpen: boolean) => {
-      if (!currOpen) setShowReferencePopup(false);
-    };
-
-    return (
-      <div
+    });
+
+    return indexIter;
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // open suggestions if current position is to the right of an unclosed secret reference
+    const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
+    if (indexIter === -1) {
+      return;
+    }
+
+    setIsSuggestionsOpen(true);
+
+    if (e.key !== "Enter") {
+      // current reference is then going to be based on the text from the closest ${ to the right
+      // until the current cursor position
+      const openReferenceValue = inputValue.slice(indexIter + 2, currentCursorPosition);
+      setCurrentReference(openReferenceValue);
+    }
+  };
+
+  const handleSuggestionSelect = () => {
+    const selectedSuggestion = listReference[highlightedIndex];
+    // update current reference based on selection
+    const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
+    if (indexIter === -1) {
+      return;
+    }
+
+    let newValue = "";
+    const currentOpenRef = inputValue.slice(indexIter + 2, currentCursorPosition);
+    if (currentOpenRef.includes(".")) {
+      // append suggestion after last DOT
+      const lastDotIndex = currentReference.lastIndexOf(".");
+      const existingPath = currentReference.slice(0, lastDotIndex);
+      const refEndAfterAppending =
+        indexIter +
+        3 +
+        existingPath.length +
+        selectedSuggestion.name.length +
+        Number(selectedSuggestion.type !== ReferenceType.SECRET);
+
+      newValue = `${inputValue.slice(0, indexIter + 2)}${existingPath}.${selectedSuggestion.name}${
+        selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
+      }${inputValue.slice(refEndAfterAppending)}`;
+      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
+      setCurrentReference(openReferenceValue);
+
+      // add 1 in order to prevent referenceOpen from being triggered by handleKeyUp
+      setCurrentCursorPosition(refEndAfterAppending + 1);
+    } else {
+      // append selectedSuggestion at position after unclosed ${
+      const refEndAfterAppending =
+        selectedSuggestion.name.length +
+        indexIter +
+        2 +
+        Number(selectedSuggestion.type !== ReferenceType.SECRET);
+
+      newValue = `${inputValue.slice(0, indexIter + 2)}${selectedSuggestion.name}${
+        selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
+      }${inputValue.slice(refEndAfterAppending)}`;
+
+      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
+      setCurrentReference(openReferenceValue);
+      setCurrentCursorPosition(refEndAfterAppending);
+    }
+
+    onChange?.({ target: { value: newValue } } as any);
+    setInputValue(newValue);
+    setHighlightedIndex(-1);
+    setIsSuggestionsOpen(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const mod = (n: number, m: number) => ((n % m) + m) % m;
+    if (e.key === "ArrowDown") {
+      setHighlightedIndex((prevIndex) => mod(prevIndex + 1, listReference.length));
+    } else if (e.key === "ArrowUp") {
+      setHighlightedIndex((prevIndex) => mod(prevIndex - 1, listReference.length));
+    } else if (e.key === "Enter" && highlightedIndex >= 0) {
+      handleSuggestionSelect();
+    }
+    if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const setIsOpen = (isOpen: boolean) => {
+    setHighlightedIndex(-1);
+
+    if (isSuggestionsOpen) {
+      setIsSuggestionsOpen(isOpen);
+    }
+  };
+
+  const handleSecretChange = (e: any) => {
+    // propagate event to react-hook-form onChange
+    if (onChange) {
+      onChange(e);
+    }
+
+    setCurrentCursorPosition(inputRef.current?.selectionStart || 0);
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <Popover.Root open={isSuggestionsOpen && listReference.length > 0} onOpenChange={setIsOpen}>
+      <Popover.Trigger asChild>
+        <SecretInput
+          {...props}
+          ref={inputRef}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          value={inputValue}
+          onChange={handleSecretChange}
+          containerClassName={containerClassName}
+        />
+      </Popover.Trigger>
+      <Popover.Content
+        onOpenAutoFocus={(e) => e.preventDefault()}
         className={twMerge(
-          "flex w-full flex-col overflow-auto rounded-md no-scrollbar",
-          containerClassName
+          "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
         )}
+        style={{
+          width: "300px",
+          maxHeight: "var(--radix-select-content-available-height)"
+        }}
       >
-        <div style={{ maxHeight: `${21 * 7}px` }}>
-          <div className="relative overflow-hidden">
-            <pre aria-hidden className="m-0 ">
-              <code className={`inline-block w-full  ${commonClassName}`}>
-                <span style={{ whiteSpace: "break-spaces" }}>
-                  {syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
-                </span>
-              </code>
-            </pre>
-
-            <textarea
-              style={{ whiteSpace: "break-spaces" }}
-              aria-label="secret value"
-              ref={childRef}
-              className={twMerge(
-                "absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0",
-                commonClassName
-              )}
-              onFocus={() => setIsSecretFocused.on()}
-              onKeyUp={handleKeyUp}
-              onKeyDown={handleKeyDown}
-              onClick={handleMouseClick}
-              onChange={handleChange}
-              disabled={isDisabled}
-              spellCheck={false}
-              onBlur={(evt) => {
-                onBlur?.(evt);
-                if (!showReferencePopup) setIsSecretFocused.off();
-              }}
-              {...props}
-              value={value || ""}
-              readOnly={isReadOnly}
-            />
-          </div>
+        <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-2 text-white">
+          {listReference.map((item, i) => (
+            <div
+              style={{ pointerEvents: "auto" }}
+              className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+              key={`secret-reference-secret-${i + 1}`}
+            >
+              <div
+                className={`${
+                  highlightedIndex === i ? "bg-gray-600" : ""
+                } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+              >
+                <div className="flex gap-2">
+                  <div className="flex items-center text-yellow-700">
+                    <FontAwesomeIcon icon={item.type === "secret" ? faKey : faFolder} />
+                  </div>
+                  <div className="text-md w-48 truncate text-left">{item.name}</div>
+                </div>
+              </div>
+            </div>
+          ))}
         </div>
-
-        <SecretReferenceSelect
-          reference={referenceKey}
-          secretPath={propSecretPath}
-          environment={propEnvironment}
-          open={showReferencePopup}
-          handleOpenChange={(isOpen) => {
-            if (!isOpen && !isValidSecretReferenceValue(value)) {
-              return;
-            }
-            handleReferenceOpenChange(isOpen);
-          }}
-          onSelect={(refValue) => handleReferenceSelect(refValue)}
-          onEscapeKeyDown={() => {
-            if (showReferencePopup && !isValidSecretReferenceValue(value)) {
-              // remove incomplete reference
-              const match = isCaretInsideReference(value, lastCaretPos);
-              const referenceStartIndex = match?.index || 0;
-              const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0);
-              const [start, end] = [
-                value.slice(0, referenceStartIndex),
-                value.slice(referenceEndIndex)
-              ];
-
-              const newValue = start + end;
-              setValue(newValue);
-              onChange?.({ target: { value: newValue } } as any);
-            }
-
-            const timeout = setTimeout(() => {
-              setCaretPos(lastCaretPos);
-              clearTimeout(timeout);
-            }, 200);
-          }}
-        />
-      </div>
-    );
-  }
-);
+      </Popover.Content>
+    </Popover.Root>
+  );
+};
 
 InfisicalSecretInput.displayName = "InfisicalSecretInput";
diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx
deleted file mode 100644
index 28a7261e53..0000000000
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import { TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
-import { faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Popover from "@radix-ui/react-popover";
-import { twMerge } from "tailwind-merge";
-
-import { useWorkspace } from "@app/context";
-import { useGetFoldersByEnv, useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
-
-import { SecretInput } from "../SecretInput";
-
-const REGEX_UNCLOSED_SECRET_REFERENCE = /\${(?![^{}]*\})/g;
-
-export enum ReferenceType {
-  ENVIRONMENT = "environment",
-  FOLDER = "folder",
-  SECRET = "secret"
-}
-
-type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  value?: string | null;
-  isImport?: boolean;
-  isVisible?: boolean;
-  isReadOnly?: boolean;
-  isDisabled?: boolean;
-  secretPath?: string;
-  environment?: string;
-  containerClassName?: string;
-};
-
-type ReferenceItem = {
-  name: string;
-  type: ReferenceType;
-  slug?: string;
-};
-
-export const InfisicalSecretInput = ({
-  value: propValue,
-  isVisible,
-  containerClassName,
-  onBlur,
-  isDisabled,
-  isImport,
-  isReadOnly,
-  secretPath: propSecretPath,
-  environment: propEnvironment,
-  onChange,
-  ...props
-}: Props) => {
-  const [inputValue, setInputValue] = useState(propValue ?? "");
-  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
-  const [currentCursorPosition, setCurrentCursorPosition] = useState(0);
-  const [currentReference, setCurrentReference] = useState<string>("");
-  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
-  const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
-  const { currentWorkspace } = useWorkspace();
-  const workspaceId = currentWorkspace?.id || "";
-  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
-  const { data: secrets } = useGetProjectSecrets({
-    decryptFileKey: decryptFileKey!,
-    environment: environment || currentWorkspace?.environments?.[0].slug!,
-    secretPath,
-    workspaceId
-  });
-  const { folderNames: folders } = useGetFoldersByEnv({
-    path: secretPath,
-    environments: [environment || currentWorkspace?.environments?.[0].slug!],
-    projectId: workspaceId
-  });
-
-  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    setInputValue(propValue ?? "");
-  }, [propValue]);
-
-  useEffect(() => {
-    let currentEnvironment = propEnvironment;
-    let currentSecretPath = propSecretPath || "/";
-
-    if (!currentReference) {
-      setSecretPath(currentSecretPath);
-      setEnvironment(currentEnvironment!);
-      return;
-    }
-
-    const isNested = currentReference.includes(".");
-
-    if (isNested) {
-      const [envSlug, ...folderPaths] = currentReference.split(".");
-      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
-      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
-      currentSecretPath = `/${folderPaths?.join("/")}` || "/";
-    }
-
-    setSecretPath(currentSecretPath);
-    setEnvironment(currentEnvironment);
-  }, [currentReference]);
-
-  useEffect(() => {
-    const currentListReference: ReferenceItem[] = [];
-    const isNested = currentReference?.includes(".");
-
-    if (!environment || !currentReference) {
-      setListReference(currentListReference);
-      return;
-    }
-
-    if (isNested) {
-      folders?.forEach((folder) => {
-        currentListReference.unshift({ name: folder, type: ReferenceType.FOLDER });
-      });
-    } else {
-      currentWorkspace?.environments.forEach((env) => {
-        currentListReference.unshift({
-          name: env.slug,
-          type: ReferenceType.ENVIRONMENT
-        });
-      });
-    }
-
-    secrets?.forEach((secret) => {
-      currentListReference.unshift({ name: secret.key, type: ReferenceType.SECRET });
-    });
-
-    // Get fragment inside currentReference
-    const searchFragment = isNested ? currentReference.split(".").pop() || "" : currentReference;
-    setListReference(
-      currentListReference.filter((suggestionEntry) =>
-        suggestionEntry.name.toUpperCase().includes(searchFragment.toUpperCase())
-      )
-    );
-  }, [secrets, environment, currentReference]);
-
-  const getIndexOfUnclosedRefToTheLeft = (pos: number) => {
-    // take substring up to pos in order to consider edits for closed references
-    const unclosedReferenceIndexMatches = [
-      ...inputValue.substring(0, pos).matchAll(REGEX_UNCLOSED_SECRET_REFERENCE)
-    ].map((match) => match.index);
-
-    // find unclosed reference index less than the current cursor position
-    let indexIter = -1;
-    unclosedReferenceIndexMatches.forEach((index) => {
-      if (index > indexIter && index < pos) {
-        indexIter = index;
-      }
-    });
-
-    return indexIter;
-  };
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // open suggestions if current position is to the right of an unclosed secret reference
-    const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
-    if (indexIter === -1) {
-      return;
-    }
-
-    setIsSuggestionsOpen(true);
-
-    if (e.key !== "Enter") {
-      // current reference is then going to be based on the text from the closest ${ to the right
-      // until the current cursor position
-      const openReferenceValue = inputValue.slice(indexIter + 2, currentCursorPosition);
-      setCurrentReference(openReferenceValue);
-    }
-  };
-
-  const handleSuggestionSelect = () => {
-    const selectedSuggestion = listReference[highlightedIndex];
-    // update current reference based on selection
-    const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
-    if (indexIter === -1) {
-      return;
-    }
-
-    let newValue = "";
-    const currentOpenRef = inputValue.slice(indexIter + 2, currentCursorPosition);
-    if (currentOpenRef.includes(".")) {
-      // append suggestion after last DOT
-      const lastDotIndex = currentReference.lastIndexOf(".");
-      const existingPath = currentReference.slice(0, lastDotIndex);
-      const refEndAfterAppending =
-        indexIter +
-        3 +
-        existingPath.length +
-        selectedSuggestion.name.length +
-        Number(selectedSuggestion.type !== ReferenceType.SECRET);
-
-      newValue = `${inputValue.slice(0, indexIter + 2)}${existingPath}.${selectedSuggestion.name}${
-        selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
-      }${inputValue.slice(refEndAfterAppending)}`;
-      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
-      setCurrentReference(openReferenceValue);
-      setCurrentCursorPosition(refEndAfterAppending);
-    } else {
-      // append selectedSuggestion at position after unclosed ${
-      const refEndAfterAppending =
-        selectedSuggestion.name.length +
-        indexIter +
-        2 +
-        Number(selectedSuggestion.type !== ReferenceType.SECRET);
-
-      newValue = `${inputValue.slice(0, indexIter + 2)}${selectedSuggestion.name}${
-        selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
-      }${inputValue.slice(refEndAfterAppending)}`;
-
-      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
-      setCurrentReference(openReferenceValue);
-      setCurrentCursorPosition(refEndAfterAppending);
-    }
-
-    setInputValue(newValue);
-    setHighlightedIndex(-1);
-    setIsSuggestionsOpen(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    const mod = (n: number, m: number) => ((n % m) + m) % m;
-    if (e.key === "ArrowDown") {
-      setHighlightedIndex((prevIndex) => mod(prevIndex + 1, listReference.length));
-    } else if (e.key === "ArrowUp") {
-      setHighlightedIndex((prevIndex) => mod(prevIndex - 1, listReference.length));
-    } else if (e.key === "Enter" && highlightedIndex >= 0) {
-      handleSuggestionSelect();
-    }
-    if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
-      e.preventDefault();
-    }
-  };
-
-  const setIsOpen = (isOpen: boolean) => {
-    setHighlightedIndex(-1);
-
-    if (isSuggestionsOpen) {
-      setIsSuggestionsOpen(isOpen);
-    }
-  };
-
-  const handleSecretChange = (e: any) => {
-    setCurrentCursorPosition(inputRef.current?.selectionStart || 0);
-    setInputValue(e.target.value);
-  };
-
-  return (
-    <Popover.Root open={isSuggestionsOpen && listReference.length > 0} onOpenChange={setIsOpen}>
-      <Popover.Trigger asChild>
-        <SecretInput
-          {...props}
-          ref={inputRef}
-          onKeyDown={handleKeyDown}
-          onKeyUp={handleKeyUp}
-          value={inputValue}
-          onChange={handleSecretChange}
-          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
-        />
-      </Popover.Trigger>
-      <Popover.Content
-        onOpenAutoFocus={(e) => e.preventDefault()}
-        className={twMerge(
-          "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
-        )}
-        style={{
-          width: "300px",
-          maxHeight: "var(--radix-select-content-available-height)"
-        }}
-      >
-        <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-2 text-white">
-          {listReference.map((item, i) => (
-            <div
-              style={{ pointerEvents: "auto" }}
-              className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
-              key={`secret-reference-secret-${i + 1}`}
-            >
-              <div
-                className={`${
-                  highlightedIndex === i ? "bg-gray-600" : ""
-                } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
-              >
-                <div className="flex gap-2">
-                  <div className="flex items-center text-yellow-700">
-                    <FontAwesomeIcon icon={item.type === "secret" ? faKey : faFolder} />
-                  </div>
-                  <div className="text-md w-48 truncate text-left">{item.name}</div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </Popover.Content>
-    </Popover.Root>
-  );
-};
diff --git a/frontend/src/components/v2/InfisicalSecretInput/index.tsx b/frontend/src/components/v2/InfisicalSecretInput/index.tsx
new file mode 100644
index 0000000000..bf5be94524
--- /dev/null
+++ b/frontend/src/components/v2/InfisicalSecretInput/index.tsx
@@ -0,0 +1 @@
+export { InfisicalSecretInput } from "./InfisicalSecretInput";
diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
index 7ac057eef7..4efd6bdc30 100644
--- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -4,7 +4,7 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
-import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useCreateSecretV3 } from "@app/hooks/api";
 import { UserWsKeyPair } from "@app/hooks/api/types";
 
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index 1d5221f892..28e2fed156 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -32,7 +32,7 @@ import {
   TextArea,
   Tooltip
 } from "@app/components/v2";
-import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetSecretVersion } from "@app/hooks/api";
@@ -71,7 +71,6 @@ export const SecretDetailSidebar = ({
   environment,
   secretPath
 }: Props) => {
-  
   const {
     register,
     control,
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
index 3044646417..455b7bbe6e 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
@@ -48,7 +48,7 @@ import { memo, useEffect } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { twMerge } from "tailwind-merge";
 
-import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index dbcf1cb908..85d3125d5c 100644
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -15,7 +15,7 @@ import {
   ModalContent,
   Tooltip
 } from "@app/components/v2";
-import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useWorkspace } from "@app/context";
 import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
 import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 58eaf429fc..71529c95cf 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -7,7 +7,7 @@ import { twMerge } from "tailwind-merge";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { IconButton, Tooltip } from "@app/components/v2";
-import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput/InfisicalSecretInput";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
 

From 20b1cdf909d5df0d13eedcef21ec8f616e088f8a Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Thu, 25 Apr 2024 21:43:25 +0800
Subject: [PATCH 30/36] adjustment: added click handler to suggestions and
 finalized env icon

---
 .../InfisicalSecretInput.tsx                  | 71 ++++++++++++-------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index b6888ba8c7..c95d9ad239 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -1,5 +1,5 @@
 import { TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
-import { faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
+import { faFolder, faFolderOpen, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Popover from "@radix-ui/react-popover";
 import { twMerge } from "tailwind-merge";
@@ -109,6 +109,11 @@ export const InfisicalSecretInput = ({
     const currentListReference: ReferenceItem[] = [];
     const isNested = currentReference?.includes(".");
 
+    if (!currentReference) {
+      setListReference(currentListReference);
+      return;
+    }
+
     if (!environment) {
       currentWorkspace?.environments.forEach((env) => {
         currentListReference.unshift({
@@ -116,18 +121,11 @@ export const InfisicalSecretInput = ({
           type: ReferenceType.ENVIRONMENT
         });
       });
-    }
-
-    if (!environment || !currentReference) {
-      setListReference(currentListReference);
-      return;
-    }
-
-    if (isNested) {
+    } else if (isNested) {
       folders?.forEach((folder) => {
         currentListReference.unshift({ name: folder, type: ReferenceType.FOLDER });
       });
-    } else {
+    } else if (environment) {
       currentWorkspace?.environments.forEach((env) => {
         currentListReference.unshift({
           name: env.slug,
@@ -182,8 +180,9 @@ export const InfisicalSecretInput = ({
     }
   };
 
-  const handleSuggestionSelect = () => {
-    const selectedSuggestion = listReference[highlightedIndex];
+  const handleSuggestionSelect = (selectedIndex?: number) => {
+    const selectedSuggestion = listReference[selectedIndex ?? highlightedIndex];
+
     // update current reference based on selection
     const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
     if (indexIter === -1) {
@@ -290,26 +289,44 @@ export const InfisicalSecretInput = ({
         }}
       >
         <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-2 text-white">
-          {listReference.map((item, i) => (
-            <div
-              style={{ pointerEvents: "auto" }}
-              className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
-              key={`secret-reference-secret-${i + 1}`}
-            >
+          {listReference.map((item, i) => {
+            let entryIcon;
+            if (item.type === ReferenceType.SECRET) {
+              entryIcon = faKey;
+            } else if (item.type === ReferenceType.ENVIRONMENT) {
+              entryIcon = faFolderOpen;
+            } else {
+              entryIcon = faFolder;
+            }
+
+            return (
               <div
-                className={`${
-                  highlightedIndex === i ? "bg-gray-600" : ""
-                } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+                tabIndex={0}
+                role="button"
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  setHighlightedIndex(i);
+                  handleSuggestionSelect(i);
+                }}
+                style={{ pointerEvents: "auto" }}
+                className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+                key={`secret-reference-secret-${i + 1}`}
               >
-                <div className="flex gap-2">
-                  <div className="flex items-center text-yellow-700">
-                    <FontAwesomeIcon icon={item.type === "secret" ? faKey : faFolder} />
+                <div
+                  className={`${
+                    highlightedIndex === i ? "bg-gray-600" : ""
+                  } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+                >
+                  <div className="flex gap-2">
+                    <div className="flex items-center text-yellow-700">
+                      <FontAwesomeIcon icon={entryIcon} />
+                    </div>
+                    <div className="text-md w-48 truncate text-left">{item.name}</div>
                   </div>
-                  <div className="text-md w-48 truncate text-left">{item.name}</div>
                 </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </Popover.Content>
     </Popover.Root>

From 497c0cf63d003de6fae9c11b2c89a757dcb174a1 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 26 Apr 2024 00:52:37 +0800
Subject: [PATCH 31/36] adjustment: final ui/ux adjustments

---
 .../InfisicalSecretInput.tsx                  | 94 +++++++++++++------
 1 file changed, 65 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index c95d9ad239..d2bd26bf6f 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -1,5 +1,5 @@
 import { TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
-import { faFolder, faFolderOpen, faKey } from "@fortawesome/free-solid-svg-icons";
+import { faCircle, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Popover from "@radix-ui/react-popover";
 import { twMerge } from "tailwind-merge";
@@ -11,6 +11,7 @@ import { useGetFoldersByEnv, useGetProjectSecrets, useGetUserWsKey } from "@app/
 import { SecretInput } from "../SecretInput";
 
 const REGEX_UNCLOSED_SECRET_REFERENCE = /\${(?![^{}]*\})/g;
+const REGEX_OPEN_SECRET_REFERENCE = /\${/g;
 
 export enum ReferenceType {
   ENVIRONMENT = "environment",
@@ -143,6 +144,7 @@ export const InfisicalSecretInput = ({
     const filteredListRef = currentListReference.filter((suggestionEntry) =>
       suggestionEntry.name.toUpperCase().startsWith(searchFragment.toUpperCase())
     );
+
     setListReference(filteredListRef);
   }, [secrets, environment, debouncedCurrentReference]);
 
@@ -163,6 +165,23 @@ export const InfisicalSecretInput = ({
     return indexIter;
   };
 
+  const getIndexOfUnclosedRefToTheRight = (pos: number) => {
+    const unclosedReferenceIndexMatches = [...inputValue.matchAll(REGEX_OPEN_SECRET_REFERENCE)].map(
+      (match) => match.index
+    );
+
+    // find the next unclosed reference index to the right of the current cursor position
+    // this is so that we know the limitation for slicing references
+    let indexIter = Infinity;
+    unclosedReferenceIndexMatches.forEach((index) => {
+      if (index > pos && index < indexIter) {
+        indexIter = index;
+      }
+    });
+
+    return indexIter;
+  };
+
   const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     // open suggestions if current position is to the right of an unclosed secret reference
     const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
@@ -183,46 +202,57 @@ export const InfisicalSecretInput = ({
   const handleSuggestionSelect = (selectedIndex?: number) => {
     const selectedSuggestion = listReference[selectedIndex ?? highlightedIndex];
 
-    // update current reference based on selection
-    const indexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
-    if (indexIter === -1) {
+    if (!selectedSuggestion) {
+      return;
+    }
+
+    const leftIndexIter = getIndexOfUnclosedRefToTheLeft(currentCursorPosition);
+    const rightIndexLimit = getIndexOfUnclosedRefToTheRight(currentCursorPosition);
+
+    if (leftIndexIter === -1) {
       return;
     }
 
     let newValue = "";
-    const currentOpenRef = inputValue.slice(indexIter + 2, currentCursorPosition);
+    const currentOpenRef = inputValue.slice(leftIndexIter + 2, currentCursorPosition);
     if (currentOpenRef.includes(".")) {
-      // append suggestion after last DOT
+      // append suggestion after last DOT (.)
       const lastDotIndex = currentReference.lastIndexOf(".");
       const existingPath = currentReference.slice(0, lastDotIndex);
-      const refEndAfterAppending =
-        indexIter +
-        3 +
-        existingPath.length +
-        selectedSuggestion.name.length +
-        Number(selectedSuggestion.type !== ReferenceType.SECRET);
-
-      newValue = `${inputValue.slice(0, indexIter + 2)}${existingPath}.${selectedSuggestion.name}${
-        selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
-      }${inputValue.slice(refEndAfterAppending)}`;
-      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
+      const refEndAfterAppending = Math.min(
+        leftIndexIter +
+          3 +
+          existingPath.length +
+          selectedSuggestion.name.length +
+          Number(selectedSuggestion.type !== ReferenceType.SECRET),
+        rightIndexLimit - 1
+      );
+
+      newValue = `${inputValue.slice(0, leftIndexIter + 2)}${existingPath}.${
+        selectedSuggestion.name
+      }${selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"}${inputValue.slice(
+        refEndAfterAppending
+      )}`;
+      const openReferenceValue = newValue.slice(leftIndexIter + 2, refEndAfterAppending);
       setCurrentReference(openReferenceValue);
 
       // add 1 in order to prevent referenceOpen from being triggered by handleKeyUp
       setCurrentCursorPosition(refEndAfterAppending + 1);
     } else {
       // append selectedSuggestion at position after unclosed ${
-      const refEndAfterAppending =
+      const refEndAfterAppending = Math.min(
         selectedSuggestion.name.length +
-        indexIter +
-        2 +
-        Number(selectedSuggestion.type !== ReferenceType.SECRET);
+          leftIndexIter +
+          2 +
+          Number(selectedSuggestion.type !== ReferenceType.SECRET),
+        rightIndexLimit - 1
+      );
 
-      newValue = `${inputValue.slice(0, indexIter + 2)}${selectedSuggestion.name}${
+      newValue = `${inputValue.slice(0, leftIndexIter + 2)}${selectedSuggestion.name}${
         selectedSuggestion.type !== ReferenceType.SECRET ? "." : "}"
       }${inputValue.slice(refEndAfterAppending)}`;
 
-      const openReferenceValue = newValue.slice(indexIter + 2, refEndAfterAppending);
+      const openReferenceValue = newValue.slice(leftIndexIter + 2, refEndAfterAppending);
       setCurrentReference(openReferenceValue);
       setCurrentCursorPosition(refEndAfterAppending);
     }
@@ -266,7 +296,10 @@ export const InfisicalSecretInput = ({
   };
 
   return (
-    <Popover.Root open={isSuggestionsOpen && listReference.length > 0} onOpenChange={setIsOpen}>
+    <Popover.Root
+      open={isSuggestionsOpen && listReference.length > 0 && currentReference.length > 0}
+      onOpenChange={setIsOpen}
+    >
       <Popover.Trigger asChild>
         <SecretInput
           {...props}
@@ -288,13 +321,13 @@ export const InfisicalSecretInput = ({
           maxHeight: "var(--radix-select-content-available-height)"
         }}
       >
-        <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-2 text-white">
+        <div className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md text-white">
           {listReference.map((item, i) => {
             let entryIcon;
             if (item.type === ReferenceType.SECRET) {
               entryIcon = faKey;
             } else if (item.type === ReferenceType.ENVIRONMENT) {
-              entryIcon = faFolderOpen;
+              entryIcon = faCircle;
             } else {
               entryIcon = faFolder;
             }
@@ -309,17 +342,20 @@ export const InfisicalSecretInput = ({
                   handleSuggestionSelect(i);
                 }}
                 style={{ pointerEvents: "auto" }}
-                className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
+                className="flex items-center justify-between border-mineshaft-600 text-left"
                 key={`secret-reference-secret-${i + 1}`}
               >
                 <div
                   className={`${
                     highlightedIndex === i ? "bg-gray-600" : ""
-                  } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+                  } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
                 >
                   <div className="flex gap-2">
                     <div className="flex items-center text-yellow-700">
-                      <FontAwesomeIcon icon={entryIcon} />
+                      <FontAwesomeIcon
+                        icon={entryIcon}
+                        size={item.type === ReferenceType.ENVIRONMENT ? "xs" : "1x"}
+                      />
                     </div>
                     <div className="text-md w-48 truncate text-left">{item.name}</div>
                   </div>

From 9b782a9da6ae57ed9460927b96f0d085af61269d Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 26 Apr 2024 00:56:45 +0800
Subject: [PATCH 32/36] adjustment: removed unused component

---
 .../SecretReferenceSelect.tsx                 | 215 ------------------
 1 file changed, 215 deletions(-)
 delete mode 100644 frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx

diff --git a/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx b/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
deleted file mode 100644
index 6d2157af3d..0000000000
--- a/frontend/src/components/v2/InfisicalSecretInput/SecretReferenceSelect.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  faCaretDown,
-  faCaretUp,
-  faChevronRight,
-  faFolder,
-  faKey,
-  faRecycle
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { twMerge } from "tailwind-merge";
-
-import { useWorkspace } from "@app/context";
-import { useGetUserWsKey } from "@app/hooks/api";
-import { useGetFoldersByEnv } from "@app/hooks/api/secretFolders/queries";
-import { useGetProjectSecrets } from "@app/hooks/api/secrets/queries";
-
-export enum ReferenceType {
-  ENVIRONMENT = "environment",
-  FOLDER = "folder",
-  SECRET = "secret"
-}
-
-type Props = {
-  open: boolean;
-  reference?: string;
-  secretPath?: string;
-  environment?: string;
-  handleOpenChange: (params: boolean) => void;
-  onEscapeKeyDown: () => void;
-  onSelect: (params: { type: ReferenceType; name: string; slug?: string }) => void;
-};
-
-type ReferenceItem = {
-  name: string;
-  type: ReferenceType.FOLDER | ReferenceType.SECRET;
-  slug?: string;
-};
-
-export default function SecretReferenceSelect({
-  open,
-  secretPath: propSecretPath,
-  environment: propEnvironment,
-  handleOpenChange,
-  reference,
-  onSelect,
-  onEscapeKeyDown
-}: Props) {
-  const { currentWorkspace } = useWorkspace();
-  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
-  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
-  const [environment, setEnvironment] = useState<string | undefined>(propEnvironment);
-  const workspaceId = currentWorkspace?.id || "";
-  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
-  const { data: secrets } = useGetProjectSecrets({
-    decryptFileKey: decryptFileKey!,
-    environment: environment || currentWorkspace?.environments?.[0].slug!,
-    secretPath,
-    workspaceId
-  });
-  const { folderNames: folders } = useGetFoldersByEnv({
-    path: secretPath,
-    environments: [environment || currentWorkspace?.environments?.[0].slug!],
-    projectId: workspaceId
-  });
-
-  useEffect(() => {
-    let currentEnvironment = propEnvironment;
-    let currentSecretPath = propSecretPath || "/";
-
-    if (!reference) {
-      setSecretPath(currentSecretPath);
-      setEnvironment(currentEnvironment!);
-      return;
-    }
-
-    const isNested = reference.includes(".");
-
-    if (isNested) {
-      const [envSlug, ...folderPaths] = reference.split(".");
-      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
-      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
-      currentSecretPath = `/${folderPaths?.join("/")}` || "/";
-    }
-
-    setSecretPath(currentSecretPath);
-    setEnvironment(currentEnvironment);
-  }, [reference]);
-
-  useEffect(() => {
-    const currentListReference: ReferenceItem[] = [];
-    const isNested = reference?.includes(".");
-
-    if (!environment) {
-      setListReference(currentListReference);
-      return;
-    }
-
-    if (isNested) {
-      folders?.forEach((folder) => {
-        currentListReference.unshift({ name: folder, type: ReferenceType.FOLDER });
-      });
-    }
-
-    secrets?.forEach((secret) => {
-      currentListReference.unshift({ name: secret.key, type: ReferenceType.SECRET });
-    });
-
-    setListReference(currentListReference);
-  }, [secrets, environment, reference]);
-
-  return (
-    <SelectPrimitive.Root
-      open={open}
-      onOpenChange={handleOpenChange}
-      onValueChange={(str) => onSelect(JSON.parse(str))}
-    >
-      <SelectPrimitive.Trigger>
-        <SelectPrimitive.Value>
-          <div />
-        </SelectPrimitive.Value>
-      </SelectPrimitive.Trigger>
-
-      <SelectPrimitive.Portal>
-        <SelectPrimitive.Content
-          className={twMerge(
-            "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
-          )}
-          position="popper"
-          side="left"
-          onEscapeKeyDown={onEscapeKeyDown}
-          style={{
-            width: "300px",
-            maxHeight: "var(--radix-select-content-available-height)"
-          }}
-        >
-          <SelectPrimitive.ScrollUpButton>
-            <div className="flex items-center justify-center">
-              <FontAwesomeIcon icon={faCaretUp} size="sm" />
-            </div>
-          </SelectPrimitive.ScrollUpButton>
-          <SelectPrimitive.Viewport className="max-w-60 h-full w-full flex-col items-center justify-center rounded-md p-1 py-4 text-white">
-            <SelectPrimitive.Group>
-              {listReference.map((e, i) => {
-                return (
-                  <SelectPrimitive.Item
-                    className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
-                    key={`secret-reference-secret-${i + 1}`}
-                    value={JSON.stringify(e)}
-                    asChild
-                  >
-                    <SelectPrimitive.ItemText asChild>
-                      <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
-                        <div className="flex gap-2">
-                          <div className="flex items-center text-yellow-700">
-                            <FontAwesomeIcon icon={e.type === "secret" ? faKey : faFolder} />
-                          </div>
-                          <div className="text-md w-48 truncate text-left">{e.name}</div>
-                        </div>
-                        {e.type === "folder" && (
-                          <div className="flex items-center text-bunker-200">
-                            <FontAwesomeIcon icon={faChevronRight} />
-                          </div>
-                        )}
-                      </div>
-                    </SelectPrimitive.ItemText>
-                  </SelectPrimitive.Item>
-                );
-              })}
-
-              {listReference.length !== 0 && (
-                <SelectPrimitive.Separator className="m-1 mb-2 h-[1px] bg-mineshaft-400" />
-              )}
-            </SelectPrimitive.Group>
-
-            <SelectPrimitive.Group>
-              <SelectPrimitive.Label className="flex w-full justify-center gap-2 pt-1 text-sm text-bunker-300">
-                All Secrets
-              </SelectPrimitive.Label>
-
-              {currentWorkspace?.environments.map((env, i) => (
-                <SelectPrimitive.Item
-                  className="flex items-center justify-between border-b border-mineshaft-600 px-2  text-left last:border-b-0"
-                  key={`secret-reference-env-${i + 1}`}
-                  value={JSON.stringify({ ...env, type: ReferenceType.ENVIRONMENT })}
-                  asChild
-                >
-                  <SelectPrimitive.ItemText asChild>
-                    <div className="text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500">
-                      <div className="flex gap-2">
-                        <div className="flex items-center text-yellow-700">
-                          <FontAwesomeIcon icon={faRecycle} />
-                        </div>
-                        <div className="text-md w-48 truncate text-left">{env.name}</div>
-                      </div>
-                      <div className="flex items-center text-bunker-200">
-                        <FontAwesomeIcon icon={faChevronRight} />
-                      </div>
-                    </div>
-                  </SelectPrimitive.ItemText>
-                </SelectPrimitive.Item>
-              ))}
-            </SelectPrimitive.Group>
-          </SelectPrimitive.Viewport>
-          <SelectPrimitive.ScrollDownButton>
-            <div className="flex items-center justify-center">
-              <FontAwesomeIcon icon={faCaretDown} size="sm" />
-            </div>
-          </SelectPrimitive.ScrollDownButton>
-        </SelectPrimitive.Content>
-      </SelectPrimitive.Portal>
-    </SelectPrimitive.Root>
-  );
-}

From a41883137ca1fe5269ef06cd3899e854012a578a Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 26 Apr 2024 01:08:31 +0800
Subject: [PATCH 33/36] fix: addressed type check issue

---
 .../v2/InfisicalSecretInput/InfisicalSecretInput.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index d2bd26bf6f..0e56aa680c 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -157,7 +157,7 @@ export const InfisicalSecretInput = ({
     // find unclosed reference index less than the current cursor position
     let indexIter = -1;
     unclosedReferenceIndexMatches.forEach((index) => {
-      if (index > indexIter && index < pos) {
+      if (index && index > indexIter && index < pos) {
         indexIter = index;
       }
     });
@@ -174,7 +174,7 @@ export const InfisicalSecretInput = ({
     // this is so that we know the limitation for slicing references
     let indexIter = Infinity;
     unclosedReferenceIndexMatches.forEach((index) => {
-      if (index > pos && index < indexIter) {
+      if (index && index > pos && index < indexIter) {
         indexIter = index;
       }
     });

From e555d3129d81875e62570bf0fb096b5770ba5351 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 26 Apr 2024 01:22:09 +0800
Subject: [PATCH 34/36] fix: resolved invalid handling of undefined vals

---
 .../v2/InfisicalSecretInput/InfisicalSecretInput.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 0e56aa680c..74d4057ae3 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -141,9 +141,11 @@ export const InfisicalSecretInput = ({
 
     // Get fragment inside currentReference
     const searchFragment = isNested ? currentReference.split(".").pop() || "" : currentReference;
-    const filteredListRef = currentListReference.filter((suggestionEntry) =>
-      suggestionEntry.name.toUpperCase().startsWith(searchFragment.toUpperCase())
-    );
+    const filteredListRef = currentListReference
+      .filter((suggestionEntry) =>
+        suggestionEntry.name.toUpperCase().startsWith(searchFragment.toUpperCase())
+      )
+      .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
 
     setListReference(filteredListRef);
   }, [secrets, environment, debouncedCurrentReference]);
@@ -157,7 +159,7 @@ export const InfisicalSecretInput = ({
     // find unclosed reference index less than the current cursor position
     let indexIter = -1;
     unclosedReferenceIndexMatches.forEach((index) => {
-      if (index && index > indexIter && index < pos) {
+      if (index !== undefined && index > indexIter && index < pos) {
         indexIter = index;
       }
     });
@@ -174,7 +176,7 @@ export const InfisicalSecretInput = ({
     // this is so that we know the limitation for slicing references
     let indexIter = Infinity;
     unclosedReferenceIndexMatches.forEach((index) => {
-      if (index && index > pos && index < indexIter) {
+      if (index !== undefined && index > pos && index < indexIter) {
         indexIter = index;
       }
     });

From a20a60850b8f20ede4ecae63ad89254df44c0a49 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 26 Apr 2024 03:25:34 +0800
Subject: [PATCH 35/36] adjustment: finalized popover positioning

---
 .../v2/InfisicalSecretInput/InfisicalSecretInput.tsx       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 74d4057ae3..029e8da636 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -314,12 +314,13 @@ export const InfisicalSecretInput = ({
         />
       </Popover.Trigger>
       <Popover.Content
+        align="start"
         onOpenAutoFocus={(e) => e.preventDefault()}
         className={twMerge(
-          "relative top-3 z-[100] ml-4 overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
+          "relative top-2 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md"
         )}
         style={{
-          width: "300px",
+          width: "var(--radix-popover-trigger-width)",
           maxHeight: "var(--radix-select-content-available-height)"
         }}
       >
@@ -350,7 +351,7 @@ export const InfisicalSecretInput = ({
                 <div
                   className={`${
                     highlightedIndex === i ? "bg-gray-600" : ""
-                  } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
+                  } text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`}
                 >
                   <div className="flex gap-2">
                     <div className="flex items-center text-yellow-700">

From 2a89b872c52af5593b2ec2d3d23b878da8e0c424 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 26 Apr 2024 03:33:58 +0800
Subject: [PATCH 36/36] adjustment: finalized text width

---
 .../components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index 029e8da636..2added8783 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -360,7 +360,7 @@ export const InfisicalSecretInput = ({
                         size={item.type === ReferenceType.ENVIRONMENT ? "xs" : "1x"}
                       />
                     </div>
-                    <div className="text-md w-48 truncate text-left">{item.name}</div>
+                    <div className="text-md w-10/12 truncate text-left">{item.name}</div>
                   </div>
                 </div>
               </div>