refactor: re-use existing modal for deletion

frontend/src/views/SecretOverviewPage/components/ManageSecretModals/DeleteSecretModal.tsx

@@ -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>
-    </>
-  )
-}

frontend/src/views/SecretOverviewPage/components/ManageSecretModals/index.tsx

@@ -1 +0,0 @@
-export { DeleteSecretModal } from './DeleteSecretModal';

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