fix: hidden secret value in secret approvals

backend/src/ee/routes/v1/secret-approval-request-router.ts

@@ -285,6 +285,7 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
               commits: secretRawSchema
                 .omit({ _id: true, environment: true, workspace: true, type: true, version: true, secretValue: true })
                 .extend({
+                  secretValueHidden: z.boolean(),
                   secretValue: z.string().optional(),
                   isRotatedSecret: z.boolean().optional(),
                   op: z.string(),
@@ -296,6 +297,7 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
                       version: z.number(),
                       secretKey: z.string(),
                       secretValue: z.string().optional(),
+                      secretValueHidden: z.boolean(),
                       secretComment: z.string().optional()
                     })
                     .optional()
@@ -306,6 +308,7 @@ export const registerSecretApprovalRequestRouter = async (server: FastifyZodProv
                       version: z.number(),
                       secretKey: z.string(),
                       secretValue: z.string().optional(),
+                      secretValueHidden: z.boolean(),
                       secretComment: z.string().optional(),
                       tags: SanitizedTagSchema.array().optional(),
                       secretMetadata: ResourceMetadataSchema.nullish()

backend/src/ee/services/secret-approval-request/secret-approval-request-service.ts

@@ -39,7 +39,8 @@ import {
   fnSecretBulkDelete,
   fnSecretBulkInsert,
   fnSecretBulkUpdate,
-  getAllNestedSecretReferences
+  getAllNestedSecretReferences,
+  INFISICAL_SECRET_VALUE_HIDDEN_MASK
 } from "@app/services/secret/secret-fns";
 import { TSecretQueueFactory } from "@app/services/secret/secret-queue";
 import { SecretOperations } from "@app/services/secret/secret-types";
@@ -267,7 +268,6 @@ export const secretApprovalRequestServiceFactory = ({
       ProjectPermissionSecretActions.DescribeAndReadValue,
       ProjectPermissionSub.Secrets
     );
-    const hiddenSecretValue = "******";
 
     let secrets;
     if (shouldUseSecretV2Bridge) {
@@ -285,8 +285,9 @@ export const secretApprovalRequestServiceFactory = ({
         version: el.version,
         secretMetadata: el.secretMetadata as ResourceMetadataDTO,
         isRotatedSecret: el.secret?.isRotatedSecret ?? false,
+        secretValueHidden: !hasSecretReadAccess,
         secretValue: !hasSecretReadAccess
-          ? hiddenSecretValue
+          ? INFISICAL_SECRET_VALUE_HIDDEN_MASK
           : el.secret && el.secret.isRotatedSecret
             ? undefined
             : el.encryptedValue
@@ -300,8 +301,9 @@ export const secretApprovalRequestServiceFactory = ({
               secretKey: el.secret.key,
               id: el.secret.id,
               version: el.secret.version,
+              secretValueHidden: !hasSecretReadAccess,
               secretValue: !hasSecretReadAccess
-                ? hiddenSecretValue
+                ? INFISICAL_SECRET_VALUE_HIDDEN_MASK
                 : el.secret.encryptedValue
                   ? secretManagerDecryptor({ cipherTextBlob: el.secret.encryptedValue }).toString()
                   : "",
@@ -315,8 +317,9 @@ export const secretApprovalRequestServiceFactory = ({
               secretKey: el.secretVersion.key,
               id: el.secretVersion.id,
               version: el.secretVersion.version,
+              secretValueHidden: !hasSecretReadAccess,
               secretValue: !hasSecretReadAccess
-                ? hiddenSecretValue
+                ? INFISICAL_SECRET_VALUE_HIDDEN_MASK
                 : el.secretVersion.encryptedValue
                   ? secretManagerDecryptor({ cipherTextBlob: el.secretVersion.encryptedValue }).toString()
                   : "",
@@ -333,11 +336,13 @@ export const secretApprovalRequestServiceFactory = ({
       const encryptedSecrets = await secretApprovalRequestSecretDAL.findByRequestId(secretApprovalRequest.id);
       secrets = encryptedSecrets.map((el) => ({
         ...el,
+        secretValueHidden: !hasSecretReadAccess,
         ...decryptSecretWithBot(el, botKey),
         secret: el.secret
           ? {
               id: el.secret.id,
               version: el.secret.version,
+              secretValueHidden: false,
               ...decryptSecretWithBot(el.secret, botKey)
             }
           : undefined,
@@ -345,6 +350,7 @@ export const secretApprovalRequestServiceFactory = ({
           ? {
               id: el.secretVersion.id,
               version: el.secretVersion.version,
+              secretValueHidden: false,
               ...decryptSecretWithBot(el.secretVersion, botKey)
             }
           : undefined
@@ -353,6 +359,7 @@ export const secretApprovalRequestServiceFactory = ({
     const secretPath = await folderDAL.findSecretPathByFolderIds(secretApprovalRequest.projectId, [
       secretApprovalRequest.folderId
     ]);
+
     return { ...secretApprovalRequest, secretPath: secretPath?.[0]?.path || "/", commits: secrets };
   };
 

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

@@ -48,6 +48,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
+  valueAlwaysHidden?: boolean;
   isImport?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
@@ -63,6 +64,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
       value,
       isVisible,
       isImport,
+      valueAlwaysHidden,
       containerClassName,
       onBlur,
       isDisabled,
@@ -84,7 +86,11 @@ 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 && !valueAlwaysHidden),
+                  isImport
+                )}
               </span>
             </code>
           </pre>

frontend/src/hooks/api/secretApprovalRequest/types.ts

@@ -32,6 +32,7 @@ export type TSecretApprovalSecChange = {
   version: number;
   secretKey: string;
   secretValue?: string;
+  secretValueHidden?: boolean;
   secretComment?: string;
   isRotatedSecret?: boolean;
   tags?: string[];

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx

@@ -14,6 +14,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretInput, Tag, Tooltip } from "@app/components/v2";
 import { CommitType, SecretV3Raw, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";
+import { twMerge } from "tailwind-merge";
 
 export type Props = {
   op: CommitType;
@@ -105,21 +106,38 @@ export const SecretApprovalRequestChangeItem = ({
                     </span>
                   ) : (
                     <div className="relative">
+                      {secretVersion?.secretValueHidden && (
+                        <div className="absolute left-1 top-1/2 -translate-y-1/2">
+                          <Tooltip content="You do not have access to view the old secret value.">
+                            <FontAwesomeIcon
+                              className="pl-2 text-mineshaft-300"
+                              size="sm"
+                              icon={faEyeSlash}
+                            />
+                          </Tooltip>
+                        </div>
+                      )}
                       <SecretInput
                         isReadOnly
                         isVisible={isOldSecretValueVisible}
+                        valueAlwaysHidden={secretVersion?.secretValueHidden}
                         value={secretVersion?.secretValue}
-                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-700 px-2 py-1.5"
+                        containerClassName={twMerge(
+                          "border border-mineshaft-600 bg-bunker-700 py-1.5 text-bunker-300 hover:border-primary-400/50",
+                          secretVersion?.secretValueHidden ? "pl-8 pr-2" : "px-2"
+                        )}
                       />
-                      <div
-                        className="absolute right-1 top-1"
-                        onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
-                      >
-                        <FontAwesomeIcon
-                          icon={isOldSecretValueVisible ? faEyeSlash : faEye}
-                          className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
-                        />
-                      </div>
+                      {!secretVersion?.secretValueHidden && (
+                        <div
+                          className="absolute right-1 top-1"
+                          onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
+                        >
+                          <FontAwesomeIcon
+                            icon={isOldSecretValueVisible ? faEyeSlash : faEye}
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                          />
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
@@ -211,21 +229,38 @@ export const SecretApprovalRequestChangeItem = ({
                     </span>
                   ) : (
                     <div className="relative">
+                      {newVersion?.secretValueHidden && (
+                        <div className="absolute left-1 top-1/2 -translate-y-1/2">
+                          <Tooltip content="You do not have access to view the new secret value.">
+                            <FontAwesomeIcon
+                              className="pl-2 text-mineshaft-300"
+                              size="sm"
+                              icon={faEyeSlash}
+                            />
+                          </Tooltip>
+                        </div>
+                      )}
                       <SecretInput
                         isReadOnly
+                        valueAlwaysHidden={newVersion?.secretValueHidden}
                         isVisible={isNewSecretValueVisible}
                         value={newVersion?.secretValue}
-                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-700 px-2 py-1.5"
+                        containerClassName={twMerge(
+                          "border border-mineshaft-600 bg-bunker-700 py-1.5 text-bunker-300 hover:border-primary-400/50",
+                          newVersion?.secretValueHidden ? "pl-8 pr-2" : "px-2"
+                        )}
                       />
-                      <div
-                        className="absolute right-1 top-1"
-                        onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
-                      >
-                        <FontAwesomeIcon
-                          icon={isNewSecretValueVisible ? faEyeSlash : faEye}
-                          className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
-                        />
-                      </div>
+                      {!newVersion?.secretValueHidden && (
+                        <div
+                          className="absolute right-1 top-1"
+                          onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
+                        >
+                          <FontAwesomeIcon
+                            icon={isNewSecretValueVisible ? faEyeSlash : faEye}
+                            className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
+                          />
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>