From 95489e1b0a53fe1c8a7b9eb75df1e12cee394346 Mon Sep 17 00:00:00 2001
From: carlosmonastyrski <charly.monastyrski@gmail.com>
Date: Wed, 23 Apr 2025 22:24:41 -0300
Subject: [PATCH] fix(secrets-permissions): UI improvements

---
 .../SecretOverviewTableRow/SecretEditRow.tsx  | 26 +++++++++++--------
 .../components/SecretListView/SecretItem.tsx  | 26 +++++++++++--------
 2 files changed, 30 insertions(+), 22 deletions(-)

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 d3017b202..0f4c2be56 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/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
-            className="flex flex-grow"
-            onClick={handleSecretBlurClick}
-            onBlur={() => setIsSecretBlurFocus.off()}
-          >
-            <Blur
-              tooltipText={`You do not have permission to read the value of this secret.${canEditSecretValue ? " But you have permission to edit it." : ""}`}
-            />
+          <div className="flex flex-grow items-center gap-2" onClick={handleSecretBlurClick}>
+            <span className="flex flex-row items-center">
+              <div style={{ fontFamily: "monospace" }} className="h-full w-full">
+                *********************
+              </div>
+            </span>
           </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}
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 135f1868c..e5251644f 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/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
-                  className="flex flex-grow"
-                  onClick={handleSecretBlurClick}
-                  onBlur={() => setIsSecretBlurFocus.off()}
-                >
-                  <Blur
-                    tooltipText={`You do not have permission to read the value of this secret.${canEditSecretValue ? " But you have permission to edit it." : ""}`}
-                  />
+                <div className="flex flex-grow items-center gap-2" onClick={handleSecretBlurClick}>
+                  <span className="flex flex-row items-center">
+                    <div style={{ fontFamily: "monospace" }} className="h-full w-full">
+                      *********************
+                    </div>
+                  </span>
                 </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}