From 7fd4249d004b74d6941347d438a926f4a41cc200 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Wed, 19 Feb 2025 07:17:41 +0400
Subject: [PATCH] fix: frontend requested changes

---
 .../InfisicalSecretInput.tsx                  |  3 --
 .../components/v2/SecretInput/SecretInput.tsx | 28 ++---------
 .../src/hooks/api/secretImports/queries.tsx   |  1 +
 .../SecretOverviewTableRow/SecretEditRow.tsx  | 47 ++++++++++++-------
 .../SecretDashboardPage.tsx                   |  2 +-
 .../SecretListView/SecretDetailSidebar.tsx    | 23 +++++----
 .../components/SecretListView/SecretItem.tsx  | 12 ++++-
 7 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
index a36d38a75..b244aa5f2 100644
--- a/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+++ b/frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
@@ -55,7 +55,6 @@ type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "val
   secretPath?: string;
   environment?: string;
   containerClassName?: string;
-  secretValueHidden?: boolean;
 };
 
 type ReferenceItem = {
@@ -72,7 +71,6 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
       containerClassName,
       secretPath: propSecretPath,
       environment: propEnvironment,
-      secretValueHidden,
       ...props
     },
     ref
@@ -278,7 +276,6 @@ 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
diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 88f6e9f0f..573e1c60a 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -1,13 +1,10 @@
 /* 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 = "";
@@ -18,26 +15,7 @@ const replaceContentWithDot = (str: string) => {
   return finalStr;
 };
 
-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>
-    );
+const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
   if (isImport && !content) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
@@ -106,7 +84,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, valueHidden)}
+                {syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
               </span>
             </code>
           </pre>
diff --git a/frontend/src/hooks/api/secretImports/queries.tsx b/frontend/src/hooks/api/secretImports/queries.tsx
index 67780bb34..dfc8c6497 100644
--- a/frontend/src/hooks/api/secretImports/queries.tsx
+++ b/frontend/src/hooks/api/secretImports/queries.tsx
@@ -137,6 +137,7 @@ export const useGetImportedSecretsSingleEnv = ({
             env: encSecret.environment,
             key: encSecret.secretKey,
             value: encSecret.secretValue,
+            secretValueHidden: encSecret.secretValueHidden,
             tags: encSecret.tags,
             comment: encSecret.secretComment,
             createdAt: encSecret.createdAt,
diff --git a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index f22a87722..a460115b6 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -142,24 +142,35 @@ export const SecretEditRow = ({
       />
 
       <div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2">
-        <Controller
-          disabled={isImportedSecret && !defaultValue}
-          control={control}
-          name="value"
-          render={({ field }) => (
-            <InfisicalSecretInput
-              {...field}
-              isReadOnly={isImportedSecret}
-              value={field.value as string}
-              key="secret-input"
-              isVisible={isVisible}
-              secretValueHidden={secretValueHidden}
-              secretPath={secretPath}
-              environment={environment}
-              isImport={isImportedSecret}
-            />
-          )}
-        />
+        {secretValueHidden ? (
+          <Tooltip content="You do not have permission to read the value of this secret.">
+            <div
+              className="flex w-80 flex-grow items-center py-1 pl-4 pr-2"
+              tabIndex={0}
+              role="button"
+            >
+              <span className="blur">********</span>
+            </div>
+          </Tooltip>
+        ) : (
+          <Controller
+            disabled={isImportedSecret && !defaultValue}
+            control={control}
+            name="value"
+            render={({ field }) => (
+              <InfisicalSecretInput
+                {...field}
+                isReadOnly={isImportedSecret}
+                value={field.value as string}
+                key="secret-input"
+                isVisible={isVisible}
+                secretPath={secretPath}
+                environment={environment}
+                isImport={isImportedSecret}
+              />
+            )}
+          />
+        )}
       </div>
 
       <div
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
index fb461ff58..dfb7aceb0 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
@@ -25,6 +25,7 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import {
   useGetImportedSecretsSingleEnv,
@@ -58,7 +59,6 @@ import {
   useSelectedSecrets
 } from "./SecretMainPage.store";
 import { Filter, RowType } from "./SecretMainPage.types";
-import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 
 const LOADER_TEXT = [
   "Retrieving your encrypted secrets...",
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
index 889a3b285..390963212 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
@@ -9,7 +9,8 @@ import {
   faPlus,
   faShare,
   faTag,
-  faTrash
+  faTrash,
+  faTriangleExclamation
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -44,6 +45,7 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp, useToggle } from "@app/hooks";
 import { useGetSecretVersion } from "@app/hooks/api";
 import { useGetSecretAccessList } from "@app/hooks/api/secrets/queries";
@@ -52,8 +54,6 @@ import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
-import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
-import { useEffect } from "react";
 
 type Props = {
   isOpen?: boolean;
@@ -156,8 +156,6 @@ export const SecretDetailSidebar = ({
     cannotEditSecret &&
     cannotReadSecretValue;
 
-  console.log("cannotReadSecretValue", cannotReadSecretValue);
-
   const overrideAction = watch("overrideAction");
   const isOverridden =
     overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
@@ -280,9 +278,18 @@ export const SecretDetailSidebar = ({
                         render={({ field }) => (
                           <FormControl
                             helperText={
-                              cannotReadSecretValue
-                                ? "The value of this secret is hidden because you don't have the read secret value permission."
-                                : undefined
+                              cannotReadSecretValue ? (
+                                <div className="flex space-x-2">
+                                  <FontAwesomeIcon
+                                    icon={faTriangleExclamation}
+                                    className="mt-0.5 text-yellow-400"
+                                  />
+                                  <span>
+                                    The value of this secret is hidden because you do not have the
+                                    read secret value permission.
+                                  </span>
+                                </div>
+                              ) : undefined
                             }
                             label="Value"
                           >
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
index 1dbf0fcbd..7d2c6fd49 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
@@ -150,7 +150,6 @@ export const SecretItem = memo(
       );
 
     const { secretValueHidden } = secret;
-    console.log(`Secret Key: ${secret.key}, hidden: ${secretValueHidden}`);
 
     const [isSecValueCopied, setIsSecValueCopied] = useToggle(false);
     useEffect(() => {
@@ -283,6 +282,16 @@ export const SecretItem = memo(
                     />
                   )}
                 />
+              ) : secretValueHidden ? (
+                <Tooltip content="You do not have permission to read the value of this secret.">
+                  <div
+                    className="flex w-80 flex-grow items-center py-1 pl-4 pr-2"
+                    tabIndex={0}
+                    role="button"
+                  >
+                    <span className="blur">********</span>
+                  </div>
+                </Tooltip>
               ) : (
                 <Controller
                   name="value"
@@ -290,7 +299,6 @@ export const SecretItem = memo(
                   control={control}
                   render={({ field }) => (
                     <InfisicalSecretInput
-                      secretValueHidden={secretValueHidden}
                       isReadOnly={isReadOnly}
                       key="secret-value"
                       isVisible={isVisible}