Get avatar_url and displayname from v2/users API

API was added by synapse v1.13.0.

Change-Id: I927b81882fa20e5b3de3d9fc216e2136f7036bba

src/components/users.js

@@ -1,4 +1,5 @@
 import React, { Fragment } from "react";
+import Avatar from "@material-ui/core/Avatar";
 import PersonPinIcon from "@material-ui/icons/PersonPin";
 import ContactMailIcon from "@material-ui/icons/ContactMail";
 import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
@@ -18,7 +19,6 @@ import {
   FormTab,
   BooleanField,
   BooleanInput,
-  ImageField,
   PasswordInput,
   TextField,
   TextInput,
@@ -32,6 +32,19 @@ import {
   Pagination,
 } from "react-admin";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  small: {
+    height: "40px",
+    width: "40px",
+  },
+  large: {
+    height: "120px",
+    width: "120px",
+    float: "right",
+  },
+});
 
 const UserPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -62,7 +75,13 @@ const UserBulkActionButtons = props => {
   );
 };
 
-export const UserList = props => (
+const AvatarField = ({ source, className, record = {} }) => (
+  <Avatar src={record[source]} className={className} />
+);
+
+export const UserList = props => {
+  const classes = useStyles();
+  return (
     <List
       {...props}
       filters={<UserFilter />}
@@ -71,30 +90,20 @@ export const UserList = props => (
       pagination={<UserPagination />}
     >
       <Datagrid rowClick="edit">
-      <ReferenceField
+        <AvatarField
-        source="Avatar"
+          source="avatar_src"
-        reference="users"
-        link={false}
           sortable={false}
-      >
+          className={classes.small}
-        <ImageField source="avatar_url" title="displayname" />
+        />
-      </ReferenceField>
         <TextField source="id" sortable={false} />
-      {/* Hack since the users endpoint does not give displaynames in the list*/}
+        <TextField source="displayname" sortable={false} />
-      <ReferenceField
-        source="name"
-        reference="users"
-        link={false}
-        sortable={false}
-      >
-        <TextField source="displayname" />
-      </ReferenceField>
         <BooleanField source="is_guest" sortable={false} />
         <BooleanField source="admin" sortable={false} />
         <BooleanField source="deactivated" sortable={false} />
       </Datagrid>
     </List>
   );
+};
 
 // https://matrix.org/docs/spec/appendices#user-identifiers
 const validateUser = regex(
@@ -148,10 +157,17 @@ const UserTitle = ({ record }) => {
     </span>
   );
 };
-export const UserEdit = props => (
+export const UserEdit = props => {
+  const classes = useStyles();
+  return (
     <Edit {...props} title={<UserTitle />}>
       <TabbedForm toolbar={<UserEditToolbar />}>
         <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
+          <AvatarField
+            source="avatar_src"
+            sortable={false}
+            className={classes.large}
+          />
           <TextInput source="id" disabled />
           <TextInput source="displayname" />
           <PasswordInput source="password" autoComplete="new-password" />
@@ -234,3 +250,4 @@ export const UserEdit = props => (
       </TabbedForm>
     </Edit>
   );
+};

src/i18n/de.js

@@ -36,6 +36,7 @@ export default {
         displayname: "Anzeigename",
         password: "Passwort",
         avatar_url: "Avatar URL",
+        avatar_src: "Avatar",
         medium: "Medium",
         threepids: "3PIDs",
         address: "Adresse",

src/i18n/en.js

@@ -35,6 +35,7 @@ export default {
         displayname: "Displayname",
         password: "Password",
         avatar_url: "Avatar URL",
+        avatar_src: "Avatar",
         medium: "Medium",
         threepids: "3PIDs",
         address: "Address",

src/synapse/dataProvider.js

@@ -14,12 +14,24 @@ const jsonClient = (url, options = {}) => {
   return fetchUtils.fetchJson(url, options);
 };
 
+const mxcUrlToHttp = mxcUrl => {
+  const homeserver = localStorage.getItem("base_url");
+  const re = /^mxc:\/\/([^/]+)\/(\w+)/;
+  var ret = re.exec(mxcUrl);
+  console.log("mxcClient " + ret);
+  if (ret == null) return null;
+  const serverName = ret[1];
+  const mediaId = ret[2];
+  return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
+};
+
 const resourceMap = {
   users: {
     path: "/_synapse/admin/v2/users",
     map: u => ({
       ...u,
       id: u.name,
+      avatar_src: mxcUrlToHttp(u.avatar_url),
       is_guest: !!u.is_guest,
       admin: !!u.admin,
       deactivated: !!u.deactivated,
@@ -27,11 +39,7 @@ const resourceMap = {
       creation_ts_ms: u.creation_ts * 1000,
     }),
     data: "users",
-    total: (json, from, perPage) => {
+    total: json => json.total,
-      return json.next_token
-        ? parseInt(json.next_token, 10) + perPage
-        : from + json.users.length;
-    },
     create: data => ({
       endpoint: `/_synapse/admin/v2/users/${data.id}`,
       body: data,