Improve referenced secret deletion message component

backend/src/server/routes/v1/dashboard-router.ts

@@ -578,6 +578,7 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
           importedBy: z
             .object({
               envName: z.string(),
+              envSlug: z.string(),
               folders: z
                 .object({
                   folderName: z.string(),

backend/src/services/secret-import/secret-import-service.ts

@@ -823,7 +823,7 @@ export const secretImportServiceFactory = ({
       });
 
     const importedBy = await secretImportDAL.getFolderIsImportedBy(secretPath, folder.envId, environment, projectId);
-
+    console.log({ importedBy });
     const deepPaths: { path: string; folderId: string }[] = [];
 
     await Promise.all(

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -16,7 +16,9 @@ type Props = {
   subTitle?: string;
   onDeleteApproved: () => Promise<void>;
   buttonText?: string;
+  formContent?: ReactNode;
   children?: ReactNode;
+  deletionMessage?: ReactNode;
 };
 
 export const DeleteActionModal = ({
@@ -28,6 +30,8 @@ export const DeleteActionModal = ({
   title,
   subTitle = "This action is irreversible.",
   buttonText = "Delete",
+  formContent,
+  deletionMessage,
   children
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
@@ -79,6 +83,7 @@ export const DeleteActionModal = ({
         }
         onClose={onClose}
       >
+        {formContent}
         <form
           onSubmit={(evt) => {
             evt.preventDefault();
@@ -88,7 +93,11 @@ export const DeleteActionModal = ({
           <FormControl
             label={
               <div className="break-words pb-2 text-sm">
-                Type <span className="font-bold">{deleteKey}</span> to perform this action
+                {deletionMessage || (
+                  <>
+                    Type <span className="font-bold">{deleteKey}</span> to perform this action
+                  </>
+                )}
               </div>
             }
             className="mb-0"

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

@@ -43,6 +43,7 @@ export type DashboardProjectSecretsDetailsResponse = {
   totalCount: number;
   importedBy?: {
     envName: string;
+    envSlug: string;
     folders: { folderName: string; secrets?: string[]; folderImported: boolean }[];
   }[];
 };

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

@@ -1,24 +1,24 @@
-import React, { useMemo, useState } from "react";
-import {
-  faChevronLeft,
-  faChevronRight,
-  faFolder,
-  faKey,
-  faWarning
-} from "@fortawesome/free-solid-svg-icons";
+import React, { useMemo } from "react";
+import { faFileImport, faKey, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { Table, TBody, Td, Th, THead, Tr } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+
 interface FlatItem {
   type: "folder" | "secret";
   path: string;
   secretKey?: string;
   reference: string;
   id: string;
+  envName: string;
+  envSlug: string;
 }
 
 interface CollapsibleSecretImportsProps {
   importedBy?: {
     envName: string;
+    envSlug: string;
     folders: { folderName: string; secrets?: string[]; folderImported: boolean }[];
   }[];
 }
@@ -26,22 +26,49 @@ interface CollapsibleSecretImportsProps {
 export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> = ({
   importedBy = []
 }) => {
-  const [currentEnvIndex, setCurrentEnvIndex] = useState(0);
+  const { currentWorkspace } = useWorkspace();
 
-  const truncatePath = (path: string, maxLength = 45): string =>
-    path.length <= maxLength ? path : `...${path.slice(-(maxLength - 3))}`;
+  const truncatePath = (path: string, maxLength = 24): string => {
+    if (path.length <= maxLength) return path;
 
-  const groupedItems = useMemo(() => {
-    return importedBy.map((env) => {
-      const envItems: FlatItem[] = [];
+    const endPortion = path.slice(-(maxLength - 3));
+    const slashIndex = endPortion.indexOf("/");
 
+    if (slashIndex !== -1) {
+      return `...${endPortion.slice(slashIndex)}`;
+    }
+
+    return `...${endPortion}`;
+  };
+
+  const handlePathClick = (item: FlatItem) => {
+    let pathToNavigate;
+    if (item.type === "folder") {
+      pathToNavigate = item.path;
+    } else {
+      const lastSlashIndex = item.path.lastIndexOf("/");
+      pathToNavigate = lastSlashIndex > 0 ? item.path.substring(0, lastSlashIndex) : "/";
+    }
+    const encodedPath = encodeURIComponent(pathToNavigate);
+    window.open(
+      `/secret-manager/${currentWorkspace.id}/secrets/${item.envSlug}?secretPath=${encodedPath}`,
+      "_blank"
+    );
+  };
+
+  const flattenedItems = useMemo(() => {
+    const items: FlatItem[] = [];
+
+    importedBy.forEach((env) => {
       env.folders.forEach((folder) => {
         if (folder.folderImported) {
-          envItems.push({
+          items.push({
             type: "folder",
             path: folder.folderName,
             id: `folder-${env.envName}-${folder.folderName}`,
-            reference: "Imported"
+            reference: "Imported",
+            envName: env.envName,
+            envSlug: env.envSlug
           });
         }
 
@@ -50,160 +77,83 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
             const secretPath =
               folder.folderName === "/" ? `/${secret}` : `${folder.folderName}/${secret}`;
 
-            envItems.push({
+            items.push({
               type: "secret",
               path: secretPath,
               secretKey: secret,
               id: `secret-${env.envName}-${secretPath}`,
-              reference: "Referenced"
+              reference: "Referenced",
+              envName: env.envName,
+              envSlug: env.envSlug
             });
           });
         }
       });
+    });
 
-      return {
-        envName: env.envName,
-        items: envItems.sort((a, b) => {
-          const aPath = a.path.startsWith("/") ? a.path : `/${a.path}`;
-          const bPath = b.path.startsWith("/") ? b.path : `/${b.path}`;
+    return items.sort((a, b) => {
+      const envCompare = a.envName.localeCompare(b.envName);
+      if (envCompare !== 0) return envCompare;
 
-          const aSegments = aPath.split("/").filter(Boolean).length;
-          const bSegments = bPath.split("/").filter(Boolean).length;
+      const aPath = a.path.startsWith("/") ? a.path : `/${a.path}`;
+      const bPath = b.path.startsWith("/") ? b.path : `/${b.path}`;
 
-          if (aSegments !== bSegments) {
-            return aSegments - bSegments;
-          }
+      const aSegments = aPath.split("/").filter(Boolean).length;
+      const bSegments = bPath.split("/").filter(Boolean).length;
 
-          return aPath.localeCompare(bPath);
-        })
-      };
+      if (aSegments !== bSegments) {
+        return aSegments - bSegments;
+      }
+
+      return aPath.localeCompare(bPath);
     });
   }, [importedBy]);
 
-  const totalEnvironments = groupedItems.length;
-  const currentItems = totalEnvironments > 0 ? groupedItems[currentEnvIndex]?.items || [] : [];
-
-  const handlePrevEnvironment = () => {
-    if (currentEnvIndex > 0) {
-      setCurrentEnvIndex(currentEnvIndex - 1);
-    }
-  };
-
-  const handleNextEnvironment = () => {
-    if (currentEnvIndex < totalEnvironments - 1) {
-      setCurrentEnvIndex(currentEnvIndex + 1);
-    }
-  };
-
-  const renderPaginationButton = (
-    direction: "prev" | "next",
-    onClick: () => void,
-    disabled: boolean
-  ) => {
-    const icon = direction === "prev" ? faChevronLeft : faChevronRight;
-    const label = direction === "prev" ? "Previous environment" : "Next environment";
-
-    return (
-      <button
-        type="button"
-        onClick={onClick}
-        disabled={disabled}
-        className={`rounded-md border p-2 ${
-          disabled
-            ? "border-mineshaft-700 text-gray-600"
-            : "border-mineshaft-600 text-gray-400 hover:bg-mineshaft-800"
-        }`}
-        aria-label={label}
-      >
-        <FontAwesomeIcon icon={icon} className="h-4 w-4" aria-hidden="true" />
-      </button>
-    );
-  };
-
   return (
-    <div className="mt-4 overflow-hidden rounded-lg border border-mineshaft-600 bg-mineshaft-900 shadow-lg">
-      <div className="p-4">
-        <div className="mb-4 rounded-md border border-red-700/30 bg-red-900/20">
-          <div className="flex items-start gap-3 p-4">
-            <div className="mt-0.5 flex-shrink-0 text-red-500">
-              <FontAwesomeIcon icon={faWarning} className="h-5 w-5" aria-hidden="true" />
-            </div>
-            <div className="w-full">
-              <p className="text-sm font-semibold text-red-500">
-                Warning: The following resources will be affected by this change
-              </p>
-              <ul className="mt-2 list-disc space-y-2 pl-5 text-xs text-gray-300">
-                <li>Deleting will remove it from all folders where it&apos;s imported</li>
-                <li>
-                  Any secrets referencing this will display their reference syntax (like{" "}
-                  <code className="rounded px-1 py-0.5 font-mono text-red-500">
-                    {"{env.secretPath.key}"}
-                  </code>
-                  ) instead of actual values
-                </li>
-                <li>Secrets referencing this will not be automatically deleted</li>
-              </ul>
-            </div>
+    <div className="mb-4 w-full">
+      <div className="mb-4 rounded-md border border-red-700/30 bg-red-900/20">
+        <div className="flex items-start gap-3 p-4">
+          <div className="mt-0.5 flex-shrink-0 text-red-500">
+            <FontAwesomeIcon icon={faWarning} className="h-5 w-5" aria-hidden="true" />
+          </div>
+          <div className="w-full">
+            <p className="text-sm font-semibold text-red-500">
+              The following resources will be affected by this change
+            </p>
           </div>
         </div>
+      </div>
 
-        {totalEnvironments > 0 && (
-          <div className="mb-2 px-1">
-            <h3 className="text-md font-medium text-gray-200">
-              Environment: {groupedItems[currentEnvIndex]?.envName}
-            </h3>
-          </div>
-        )}
-
-        <div className="h-48 overflow-y-auto rounded-md border border-mineshaft-700">
-          <table className="w-full">
-            <thead className="border-b border-mineshaft-700 bg-mineshaft-800">
-              <tr>
-                <th className="px-4 py-3 text-left text-sm font-medium text-gray-400">Type</th>
-                <th className="px-4 py-3 text-left text-sm font-medium text-gray-400">Path</th>
-                <th className="px-4 py-3 text-left text-sm font-medium text-gray-400">Usage</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-mineshaft-700">
-              {currentItems.map((item) => (
-                <tr key={item.id} className="hover:bg-mineshaft-800">
-                  <td className="px-4 py-3">
-                    <FontAwesomeIcon
-                      icon={item.type === "secret" ? faKey : faFolder}
-                      className={`h-4 w-4 ${item.type === "secret" ? "text-gray-400" : "text-yellow-500"}`}
-                      aria-hidden="true"
-                    />
-                  </td>
-                  <td className="px-4 py-3 text-sm text-gray-300">{truncatePath(item.path)}</td>
-                  <td className="px-4 py-3 text-sm text-gray-400">{item.reference}</td>
-                </tr>
-              ))}
-              {currentItems.length === 0 && (
-                <tr>
-                  <td colSpan={3} className="px-4 py-6 text-center text-sm text-gray-500">
-                    No items in this environment
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-
-        {totalEnvironments > 1 && (
-          <div className="mt-4 flex items-center justify-between px-4">
-            <div className="text-sm text-gray-400">
-              Environment {currentEnvIndex + 1} of {totalEnvironments}
-            </div>
-            <div className="flex space-x-2">
-              {renderPaginationButton("prev", handlePrevEnvironment, currentEnvIndex === 0)}
-              {renderPaginationButton(
-                "next",
-                handleNextEnvironment,
-                currentEnvIndex === totalEnvironments - 1
-              )}
-            </div>
-          </div>
-        )}
+      <div className="max-h-64 overflow-y-auto rounded-md border border-mineshaft-700">
+        <Table>
+          <THead className="sticky -top-1 bg-bunker-800">
+            <Th className="px-4">Type</Th>
+            <Th className="px-4">Environment</Th>
+            <Th className="truncate px-4">Path</Th>
+            <Th className="px-4">Usage</Th>
+          </THead>
+          <TBody>
+            {flattenedItems.map((item) => (
+              <Tr
+                key={item.id}
+                onClick={() => handlePathClick(item)}
+                className="cursor-pointer hover:bg-mineshaft-700"
+                title={`Navigate to ${item.path}`}
+              >
+                <Td>
+                  <FontAwesomeIcon
+                    icon={item.type === "secret" ? faKey : faFileImport}
+                    className={`h-4 w-4 ${item.type === "secret" ? "text-gray-400" : "text-green-700"}`}
+                    aria-hidden="true"
+                  />
+                </Td>
+                <Td className="px-4">{item.envName}</Td>
+                <Td className="truncate px-4">{truncatePath(item.path)}</Td>
+                <Td className="px-4">{item.reference}</Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
       </div>
     </div>
   );

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

@@ -31,6 +31,7 @@ type Props = {
   isProtectedBranch?: boolean;
   importedBy?: {
     envName: string;
+    envSlug: string;
     folders: { folderName: string; secrets?: string[]; folderImported: boolean }[];
   }[];
 };
@@ -363,11 +364,20 @@ export const SecretListView = ({
         onChange={(isOpen) => handlePopUpToggle("deleteSecret", isOpen)}
         onDeleteApproved={handleSecretDelete}
         buttonText="Delete Secret"
-      >
-        {importedBy && importedBy.length > 0 && (
-          <CollapsibleSecretImports importedBy={importedBy} />
-        )}
-      </DeleteActionModal>
+        formContent={
+          importedBy &&
+          importedBy.length > 0 && <CollapsibleSecretImports importedBy={importedBy} />
+        }
+        deletionMessage={
+          <>
+            Type the secret key{" "}
+            <span className="font-bold">
+              &quot;{(popUp.deleteSecret?.data as SecretV3RawSanitized)?.key}&quot;
+            </span>{" "}
+            below to perform this action
+          </>
+        }
+      />
       <SecretDetailSidebar
         environment={environment}
         secretPath={secretPath}