From 391ed0723e15e989141bb7d88419a18eaa03e515 Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Fri, 26 Jul 2024 19:47:35 +0300
Subject: [PATCH 1/7] feat: add delete secret modal

---
 .../ManageSecretModals/DeleteSecretModal.tsx  | 33 +++++++++++++++++++
 .../components/ManageSecretModals/index.tsx   |  1 +
 2 files changed, 34 insertions(+)
 create mode 100644 frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
 create mode 100644 frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx

diff --git a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
new file mode 100644
index 000000000..0b37d86fb
--- /dev/null
+++ b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
@@ -0,0 +1,33 @@
+import { type FC } from "react"
+import { Modal, ModalContent, Button } from "@app/components/v2";
+
+type Props = {
+  isModalOpen: boolean;
+  handleDeleteSecret: () => void;
+  toggleModal: () => void;
+};
+
+export const DeleteSecretModal: FC<Props> = ( { isModalOpen, toggleModal, handleDeleteSecret }) => {
+  return (
+    <>
+      <Modal isOpen={isModalOpen}>
+      <ModalContent
+        title="Confirm Secret Deletion"
+        subTitle="Are you sure you want to delete this secret ?"
+        footerContent={
+          <div className="flex items-center gap-4">
+            <Button colorSchema="primary" onClick={() => toggleModal()}>
+              Cancel
+            </Button>
+
+            <Button colorSchema="danger" onClick={() => handleDeleteSecret()}>
+              Delete
+            </Button>
+          </div>
+        }
+        onClose={toggleModal} >
+      </ModalContent>
+      </Modal>
+    </>
+  )
+}
diff --git a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx
new file mode 100644
index 000000000..200163298
--- /dev/null
+++ b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx
@@ -0,0 +1 @@
+export { DeleteSecretModal } from './DeleteSecretModal';

From 8fd3e50d04a38962233b1ea18b93b29c43935b3f Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Fri, 26 Jul 2024 19:48:30 +0300
Subject: [PATCH 2/7] feat: implement delete secret via modal logic

---
 .../SecretOverviewTableRow/SecretEditRow.tsx  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index fc335baec..94b7452e0 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/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";
@@ -12,6 +13,8 @@ import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { SecretType } from "@app/hooks/api/types";
 
