fix: frontend requested changes

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

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...",

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

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}