Add confirmation when deleting user

ui/src/user/DeleteUserButton.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import DeleteIcon from '@material-ui/icons/Delete'
+import { makeStyles } from '@material-ui/core/styles'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import classnames from 'classnames'
+import { useDeleteWithConfirmController, Button, Confirm } from 'react-admin'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    deleteButton: {
+      color: theme.palette.error.main,
+      '&:hover': {
+        backgroundColor: fade(theme.palette.error.main, 0.12),
+        // Reset on mouse devices
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  }),
+  { name: 'RaDeleteWithConfirmButton' }
+)
+
+const DeleteUserButton = (props) => {
+  const {
+    resource,
+    record,
+    basePath,
+    redirect = 'list',
+    className,
+    onClick,
+    ...rest
+  } = props
+  const {
+    open,
+    loading,
+    handleDialogOpen,
+    handleDialogClose,
+    handleDelete,
+  } = useDeleteWithConfirmController({
+    resource,
+    record,
+    redirect,
+    basePath,
+    onClick,
+  })
+
+  const classes = useStyles(props)
+  return (
+    <>
+      <Button
+        onClick={handleDialogOpen}
+        label="ra.action.delete"
+        className={classnames(
+          'ra-delete-button',
+          classes.deleteButton,
+          className
+        )}
+        key="button"
+        {...rest}
+      >
+        <DeleteIcon />
+      </Button>
+      <Confirm
+        isOpen={open}
+        loading={loading}
+        title="message.delete_user_title"
+        content="message.delete_user_content"
+        translateOptions={{
+          name: record.name,
+        }}
+        onConfirm={handleDelete}
+        onClose={handleDialogClose}
+      />
+    </>
+  )
+}
+
+export default DeleteUserButton

ui/src/user/UserEdit.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
 import {
   TextInput,
   BooleanInput,
@@ -9,17 +10,35 @@ import {
   email,
   SimpleForm,
   useTranslate,
+  Toolbar,
+  SaveButton,
 } from 'react-admin'
 import { Title } from '../common'
+import DeleteUserButton from './DeleteUserButton'
+
+const useStyles = makeStyles({
+  toolbar: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+})
 
 const UserTitle = ({ record }) => {
   const translate = useTranslate()
   const resourceName = translate('resources.user.name', { smart_count: 1 })
   return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} />
 }
+
+const UserToolbar = (props) => (
+  <Toolbar {...props} classes={useStyles()}>
+    <SaveButton />
+    <DeleteUserButton />
+  </Toolbar>
+)
+
 const UserEdit = (props) => (
   <Edit title={<UserTitle />} {...props}>
-    <SimpleForm>
+    <SimpleForm toolbar={<UserToolbar />}>
       <TextInput source="userName" validate={[required()]} />
       <TextInput source="name" validate={[required()]} />
       <TextInput source="email" validate={[email()]} />

ui/src/user/UserList.js

@@ -25,6 +25,7 @@ const UserList = (props) => {
       {...props}
       sort={{ field: 'userName', order: 'ASC' }}
       exporter={false}
+      bulkActionButtons={false}
       filters={<UserFilter />}
     >
       {isXsmall ? (