+import { DeleteSecretModal } from "../ManageSecretModals";
+
 type Props = {
   defaultValue?: string | null;
   secretName: string;
@@ -59,6 +62,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 +102,23 @@ 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">
+
+      <DeleteSecretModal isModalOpen={isModalOpen} toggleModal={toggleModal} handleDeleteSecret={handleDeleteSecret} />
+
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
           disabled={isImportedSecret && !defaultValue}
@@ -193,7 +206,7 @@ export const SecretEditRow = ({
                       variant="plain"
                       ariaLabel="delete-value"
                       className="h-full"
-                      onClick={handleDeleteSecret}
+                      onClick={toggleModal}
                       isDisabled={isDeleting || !isAllowed}
                     >
                       <FontAwesomeIcon icon={faTrash} />

From 9dd675ff980fa64bffdce594f0a2d8de240a0782 Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Fri, 26 Jul 2024 19:56:31 +0300
Subject: [PATCH 3/7] refactor: move delete statement into body tag

---
 .../components/ManageSecretModals/DeleteSecretModal.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
index 0b37d86fb..3dc89b4c4 100644
--- a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
@@ -13,7 +13,7 @@ export const DeleteSecretModal: FC<Props> = ( { isModalOpen, toggleModal, handle
       <Modal isOpen={isModalOpen}>
       <ModalContent
         title="Confirm Secret Deletion"
-        subTitle="Are you sure you want to delete this secret ?"
+        onClose={toggleModal}
         footerContent={
           <div className="flex items-center gap-4">
             <Button colorSchema="primary" onClick={() => toggleModal()}>
@@ -24,8 +24,8 @@ export const DeleteSecretModal: FC<Props> = ( { isModalOpen, toggleModal, handle
               Delete
             </Button>
           </div>
-        }
-        onClose={toggleModal} >
+        }> 
+        <p>Are you sure you want to delete this secret ?</p>
       </ModalContent>
       </Modal>
     </>

From ce1db38afddead3e42ce6bb965ac8f37e1898130 Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Fri, 26 Jul 2024 22:05:44 +0300
Subject: [PATCH 4/7] refactor: re-use existing modal for deletion

---
 .../ManageSecretModals/DeleteSecretModal.tsx  | 33 -------------------
 .../components/ManageSecretModals/index.tsx   |  1 -
 .../SecretOverviewTableRow/SecretEditRow.tsx  | 12 ++++---
 3 files changed, 8 insertions(+), 38 deletions(-)
 delete mode 100644 frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
 delete mode 100644 frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx

diff --git a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
deleted file mode 100644
index 3dc89b4c4..000000000
--- a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { type FC } from "react"
-import { Modal, ModalContent, Button } from "@app/components/v2";
-
-type Props = {
-  isModalOpen: boolean;
-  handleDeleteSecret: () => void;
-  toggleModal: () => void;
-};
-
-export const DeleteSecretModal: FC<Props> = ( { isModalOpen, toggleModal, handleDeleteSecret }) => {
-  return (
-    <>
-      <Modal isOpen={isModalOpen}>
-      <ModalContent
-        title="Confirm Secret Deletion"
-        onClose={toggleModal}
-        footerContent={
-          <div className="flex items-center gap-4">
-            <Button colorSchema="primary" onClick={() => toggleModal()}>
-              Cancel
-            </Button>
-
-            <Button colorSchema="danger" onClick={() => handleDeleteSecret()}>
-              Delete
-            </Button>
-          </div>
-        }> 
-        <p>Are you sure you want to delete this secret ?</p>
-      </ModalContent>
-      </Modal>
-    </>
-  )
-}
diff --git a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx b/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx
deleted file mode 100644
index 200163298..000000000
--- a/frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { DeleteSecretModal } from './DeleteSecretModal';
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 94b7452e0..bb244d13b 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -7,14 +7,12 @@ 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";
 import { SecretType } from "@app/hooks/api/types";
 
-import { DeleteSecretModal } from "../ManageSecretModals";
-
 type Props = {
   defaultValue?: string | null;
   secretName: string;
@@ -117,7 +115,13 @@ export const SecretEditRow = ({
   return (
     <div className="group flex w-full cursor-text items-center space-x-2">
 
-      <DeleteSecretModal isModalOpen={isModalOpen} toggleModal={toggleModal} handleDeleteSecret={handleDeleteSecret} />
+      <DeleteActionModal
+        isOpen={isModalOpen}
+        onClose={toggleModal}
+        title="Confirm Secret Deletion"
+        deleteKey="Delete"
+        onDeleteApproved={handleDeleteSecret}
+      />
 
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller

From b3db29ac377ff55a0f162d539c2d49938b0ae1cf Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Sat, 27 Jul 2024 11:42:30 +0300
Subject: [PATCH 5/7] refactor: update modal message to match other delete
 modals in the dashboard

---
 .../components/SecretOverviewTableRow/SecretEditRow.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index bb244d13b..28f5fe964 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -118,8 +118,8 @@ export const SecretEditRow = ({
       <DeleteActionModal
         isOpen={isModalOpen}
         onClose={toggleModal}
-        title="Confirm Secret Deletion"
-        deleteKey="Delete"
+        title="Do you want to delete the selected secret?"
+        deleteKey="delete"
         onDeleteApproved={handleDeleteSecret}
       />
 

From de886f8dd07db304b1e8a0e4f726a5c60f01c459 Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Sat, 27 Jul 2024 12:27:06 +0300
Subject: [PATCH 6/7] feat: make title dynamic when deleting folders and
 secrets

---
 .../SelectionPanel/SelectionPanel.tsx           | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx b/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
index 3d97228c3..52cc8bb0a 100644
--- a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
+++ b/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 envs?";
+    } else if (selectedFolderCount > 0 && selectedKeysCount === 0) {
+      return "Do you want to delete the selected folders across envs?";
+    } else {
+      return "Do you want to delete the selected secrets across envs?";
+    }
+  }
+
   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}
       />

From 61ebec25b35601ceb70d738e23221f2479f5cd1e Mon Sep 17 00:00:00 2001
From: lemmyMwaura <lemmymwauracodes@gmail.com>
Date: Sat, 27 Jul 2024 23:24:10 +0300
Subject: [PATCH 7/7] refactor: update envs to environments

---
 .../components/SelectionPanel/SelectionPanel.tsx          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx b/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
index 52cc8bb0a..162c193a1 100644
--- a/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SelectionPanel/SelectionPanel.tsx
@@ -71,11 +71,11 @@ export const SelectionPanel = ({
 
   const getDeleteModalTitle = () => {
     if (selectedFolderCount > 0 && selectedKeysCount > 0) {
-      return "Do you want to delete the selected secrets and folders across envs?";
-    } else if (selectedFolderCount > 0 && selectedKeysCount === 0) {
-      return "Do you want to delete the selected folders across envs?";
+      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 secrets across envs?";
+      return "Do you want to delete the selected folders across environments?";
     }
   }