Add the lists of public rooms on the server (#105)

* Add room directory and the switches to rooms settings

* Fix react admin version

src/components/RoomDirectory.js

@@ -0,0 +1,252 @@
+import React, { Fragment } from "react";
+import Avatar from "@material-ui/core/Avatar";
+import { Chip } from "@material-ui/core";
+import { connect } from "react-redux";
+import FolderSharedIcon from "@material-ui/icons/FolderShared";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  BooleanField,
+  BulkDeleteButton,
+  Button,
+  Datagrid,
+  DeleteButton,
+  Filter,
+  List,
+  NumberField,
+  Pagination,
+  TextField,
+  useCreate,
+  useMutation,
+  useNotify,
+  useTranslate,
+  useRefresh,
+  useUnselectAll,
+} from "react-admin";
+
+const useStyles = makeStyles({
+  small: {
+    height: "40px",
+    width: "40px",
+  },
+});
+
+const RoomDirectoryPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[100, 500, 1000, 2000]} />
+);
+
+export const RoomDirectoryDeleteButton = props => {
+  const translate = useTranslate();
+
+  return (
+    <DeleteButton
+      {...props}
+      label="resources.room_directory.action.erase"
+      redirect={false}
+      mutationMode="pessimistic"
+      confirmTitle={translate("resources.room_directory.action.title", {
+        smart_count: 1,
+      })}
+      confirmContent={translate("resources.room_directory.action.content", {
+        smart_count: 1,
+      })}
+      resource="room_directory"
+      icon={<FolderSharedIcon />}
+    />
+  );
+};
+
+export const RoomDirectoryBulkDeleteButton = props => (
+  <BulkDeleteButton
+    {...props}
+    label="resources.room_directory.action.erase"
+    undoable={false}
+    confirmTitle="resources.room_directory.action.title"
+    confirmContent="resources.room_directory.action.content"
+    resource="room_directory"
+    icon={<FolderSharedIcon />}
+  />
+);
+
+export const RoomDirectoryBulkSaveButton = ({ selectedIds }) => {
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const unselectAll = useUnselectAll();
+  const [createMany, { loading }] = useMutation();
+
+  const handleSend = values => {
+    createMany(
+      {
+        type: "createMany",
+        resource: "room_directory",
+        payload: { ids: selectedIds, data: {} },
+      },
+      {
+        onSuccess: ({ data }) => {
+          notify("resources.room_directory.action.send_success");
+          unselectAll("rooms");
+          refresh();
+        },
+        onFailure: error =>
+          notify("resources.room_directory.action.send_failure", "error"),
+      }
+    );
+  };
+
+  return (
+    <Button
+      label="resources.room_directory.action.create"
+      onClick={handleSend}
+      disabled={loading}
+    >
+      <FolderSharedIcon />
+    </Button>
+  );
+};
+
+export const RoomDirectorySaveButton = ({ record }) => {
+  const notify = useNotify();
+  const refresh = useRefresh();
+  const [create, { loading }] = useCreate("room_directory");
+
+  const handleSend = values => {
+    create(
+      {
+        payload: { data: { id: record.id } },
+      },
+      {
+        onSuccess: ({ data }) => {
+          notify("resources.room_directory.action.send_success");
+          refresh();
+        },
+        onFailure: error =>
+          notify("resources.room_directory.action.send_failure", "error"),
+      }
+    );
+  };
+
+  return (
+    <Button
+      label="resources.room_directory.action.create"
+      onClick={handleSend}
+      disabled={loading}
+    >
+      <FolderSharedIcon />
+    </Button>
+  );
+};
+
+const RoomDirectoryBulkActionButtons = props => (
+  <Fragment>
+    <RoomDirectoryBulkDeleteButton {...props} />
+  </Fragment>
+);
+
+const AvatarField = ({ source, className, record = {} }) => (
+  <Avatar src={record[source]} className={className} />
+);
+
+const RoomDirectoryFilter = ({ ...props }) => {
+  const translate = useTranslate();
+  return (
+    <Filter {...props}>
+      <Chip
+        label={translate("resources.rooms.fields.room_id")}
+        source="room_id"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.topic")}
+        source="topic"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.canonical_alias")}
+        source="canonical_alias"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+    </Filter>
+  );
+};
+
+export const FilterableRoomDirectoryList = ({ ...props }) => {
+  const classes = useStyles();
+  const translate = useTranslate();
+  const filter = props.roomDirectoryFilters;
+  const roomIdFilter = filter && filter.room_id ? true : false;
+  const topicFilter = filter && filter.topic ? true : false;
+  const canonicalAliasFilter = filter && filter.canonical_alias ? true : false;
+
+  return (
+    <List
+      {...props}
+      pagination={<RoomDirectoryPagination />}
+      bulkActionButtons={<RoomDirectoryBulkActionButtons />}
+      filters={<RoomDirectoryFilter />}
+      perPage={100}
+    >
+      <Datagrid>
+        <AvatarField
+          source="avatar_src"
+          sortable={false}
+          className={classes.small}
+          label={translate("resources.rooms.fields.avatar")}
+        />
+        <TextField
+          source="name"
+          sortable={false}
+          label={translate("resources.rooms.fields.name")}
+        />
+        {roomIdFilter && (
+          <TextField
+            source="room_id"
+            sortable={false}
+            label={translate("resources.rooms.fields.room_id")}
+          />
+        )}
+        {canonicalAliasFilter && (
+          <TextField
+            source="canonical_alias"
+            sortable={false}
+            label={translate("resources.rooms.fields.canonical_alias")}
+          />
+        )}
+        {topicFilter && (
+          <TextField
+            source="topic"
+            sortable={false}
+            label={translate("resources.rooms.fields.topic")}
+          />
+        )}
+        <NumberField
+          source="num_joined_members"
+          sortable={false}
+          label={translate("resources.rooms.fields.joined_members")}
+        />
+        <BooleanField
+          source="world_readable"
+          sortable={false}
+          label={translate("resources.room_directory.fields.world_readable")}
+        />
+        <BooleanField
+          source="guest_can_join"
+          sortable={false}
+          label={translate("resources.room_directory.fields.guest_can_join")}
+        />
+      </Datagrid>
+    </List>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    roomDirectoryFilters:
+      state.admin.resources.room_directory.list.params.displayedFilters,
+  };
+}
+
+export const RoomDirectoryList = connect(mapStateToProps)(
+  FilterableRoomDirectoryList
+);

