Added a confirmation popup before delete

new-lamassu-admin/src/components/DeleteDialog.js

@@ -0,0 +1,76 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  makeStyles
+} from '@material-ui/core'
+import React from 'react'
+
+import { Button, IconButton } from 'src/components/buttons'
+import { H4, P } from 'src/components/typography'
+import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+import { spacer } from 'src/styling/variables'
+
+const useStyles = makeStyles({
+  dialogContent: {
+    width: 434,
+    padding: spacer * 2,
+    paddingRight: spacer * 3.5
+  },
+  dialogTitle: {
+    padding: spacer * 2,
+    paddingRight: spacer * 1.5,
+    display: 'flex',
+    'justify-content': 'space-between',
+    '& > h4': {
+      margin: 0
+    },
+    '& > button': {
+      padding: 0,
+      marginTop: -(spacer / 2)
+    }
+  },
+  dialogActions: {
+    padding: spacer * 4,
+    paddingTop: spacer * 2
+  }
+})
+
+export const DialogTitle = ({ children, close }) => {
+  const classes = useStyles()
+  return (
+    <div className={classes.dialogTitle}>
+      {children}
+      {
+        <IconButton size={16} aria-label="close" onClick={close}>
+          <CloseIcon />
+        </IconButton>
+      }
+    </div>
+  )
+}
+
+export const DeleteDialog = ({
+  title = 'Confirm Delete',
+  open = false,
+  setDeleteDialog,
+  onConfirmed,
+  item = 'item',
+  confirmationMessage = `Are you sure you want to delete this ${item}?`
+}) => {
+  const classes = useStyles()
+
+  return (
+    <Dialog open={open} aria-labelledby="form-dialog-title">
+      <DialogTitle close={() => setDeleteDialog(false)}>
+        <H4>{title}</H4>
+      </DialogTitle>
+      <DialogContent className={classes.dialogContent}>
+        {confirmationMessage && <P>{confirmationMessage}</P>}
+      </DialogContent>
+      <DialogActions className={classes.dialogActions}>
+        <Button onClick={onConfirmed}>Confirm</Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

new-lamassu-admin/src/components/editableTable/Row.js

@@ -2,8 +2,9 @@ import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
 import * as R from 'ramda'
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 
+import { DeleteDialog } from 'src/components/DeleteDialog'
 import { Link, IconButton } from 'src/components/buttons'
 import { Td, Tr } from 'src/components/fake-table/Table'
 import { Switch } from 'src/components/inputs'
@@ -44,6 +45,13 @@ const ActionCol = ({ disabled, editing }) => {
     resetForm()
   }
 
+  const [deleteDialog, setDeleteDialog] = useState(false)
+
+  const onConfirmed = () => {
+    onDelete(values.id)
+    setDeleteDialog(false)
+  }
+
   return (
     <>
       {editing && (
@@ -74,9 +82,20 @@ const ActionCol = ({ disabled, editing }) => {
       )}
       {!editing && enableDelete && (
         <Td textAlign="center" width={deleteWidth}>
-          <IconButton disabled={disabled} onClick={() => onDelete(values.id)}>
+          <IconButton
+            disabled={disabled}
+            onClick={() => {
+              setDeleteDialog(true)
+            }}>
             {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
           </IconButton>
+          {
+            <DeleteDialog
+              open={deleteDialog}
+              setDeleteDialog={setDeleteDialog}
+              onConfirmed={onConfirmed}
+            />
+          }
         </Td>
       )}
       {!editing && enableToggle && (

new-lamassu-admin/src/pages/Blacklist/BlacklistTable.js

@@ -1,7 +1,8 @@
 import { makeStyles } from '@material-ui/core/styles'
 import * as R from 'ramda'
-import React from 'react'
+import React, { useState } from 'react'
 
+import { DeleteDialog } from 'src/components/DeleteDialog'
 import { IconButton } from 'src/components/buttons'
 import DataTable from 'src/components/tables/DataTable'
 import { Label1 } from 'src/components/typography'
@@ -15,6 +16,17 @@ const useStyles = makeStyles(styles)
 const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
   const classes = useStyles()
 
+  const [deleteDialog, setDeleteDialog] = useState(false)
+  const [toBeDeleted, setToBeDeleted] = useState()
+
+  const onConfirmed = () => {
+    handleDeleteEntry(
+      R.path(['cryptoCode'], toBeDeleted),
+      R.path(['address'], toBeDeleted)
+    )
+    setDeleteDialog(false)
+  }
+
   const elements = [
     {
       name: 'address',
@@ -37,12 +49,10 @@ const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
       view: it => (
         <IconButton
           className={classes.deleteButton}
-          onClick={() =>
+          onClick={() => {
-            handleDeleteEntry(
+            setDeleteDialog(true)
-              R.path(['cryptoCode'], it),
+            setToBeDeleted(it)
-              R.path(['address'], it)
+          }}>
-            )
-          }>
           <DeleteIcon />
         </IconButton>
       )
@@ -53,12 +63,19 @@ const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
     : data[R.keys(data)[0]]
 
   return (
-    <DataTable
+    <>
-      data={dataToShow}
+      <DataTable
-      elements={elements}
+        data={dataToShow}
-      emptyText="No blacklisted addresses so far"
+        elements={elements}
-      name="blacklistTable"
+        emptyText="No blacklisted addresses so far"
-    />
+        name="blacklistTable"
+      />
+      <DeleteDialog
+        open={deleteDialog}
+        setDeleteDialog={setDeleteDialog}
+        onConfirmed={onConfirmed}
+      />
+    </>
   )
 }