Differentiate between cancel and confirm alert for delete issue popov…

…er (#87)
MaibornWolff · Dec 7, 2023 · 0f49163 · 0f49163
1 parent 5b2c6c4
commit 0f49163
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/src/components/BacklogView/Issue/DeleteButton.tsx b/src/components/BacklogView/Issue/DeleteButton.tsx
@@ -68,7 +68,8 @@ export function DeleteButton({
               }} />
               <DeleteIssueAlert
                 issueKey={issueKey}
-                closeModal={() => setIssuePopoverOpened(false)}
+                cancelAlert={() => setIssuePopoverOpened(false)}
+                confirmAlert={() => setIssuePopoverOpened(false)}
               />
             </Popover.Dropdown>
           </Popover>

diff --git a/src/components/DetailView/Components/DeleteIssue/DeleteIssue.tsx b/src/components/DetailView/Components/DeleteIssue/DeleteIssue.tsx
@@ -1,5 +1,6 @@
 import { Button, Popover } from "@mantine/core"
 import { IconTrash } from "@tabler/icons"
+import {useState} from "react";
 import { DeleteIssueAlert } from "./DeleteIssueAlert"
 
 export function DeleteIssue({
@@ -9,10 +10,22 @@ export function DeleteIssue({
   issueKey: string
   closeModal: () => void
 }) {
+  const [issuePopoverOpened, setIssuePopoverOpened] = useState(false)
+
   return (
-    <Popover width="40vh" trapFocus position="bottom" withArrow shadow="md">
+    <Popover
+      width="40vh"
+      trapFocus
+      position="bottom"
+      withArrow
+      shadow="md"
+      opened={issuePopoverOpened}
+    >
       <Popover.Target>
-        <Button color="red" rightIcon={<IconTrash size={16} />}>
+        <Button color="red" rightIcon={<IconTrash size={16} />} onClick={(e) => {
+          e.stopPropagation()
+          setIssuePopoverOpened(!issuePopoverOpened)
+        }}>
           Delete
         </Button>
       </Popover.Target>
@@ -22,7 +35,11 @@ export function DeleteIssue({
             theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
         })}
       >
-        <DeleteIssueAlert issueKey={issueKey} closeModal={closeModal} />
+        <DeleteIssueAlert
+          issueKey={issueKey}
+          cancelAlert={() => setIssuePopoverOpened(false)}
+          confirmAlert={closeModal}
+        />
       </Popover.Dropdown>
     </Popover>
   )

diff --git a/src/components/DetailView/Components/DeleteIssue/DeleteIssueAlert.tsx b/src/components/DetailView/Components/DeleteIssue/DeleteIssueAlert.tsx
@@ -5,16 +5,18 @@ import { deleteIssueMutation } from "./queries"
 
 export function DeleteIssueAlert({
   issueKey,
-  closeModal,
+  cancelAlert,
+  confirmAlert,
 }: {
   issueKey: string
-  closeModal: () => void
+  cancelAlert: () => void
+  confirmAlert: () => void
 }) {
   const queryClient = useQueryClient()
   const deleteIssue = deleteIssueMutation(queryClient)
 
   return (
-    <Stack onMouseLeave={closeModal}>
+    <Stack onMouseLeave={cancelAlert}>
       <Alert
         icon={<IconAlertCircle size={16} />}
         title="Attention!"
@@ -26,7 +28,7 @@ export function DeleteIssueAlert({
         onClick={(e) => {
           e.stopPropagation()
           deleteIssue.mutate(issueKey)
-          closeModal()
+          confirmAlert()
         }}
       >
         Confirm