Error message if the delete fails

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

@@ -4,6 +4,7 @@ import {
   DialogContent,
   makeStyles
 } from '@material-ui/core'
+// import * as R from 'ramda'
 import React from 'react'
 
 import { Button, IconButton } from 'src/components/buttons'
@@ -11,6 +12,8 @@ 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'
 
+import ErrorMessage from './ErrorMessage'
+
 const useStyles = makeStyles({
   content: {
     width: 434,
@@ -42,13 +45,15 @@ export const DialogTitle = ({ children, close }) => {
   return (
     <div className={classes.titleSection}>
       {children}
-      <IconButton
-        size={16}
-        aria-label="close"
-        onClick={close}
-        className={classes.closeButton}>
-        <CloseIcon />
-      </IconButton>
+      {close && (
+        <IconButton
+          size={16}
+          aria-label="close"
+          onClick={close}
+          className={classes.closeButton}>
+          <CloseIcon />
+        </IconButton>
+      )}
     </div>
   )
 }
@@ -56,18 +61,31 @@ export const DialogTitle = ({ children, close }) => {
 export const DeleteDialog = ({
   title = 'Confirm Delete',
   open = false,
-  setDeleteDialog,
   onConfirmed,
+  onDismissed,
   item = 'item',
-  confirmationMessage = `Are you sure you want to delete this ${item}?`
+  confirmationMessage = `Are you sure you want to delete this ${item}?`,
+  errorMessage = ''
 }) => {
   const classes = useStyles()
 
   return (
     <Dialog open={open} aria-labelledby="form-dialog-title">
-      <DialogTitle close={() => setDeleteDialog(false)}>
+      <DialogTitle close={() => onDismissed()}>
         <H4 className={classes.title}>{title}</H4>
       </DialogTitle>
+      {errorMessage && (
+        <DialogTitle>
+          <ErrorMessage>
+            {errorMessage.split(':').map(error => (
+              <>
+                {error}
+                <br />
+              </>
+            ))}
+          </ErrorMessage>
+        </DialogTitle>
+      )}
       <DialogContent className={classes.content}>
         {confirmationMessage && <P>{confirmationMessage}</P>}
       </DialogContent>

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
@@ -36,7 +37,8 @@ const ActionCol = ({ disabled, editing }) => {
     toggleWidth,
     forceAdd,
     clearError,
-    actionColSize
+    actionColSize,
+    error
   } = useContext(TableCtx)
 
   const disableEdit = disabled || (disableRowEdit && disableRowEdit(values))
@@ -48,8 +50,9 @@ const ActionCol = ({ disabled, editing }) => {
   const [deleteDialog, setDeleteDialog] = useState(false)
 
   const onConfirmed = () => {
-    onDelete(values.id)
-    setDeleteDialog(false)
+    onDelete(values.id).then(res => {
+      if (!R.isNil(res)) setDeleteDialog(false)
+    })
   }
 
   return (
@@ -93,6 +96,11 @@ const ActionCol = ({ disabled, editing }) => {
             open={deleteDialog}
             setDeleteDialog={setDeleteDialog}
             onConfirmed={onConfirmed}
+            onDismissed={() => {
+              setDeleteDialog(false)
+              clearError()
+            }}
+            errorMessage={error}
           />
         </Td>
       )}

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

@@ -74,9 +74,14 @@ const Blacklist = () => {
     display: 'Bitcoin'
   })
   const [errorMsg, setErrorMsg] = useState(null)
+  const [deleteDialog, setDeleteDialog] = useState(false)
 
   const [deleteEntry] = useMutation(DELETE_ROW, {
-    onError: () => console.error('Error while deleting row'),
+    onError: ({ message }) => {
+      const errorMessage = message ?? 'Error while deleting row'
+      setErrorMsg(errorMessage)
+    },
+    onCompleted: () => setDeleteDialog(false),
     refetchQueries: () => ['getBlacklistData']
   })
 
@@ -181,6 +186,10 @@ const Blacklist = () => {
             data={formattedData}
             selectedCoin={clickedItem}
             handleDeleteEntry={handleDeleteEntry}
+            errorMessage={errorMsg}
+            setErrorMessage={setErrorMsg}
+            deleteDialog={deleteDialog}
+            setDeleteDialog={setDeleteDialog}
           />
         </div>
       </Grid>

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

@@ -13,20 +13,19 @@ import styles from './Blacklist.styles'
 
 const useStyles = makeStyles(styles)
 
-const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
+const BlacklistTable = ({
+  data,
+  selectedCoin,
+  handleDeleteEntry,
+  errorMessage,
+  setErrorMessage,
+  deleteDialog,
+  setDeleteDialog
+}) => {
   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',
@@ -72,8 +71,18 @@ const BlacklistTable = ({ data, selectedCoin, handleDeleteEntry }) => {
       />
       <DeleteDialog
         open={deleteDialog}
-        setDeleteDialog={setDeleteDialog}
-        onConfirmed={onConfirmed}
+        onDismissed={() => {
+          setDeleteDialog(false)
+          setErrorMessage(null)
+        }}
+        onConfirmed={() => {
+          setErrorMessage(null)
+          handleDeleteEntry(
+            R.path(['cryptoCode'], toBeDeleted),
+            R.path(['address'], toBeDeleted)
+          )
+        }}
+        errorMessage={errorMessage}
       />
     </>
   )

new-lamassu-admin/src/pages/Commissions/Commissions.js

@@ -38,9 +38,11 @@ const removeCoinFromOverride = crypto => override =>
 
 const Commissions = ({ name: SCREEN_KEY }) => {
   const [showMachines, setShowMachines] = useState(false)
+  const [error, setError] = useState(null)
   const { data } = useQuery(GET_DATA)
-  const [saveConfig, { error }] = useMutation(SAVE_CONFIG, {
-    refetchQueries: () => ['getData']
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
+    refetchQueries: () => ['getData'],
+    onError: error => setError(error)
   })
 
   const config = data?.config && fromNamespace(SCREEN_KEY)(data.config)
@@ -57,6 +59,7 @@ const Commissions = ({ name: SCREEN_KEY }) => {
 
   const saveOverrides = it => {
     const config = toNamespace(SCREEN_KEY)(it)
+    setError(null)
     return saveConfig({ variables: { config } })
   }
 

new-lamassu-admin/src/pages/Locales/Locales.js

@@ -100,12 +100,14 @@ const FiatCurrencyChangeAlert = ({ open, close, save }) => {
 const Locales = ({ name: SCREEN_KEY }) => {
   const [wizard, setWizard] = useState(false)
   const [onChangeFunction, setOnChangeFunction] = useState(null)
+  const [error, setError] = useState(null)
   const [isEditingDefault, setEditingDefault] = useState(false)
   const [isEditingOverrides, setEditingOverrides] = useState(false)
   const { data } = useQuery(GET_DATA)
-  const [saveConfig, { error }] = useMutation(SAVE_CONFIG, {
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
     onCompleted: () => setWizard(false),
-    refetchQueries: () => ['getData']
+    refetchQueries: () => ['getData'],
+    onError: error => setError(error)
   })
 
   const [dataToSave, setDataToSave] = useState(null)
@@ -138,6 +140,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
 
   const saveOverrides = it => {
     const config = toNamespace(SCREEN_KEY)(it)
+    setError(null)
     return saveConfig({ variables: { config } })
   }
 

new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.js

@@ -53,11 +53,6 @@ const PromoCodes = () => {
   const [deleteDialog, setDeleteDialog] = useState(false)
   const [toBeDeleted, setToBeDeleted] = useState()
 
-  const onConfirmed = () => {
-    deleteCode(toBeDeleted)
-    setDeleteDialog(false)
-  }
-
   const [showModal, setShowModal] = useState(false)
   const [errorMsg, setErrorMsg] = useState(null)
   const toggleModal = () => setShowModal(!showModal)
@@ -65,6 +60,11 @@ const PromoCodes = () => {
   const { data: codeResponse, loading } = useQuery(GET_PROMO_CODES)
 
   const [deleteCode] = useMutation(DELETE_CODE, {
+    onError: ({ message }) => {
+      const errorMessage = message ?? 'Error while deleting row'
+      setErrorMsg(errorMessage)
+    },
+    onCompleted: () => setDeleteDialog(false),
     refetchQueries: () => ['promoCodes']
   })
 
@@ -152,8 +152,15 @@ const PromoCodes = () => {
           />
           <DeleteDialog
             open={deleteDialog}
-            setDeleteDialog={setDeleteDialog}
-            onConfirmed={onConfirmed}
+            onDismissed={() => {
+              setDeleteDialog(false)
+              setErrorMsg(null)
+            }}
+            onConfirmed={() => {
+              setErrorMsg(null)
+              deleteCode(toBeDeleted)
+            }}
+            errorMessage={errorMsg}
           />
         </>
       )}

new-lamassu-admin/src/pages/Notifications/Notifications.js

@@ -57,7 +57,7 @@ const Notifications = ({
   const [saveConfig] = useMutation(SAVE_CONFIG, {
     refetchQueries: ['getData'],
     onCompleted: () => setEditingKey(null),
-    onError: error => setError({ error })
+    onError: error => setError(error)
   })
 
   const config = fromNamespace(SCREEN_KEY)(data?.config)

new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceOverrides.js

@@ -19,6 +19,7 @@ const CryptoBalanceOverrides = ({ section }) => {
     cryptoCurrencies = [],
     data,
     save,
+    error,
     currency,
     isDisabled,
     setEditing
@@ -135,6 +136,7 @@ const CryptoBalanceOverrides = ({ section }) => {
     <EditableTable
       name={NAME}
       title="Overrides"
+      error={error?.message}
       enableDelete
       enableEdit
       enableCreate

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js

@@ -15,9 +15,14 @@ const MACHINE_KEY = 'machine'
 const NAME = 'fiatBalanceOverrides'
 
 const FiatBalanceOverrides = ({ section }) => {
-  const { machines = [], data, save, isDisabled, setEditing } = useContext(
-    NotificationsCtx
-  )
+  const {
+    machines = [],
+    data,
+    save,
+    isDisabled,
+    setEditing,
+    error
+  } = useContext(NotificationsCtx)
 
   const setupValues = data?.fiatBalanceOverrides ?? []
   const innerSetEditing = it => setEditing(NAME, it)
@@ -121,6 +126,7 @@ const FiatBalanceOverrides = ({ section }) => {
     <EditableTable
       name={NAME}
       title="Overrides"
+      error={error?.message}
       enableDelete
       enableEdit
       enableCreate

new-lamassu-admin/src/pages/Triggers/Triggers.js

@@ -41,10 +41,12 @@ const Triggers = () => {
   const complianceConfig =
     data?.config && fromNamespace('compliance')(data.config)
   const rejectAddressReuse = complianceConfig?.rejectAddressReuse ?? false
+  const [error, setError] = useState(null)
 
-  const [saveConfig, { error }] = useMutation(SAVE_CONFIG, {
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
     onCompleted: () => setWizard(false),
-    refetchQueries: () => ['getData']
+    refetchQueries: () => ['getData'],
+    onError: error => setError(error)
   })
 
   const add = rawConfig => {
@@ -60,6 +62,7 @@ const Triggers = () => {
   }
 
   const save = config => {
+    setError(null)
     return saveConfig({
       variables: { config: { triggers: toServer(config.triggers) } }
     })