Merge pull request #2004 from Infisical/daniel/show-imported-overwritten-values-overview

feat(platform): Show imported/overwritten values in secret overview

frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx

@@ -47,7 +47,7 @@ import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from
 import { interpolateSecrets } from "@app/helpers/secret";
 import { usePopUp } from "@app/hooks";
 import { useCreateFolder, useDeleteSecretBatch, useGetUserWsKey } from "@app/hooks/api";
-import { DecryptedSecret, TImportedSecrets, WsTag } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType, TImportedSecrets, WsTag } from "@app/hooks/api/types";
 import { debounce } from "@app/lib/fn/debounce";
 
 import {
@@ -211,7 +211,7 @@ export const ActionBar = ({
         secretPath,
         workspaceId,
         environment,
-        secrets: bulkDeletedSecrets.map(({ key }) => ({ secretName: key, type: "shared" }))
+        secrets: bulkDeletedSecrets.map(({ key }) => ({ secretName: key, type: SecretType.Shared }))
       });
       resetSelectedSecret();
       handlePopUpClose("bulkDeleteSecrets");

frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -6,7 +6,7 @@ import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useCreateSecretV3 } from "@app/hooks/api";
-import { UserWsKeyPair } from "@app/hooks/api/types";
+import { SecretType, UserWsKeyPair } from "@app/hooks/api/types";
 
 import { PopUpNames, usePopUpAction, usePopUpState } from "../../SecretMainPage.store";
 
@@ -56,7 +56,7 @@ export const CreateSecretForm = ({
         secretName: key,
         secretValue: value || "",
         secretComment: "",
-        type: "shared",
+        type: SecretType.Shared,
         latestFileKey: decryptFileKey
       });
       closePopUp(PopUpNames.CreateSecretForm);

frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx

@@ -16,7 +16,7 @@ import { usePopUp, useToggle } from "@app/hooks";
 import { useCreateSecretBatch, useUpdateSecretBatch } from "@app/hooks/api";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
-import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType, UserWsKeyPair } from "@app/hooks/api/types";
 
 import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
 import { CopySecretsFromBoard } from "./CopySecretsFromBoard";
