Add buttons to erase users (#32)

Change-Id: I9b5644394d213dc66b30e39f19e9e392b69a0be3

src/components/users.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import PersonPinIcon from "@material-ui/icons/PersonPin";
 import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import {
@@ -10,6 +10,7 @@ import {
   Edit,
   List,
   Filter,
+  Toolbar,
   SimpleForm,
   SimpleFormIterator,
   TabbedForm,
@@ -22,7 +23,11 @@ import {
   TextInput,
   ReferenceField,
   SelectInput,
+  BulkDeleteButton,
+  DeleteButton,
+  SaveButton,
   regex,
+  useTranslate,
   Pagination,
 } from "react-admin";
 
@@ -41,12 +46,25 @@ const UserFilter = props => (
   </Filter>
 );
 
+const UserBulkActionButtons = props => {
+  const translate = useTranslate();
+  return (
+    <Fragment>
+      <BulkDeleteButton
+        {...props}
+        label="resources.users.action.erase"
+        title={translate("resources.users.helper.erase")}
+      />
+    </Fragment>
+  );
+};
+
 export const UserList = props => (
   <List
     {...props}
     filters={<UserFilter />}
     filterDefaultValues={{ guests: true, deactivated: false }}
-    bulkActionButtons={false}
+    bulkActionButtons={<UserBulkActionButtons />}
     pagination={<UserPagination />}
   >
     <Datagrid rowClick="edit">
@@ -81,6 +99,19 @@ const validateUser = regex(
   "synapseadmin.users.invalid_user_id"
 );
 
+const UserEditToolbar = props => {
+  const translate = useTranslate();
+  return (
+    <Toolbar {...props}>
+      <SaveButton submitOnEnter={true} />
+      <DeleteButton
+        label="resources.users.action.erase"
+        title={translate("resources.users.helper.erase")}
+      />
+    </Toolbar>
+  );
+};
+
 export const UserCreate = props => (
   <Create {...props}>
     <SimpleForm>
@@ -106,7 +137,7 @@ export const UserCreate = props => (
 
 export const UserEdit = props => (
   <Edit {...props}>
-    <TabbedForm>
+    <TabbedForm toolbar={<UserEditToolbar />}>
       <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
         <TextInput source="id" disabled />
         <TextInput source="displayname" />