Merge branch 'master' into amp.chat

Change-Id: Iac4e56401aab3f7f39b623b617990ec1952f8cd0

src/components/users.js

@@ -1,11 +1,20 @@
-import React from "react";
+import React, { Fragment } from "react";
+import PersonPinIcon from "@material-ui/icons/PersonPin";
+import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import {
+  ArrayInput,
+  ArrayField,
   Datagrid,
+  DateField,
   Create,
   Edit,
   List,
   Filter,
+  Toolbar,
   SimpleForm,
+  SimpleFormIterator,
+  TabbedForm,
+  FormTab,
   BooleanField,
   BooleanInput,
   ImageField,
@@ -14,12 +23,20 @@ import {
   TextInput,
   SearchInput,
   ReferenceField,
+  SelectInput,
+  BulkDeleteButton,
+  DeleteButton,
   SaveButton,
-  Toolbar,
   regex,
+  useTranslate,
+  Pagination,
 } from "react-admin";
 import SaveQrButton from "./SaveQrButton";
 
+const UserPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+);
+
 const UserFilter = props => (
   <Filter {...props}>
     <SearchInput source="q" alwaysOn />
@@ -32,12 +49,26 @@ 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">
       <ReferenceField
@@ -140,6 +171,29 @@ const validateUser = regex(
   "synapseadmin.users.invalid_user_id"
 );
 
+const UserEditToolbar = props => {
+  const translate = useTranslate();
+  return (
+    <Toolbar {...props}>
+      <SaveQrButton
+        label="synapseadmin.action.save_and_show"
+        redirect={redirect}
+        submitOnEnter={true}
+      />
+      <SaveButton
+        label="synapseadmin.action.save_only"
+        redirect="list"
+        submitOnEnter={false}
+        variant="text"
+      />
+      <DeleteButton
+        label="resources.users.action.erase"
+        title={translate("resources.users.helper.erase")}
+      />
+    </Toolbar>
+  );
+};
+
 export const UserCreate = props => (
   <Create record={generateRandomUser()} {...props}>
     <SimpleForm toolbar={<UserCreateToolbar />}>
@@ -147,18 +201,80 @@ export const UserCreate = props => (
       <TextInput source="displayname" />
       <PasswordInput source="password" autoComplete="new-password" />
       <BooleanInput source="admin" />
+      <ArrayInput source="threepids">
+        <SimpleFormIterator>
+          <SelectInput
+            source="medium"
+            choices={[
+              { id: "email", name: "resources.users.email" },
+              { id: "msisdn", name: "resources.users.msisdn" },
+            ]}
+          />
+          <TextInput source="address" />
+        </SimpleFormIterator>
+      </ArrayInput>
     </SimpleForm>
   </Create>
 );
 
 export const UserEdit = props => (
   <Edit {...props}>
-    <SimpleForm toolbar={<UserCreateToolbar />}>
-      <TextInput source="id" disabled />
-      <TextInput source="displayname" />
-      <PasswordInput source="password" autoComplete="new-password" />
-      <BooleanInput source="admin" />
-      <BooleanInput source="deactivated" />
-    </SimpleForm>
+    <TabbedForm toolbar={<UserEditToolbar />}>
+      <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
+        <TextInput source="id" disabled />
+        <TextInput source="displayname" />
+        <PasswordInput source="password" autoComplete="new-password" />
+        <BooleanInput source="admin" />
+        <BooleanInput
+          source="deactivated"
+          helperText="resources.users.helper.deactivate"
+        />
+        <ArrayInput source="threepids">
+          <SimpleFormIterator>
+            <SelectInput
+              source="medium"
+              choices={[
+                { id: "email", name: "resources.users.email" },
+                { id: "msisdn", name: "resources.users.msisdn" },
+              ]}
+            />
+            <TextInput source="address" />
+          </SimpleFormIterator>
+        </ArrayInput>
+      </FormTab>
+      <FormTab
+        label="resources.connections.name"
+        icon={<SettingsInputComponentIcon />}
+      >
+        <ReferenceField reference="connections" source="id" addLabel={false}>
+          <ArrayField
+            source="devices[].sessions[0].connections"
+            label="resources.connections.name"
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="ip" sortable={false} />
+              <DateField
+                source="last_seen"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <TextField
+                source="user_agent"
+                sortable={false}
+                style={{ width: "100%" }}
+              />
+            </Datagrid>
+          </ArrayField>
+        </ReferenceField>
+      </FormTab>
+    </TabbedForm>
   </Edit>
 );