feat(api): view secret value, WIP

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

@@ -2,6 +2,7 @@ import { forwardRef, TextareaHTMLAttributes, useCallback, useMemo, useRef, useSt
 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";
 
 import { useWorkspace } from "@app/context";
 import { useDebounce, useToggle } from "@app/hooks";
@@ -54,6 +55,7 @@ type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "val
   secretPath?: string;
   environment?: string;
   containerClassName?: string;
+  secretValueHidden?: boolean;
 };
 
 type ReferenceItem = {
@@ -70,6 +72,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       containerClassName,
       secretPath: propSecretPath,
       environment: propEnvironment,
+      secretValueHidden,
       ...props
     },
     ref
@@ -275,6 +278,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
             ref={handleRef}
             onKeyDown={handleKeyDown}
             value={value}
+            valueHidden={secretValueHidden}
             onFocus={() => setIsFocused.on()}
             onBlur={(evt) => {
               // should not on blur when its mouse down selecting a item from suggestion
@@ -282,7 +286,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
                 setIsFocused.off();
             }}
             onChange={(e) => onChange?.(e.target.value)}
-            containerClassName={containerClassName}
+            containerClassName={twMerge(containerClassName)}
           />
         </Popover.Trigger>
         <Popover.Content

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -1,9 +1,13 @@
 /* eslint-disable react/no-danger */
 import { forwardRef, TextareaHTMLAttributes } from "react";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { useToggle } from "@app/hooks";
 
+import { Tooltip } from "../Tooltip";
+
 const REGEX = /(\${([a-zA-Z0-9-_.]+)})/g;
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
@@ -14,7 +18,26 @@ const replaceContentWithDot = (str: string) => {
   return finalStr;
 };
 
-const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
+const syntaxHighlight = (
+  content?: string | null,
+  isVisible?: boolean,
+  isImport?: boolean,
+  valueHidden?: boolean
+) => {
+  if (valueHidden && !content)
+    return (
+      <div className="flex items-center gap-2">
+        <span className="opacity-60">VALUE HIDDEN</span>
+        <div className="relative z-50">
+          <Tooltip
+            className="!relative !z-50 !break-normal !font-inter"
+            content="You do not have permission to read the value of this secret."
+          >
+            <FontAwesomeIcon icon={faQuestionCircle} className="text-xs" />
+          </Tooltip>
+        </div>
+      </div>
+    );
   if (isImport && !content) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
@@ -50,6 +73,7 @@ type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   isImport?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
+  valueHidden?: boolean;
   containerClassName?: string;
 };
 
@@ -61,6 +85,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       value,
       isVisible,
       isImport,
+      valueHidden,
       containerClassName,
       onBlur,
       isDisabled,
@@ -81,7 +106,7 @@ export const SecretInput = 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, isImport)}
+                {syntaxHighlight(value, isVisible || isSecretFocused, isImport, valueHidden)}
               </span>
             </code>
           </pre>