src/components/rooms.js

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { connect } from "react-redux";
 import {
   BooleanField,
-  BulkDeleteWithConfirmButton,
+  BulkDeleteButton,
   Datagrid,
   DeleteButton,
   Filter,
@@ -27,6 +27,12 @@ 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 {
+  RoomDirectoryBulkDeleteButton,
+  RoomDirectoryBulkSaveButton,
+  RoomDirectoryDeleteButton,
+  RoomDirectorySaveButton,
+} from "./RoomDirectory";
 
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -73,16 +79,26 @@ const RoomTitle = ({ record }) => {
 };
 
 const RoomShowActions = ({ basePath, data, resource }) => {
-  const translate = useTranslate();
+  var roomDirectoryStatus = "";
+  if (data) {
+    roomDirectoryStatus = data.public;
+  }
+
   return (
     <TopToolbar>
+      {roomDirectoryStatus === false && (
+        <RoomDirectorySaveButton record={data} />
+      )}
+      {roomDirectoryStatus === true && (
+        <RoomDirectoryDeleteButton record={data} />
+      )}
       <DeleteButton
         basePath={basePath}
         record={data}
         resource={resource}
-        undoable={false}
-        confirmTitle={translate("synapseadmin.rooms.delete.title")}
-        confirmContent={translate("synapseadmin.rooms.delete.message")}
+        mutationMode="pessimistic"
+        confirmTitle="resources.rooms.action.erase.title"
+        confirmContent="resources.rooms.action.erase.content"
       />
     </TopToolbar>
   );
@@ -205,7 +221,14 @@ export const RoomShow = props => {
 
 const RoomBulkActionButtons = props => (
   <Fragment>
-    <BulkDeleteWithConfirmButton {...props} />
+    <RoomDirectoryBulkSaveButton {...props} />
+    <RoomDirectoryBulkDeleteButton {...props} />
+    <BulkDeleteButton
+      {...props}
+      confirmTitle="resources.rooms.action.erase.title"
+      confirmContent="resources.rooms.action.erase.content"
+      undoable={false}
+    />
   </Fragment>
 );
 
@@ -249,7 +272,6 @@ const FilterableRoomList = ({ ...props }) => {
   const stateEventsFilter = filter && filter.state_events ? true : false;
   const versionFilter = filter && filter.version ? true : false;
   const federateableFilter = filter && filter.federatable ? true : false;
-  const translate = useTranslate();
 
   return (
     <List
@@ -257,12 +279,7 @@ const FilterableRoomList = ({ ...props }) => {
       pagination={<RoomPagination />}
       sort={{ field: "name", order: "ASC" }}
       filters={<RoomFilter />}
-      bulkActionButtons={
-        <RoomBulkActionButtons
-          confirmTitle={translate("synapseadmin.rooms.delete.title")}
-          confirmContent={translate("synapseadmin.rooms.delete.message")}
-        />
-      }
+      bulkActionButtons={<RoomBulkActionButtons />}
     >
       <Datagrid rowClick="show">
         <EncryptionField

src/components/users.js

@@ -139,19 +139,17 @@ const UserFilter = props => (
   </Filter>
 );
 
-const UserBulkActionButtons = props => {
-  const translate = useTranslate();
-  return (
-    <Fragment>
-      <ServerNoticeBulkButton {...props} />
-      <BulkDeleteButton
-        {...props}
-        label="resources.users.action.erase"
-        title={translate("resources.users.helper.erase")}
-      />
-    </Fragment>
-  );
-};
+const UserBulkActionButtons = props => (
+  <Fragment>
+    <ServerNoticeBulkButton {...props} />
+    <BulkDeleteButton
+      {...props}
+      label="resources.users.action.erase"
+      confirmTitle="resources.users.helper.erase"
+      undoable={false}
+    />
+  </Fragment>
+);
 
 const AvatarField = ({ source, className, record = {} }) => (
   <Avatar src={record[source]} className={className} />
@@ -238,7 +236,10 @@ const UserEditToolbar = props => {
       <SaveButton submitOnEnter={true} />
       <DeleteButton
         label="resources.users.action.erase"
-        title={translate("resources.users.helper.erase")}
+        confirmTitle={translate("resources.users.helper.erase", {
+          smart_count: 1,
+        })}
+        mutationMode="pessimistic"
       />
       <ServerNoticeButton />
     </Toolbar>
@@ -453,7 +454,7 @@ export const UserEdit = props => {
               <TextField source="upload_name" sortable={false} />
               <TextField source="quarantined_by" sortable={false} />
               <BooleanField source="safe_from_quarantine" sortable={false} />
-              <DeleteButton undoable={false} redirect={false} />
+              <DeleteButton mutationMode="pessimistic" redirect={false} />
             </Datagrid>
           </ReferenceManyField>
         </FormTab>