Add a new tab to rooms with state events (#108)

Co-authored-by: Michael Albert <37796947+awesome-michael@users.noreply.github.com>

src/App.js

@@ -71,6 +71,7 @@ const App = () => (
     <Resource name="joined_rooms" />
     <Resource name="pushers" />
     <Resource name="servernotices" />
+    <Resource name="room_state" />
   </Admin>
 );
 

src/components/rooms.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import {
   BooleanField,
   BulkDeleteButton,
+  DateField,
   Datagrid,
   DeleteButton,
   Filter,
@@ -27,6 +28,7 @@ import PageviewIcon from "@material-ui/icons/Pageview";
 import UserIcon from "@material-ui/icons/Group";
 import ViewListIcon from "@material-ui/icons/ViewList";
 import VisibilityIcon from "@material-ui/icons/Visibility";
+import EventIcon from "@material-ui/icons/Event";
 import {
   RoomDirectoryBulkDeleteButton,
   RoomDirectoryBulkSaveButton,
@@ -113,7 +115,9 @@ export const RoomShow = props => {
           <TextField source="room_id" />
           <TextField source="name" />
           <TextField source="canonical_alias" />
-          <TextField source="creator" />
+          <ReferenceField source="creator" reference="users">
+            <TextField source="id" />
+          </ReferenceField>
         </Tab>
 
         <Tab
@@ -214,6 +218,42 @@ export const RoomShow = props => {
             ]}
           />
         </Tab>
+        <Tab
+          label={translate("resources.room_state.name", { smart_count: 2 })}
+          icon={<EventIcon />}
+          path="state"
+        >
+          <ReferenceManyField
+            reference="room_state"
+            target="room_id"
+            addLabel={false}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="type" sortable={false} />
+              <DateField
+                source="origin_server_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <TextField source="content" sortable={false} />
+              <ReferenceField
+                source="sender"
+                reference="users"
+                sortable={false}
+              >
+                <TextField source="id" />
+              </ReferenceField>
+            </Datagrid>
+          </ReferenceManyField>
+        </Tab>
       </TabbedShowLayout>
     </Show>
   );

src/i18n/de.js

@@ -139,7 +139,7 @@ export default {
         joined_members: "Mitglieder",
         joined_local_members: "Lokale Mitglieder",
         joined_local_devices: "Lokale Endgeräte",
-        state_events: "Ereignisse",
+        state_events: "Zustandsereignisse / Komplexität",
         version: "Version",
         is_encrypted: "Verschlüsselt",
         encryption: "Verschlüsselungs-Algorithmus",
@@ -295,6 +295,15 @@ export default {
         media_length: "Größe der Dateien",
       },
     },
+    room_state: {
+      name: "Zustandsereignisse",
+      fields: {
+        type: "Typ",
+        content: "Inhalt",
+        origin_server_ts: "Sendezeit",
+        sender: "Absender",
+      },
+    },
     room_directory: {
       name: "Raumverzeichnis",
       fields: {

src/i18n/en.js

@@ -137,7 +137,7 @@ export default {
         joined_members: "Members",
         joined_local_members: "Local members",
         joined_local_devices: "Local devices",
-        state_events: "State events",
+        state_events: "State events / Complexity",
         version: "Version",
         is_encrypted: "Encrypted",
         encryption: "Encryption",
@@ -291,6 +291,15 @@ export default {
         media_length: "Media length",
       },
     },
+    room_state: {
+      name: "State events",
+      fields: {
+        type: "Type",
+        content: "Content",
+        origin_server_ts: "time of send",
+        sender: "Sender",
+      },
+    },
     room_directory: {
       name: "Room directory",
       fields: {

src/synapse/dataProvider.js

@@ -117,6 +117,19 @@ const resourceMap = {
       return json.total;
     },
   },
+  room_state: {
+    map: rs => ({
+      ...rs,
+      id: rs.event_id,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/rooms/${id}/state`,
+    }),
+    data: "state",
+    total: json => {
+      return json.state.length;
+    },
+  },
   pushers: {
     map: p => ({
       ...p,