Merge pull request #2182 from LemmyMwaura/delete-secret-modal

feat: add confirm step (modal) before deleting a secret

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -1,3 +1,4 @@
+import { useState, useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
 import { faCheck, faCopy, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -6,7 +7,7 @@ import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { IconButton, Tooltip } from "@app/components/v2";
+import { IconButton, Tooltip, DeleteActionModal } from "@app/components/v2";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
@@ -59,6 +60,11 @@ export const SecretEditRow = ({
     }
   });
   const [isDeleting, setIsDeleting] = useToggle();
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  const toggleModal = useCallback(() => {
+    setIsModalOpen((prev) => !prev)
+  }, [])
 
   const handleFormReset = () => {
     reset();
@@ -94,18 +100,29 @@ export const SecretEditRow = ({
     reset({ value });
   };
 
-  const handleDeleteSecret = async () => {
+  const handleDeleteSecret = useCallback(async () => {
     setIsDeleting.on();
+    setIsModalOpen(false);
+
     try {
       await onSecretDelete(environment, secretName, secretId);
       reset({ value: null });
     } finally {
       setIsDeleting.off();
     }
-  };
+  }, [onSecretDelete, environment, secretName, secretId, reset, setIsDeleting]);
 
   return (
     <div className="group flex w-full cursor-text items-center space-x-2">
+
+      <DeleteActionModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        title="Do you want to delete the selected secret?"
+        deleteKey="delete"
+        onDeleteApproved={handleDeleteSecret}
+      />
+
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
           disabled={isImportedSecret && !defaultValue}
@@ -193,7 +210,7 @@ export const SecretEditRow = ({
                       variant="plain"
                       ariaLabel="delete-value"
                       className="h-full"
-                      onClick={handleDeleteSecret}
+                      onClick={toggleModal}
                       isDisabled={isDeleting || !isAllowed}
                     >
                       <FontAwesomeIcon icon={faTrash} />

frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx

@@ -49,8 +49,9 @@ export const SelectionPanel = ({
     "bulkDeleteEntries"
   ] as const);
 
-  const selectedCount =
-    Object.keys(selectedEntries.folder).length + Object.keys(selectedEntries.secret).length;
+  const selectedFolderCount = Object.keys(selectedEntries.folder).length
+  const selectedKeysCount = Object.keys(selectedEntries.secret).length
+  const selectedCount = selectedFolderCount + selectedKeysCount
 
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";
@@ -68,6 +69,16 @@ export const SelectionPanel = ({
     )
   );
 
+  const getDeleteModalTitle = () => {
+    if (selectedFolderCount > 0 && selectedKeysCount > 0) {
+      return "Do you want to delete the selected secrets and folders across environments?";
+    } else if (selectedKeysCount > 0 && selectedFolderCount === 0) {
+      return "Do you want to delete the selected secrets across environments?";
+    } else {
+      return "Do you want to delete the selected folders across environments?";
+    }
+  }
+
   const handleBulkDelete = async () => {
     let processedEntries = 0;
 
@@ -180,7 +191,7 @@ export const SelectionPanel = ({
       <DeleteActionModal
         isOpen={popUp.bulkDeleteEntries.isOpen}
         deleteKey="delete"
-        title="Do you want to delete the selected secrets and folders across envs?"
+        title={getDeleteModalTitle()}
         onChange={(isOpen) => handlePopUpToggle("bulkDeleteEntries", isOpen)}
         onDeleteApproved={handleBulkDelete}
       />