Add RoomShow (detail view) to Rooms

API was added by synapse v1.14.0.

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 } from "./components/rooms";
+import { RoomList, 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";
@@ -35,7 +35,7 @@ const App = () => (
       edit={UserEdit}
       icon={UserIcon}
     />
-    <Resource name="rooms" list={RoomList} icon={RoomIcon} />
+    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
     <Resource name="connections" />
     <Resource name="servernotices" />
   </Admin>

src/components/rooms.js

@@ -1,5 +1,18 @@
 import React from "react";
-import { Datagrid, List, TextField, Pagination } from "react-admin";
+import ViewAgendaIcon from "@material-ui/icons/ViewAgenda";
+import PageviewIcon from "@material-ui/icons/Pageview";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import {
+  Datagrid,
+  List,
+  TextField,
+  Pagination,
+  Show,
+  TabbedShowLayout,
+  BooleanField,
+  useTranslate,
+  Tab,
+} from "react-admin";
 
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -7,7 +20,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" />
@@ -15,3 +28,54 @@ export const RoomList = props => (
     </Datagrid>
   </List>
 );
+
+const RoomTitle = ({ record }) => {
+  const translate = useTranslate();
+  return (
+    <span>
+      {translate("resources.rooms.name", { smart_count: 1 })}{" "}
+      {record ? `"${record.name}"` : ""}
+    </span>
+  );
+};
+
+export const RoomShow = props => {
+  const translate = useTranslate();
+  return (
+    <Show {...props} title={<RoomTitle />}>
+      <TabbedShowLayout>
+        <Tab
+          label={translate("resources.rooms.tabs.basic")}
+          icon={<ViewAgendaIcon />}
+        >
+          <TextField source="room_id" />
+          <TextField source="name" />
+          <TextField source="canonical_alias" />
+          <TextField source="creator" />
+        </Tab>
+        <Tab
+          label={translate("resources.rooms.tabs.detail")}
+          icon={<PageviewIcon />}
+          path="detail"
+        >
+          <TextField source="joined_members" />
+          <TextField source="joined_local_members" />
+          <TextField source="state_events" />
+          <TextField source="version" />
+          <TextField source="encryption" />
+        </Tab>
+        <Tab
+          label={translate("resources.rooms.tabs.permission")}
+          icon={<VisibilityIcon />}
+          path="permission"
+        >
+          <BooleanField source="federatable" />
+          <BooleanField source="public" />
+          <TextField source="join_rules" />
+          <TextField source="guest_access" />
+          <TextField source="history_visibility" />
+        </Tab>
+      </TabbedShowLayout>
+    </Show>
+  );
+};

src/i18n/de.js

@@ -54,6 +54,21 @@ export default {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Mitglieder",
+        joined_local_members: "lokale Mitglieder",
+        state_events: "Ereignisse",
+        version: "Version",
+        encryption: "Verschlüsselung",
+        federatable: "Fö­de­riert",
+        public: "Öffentlich",
+        creator: "Ersteller",
+        join_rules: "Beitrittsregeln",
+        guest_access: "Gastzugriff",
+        history_visibility: "Historie-Sichtbarkeit",
+      },
+      tabs: {
+        basic: "Einfach",
+        detail: "Details",
+        permission: "Berechtigungen",
       },
     },
     connections: {

src/i18n/en.js

@@ -53,6 +53,21 @@ export default {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Members",
+        joined_local_members: "local members",
+        state_events: "State events",
+        version: "Version",
+        encryption: "Encryption",
+        federatable: "Federatable",
+        public: "Public",
+        creator: "Creator",
+        join_rules: "Join rules",
+        guest_access: "Guest access",
+        history_visibility: "History visibility",
+      },
+      tabs: {
+        basic: "Basic",
+        detail: "Details",
+        permission: "Permissions",
       },
     },
     connections: {