@@ -170,7 +170,7 @@ export const SecretDropzone = ({
           workspaceId,
           environment,
           secrets: Object.entries(create).map(([secretName, secData]) => ({
-            type: "shared",
+            type: SecretType.Shared,
             secretComment: secData.comments.join("\n"),
             secretValue: secData.value,
             secretName
@@ -184,7 +184,7 @@ export const SecretDropzone = ({
           workspaceId,
           environment,
           secrets: Object.entries(update).map(([secretName, secData]) => ({
-            type: "shared",
+            type: SecretType.Shared,
             secretComment: secData.comments.join("\n"),
             secretValue: secData.value,
             secretName

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -10,7 +10,7 @@ import { usePopUp } from "@app/hooks";
 import { useCreateSecretV3, useDeleteSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
-import { DecryptedSecret } from "@app/hooks/api/secrets/types";
+import { DecryptedSecret, SecretType } from "@app/hooks/api/secrets/types";
 import { secretSnapshotKeys } from "@app/hooks/api/secretSnapshots/queries";
 import { UserWsKeyPair, WsTag } from "@app/hooks/api/types";
 
@@ -119,7 +119,7 @@ export const SecretListView = ({
 
   const handleSecretOperation = async (
     operation: "create" | "update" | "delete",
-    type: "shared" | "personal",
+    type: SecretType,
     key: string,
     {
       value,
@@ -227,23 +227,25 @@ export const SecretListView = ({
       try {
         // personal secret change
         if (overrideAction === "deleted") {
-          await handleSecretOperation("delete", "personal", oldKey, {
+          await handleSecretOperation("delete", SecretType.Personal, oldKey, {
             secretId: orgSecret.idOverride
           });
         } else if (overrideAction && idOverride) {
-          await handleSecretOperation("update", "personal", oldKey, {
+          await handleSecretOperation("update", SecretType.Personal, oldKey, {
             value: valueOverride,
             newKey: hasKeyChanged ? key : undefined,
             secretId: orgSecret.idOverride,
             skipMultilineEncoding: modSecret.skipMultilineEncoding
           });
         } else if (overrideAction) {
-          await handleSecretOperation("create", "personal", oldKey, { value: valueOverride });
+          await handleSecretOperation("create", SecretType.Personal, oldKey, {
+            value: valueOverride
+          });
         }
 
         // shared secret change
         if (!isSharedSecUnchanged) {
-          await handleSecretOperation("update", "shared", oldKey, {
+          await handleSecretOperation("update", SecretType.Shared, oldKey, {
             value,
             tags: tagIds,
             comment,
@@ -286,7 +288,7 @@ export const SecretListView = ({
   const handleSecretDelete = useCallback(async () => {
     const { key, id: secretId } = popUp.deleteSecret?.data as DecryptedSecret;
     try {
-      await handleSecretOperation("delete", "shared", key, { secretId });
+      await handleSecretOperation("delete", SecretType.Shared, key, { secretId });
       // wrap this in another function and then reuse
       queryClient.invalidateQueries(
         secretKeys.getProjectSecret({ workspaceId, environment, secretPath })

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -64,7 +64,7 @@ import {
 } from "@app/hooks/api";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
-import { TSecretFolder } from "@app/hooks/api/types";
+import { SecretType, TSecretFolder } from "@app/hooks/api/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { FolderForm } from "../SecretMainPage/components/ActionBar/FolderForm";
@@ -188,7 +188,7 @@ export const SecretOverviewPage = () => {
     environments: userAvailableEnvs.map(({ slug }) => slug)
   });
 
-  const { isImportedSecretPresentInEnv } = useGetImportedSecretsAllEnvs({
+  const { isImportedSecretPresentInEnv, getImportedSecretByKey } = useGetImportedSecretsAllEnvs({
     projectId: workspaceId,
     decryptFileKey: latestFileKey!,
     path: secretPath,
@@ -320,7 +320,7 @@ export const SecretOverviewPage = () => {
         secretName: key,
         secretValue: value,
         secretComment: "",
-        type: "shared",
+        type: SecretType.Shared,
         latestFileKey: latestFileKey!
       });
       createNotification({
@@ -344,7 +344,13 @@ export const SecretOverviewPage = () => {
     }
   };
 
-  const handleSecretUpdate = async (env: string, key: string, value: string, secretId?: string) => {
+  const handleSecretUpdate = async (
+    env: string,
+    key: string,
+    value: string,
+    type = SecretType.Shared,
+    secretId?: string
+  ) => {
     try {
       await updateSecretV3({
         environment: env,
@@ -353,7 +359,7 @@ export const SecretOverviewPage = () => {
         secretId,
         secretName: key,
         secretValue: value,
-        type: "shared",
+        type,
         latestFileKey: latestFileKey!
       });
       createNotification({
@@ -377,7 +383,7 @@ export const SecretOverviewPage = () => {
         secretPath,
         secretName: key,
         secretId,
-        type: "shared"
+        type: SecretType.Shared
       });
       createNotification({
         type: "success",
@@ -807,6 +813,7 @@ export const SecretOverviewPage = () => {
                       isSelected={selectedEntries.secret[key]}
                       onToggleSecretSelect={() => toggleSelectedEntry(EntryType.SECRET, key)}
                       secretPath={secretPath}
+                      getImportedSecretByKey={getImportedSecretByKey}
                       isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
                       onSecretCreate={handleSecretCreate}
                       onSecretDelete={handleSecretDelete}

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -18,7 +18,7 @@ import {
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { useWorkspace } from "@app/context";
 import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
-import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType, UserWsKeyPair } from "@app/hooks/api/types";
 
 const typeSchema = z
   .object({
@@ -103,7 +103,7 @@ export const CreateSecretForm = ({
           secretPath,
           secretName: key,
           secretValue: value || "",
-          type: "shared",
+          type: SecretType.Shared,
           latestFileKey: decryptFileKey
         });
       }
@@ -115,7 +115,7 @@ export const CreateSecretForm = ({
         secretName: key,
         secretValue: value || "",
         secretComment: "",
-        type: "shared",
+        type: SecretType.Shared,
         latestFileKey: decryptFileKey
       });
     });

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -10,24 +10,33 @@ import { IconButton, Tooltip } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
+import { SecretType } from "@app/hooks/api/types";
 
 type Props = {
   defaultValue?: string | null;
   secretName: string;
   secretId?: string;
+  isOverride?: boolean;
   isCreatable?: boolean;
   isVisible?: boolean;
   isImportedSecret: boolean;
   environment: string;
   secretPath: string;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
-  onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
+  onSecretUpdate: (
+    env: string,
+    key: string,
+    value: string,
+    type?: SecretType,
+    secretId?: string
+  ) => Promise<void>;
   onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
 };
 
 export const SecretEditRow = ({
   defaultValue,
   isCreatable,
+  isOverride,
   isImportedSecret,
   onSecretUpdate,
   secretName,
@@ -73,7 +82,13 @@ export const SecretEditRow = ({
       if (isCreatable) {
         await onSecretCreate(environment, secretName, value);
       } else {
-        await onSecretUpdate(environment, secretName, value, secretId);
+        await onSecretUpdate(
+          environment,
+          secretName,
+          value,
+          isOverride ? SecretType.Personal : SecretType.Shared,
+          secretId
+        );
       }
     }
     reset({ value });
@@ -93,12 +108,13 @@ export const SecretEditRow = ({
     <div className="group flex w-full cursor-text items-center space-x-2">
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
-          disabled={isImportedSecret}
+          disabled={isImportedSecret && !defaultValue}
           control={control}
           name="value"
           render={({ field }) => (
             <InfisicalSecretInput
               {...field}
+              isReadOnly={isImportedSecret}
               value={field.value as string}
               key="secret-input"
               isVisible={isVisible}

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -13,7 +13,8 @@ import { twMerge } from "tailwind-merge";
 
 import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useToggle } from "@app/hooks";
-import { DecryptedSecret } from "@app/hooks/api/secrets/types";
+import { DecryptedSecret, SecretType } from "@app/hooks/api/secrets/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 import { SecretEditRow } from "./SecretEditRow";
 import SecretRenameRow from "./SecretRenameRow";
@@ -27,9 +28,19 @@ type Props = {
   onToggleSecretSelect: (key: string) => void;
   getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
-  onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
+  onSecretUpdate: (
+    env: string,
+    key: string,
+    value: string,
+    type?: SecretType,
+    secretId?: string
+  ) => Promise<void>;
   onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
   isImportedSecretPresentInEnv: (env: string, secretName: string) => boolean;
+  getImportedSecretByKey: (
+    env: string,
+    secretName: string
+  ) => { secret?: DecryptedSecret; environmentInfo?: WorkspaceEnv } | undefined;
 };
 
 export const SecretOverviewTableRow = ({
@@ -41,6 +52,7 @@ export const SecretOverviewTableRow = ({
   onSecretCreate,
   onSecretDelete,
   isImportedSecretPresentInEnv,
+  getImportedSecretByKey,
   expandableColWidth,
   onToggleSecretSelect,
   isSelected
@@ -53,8 +65,9 @@ export const SecretOverviewTableRow = ({
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
         <Td
-          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${isFormExpanded && "border-t-2 border-mineshaft-500"
-            }`}
+          className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${
+            isFormExpanded && "border-t-2 border-mineshaft-500"
+          }`}
         >
           <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
             <div className="flex items-center space-x-5">
@@ -107,8 +120,8 @@ export const SecretOverviewTableRow = ({
                         isSecretPresent
                           ? "Present secret"
                           : isSecretImported
-                            ? "Imported secret"
-                            : "Missing secret"
+                          ? "Imported secret"
+                          : "Missing secret"
                       }
                     >
                       <FontAwesomeIcon
@@ -132,8 +145,9 @@ export const SecretOverviewTableRow = ({
         <Tr>
           <Td
             colSpan={totalCols}
-            className={`bg-bunker-600 px-0 py-0 ${isFormExpanded && "border-b-2 border-mineshaft-500"
-              }`}
+            className={`bg-bunker-600 px-0 py-0 ${
+              isFormExpanded && "border-b-2 border-mineshaft-500"
+            }`}
           >
             <div
               className="ml-2 p-2"
@@ -179,6 +193,7 @@ export const SecretOverviewTableRow = ({
                       const isCreatable = !secret;
 
                       const isImportedSecret = isImportedSecretPresentInEnv(slug, secretKey);
+                      const importedSecret = getImportedSecretByKey(slug, secretKey);
 
                       return (
                         <tr
@@ -189,8 +204,15 @@ export const SecretOverviewTableRow = ({
                             className="flex h-full items-center"
                             style={{ padding: "0.25rem 1rem" }}
                           >
-                            <div title={name} className="flex h-8 w-[8rem] items-center ">
+                            <div title={name} className="flex h-8 w-[8rem] items-center space-x-2 ">
                               <span className="truncate">{name}</span>
+                              {isImportedSecret && (
+                                <Tooltip
+                                  content={`Imported secret from the '${importedSecret?.environmentInfo?.name}' environment`}
+                                >
+                                  <FontAwesomeIcon icon={faFileImport} />
+                                </Tooltip>
+                              )}
                             </div>
                           </td>
                           <td className="col-span-2 h-8 w-full">
@@ -198,8 +220,13 @@ export const SecretOverviewTableRow = ({
                               secretPath={secretPath}
                               isVisible={isSecretVisible}
                               secretName={secretKey}
-                              defaultValue={secret?.value}
+                              defaultValue={
+                                secret?.valueOverride ||
+                                secret?.value ||
+                                importedSecret?.secret?.value
+                              }
                               secretId={secret?.id}
+                              isOverride={Boolean(secret?.valueOverride)}
                               isImportedSecret={isImportedSecret}
                               isCreatable={isCreatable}
                               onSecretDelete={onSecretDelete}

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx

@@ -18,7 +18,7 @@ import {
 } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetUserWsKey, useUpdateSecretV3 } from "@app/hooks/api";
-import { DecryptedSecret } from "@app/hooks/api/types";
+import { DecryptedSecret, SecretType } from "@app/hooks/api/types";
 import { SecretActionType } from "@app/views/SecretMainPage/components/SecretListView/SecretListView.utils";
 
 type Props = {
@@ -37,7 +37,6 @@ type TFormSchema = z.infer<typeof formSchema>;
 function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
   const { currentWorkspace } = useWorkspace();
   const { permission } = useProjectPermission();
-  
 
   const secrets = environments.map((env) => getSecretByKey(env.slug, secretKey));
 
@@ -113,7 +112,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
           secretName: secret.key,
           secretId: secret.id,
           secretValue: secret.value || "",
-          type: "shared",
+          type: SecretType.Shared,
           latestFileKey: decryptFileKey!,
           tags: secret.tags.map((tag) => tag.id),
           secretComment: secret.comment,

frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx

@@ -13,7 +13,12 @@ import {
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteFolder, useDeleteSecretBatch } from "@app/hooks/api";
-import { DecryptedSecret, TDeleteSecretBatchDTO, TSecretFolder } from "@app/hooks/api/types";
+import {
+  DecryptedSecret,
+  SecretType,
+  TDeleteSecretBatchDTO,
+  TSecretFolder
+} from "@app/hooks/api/types";
 
 export enum EntryType {
   FOLDER = "folder",
@@ -100,7 +105,7 @@ export const SelectionPanel = ({
               ...accum,
               {
                 secretName: entry.key,
-                type: "shared" as "shared"
+                type: SecretType.Shared
               }
             ];
           }