adjustment: ux finalization

frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx

@@ -1,86 +1,22 @@
-/* eslint-disable react/no-danger */
+import { TextareaHTMLAttributes, useEffect, useRef, useState } from "react";
-import React, { forwardRef, 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_UNCLOSED_SECRET_REFERENCE = /\${(?![^{}]*\})/g;
-const REGEX_SECRET_REFERENCE_INVALID = /(?:\/|\\|\n|\.$|^\.)/;
 
-const isValidSecretReferenceValue = (str: string): boolean => {
+export enum ReferenceType {
-  try {
+  ENVIRONMENT = "environment",
-    if (!str) return true;
+  FOLDER = "folder",
-    let skipNext = false;
+  SECRET = "secret"
-    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 />);
-};
 
 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";
+type ReferenceItem = {
+  name: string;
+  type: ReferenceType;
+  slug?: string;
+};
 
-export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
+export const InfisicalSecretInput = ({
-  (
+  value: propValue,
-    {
+  isVisible,
-      value: propValue,
+  containerClassName,
-      isVisible,
+  onBlur,
-      containerClassName,
+  isDisabled,
-      onBlur,
+  isImport,
-      isDisabled,
+  isReadOnly,
-      isImport,
+  secretPath: propSecretPath,
-      isReadOnly,
+  environment: propEnvironment,
-      onFocus,
+  onChange,
-      secretPath: propSecretPath,
+  ...props
-      environment: propEnvironment,
+}: Props) => {
-      onChange,
+  const [inputValue, setInputValue] = useState(propValue ?? "");
-      ...props
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
-    },
+  const [currentCursorPosition, setCurrentCursorPosition] = useState(0);
-    ref
+  const [currentReference, setCurrentReference] = useState<string>("");
-  ) => {
+  const [secretPath, setSecretPath] = useState<string>(propSecretPath || "/");
-    const childRef = useRef<HTMLTextAreaElement>(null);
+  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 [isSecretFocused, setIsSecretFocused] = useToggle();
+  const debouncedCurrentReference = useDebounce(currentReference, 100);
-    const [value, setValue] = useState<string>(propValue || "");
-    const [showReferencePopup, setShowReferencePopup] = useState<boolean>(false);
-    const [referenceKey, setReferenceKey] = useState<string>();
-    const [lastCaretPos, setLastCaretPos] = useState<number>(0);
 
-    useEffect(() => {
+  const [listReference, setListReference] = useState<ReferenceItem[]>([]);
-      setValue(propValue as string);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    }, [propValue]);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
-    const isCaretInsideReference = (str: string, start: number) => {
+  useEffect(() => {
-      if (str) {
+    setInputValue(propValue ?? "");
-        const match = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)].find(
+  }, [propValue]);
-          (entry) =>
-            typeof entry?.index !== "undefined" &&
-            entry.index <= start &&
-            start < entry.index + entry[0].length
-        );
 
-        return match || null;
+  useEffect(() => {
-      }
+    let currentEnvironment = propEnvironment;
+    let currentSecretPath = propSecretPath || "/";
 
-      return null;
+    if (!currentReference) {
-    };
+      setSecretPath(currentSecretPath);
+      setEnvironment(currentEnvironment);
+      return;
+    }
 
-    const setCaretPos = (caretPos: number) => {
+    const isNested = currentReference.includes(".");
-      if (childRef?.current) {
-        childRef.current.focus();
-        const timeout = setTimeout(() => {
-          if (!childRef?.current) return;
-          childRef.current.selectionStart = caretPos;
-          childRef.current.selectionEnd = caretPos;
-          clearTimeout(timeout);
-        }, 200);
-      }
-    };
 
-    const referencePopup = (text: string, pos: number) => {
+    if (isNested) {
-      const match = isCaretInsideReference(text, pos);
+      const [envSlug, ...folderPaths] = currentReference.split(".");
-      if (match && typeof match.index !== "undefined") {
+      const isValidEnvSlug = currentWorkspace?.environments.find((e) => e.slug === envSlug);
-        setLastCaretPos(pos);
+      currentEnvironment = isValidEnvSlug ? envSlug : undefined;
-        setReferenceKey(match?.[2]);
-      }
-      setShowReferencePopup(!!match);
-    };
 
-    const handleReferencePopup = (element: HTMLTextAreaElement) => {
+      // should be based on the last valid section (with .)
-      const { selectionStart, selectionEnd, value: text } = element;
+      folderPaths.pop();
-      if (selectionStart !== selectionEnd || selectionStart === 0) {
+      currentSecretPath = `/${folderPaths?.join("/")}`;
-        return;
+    }
-      }
-      referencePopup(text, selectionStart);
-    };
 
-    const handleKeyUp = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    setSecretPath(currentSecretPath);
-      if (event.key === "Escape") {
+    setEnvironment(currentEnvironment);
-        setShowReferencePopup(false);
+  }, [debouncedCurrentReference]);
-        return;
-      }
 
-      if (event.key === "{") {
+  useEffect(() => {
-        // auto close the bracket
+    const currentListReference: ReferenceItem[] = [];
-        const currCaretPos = event.currentTarget.selectionEnd;
+    const isNested = currentReference?.includes(".");
-        const isPrevDollar = value[currCaretPos - 2] === "$";
-        if (!isPrevDollar) return;
 
-        const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`;
+    if (!environment) {
+      currentWorkspace?.environments.forEach((env) => {
+        currentListReference.unshift({
+          name: env.slug,
+          type: ReferenceType.ENVIRONMENT
+        });
+      });
+    }
 
-        setValue(newValue);
+    if (!environment || !currentReference) {
-        onChange?.({ target: { value: newValue } } as any);
+      setListReference(currentListReference);
-        setCaretPos(currCaretPos);
+      return;
+    }
 
-        if (event.currentTarget) {
+    if (isNested) {
-          const timeout = setTimeout(() => {
+      folders?.forEach((folder) => {
-            referencePopup(newValue, currCaretPos);
+        currentListReference.unshift({ name: folder, type: ReferenceType.FOLDER });
-            clearTimeout(timeout);
+      });
-          }, 200);
+    } else {
+      currentWorkspace?.environments.forEach((env) => {
+        currentListReference.unshift({
+          name: env.slug,
+          type: ReferenceType.ENVIRONMENT
+        });
+      });
+    }
 
-          return;
+    secrets?.forEach((secret) => {
-        }
+      currentListReference.unshift({ name: secret.key, type: ReferenceType.SECRET });
-      }
+    });
-      if (!(event.key.startsWith("Arrow") || event.key === "Backspace" || event.key === "Delete")) {
-        handleReferencePopup(event.currentTarget);
-      }
-    };
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    // Get fragment inside currentReference
-      if (
+    const searchFragment = isNested ? currentReference.split(".").pop() || "" : currentReference;
-        !(
+    const filteredListRef = currentListReference.filter((suggestionEntry) =>
-          event.key.startsWith("Arrow") ||
+      suggestionEntry.name.toUpperCase().startsWith(searchFragment.toUpperCase())
-          ["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;
-      }
-
-      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:
-      }
-      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
-        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, 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>
-
-        <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>
     );
-  }
+    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;
+      }
+    });
+
+    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(
+          "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>
+  );
+};
 
 InfisicalSecretInput.displayName = "InfisicalSecretInput";

frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInputV2.tsx

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

frontend/src/components/v2/InfisicalSecretInput/index.tsx

@@ -0,0 +1 @@
+export { InfisicalSecretInput } from "./InfisicalSecretInput";

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

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,

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

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

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