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

feat(platform): Show imported/overwritten values in secret overview
2026-09-22 13:39:35 +00:00 · 2024-06-21 17:13:02 -04:00
parent cbef9ea514 d0f8394f50
commit 4b37c0f1c4
18 changed files with 152 additions and 65 deletions
--- a/frontend/src/components/dashboard/DropZone.tsx
+++ b/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;
--- a/frontend/src/components/utilities/secrets/checkOverrides.ts
+++ b/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"
-      : "personal"
+      ? SecretType.Shared
+      : SecretType.Personal
  );
  if (overridenSecrets.length) {
    overridenSecrets.forEach((secret) => {
--- a/frontend/src/components/utilities/secrets/encryptSecrets.ts
+++ b/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"
-            : "personal",
+            ? SecretType.Shared
+            : SecretType.Personal,
        tags: secret.tags
      };

--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/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);
--- a/frontend/src/hooks/api/secretImports/queries.tsx
+++ b/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 = ({
--- a/frontend/src/hooks/api/secretSnapshots/queries.tsx
+++ b/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);
--- a/frontend/src/hooks/api/secrets/queries.tsx
+++ b/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
--- a/frontend/src/hooks/api/secrets/types.ts
+++ b/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;
--- a/frontend/src/views/SecretMainPage/components/ActionBar/ActionBar.tsx
+++ b/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");
--- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/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);
--- a/frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx
+++ b/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
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx
+++ b/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 })
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/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}
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/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
      });
    });
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/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}
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/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}
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx
+++ b/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,
--- a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
+++ b/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
              }
            ];
          }