Merge pull request #3808 from Infisical/daniel/fix-editing-value-hidden-secrets

fix: editing secrets with value hidden

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -96,6 +96,10 @@ import { SecretOverviewSecretRotationRow } from "@app/pages/secret-manager/Overv
 
 import { CreateDynamicSecretForm } from "../SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm";
 import { FolderForm } from "../SecretDashboardPage/components/ActionBar/FolderForm";
+import {
+  HIDDEN_SECRET_VALUE,
+  HIDDEN_SECRET_VALUE_API_MASK
+} from "../SecretDashboardPage/components/SecretListView/SecretItem";
 import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { SecretOverviewDynamicSecretRow } from "./components/SecretOverviewDynamicSecretRow";
@@ -509,15 +513,25 @@ export const OverviewPage = () => {
     env: string,
     key: string,
     value: string,
+    secretValueHidden: boolean,
     type = SecretType.Shared
   ) => {
+    let secretValue: string | undefined = value;
+
+    if (
+      secretValueHidden &&
+      (value === HIDDEN_SECRET_VALUE_API_MASK || value === HIDDEN_SECRET_VALUE)
+    ) {
+      secretValue = undefined;
+    }
+
     try {
       const result = await updateSecretV3({
         environment: env,
         workspaceId,
         secretPath,
         secretKey: key,
-        secretValue: value,
+        secretValue,
         type
       });
 

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

@@ -50,6 +50,7 @@ type Props = {
     env: string,
     key: string,
     value: string,
+    secretValueHidden: boolean,
     type?: SecretType,
     secretId?: string
   ) => Promise<void>;
@@ -147,6 +148,7 @@ export const SecretEditRow = ({
           environment,
           secretName,
           value,
+          secretValueHidden,
           isOverride ? SecretType.Personal : SecretType.Shared,
           secretId
         );
@@ -166,6 +168,7 @@ export const SecretEditRow = ({
       environment,
       secretName,
       secretValue,
+      secretValueHidden,
       isOverride ? SecretType.Personal : SecretType.Shared,
       secretId
     );
@@ -257,7 +260,7 @@ export const SecretEditRow = ({
             >
               {(isAllowed) => (
                 <div>
-                  <Tooltip content="save">
+                  <Tooltip content="Save">
                     <IconButton
                       variant="plain"
                       ariaLabel="submit-value"

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

@@ -24,6 +24,7 @@ import { useToggle } from "@app/hooks";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
 import { getExpandedRowStyle } from "@app/pages/secret-manager/OverviewPage/components/utils";
+import { HIDDEN_SECRET_VALUE } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem";
 
 import { SecretEditRow } from "./SecretEditRow";
 import SecretRenameRow from "./SecretRenameRow";
@@ -40,6 +41,7 @@ type Props = {
     env: string,
     key: string,
     value: string,
+    secretValueHidden: boolean,
     type?: SecretType,
     secretId?: string
   ) => Promise<void>;
@@ -96,7 +98,7 @@ export const SecretOverviewTableRow = ({
     );
 
     if (secret?.secretValueHidden && !secret?.valueOverride) {
-      return canEditSecretValue ? "******" : "";
+      return canEditSecretValue ? HIDDEN_SECRET_VALUE : "";
     }
     return secret?.valueOverride || secret?.value || importedSecret?.secret?.value || "";
   };

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

@@ -62,6 +62,7 @@ import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { camelCaseToSpaces } from "@app/lib/fn/string";
 
 import { CreateReminderForm } from "./CreateReminderForm";
+import { HIDDEN_SECRET_VALUE } from "./SecretItem";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
 type Props = {
@@ -897,7 +898,9 @@ export const SecretDetailSidebar = ({
                                     </button>
                                   </div>
                                   <span className="group-[.show-value]:hidden">
-                                    {secretValueHidden ? "******" : secretValue?.replace(/./g, "*")}
+                                    {secretValueHidden
+                                      ? HIDDEN_SECRET_VALUE
+                                      : secretValue?.replace(/./g, "*")}
                                     <button
                                       type="button"
                                       className="ml-1 cursor-pointer"

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

@@ -59,6 +59,7 @@ import {
 import { CollapsibleSecretImports } from "./CollapsibleSecretImports";
 
 export const HIDDEN_SECRET_VALUE = "******";
+export const HIDDEN_SECRET_VALUE_API_MASK = "<hidden-by-infisical>";
 
 type Props = {
   secret: SecretV3RawSanitized;

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

@@ -20,7 +20,7 @@ import { AddShareSecretModal } from "@app/pages/organization/SecretSharingPage/c
 import { useSelectedSecretActions, useSelectedSecrets } from "../../SecretMainPage.store";
 import { CollapsibleSecretImports } from "./CollapsibleSecretImports";
 import { SecretDetailSidebar } from "./SecretDetailSidebar";
-import { SecretItem } from "./SecretItem";
+import { HIDDEN_SECRET_VALUE, HIDDEN_SECRET_VALUE_API_MASK, SecretItem } from "./SecretItem";
 import { FontAwesomeSpriteSymbols } from "./SecretListView.utils";
 
 type Props = {
@@ -85,6 +85,7 @@ export const SecretListView = ({
     type: SecretType,
     key: string,
     {
+      secretValueHidden,
       value,
       comment,
       reminderRepeatDays,
@@ -97,6 +98,7 @@ export const SecretListView = ({
       secretMetadata,
       isRotatedSecret
     }: Partial<{
+      secretValueHidden: boolean;
       value: string;
       comment: string;
       reminderRepeatDays: number | null;
@@ -123,6 +125,15 @@ export const SecretListView = ({
     }
 
     if (operation === "update") {
+      let secretValue = value;
+
+      if (
+        secretValueHidden &&
+        (value === HIDDEN_SECRET_VALUE_API_MASK || value === HIDDEN_SECRET_VALUE)
+      ) {
+        secretValue = undefined;
+      }
+
       await updateSecretV3({
         environment,
         workspaceId,
@@ -130,7 +141,7 @@ export const SecretListView = ({
         secretKey: key,
         ...(!isRotatedSecret && {
           newSecretName: newKey,
-          secretValue: value || ""
+          secretValue: secretValueHidden ? secretValue : secretValue || ""
         }),
         type,
         tagIds: tags,
@@ -168,7 +179,7 @@ export const SecretListView = ({
       },
       cb?: () => void
     ) => {
-      const { key: oldKey } = orgSecret;
+      const { key: oldKey, secretValueHidden } = orgSecret;
       const {
         key,
         value,
@@ -246,7 +257,8 @@ export const SecretListView = ({
             newKey: hasKeyChanged ? key : undefined,
             skipMultilineEncoding: modSecret.skipMultilineEncoding,
             secretMetadata,
-            isRotatedSecret: orgSecret.isRotatedSecret
+            isRotatedSecret: orgSecret.isRotatedSecret,
+            secretValueHidden
           });
           if (cb) cb();
         }