fix(secrets-permissions): UI improvements

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -4,6 +4,7 @@ import { subject } from "@casl/ability";
 import {
   faCheck,
   faCopy,
+  faEyeSlash,
   faProjectDiagram,
   faTrash,
   faXmark
@@ -25,7 +26,6 @@ import {
   ModalTrigger,
   Tooltip
 } from "@app/components/v2";
-import { Blur } from "@app/components/v2/Blur";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
@@ -177,18 +177,22 @@ export const SecretEditRow = ({
         deleteKey={secretName}
         onDeleteApproved={handleDeleteSecret}
       />
-
+      {secretValueHidden && (
+        <Tooltip
+          content={`You do not have permission to read the value of this secret.${canEditSecretValue ? " But you can edit this secret" : ""}`}
+        >
+          <FontAwesomeIcon className="pl-1" icon={faEyeSlash} />
+        </Tooltip>
+      )}
       <div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2">
         {secretValueHidden && !isSecretBlurFocus ? (
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-          <div
+          <div className="flex flex-grow items-center gap-2" onClick={handleSecretBlurClick}>
-            className="flex flex-grow"
+            <span className="flex flex-row items-center">
-            onClick={handleSecretBlurClick}
+              <div style={{ fontFamily: "monospace" }} className="h-full w-full">
-            onBlur={() => setIsSecretBlurFocus.off()}
+                *********************
-          >
+              </div>
-            <Blur
+            </span>
-              tooltipText={`You do not have permission to read the value of this secret.${canEditSecretValue ? " But you have permission to edit it." : ""}`}
-            />
           </div>
         ) : (
           <Controller
@@ -201,7 +205,7 @@ export const SecretEditRow = ({
                 isReadOnly={isImportedSecret || isRotatedSecret}
                 value={field.value as string}
                 key="secret-input"
-                isVisible={isVisible}
+                isVisible={isVisible && !secretValueHidden}
                 secretPath={secretPath}
                 environment={environment}
                 isImport={isImportedSecret}

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -46,10 +46,9 @@ import {
 } from "@app/components/secrets/SecretReferenceDetails";
 
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
-import { Blur } from "@app/components/v2/Blur";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
+import { faEyeSlash, faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
 import {
   FontAwesomeSpriteName,
   formSchema,
@@ -311,6 +310,13 @@ export const SecretItem = memo(
               tabIndex={0}
               role="button"
             >
+              {secretValueHidden && (
+                <Tooltip
+                  content={`You do not have permission to read the value of this secret.${canEditSecretValue ? " But you can edit this secret" : ""}`}
+                >
+                  <FontAwesomeIcon className="pr-2" icon={faEyeSlash} />
+                </Tooltip>
+              )}
               {isOverriden ? (
                 <Controller
                   name="valueOverride"
@@ -328,14 +334,12 @@ export const SecretItem = memo(
                 />
               ) : secretValueHidden && !isSecretBlurFocus ? (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-                <div
+                <div className="flex flex-grow items-center gap-2" onClick={handleSecretBlurClick}>
-                  className="flex flex-grow"
+                  <span className="flex flex-row items-center">
-                  onClick={handleSecretBlurClick}
+                    <div style={{ fontFamily: "monospace" }} className="h-full w-full">
-                  onBlur={() => setIsSecretBlurFocus.off()}
+                      *********************
-                >
+                    </div>
-                  <Blur
+                  </span>
-                    tooltipText={`You do not have permission to read the value of this secret.${canEditSecretValue ? " But you have permission to edit it." : ""}`}
-                  />
                 </div>
               ) : (
                 <Controller
@@ -346,7 +350,7 @@ export const SecretItem = memo(
                     <InfisicalSecretInput
                       isReadOnly={isReadOnly || isRotatedSecret}
                       key="secret-value"
-                      isVisible={isVisible}
+                      isVisible={isVisible && !secretValueHidden}
                       environment={environment}
                       secretPath={secretPath}
                       {...field}