Add warning on secret deletions where it's being imported by another folder

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

@@ -31,6 +31,7 @@ export type DashboardProjectSecretsDetailsResponse = {
   totalDynamicSecretCount?: number;
   totalSecretCount?: number;
   totalCount: number;
+  importedBy?: { envName: string; folderName: string }[];
 };
 
 export type DashboardProjectSecretsByKeys = {

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

@@ -206,7 +206,8 @@ const Page = () => {
     totalFolderCount = 0,
     totalDynamicSecretCount = 0,
     totalSecretCount = 0,
-    totalCount = 0
+    totalCount = 0,
+    importedBy
   } = data ?? {};
 
   useResetPageHelper({
@@ -507,6 +508,7 @@ const Page = () => {
                   workspaceId={workspaceId}
                   secretPath={secretPath}
                   isProtectedBranch={isProtectedBranch}
+                  importedBy={importedBy}
                 />
               )}
               {canReadSecret && <SecretNoAccessListView count={noAccessSecretCount} />}

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

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -28,8 +29,11 @@ type Props = {
   tags?: WsTag[];
   isVisible?: boolean;
   isProtectedBranch?: boolean;
+  importedBy?: { envName: string; folderName: string }[];
 };
 
+type GroupedFolders = Record<string, string[]>;
+
 export const SecretListView = ({
   secrets = [],
   environment,
@@ -37,7 +41,8 @@ export const SecretListView = ({
   secretPath = "/",
   tags: wsTags = [],
   isVisible,
-  isProtectedBranch = false
+  isProtectedBranch = false,
+  importedBy
 }: Props) => {
   const queryClient = useQueryClient();
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -352,7 +357,50 @@ export const SecretListView = ({
         onChange={(isOpen) => handlePopUpToggle("deleteSecret", isOpen)}
         onDeleteApproved={handleSecretDelete}
         buttonText="Delete Secret"
-      />
+      >
+        {importedBy && importedBy.length > 0 && (
+          <div className="mb-4 mt-4 rounded-md border border-red-500/50 bg-red-900/30 p-3">
+            <div className="flex items-start gap-2.5">
+              <div className="mt-0.5 flex-shrink-0 text-red-500">
+                <FontAwesomeIcon icon={faWarning} />
+              </div>
+              <div className="w-full">
+                <p className="mb-3 text-sm text-red-400">
+                  Warning: This secret is currently being imported by another folder, so deletion
+                  will affect both locations.
+                </p>
+
+                <div className="flex w-full">
+                  {Object.entries(
+                    importedBy.reduce<GroupedFolders>((acc, { envName, folderName }) => {
+                      if (!acc[envName]) acc[envName] = [];
+                      acc[envName].push(folderName);
+                      return acc;
+                    }, {})
+                  ).map(([envName, folders], index, array) => (
+                    <div
+                      key={envName}
+                      className={`${index !== array.length - 1 ? "mr-16" : ""} flex-1`}
+                    >
+                      <div className="mb-1 text-sm font-medium text-red-300">{envName}</div>
+                      <div className="border-l border-red-500/30 pl-2">
+                        {folders.map((folderName, idx) => (
+                          <div
+                            key={`imported-folder-${idx + 1}`}
+                            className="py-0.5 text-xs text-red-300"
+                          >
+                            {folderName}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </DeleteActionModal>
       <SecretDetailSidebar
         environment={environment}
         secretPath={secretPath}