delete pattern confirm dialog

web/src/pages/Patterns/patterns.tsx

@@ -124,7 +124,7 @@ const ActionsRow: React.FC<ActionsRowProps> = ({ pattern }) => {
         variant="unstyled"
         icon={<Icon as={FaEdit} />}
       />
-      <RemovePatternIconButton patternId={pattern.id} />
+      <RemovePatternIconButton pattern={pattern} />
     </HStack>
   )
 }

web/src/pages/Patterns/remove-pattern/remove-pattern-icon-button.tsx

 import React from 'react'
 
-import { IconButtonProps, IconButton, Icon } from '@chakra-ui/react'
+import {
+  IconButtonProps,
+  IconButton,
+  Icon,
+  useDisclosure,
+  AlertDialog,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogBody,
+  AlertDialogFooter,
+  Button,
+  Text,
+} from '@chakra-ui/react'
 import { FaTrash } from 'react-icons/fa'
 import { DeletePatternMutation, GetPatternsQuery } from '../query-builder'
 import { useQueryClient } from 'react-query'
+import { Pattern } from 'src/models'
 
 export type RemovePatternIconButtonProps = {
-  patternId: string
+  pattern: Pattern
 } & Partial<IconButtonProps>
 
 export const RemovePatternIconButton: React.FC<
   RemovePatternIconButtonProps
-> = ({ patternId, ...props }) => {
+> = ({ pattern, ...props }) => {
   const queryClient = useQueryClient()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = React.useRef<HTMLButtonElement>(null)
 
   const deletePatternMutation = DeletePatternMutation.useMutation({
     onSuccess: () => {
@@ -21,15 +37,44 @@ export const RemovePatternIconButton: React.FC<
   })
 
   const handleDeletePattern = () => {
-    deletePatternMutation.mutate({ id: patternId })
+    deletePatternMutation.mutate({ id: pattern.id })
   }
   return (
-    <IconButton
-      aria-label="view pattern"
-      variant="unstyled"
-      icon={<Icon as={FaTrash} />}
-      {...props}
-      onClick={handleDeletePattern}
-    />
+    <>
+      <IconButton
+        aria-label="view pattern"
+        variant="unstyled"
+        icon={<Icon as={FaTrash} />}
+        {...props}
+        onClick={onOpen}
+      />
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        leastDestructiveRef={cancelRef}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Eliminar este patron?
+            </AlertDialogHeader>
+            <AlertDialogBody>
+              <Text>
+                Si eliminas el patron <Text as="b">{pattern.title}</Text> todos
+                sus datos asociados seran eliminados.
+              </Text>
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} variant="ghost" onClick={onClose}>
+                Cancelar
+              </Button>
+              <Button variant="solid" onClick={handleDeletePattern} ml="3">
+                Eliminar
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
   )
 }