feat(secrets-ui): add direct reference warning on secrets updates

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

@@ -74,7 +74,7 @@ import {
   useUpdateSecretV3
 } from "@app/hooks/api";
 import { useGetProjectSecretsOverview } from "@app/hooks/api/dashboard/queries";
-import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
+import { DashboardSecretsOrderBy, ProjectSecretsImportedBy } from "@app/hooks/api/dashboard/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
@@ -727,6 +727,98 @@ export const OverviewPage = () => {
     }
   }, [routerSearch.search]);
 
+  const selectedKeysCount = Object.keys(selectedEntries.secret).length;
+
+  const secretsToDeleteKeys = useMemo(() => {
+    return Object.values(selectedEntries.secret).flatMap((entries) =>
+      Object.values(entries).map((secret) => secret.key)
+    );
+  }, [selectedEntries]);
+
+  const filterAndMergeEnvironments = (
+    envNames: string[],
+    envs: { environment: string; importedBy: ProjectSecretsImportedBy[] }[]
+  ): ProjectSecretsImportedBy[] => {
+    const filteredEnvs = envs.filter((env) => envNames.includes(env.environment));
+
+    if (filteredEnvs.length === 0) return [];
+
+    const allImportedBy = filteredEnvs.flatMap((env) => env.importedBy);
+    const groupedBySlug: Record<string, ProjectSecretsImportedBy[]> = {};
+
+    allImportedBy.forEach((item) => {
+      const { slug } = item.environment;
+      if (!groupedBySlug[slug]) groupedBySlug[slug] = [];
+      groupedBySlug[slug].push(item);
+    });
+
+    const mergedImportedBy = Object.values(groupedBySlug).map((group) => {
+      const { environment } = group[0];
+      const allFolders = group.flatMap((item) => item.folders);
+
+      const foldersByName: Record<string, (typeof allFolders)[number][]> = {};
+      allFolders.forEach((folder) => {
+        if (!foldersByName[folder.name]) foldersByName[folder.name] = [];
+        foldersByName[folder.name].push(folder);
+      });
+
+      const mergedFolders = Object.entries(foldersByName).map(([name, foldersData]) => {
+        const isImported = foldersData.some((folder) => folder.isImported);
+        const allSecrets = foldersData.flatMap((folder) => folder.secrets || []);
+
+        const uniqueSecrets: {
+          secretId: string;
+          referencedSecretKey: string;
+          referencedSecretId: string;
+        }[] = [];
+        const secretIds = new Set<string>();
+
+        allSecrets
+          .filter(
+            (secret) =>
+              !secretsToDeleteKeys ||
+              secretsToDeleteKeys.length === 0 ||
+              secretsToDeleteKeys.includes(secret.referencedSecretKey)
+          )
+          .forEach((secret) => {
+            if (!secretIds.has(secret.secretId)) {
+              secretIds.add(secret.secretId);
+              uniqueSecrets.push(secret);
+            }
+          });
+
+        return {
+          name,
+          isImported,
+          ...(uniqueSecrets.length > 0 ? { secrets: uniqueSecrets } : {})
+        };
+      });
+
+      return {
+        environment,
+        folders: mergedFolders.filter(
+          (folder) => folder.isImported || (folder.secrets && folder.secrets.length > 0)
+        )
+      };
+    });
+
+    return mergedImportedBy;
+  };
+
+  const importedBy = useMemo(() => {
+    if (!importedByEnvs) return [];
+    if (selectedKeysCount === 0) {
+      return filterAndMergeEnvironments(
+        visibleEnvs.map(({ slug }) => slug),
+        importedByEnvs
+      );
+    }
+    return filterAndMergeEnvironments(
+      Object.values(selectedEntries.secret).flatMap((entries) => Object.keys(entries)),
+      importedByEnvs
+    );
+  }, [importedByEnvs, selectedEntries, selectedKeysCount]);
+
   if (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
@@ -1045,7 +1137,8 @@ export const OverviewPage = () => {
           secretPath={secretPath}
           selectedEntries={selectedEntries}
           resetSelectedEntries={resetSelectedEntries}
-          importedByEnvs={importedByEnvs}
+          importedBy={importedBy}
+          secretsToDeleteKeys={secretsToDeleteKeys}
           usedBySecretSyncs={usedBySecretSyncs}
         />
         <div className="thin-scrollbar mt-4">
@@ -1263,6 +1356,7 @@ export const OverviewPage = () => {
                         secretKey={key}
                         getSecretByKey={getSecretByKey}
                         scrollOffset={debouncedScrollOffset}
+                        importedBy={importedBy}
                       />
                     ))}
                     <SecretNoAccessOverviewTableRow

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

