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

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

frontend/src/components/dashboard/DropZone.tsx

@@ -6,6 +6,8 @@ import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { parseDocument, Scalar, YAMLMap } from "yaml";
 
+import { SecretType } from "@app/hooks/api/types";
+
 import Button from "../basic/buttons/Button";
 import Error from "../basic/Error";
 import { createNotification } from "../notifications";
@@ -33,7 +35,6 @@ const DropZone = ({
   numCurrentRows
 }: DropZoneProps) => {
   const { t } = useTranslation();
-  
 
   const handleDragEnter = (e: DragEvent) => {
     e.preventDefault();
@@ -66,7 +67,7 @@ const DropZone = ({
           key,
           value: keyPairs[key as keyof typeof keyPairs].value,
           comment: keyPairs[key as keyof typeof keyPairs].comments.join("\n"),
-          type: "shared",
+          type: SecretType.Shared,
           tags: []
         }));
         break;
@@ -79,7 +80,7 @@ const DropZone = ({
           key,
           value: keyPairs[key as keyof typeof keyPairs],
           comment: "",
-          type: "shared",
+          type: SecretType.Shared,
           tags: []
         }));
         break;
@@ -102,7 +103,7 @@ const DropZone = ({
             key,
             value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? "",
             comment,
-            type: "shared",
+            type: SecretType.Shared,
             tags: []
           };
         });
