Add devices tab to UserEdit component

Allows to view user devices.
API was added by synapse v1.15.0.

Change-Id: Id0693bf6cd6f6182c657412cf8036537e2db9df7

README.md

@@ -4,7 +4,7 @@
 
 This project is built using [react-admin](https://marmelab.com/react-admin/).
 
-It needs at least Synapse v1.14.0 for all functions to work as expected!
+It needs at least Synapse v1.15.0 for all functions to work as expected!
 
 ## Step-By-Step install:
 

src/App.js

@@ -37,6 +37,7 @@ const App = () => (
     />
     <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
     <Resource name="connections" />
+    <Resource name="devices" />
     <Resource name="servernotices" />
   </Admin>
 );

src/components/users.js

@@ -2,6 +2,7 @@ import React, { cloneElement, 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 DevicesIcon from "@material-ui/icons/Devices";
 import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import {
   ArrayInput,
@@ -23,6 +24,7 @@ import {
   TextField,
   TextInput,
   ReferenceField,
+  ReferenceManyField,
   SelectInput,
   BulkDeleteButton,
   DeleteButton,
@@ -205,6 +207,7 @@ const UserTitle = ({ record }) => {
 };
 export const UserEdit = props => {
   const classes = useStyles();
+  const translate = useTranslate();
   return (
     <Edit {...props} title={<UserTitle />}>
       <TabbedForm toolbar={<UserEditToolbar />}>
@@ -254,6 +257,36 @@ export const UserEdit = props => {
             </SimpleFormIterator>
           </ArrayInput>
         </FormTab>
+        <FormTab
+          label={translate("resources.devices.name", { smart_count: 2 })}
+          icon={<DevicesIcon />}
+          path="devices"
+        >
+          <ReferenceManyField
+            reference="devices"
+            target="user_id"
+            addLabel={false}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="device_id" sortable={false} />
+              <TextField source="display_name" sortable={false} />
+              <TextField source="last_seen_ip" sortable={false} />
+              <DateField
+                source="last_seen_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+            </Datagrid>
+          </ReferenceManyField>
+        </FormTab>
         <FormTab
           label="resources.connections.name"
           icon={<SettingsInputComponentIcon />}

src/i18n/de.js

@@ -107,6 +107,15 @@ export default {
         user_agent: "User Agent",
       },
     },
+    devices: {
+      name: "Gerät |||| Geräte",
+      fields: {
+        device_id: "Geräte-ID",
+        display_name: "Anzeigename",
+        last_seen_ts: "Zeitstempel",
+        last_seen_ip: "IP-Adresse",
+      },
+    },
     servernotices: {
       name: "Serverbenachrichtigungen",
       send: "Servernachricht versenden",

src/i18n/en.js

@@ -105,6 +105,15 @@ export default {
         user_agent: "User agent",
       },
     },
+    devices: {
+      name: "Device |||| Devices",
+      fields: {
+        device_id: "Device-ID",
+        display_name: "Displayname",
+        last_seen_ts: "Timestamp",
+        last_seen_ip: "IP address",
+      },
+    },
     servernotices: {
       name: "Server Notices",
       send: "Send server notices",

src/synapse/dataProvider.js

@@ -67,6 +67,16 @@ const resourceMap = {
       return json.total_rooms;
     },
   },
+  devices: {
+    map: d => ({
+      ...d,
+      id: d.device_id,
+    }),
+    data: "devices",
+    reference: id => ({
+      endpoint: `/_synapse/admin/v2/users/${id}/devices`,
+    }),
+  },
   connections: {
     path: "/_synapse/admin/v1/whois",
     map: c => ({
@@ -166,30 +176,18 @@ const dataProvider = {
   },
 
   getManyReference: (resource, params) => {
-    // FIXME
     console.log("getManyReference " + resource);
-    const { page, perPage } = params.pagination;
-    const { field, order } = params.sort;
-    const query = {
-      sort: JSON.stringify([field, order]),
-      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
-      filter: JSON.stringify({
-        ...params.filter,
-        [params.target]: params.id,
-      }),
-    };
 
     const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) return Promise.reject();
 
     const res = resourceMap[resource];
 
-    const endpoint_url = homeserver + res.path;
+    const ref = res["reference"](params.id);
-    const url = `${endpoint_url}?${stringify(query)}`;
+    const endpoint_url = homeserver + ref.endpoint;
 
-    return jsonClient(url).then(({ headers, json }) => ({
+    return jsonClient(endpoint_url).then(({ headers, json }) => ({
-      data: json,
+      data: json[res.data].map(res.map),
-      total: parseInt(headers.get("content-range").split("/").pop(), 10),
     }));
   },