@@ -29,9 +29,10 @@ import { Blur } from "@app/components/v2/Blur";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
-import { useToggle } from "@app/hooks";
+import { usePopUp, useToggle } from "@app/hooks";
 import { SecretType } from "@app/hooks/api/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
+import { CollapsibleSecretImports } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports";
 
 type Props = {
   defaultValue?: string | null;
@@ -54,6 +55,14 @@ type Props = {
   ) => Promise<void>;
   onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
   isRotatedSecret?: boolean;
+  importedBy?: {
+    environment: { name: string; slug: string };
+    folders: {
+      name: string;
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      isImported: boolean;
+    }[];
+  }[];
 };
 
 export const SecretEditRow = ({
@@ -70,8 +79,13 @@ export const SecretEditRow = ({
   secretPath,
   isVisible,
   secretId,
-  isRotatedSecret
+  isRotatedSecret,
+  importedBy
 }: Props) => {
+  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
+    "editSecret"
+  ] as const);
+
   const {
     handleSubmit,
     control,
@@ -115,6 +129,17 @@ export const SecretEditRow = ({
       if (isCreatable) {
         await onSecretCreate(environment, secretName, value);
       } else {
+        if (
+          importedBy &&
+          importedBy.some(({ folders }) =>
+            folders?.some(({ secrets }) =>
+              secrets?.some(({ referencedSecretId }) => referencedSecretId === secretId)
+            )
+          )
+        ) {
+          handlePopUpOpen("editSecret", { secretValue: value });
+          return;
+        }
         await onSecretUpdate(
           environment,
           secretName,
@@ -127,6 +152,18 @@ export const SecretEditRow = ({
     reset({ value });
   };
 
+  const handleEditSecret = async ({ secretValue }: { secretValue: string }) => {
+    await onSecretUpdate(
+      environment,
+      secretName,
+      secretValue,
+      isOverride ? SecretType.Personal : SecretType.Shared,
+      secretId
+    );
+    reset({ value: secretValue });
+    handlePopUpClose("editSecret");
+  };
+
   const canReadSecretValue = hasSecretReadValueOrDescribePermission(
     permission,
     ProjectPermissionSecretActions.ReadValue
@@ -306,6 +343,26 @@ export const SecretEditRow = ({
           </>
         )}
       </div>
+      <DeleteActionModal
+        isOpen={popUp.editSecret.isOpen}
+        deleteKey="confirm"
+        buttonColorSchema="secondary"
+        buttonText="Save"
+        subTitle=""
+        title="Do you want to edit this secret?"
+        onChange={(isOpen) => handlePopUpToggle("editSecret", isOpen)}
+        onDeleteApproved={() => handleEditSecret(popUp?.editSecret?.data)}
+        formContent={
+          importedBy &&
+          importedBy.length > 0 && (
+            <CollapsibleSecretImports
+              importedBy={importedBy}
+              secretsToDelete={[secretName]}
+              onlyReferences
+            />
+          )
+        }
+      />
     </div>
   );
 };

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

@@ -44,6 +44,14 @@ type Props = {
     secretName: string
   ) => { secret?: SecretV3RawSanitized; environmentInfo?: WorkspaceEnv } | undefined;
   scrollOffset: number;
+  importedBy?: {
+    environment: { name: string; slug: string };
+    folders: {
+      name: string;
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      isImported: boolean;
+    }[];
+  }[];
 };
 
 export const SecretOverviewTableRow = ({
@@ -58,7 +66,8 @@ export const SecretOverviewTableRow = ({
   getImportedSecretByKey,
   scrollOffset,
   onToggleSecretSelect,
-  isSelected
+  isSelected,
+  importedBy
 }: Props) => {
   const [isFormExpanded, setIsFormExpanded] = useToggle();
   const totalCols = environments.length + 1; // secret key row
@@ -244,6 +253,7 @@ export const SecretOverviewTableRow = ({
                               onSecretUpdate={onSecretUpdate}
                               environment={slug}
                               isRotatedSecret={secret?.isRotatedSecret}
+                              importedBy={importedBy}
                             />
                           </td>
                         </tr>

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

@@ -37,15 +37,17 @@ type Props = {
     [EntryType.FOLDER]: Record<string, Record<string, TSecretFolder>>;
     [EntryType.SECRET]: Record<string, Record<string, SecretV3RawSanitized>>;
   };
-  importedByEnvs?: { environment: string; importedBy: ProjectSecretsImportedBy[] }[];
+  importedBy?: ProjectSecretsImportedBy[] | null;
   usedBySecretSyncs?: { name: string; destination: string; environment: string }[];
+  secretsToDeleteKeys: string[];
 };
 
 export const SelectionPanel = ({
   secretPath,
   resetSelectedEntries,
   selectedEntries,
-  importedByEnvs,
+  importedBy,
+  secretsToDeleteKeys,
   usedBySecretSyncs
 }: Props) => {
   const { permission } = useProjectPermission();
@@ -83,81 +85,6 @@ export const SelectionPanel = ({
     )
   );
 
-  const secretsToDeleteKeys = useMemo(() => {
-    return Object.values(selectedEntries.secret).flatMap((entries) =>
-      Object.values(entries).map((secret) => secret.key)
-    );
-  }, [selectedEntries]);
-
-  const filterAndMergeEnvironments = (
-    envNames: string[],
-    envs: { environment: string; importedBy: ProjectSecretsImportedBy[] }[]
-  ): ProjectSecretsImportedBy[] => {
-    const filteredEnvs = envs.filter((env) => envNames.includes(env.environment));
-
-    if (filteredEnvs.length === 0) return [];
-
-    const allImportedBy = filteredEnvs.flatMap((env) => env.importedBy);
-    const groupedBySlug: Record<string, ProjectSecretsImportedBy[]> = {};
-
-    allImportedBy.forEach((item) => {
-      const { slug } = item.environment;
-      if (!groupedBySlug[slug]) groupedBySlug[slug] = [];
-      groupedBySlug[slug].push(item);
-    });
-
-    const mergedImportedBy = Object.values(groupedBySlug).map((group) => {
-      const { environment } = group[0];
-      const allFolders = group.flatMap((item) => item.folders);
-
-      const foldersByName: Record<string, (typeof allFolders)[number][]> = {};
-      allFolders.forEach((folder) => {
-        if (!foldersByName[folder.name]) foldersByName[folder.name] = [];
-        foldersByName[folder.name].push(folder);
-      });
-
-      const mergedFolders = Object.entries(foldersByName).map(([name, folders]) => {
-        const isImported = folders.some((folder) => folder.isImported);
-        const allSecrets = folders.flatMap((folder) => folder.secrets || []);
-
-        const uniqueSecrets: { secretId: string; referencedSecretKey: string }[] = [];
-        const secretIds = new Set<string>();
-
-        allSecrets
-          .filter((secret) => secretsToDeleteKeys.includes(secret.referencedSecretKey))
-          .forEach((secret) => {
-            if (!secretIds.has(secret.secretId)) {
-              secretIds.add(secret.secretId);
-              uniqueSecrets.push(secret);
-            }
-          });
-
-        return {
-          name,
-          isImported,
-          ...(uniqueSecrets.length > 0 ? { secrets: uniqueSecrets } : {})
-        };
-      });
-
-      return {
-        environment,
-        folders: mergedFolders.filter(
-          (folder) => folder.isImported || (folder.secrets && folder.secrets.length > 0)
-        )
-      };
-    });
-
-    return mergedImportedBy;
-  };
-
-  const importedBy = useMemo(() => {
-    if (selectedKeysCount === 0 || !importedByEnvs) return null;
-    return filterAndMergeEnvironments(
-      Object.values(selectedEntries.secret).flatMap((entries) => Object.keys(entries)),
-      importedByEnvs
-    );
-  }, [importedByEnvs, selectedEntries, selectedKeysCount]);
-
   const usedBySecretSyncsFiltered = useMemo(() => {
     if (selectedKeysCount === 0 || !usedBySecretSyncs) return null;
     const envs = Object.values(selectedEntries.secret).flatMap((entries) => Object.keys(entries));