Add page to show room details

Change-Id: Iec4f402c4322d775cc14c567069a3295ad383b44

src/App.js

@@ -4,7 +4,7 @@ import polyglotI18nProvider from "ra-i18n-polyglot";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
 import { UserList, UserCreate, UserEdit } from "./components/users";
-import { RoomList, RoomCreate } from "./components/rooms";
+import { RoomList, RoomCreate, RoomShow } from "./components/rooms";
 import LoginPage from "./components/LoginPage";
 import UserIcon from "@material-ui/icons/Group";
 import { ViewListIcon as RoomIcon } from "@material-ui/icons/ViewList";
@@ -44,6 +44,7 @@ const App = () => (
       name="rooms"
       list={RoomList}
       create={RoomCreate}
+      show={RoomShow}
       icon={RoomIcon}
     />
     <Resource name="connections" />

src/components/rooms.js

@@ -1,14 +1,22 @@
 import React from "react";
 import {
+  BooleanField,
   BooleanInput,
   Create,
   Datagrid,
   List,
   Pagination,
+  ReferenceArrayField,
+  Show,
   SimpleForm,
+  Tab,
+  TabbedShowLayout,
   TextField,
   TextInput,
+  useTranslate,
 } from "react-admin";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import UserIcon from "@material-ui/icons/Group";
 
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -16,7 +24,7 @@ const RoomPagination = props => (
 
 export const RoomList = props => (
   <List {...props} pagination={<RoomPagination />}>
-    <Datagrid>
+    <Datagrid rowClick="show">
       <TextField source="room_id" />
       <TextField source="name" />
       <TextField source="canonical_alias" />
@@ -108,3 +116,33 @@ export const RoomCreate = props => (
     </SimpleForm>
   </Create>
 );
+
+const RoomTitle = ({ record }) => {
+  const translate = useTranslate();
+  return (
+    <span>
+      {translate("resources.rooms.name", 1)} {record ? `"${record.name}"` : ""}
+    </span>
+  );
+};
+export const RoomShow = props => (
+  <Show {...props} title={<RoomTitle />}>
+    <TabbedShowLayout>
+      <Tab label="synapseadmin.rooms.details" icon={<ViewListIcon />}>
+        <TextField source="id" disabled />
+        <TextField source="name" />
+        <TextField source="canonical_alias" />
+        <TextField source="join_rules" />
+        <TextField source="guest_access" />
+      </Tab>
+      <Tab label="resources.rooms.fields.joined_members" icon={<UserIcon />}>
+        <ReferenceArrayField reference="users" source="members">
+          <Datagrid>
+            <TextField source="id" />
+            <TextField source="displayname" />
+          </Datagrid>
+        </ReferenceArrayField>
+      </Tab>
+    </TabbedShowLayout>
+  </Show>
+);

src/i18n/de.js

@@ -17,6 +17,7 @@ export default {
         "Muss eine vollständige Matrix Benutzer-ID sein, z.B. @benutzer_id:homeserver",
     },
     rooms: {
+      details: "Raumdetails",
       room_name: "Raumname",
       make_public: "Öffentlicher Raum",
       room_name_required: "Muss angegeben werden",

src/i18n/en.js

@@ -17,6 +17,7 @@ export default {
         "Must be a fully qualified Matrix user-id, e.g. @user_id:homeserver",
     },
     rooms: {
+      details: "Room Details",
       room_name: "Room Name",
       make_public: "Make room public",
       room_name_required: "Must be provided",

src/synapse/dataProvider.js

@@ -37,8 +37,6 @@ const resourceMap = {
     map: r => ({
       ...r,
       id: r.room_id,
-      alias: r.canonical_alias,
-      members: r.joined_members,
     }),
     data: "rooms",
     total: json => json.total_rooms,