@@ -132,7 +133,7 @@ const DropZone = ({
     if (file === undefined) {
       createNotification({
         text: "You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.",
-        type: "error",
+        type: "error"
       });
       setLoading(false);
       return;

frontend/src/components/utilities/secrets/checkOverrides.ts

@@ -1,5 +1,7 @@
 import { SecretDataProps } from "public/data/frequentInterfaces";
 
+import { SecretType } from "@app/hooks/api/types";
+
 /**
  * This function downloads the secrets as a .env file
  * @param {object} obj
@@ -10,8 +12,8 @@ const checkOverrides = async ({ data }: { data: SecretDataProps[] }) => {
   let secrets: SecretDataProps[] = data!.map((secret) => Object.create(secret));
   const overridenSecrets = data!.filter((secret) =>
     secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
-      ? "shared"
+      ? SecretType.Shared
-      : "personal"
+      : SecretType.Personal
   );
   if (overridenSecrets.length) {
     overridenSecrets.forEach((secret) => {

frontend/src/components/utilities/secrets/encryptSecrets.ts

@@ -3,6 +3,7 @@ import crypto from "crypto";
 import { SecretDataProps, Tag } from "public/data/frequentInterfaces";
 
 import { fetchUserWsKey } from "@app/hooks/api/keys/queries";
+import { SecretType } from "@app/hooks/api/types";
 
 import { decryptAssymmetric, encryptSymmetric } from "../cryptography/crypto";
 
@@ -20,7 +21,7 @@ interface EncryptedSecretProps {
   secretValueCiphertext: string;
   secretValueIV: string;
   secretValueTag: string;
-  type: "personal" | "shared";
+  type: SecretType;
   tags: Tag[];
 }
 
@@ -108,8 +109,8 @@ const encryptSecrets = async ({
         secretCommentTag,
         type:
           secret.valueOverride === undefined || secret?.value !== secret?.valueOverride
-            ? "shared"
+            ? SecretType.Shared
-            : "personal",
+            : SecretType.Personal,
         tags: secret.tags
       };
 

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

@@ -15,7 +15,7 @@ const replaceContentWithDot = (str: string) => {
 };
 
 const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
-  if (isImport) return "IMPORTED";
+  if (isImport && !content) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);

frontend/src/hooks/api/secretImports/queries.tsx

@@ -279,7 +279,28 @@ export const useGetImportedSecretsAllEnvs = ({
     [(secretImports || []).map((response) => response.data)]
   );
 
-  return { secretImports, isImportedSecretPresentInEnv };
+  const getImportedSecretByKey = useCallback(
+    (envSlug: string, secretName: string) => {
+      const selectedEnvIndex = environments.indexOf(envSlug);
+
+      if (selectedEnvIndex !== -1) {
+        const secret = secretImports?.[selectedEnvIndex]?.data?.find(({ secrets }) =>
+          secrets.find((s) => s.key === secretName)
+        );
+
+        if (!secret) return undefined;
+
+        return {
+          secret: secret?.secrets.find((s) => s.key === secretName),
+          environmentInfo: secret?.environmentInfo
+        };
+      }
+      return undefined;
+    },
+    [(secretImports || []).map((response) => response.data)]
+  );
+
+  return { secretImports, isImportedSecretPresentInEnv, getImportedSecretByKey };
 };
 
 export const useGetImportedFoldersByEnv = ({

frontend/src/hooks/api/secretSnapshots/queries.tsx

@@ -7,7 +7,7 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";
 
-import { DecryptedSecret } from "../secrets/types";
+import { DecryptedSecret, SecretType } from "../secrets/types";
 import {
   TGetSecretSnapshotsDTO,
   TSecretRollbackDTO,
@@ -112,7 +112,7 @@ export const useGetSnapshotSecrets = ({ decryptFileKey, snapshotId }: TSnapshotD
           version: encSecret.version
         };
 
-        if (encSecret.type === "personal") {
+        if (encSecret.type === SecretType.Personal) {
           personalSecrets[decryptedSecret.key] = { id: encSecret.secretId, value: secretValue };
         } else {
           sharedSecrets.push(decryptedSecret);

frontend/src/hooks/api/secrets/queries.tsx

@@ -14,6 +14,7 @@ import {
   EncryptedSecret,
   EncryptedSecretVersion,
   GetSecretVersionsDTO,
+  SecretType,
   TGetProjectSecretsAllEnvDTO,
   TGetProjectSecretsDTO,
   TGetProjectSecretsKey
@@ -77,7 +78,7 @@ export const decryptSecrets = (
       skipMultilineEncoding: encSecret.skipMultilineEncoding
     };
 
-    if (encSecret.type === "personal") {
+    if (encSecret.type === SecretType.Personal) {
       personalSecrets[decryptedSecret.key] = {
         id: encSecret.id,
         value: secretValue

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

@@ -1,11 +1,16 @@
 import type { UserWsKeyPair } from "../keys/types";
 import type { WsTag } from "../tags/types";
 
+export enum SecretType {
+  Shared = "shared",
+  Personal = "personal"
+}
+
 export type EncryptedSecret = {
   id: string;
   version: number;
   workspace: string;
-  type: "shared" | "personal";
+  type: SecretType;
   environment: string;
   secretKeyCiphertext: string;
   secretKeyIV: string;
@@ -49,7 +54,7 @@ export type EncryptedSecretVersion = {
   secretId: string;
   version: number;
   workspace: string;
-  type: string;
+  type: SecretType;
   isDeleted: boolean;
   envId: string;
   secretKeyCiphertext: string;
@@ -101,14 +106,14 @@ export type TCreateSecretsV3DTO = {
   secretPath: string;
   workspaceId: string;
   environment: string;
-  type: string;
+  type: SecretType;
 };
 
 export type TUpdateSecretsV3DTO = {
   latestFileKey: UserWsKeyPair;
   workspaceId: string;
   environment: string;
-  type: string;
+  type: SecretType;
   secretPath: string;
   skipMultilineEncoding?: boolean;
   newSecretName?: string;
@@ -124,7 +129,7 @@ export type TUpdateSecretsV3DTO = {
 export type TDeleteSecretsV3DTO = {
   workspaceId: string;
   environment: string;
-  type: "shared" | "personal";
+  type: SecretType;
   secretPath: string;
   secretName: string;
   secretId?: string;
@@ -140,7 +145,7 @@ export type TCreateSecretBatchDTO = {
     secretValue: string;
     secretComment: string;
     skipMultilineEncoding?: boolean;
-    type: "shared" | "personal";
+    type: SecretType;
     metadata?: {
       source?: string;
     };
@@ -153,7 +158,7 @@ export type TUpdateSecretBatchDTO = {
   secretPath: string;
   latestFileKey: UserWsKeyPair;
   secrets: Array<{
-    type: "shared" | "personal";
+    type: SecretType;
     secretName: string;
     skipMultilineEncoding?: boolean;
     secretValue: string;
@@ -168,14 +173,14 @@ export type TDeleteSecretBatchDTO = {
   secretPath: string;
   secrets: Array<{
     secretName: string;
-    type: "shared" | "personal";
+    type: SecretType;
   }>;
 };
 
 export type CreateSecretDTO = {
   workspaceId: string;
   environment: string;
-  type: "shared" | "personal";
+  type: SecretType;
   secretKey: string;
   secretKeyCiphertext: string;
   secretKeyIV: string;

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"
+                          ? "Imported secret"
-                            : "Missing 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
               }
             ];
           }