Preinstall icons-material to avoid timeout

Change-Id: Ie4b5fa3a923cac19a3f2eeae5f6c06245d0b8cc2

.github/workflows/build-test.yml

@@ -10,11 +10,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
       - name: Setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: 16
       - name: Install dependencies
         run: yarn --frozen-lockfile
       - name: Run tests

.github/workflows/docker-release.yml

@@ -17,13 +17,13 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v2
       - name: Login to DockerHub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -43,7 +43,7 @@ jobs:
           esac
           echo "::set-output name=tag::$tag"
       - name: Build and Push Tag
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v3
         with:
           context: .
           push: true

.github/workflows/edge_ghpage.yml

@@ -10,17 +10,17 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "16"
       - name: Install and Build 🔧
         run: |
           yarn install
           yarn build
 
       - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.4.3
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           branch: gh-pages
           folder: build

.github/workflows/github-release.yml

@@ -13,10 +13,10 @@ jobs:
       packages: write
 
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "16"
       - run: yarn install
       - run: yarn build
       - run: |

.github/workflows/test-docker-image.yml

@@ -17,13 +17,13 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v2
       - name: Login to DockerHub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -43,7 +43,7 @@ jobs:
           esac
           echo "::set-output name=tag::$tag"
       - name: Build and Push Tag
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v3
         with:
           context: .
           push: false

.travis.yml

@@ -1,6 +1,6 @@
 dist: focal
 language: node_js
 node_js:
-  - 18
+  - 17
 
 cache: yarn

Dockerfile

@@ -1,13 +1,15 @@
 # Builder
 FROM node:lts as builder
 
+ARG PUBLIC_URL=/
 ARG REACT_APP_SERVER
 
 WORKDIR /src
 
 COPY . /src
-RUN yarn --network-timeout=300000 install
-RUN REACT_APP_SERVER=$REACT_APP_SERVER yarn build
+RUN yarn --network-timeout 500000 add @mui/icons-material
+RUN yarn --network-timeout=100000 install
+RUN PUBLIC_URL=$PUBLIC_URL REACT_APP_SERVER=$REACT_APP_SERVER yarn build
 
 
 # App

docker-compose.yml

@@ -16,7 +16,7 @@ services:
     # if you're building on an architecture other than amd64, make sure
     # to define a maximum ram for node. otherwise the build will fail.
     #   - NODE_OPTIONS="--max_old_space_size=1024"
-    # default is .
+    # default is /
     #   - PUBLIC_URL=/synapse-admin
     # You can use a fixed homeserver, so that the user can no longer
     # define it himself

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-admin",
-  "version": "0.9.0",
+  "version": "0.8.5",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "author": "Awesome Technologies Innovationslabor GmbH",
   "license": "Apache-2.0",
@@ -11,27 +11,28 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^14.4.3",
-    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "^2.2.0"
+    "prettier": "^2.2.0",
+    "ra-test": "^3.15.0"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.14.19",
-    "@mui/material": "^5.14.8",
-    "@mui/styles": "5.14.10",
-    "papaparse": "^5.4.1",
-    "prop-types": "^15.8.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.4.0",
+    "papaparse": "^5.2.0",
+    "prop-types": "^15.7.2",
     "ra-language-chinese": "^2.0.10",
-    "ra-language-french": "^4.16.2",
+    "ra-language-french": "^4.2.0",
     "ra-language-german": "^3.13.4",
-    "ra-language-italian": "^3.13.1",
     "react": "^17.0.0",
-    "react-admin": "^4.16.9",
+    "react-admin": "^3.19.7",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1"
   },

public/robots.txt

@@ -1,3 +1,2 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow: /

src/App.js

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Admin,
-  CustomRoutes,
-  Resource,
-  resolveBrowserLocale,
-} from "react-admin";
+import { Admin, Resource, resolveBrowserLocale } from "react-admin";
 import polyglotI18nProvider from "ra-i18n-polyglot";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
@@ -33,14 +28,12 @@ import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
 import frenchMessages from "./i18n/fr";
 import chineseMessages from "./i18n/zh";
-import italianMessages from "./i18n/it";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
   de: germanMessages,
   en: englishMessages,
   fr: frenchMessages,
-  it: italianMessages,
   zh: chineseMessages,
 };
 const i18nProvider = polyglotI18nProvider(
@@ -55,10 +48,10 @@ const App = () => (
     authProvider={authProvider}
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
+    customRoutes={[
+      <Route key="userImport" path="/import_users" component={ImportFeature} />,
+    ]}
   >
-    <CustomRoutes>
-      <Route path="/import_users" element={<ImportFeature />} />
-    </CustomRoutes>
     <Resource
       name="users"
       list={UserList}

src/components/AvatarField.js

@@ -1,12 +0,0 @@
-import React from "react";
-import get from "lodash/get";
-import { Avatar } from "@mui/material";
-import { useRecordContext } from "react-admin";
-
-const AvatarField = ({ source, ...rest }) => {
-  const record = useRecordContext(rest);
-  const src = get(record, source)?.toString();
-  return <Avatar src={src} {...rest} />;
-};
-
-export default AvatarField;

src/components/EventReports.js

@@ -79,7 +79,6 @@ export const ReportShow = props => {
           <ReferenceField source="sender" reference="users">
             <TextField source="id" />
           </ReferenceField>
-          <TextField source="sender" label="Sender (raw user ID)" />
           <TextField source="event_id" />
           <TextField source="event_json.origin" />
           <TextField source="event_json.type" />

src/components/ImportFeature.js

@@ -1,6 +1,12 @@
 import React, { useState } from "react";
-import { useDataProvider, useNotify, Title } from "react-admin";
+import {
+  Button as ReactAdminButton,
+  useDataProvider,
+  useNotify,
+  Title,
+} from "react-admin";
 import { parse as parseCsv, unparse as unparseCsv } from "papaparse";
+import GetAppIcon from "@mui/icons-material/GetApp";
 import {
   Button,
   Card,
@@ -17,6 +23,19 @@ import { generateRandomUser } from "./users";
 
 const LOGGING = true;
 
+export const ImportButton = ({ label, variant = "text" }) => {
+  return (
+    <ReactAdminButton
+      color="primary"
+      component="span"
+      variant={variant}
+      label={label}
+    >
+      <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
+    </ReactAdminButton>
+  );
+};
+
 const expectedFields = ["id", "displayname"].sort();
 const optionalFields = [
   "user_type",

src/components/LoginPage.js

@@ -1,21 +1,19 @@
 import React, { useState, useEffect } from "react";
 import {
   fetchUtils,
-  Form,
   FormDataConsumer,
   Notification,
-  required,
   useLogin,
   useNotify,
-  useLocaleState,
+  useLocale,
+  useSetLocale,
   useTranslate,
   PasswordInput,
   TextInput,
 } from "react-admin";
-import { useFormContext } from "react-hook-form";
+import { Form, useForm } from "react-final-form";
 import {
   Avatar,
-  Box,
   Button,
   Card,
   CardActions,
@@ -23,64 +21,66 @@ import {
   MenuItem,
   Select,
   TextField,
-  Typography,
 } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import LockIcon from "@mui/icons-material/Lock";
 
-const FormBox = styled(Box)(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  minHeight: "calc(100vh - 1em)",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  background: "url(./images/floating-cogs.svg)",
-  backgroundColor: "#f9f9f9",
-  backgroundRepeat: "no-repeat",
-  backgroundSize: "cover",
-
-  [`& .card`]: {
+const useStyles = makeStyles(theme => ({
+  main: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "calc(100vh - 1em)",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    background: "url(./images/floating-cogs.svg)",
+    backgroundColor: "#f9f9f9",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "cover",
+  },
+  card: {
     minWidth: "30em",
     marginTop: "6em",
     marginBottom: "6em",
   },
-  [`& .avatar`]: {
+  avatar: {
     margin: "1em",
     display: "flex",
     justifyContent: "center",
   },
-  [`& .icon`]: {
-    backgroundColor: theme.palette.grey[500],
+  icon: {
+    backgroundColor: theme.palette.secondary.main,
   },
-  [`& .hint`]: {
+  hint: {
     marginTop: "1em",
     display: "flex",
     justifyContent: "center",
-    color: theme.palette.grey[600],
+    color: theme.palette.grey[500],
   },
-  [`& .form`]: {
+  form: {
     padding: "0 1em 1em 1em",
   },
-  [`& .input`]: {
+  input: {
     marginTop: "1em",
   },
-  [`& .actions`]: {
+  actions: {
     padding: "0 1em 1em 1em",
   },
-  [`& .serverVersion`]: {
-    color: theme.palette.grey[500],
+  serverVersion: {
+    color: "#9e9e9e",
     fontFamily: "Roboto, Helvetica, Arial, sans-serif",
     marginBottom: "1em",
     marginLeft: "0.5em",
   },
 }));
 
-const LoginPage = () => {
+const LoginPage = ({ theme }) => {
+  const classes = useStyles({ theme });
   const login = useLogin();
   const notify = useNotify();
   const [loading, setLoading] = useState(false);
   const [supportPassAuth, setSupportPassAuth] = useState(true);
-  const [locale, setLocale] = useLocaleState();
+  var locale = useLocale();
+  const setLocale = useSetLocale();
   const translate = useTranslate();
   const base_url = localStorage.getItem("base_url");
   const cfg_base_url = process.env.REACT_APP_SERVER;
@@ -135,16 +135,28 @@ const LoginPage = () => {
     />
   );
 
-  const validateBaseUrl = value => {
-    if (!value.match(/^(http|https):\/\//)) {
-      return translate("synapseadmin.auth.protocol_error");
-    } else if (
-      !value.match(/^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?[^?&\s]*$/)
-    ) {
-      return translate("synapseadmin.auth.url_error");
-    } else {
-      return undefined;
+  const validate = values => {
+    const errors = {};
+    if (!values.username) {
+      errors.username = translate("ra.validation.required");
     }
+    if (!values.password) {
+      errors.password = translate("ra.validation.required");
+    }
+    if (!values.base_url) {
+      errors.base_url = translate("ra.validation.required");
+    } else {
+      if (!values.base_url.match(/^(http|https):\/\//)) {
+        errors.base_url = translate("synapseadmin.auth.protocol_error");
+      } else if (
+        !values.base_url.match(
+          /^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?[^?&\s]*$/
+        )
+      ) {
+        errors.base_url = translate("synapseadmin.auth.url_error");
+      }
+    }
+    return errors;
   };
 
   const handleSubmit = auth => {
@@ -179,7 +191,7 @@ const LoginPage = () => {
   };
 
   const UserData = ({ formData }) => {
-    const form = useFormContext();
+    const form = useForm();
     const [serverVersion, setServerVersion] = useState("");
 
     const handleUsernameChange = _ => {
@@ -192,11 +204,11 @@ const LoginPage = () => {
         fetchUtils
           .fetchJson(wellKnownUrl, { method: "GET" })
           .then(({ json }) => {
-            form.setValue("base_url", json["m.homeserver"].base_url);
+            form.change("base_url", json["m.homeserver"].base_url);
           })
           .catch(_ => {
             // if there is no .well-known entry, try the home server name
-            form.setValue("base_url", `https://${home_server}`);
+            form.change("base_url", `https://${home_server}`);
           });
       }
     };
@@ -205,9 +217,7 @@ const LoginPage = () => {
       _ => {
         if (
           !formData.base_url ||
-          !formData.base_url.match(
-            /^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?$/
-          )
+          !formData.base_url.match(/^(http|https):\/\/[a-zA-Z0-9\-.]+$/)
         )
           return;
         const versionUrl = `${formData.base_url}/_synapse/admin/v1/server_version`;
@@ -253,8 +263,8 @@ const LoginPage = () => {
     );
 
     return (
-      <>
-        <Box>
+      <div>
+        <div className={classes.input}>
           <TextInput
             autoFocus
             name="username"
@@ -264,11 +274,9 @@ const LoginPage = () => {
             onBlur={handleUsernameChange}
             resettable
             fullWidth
-            className="input"
-            validate={required()}
           />
-        </Box>
-        <Box>
+        </div>
+        <div className={classes.input}>
           <PasswordInput
             name="password"
             component={renderInput}
@@ -277,11 +285,9 @@ const LoginPage = () => {
             disabled={loading || !supportPassAuth}
             resettable
             fullWidth
-            className="input"
-            validate={required()}
           />
-        </Box>
-        <Box>
+        </div>
+        <div className={classes.input}>
           <TextInput
             name="base_url"
             component={renderInput}
@@ -289,75 +295,80 @@ const LoginPage = () => {
             disabled={cfg_base_url || loading}
             resettable
             fullWidth
-            className="input"
-            validate={[required(), validateBaseUrl]}
           />
-        </Box>
-        <Typography className="serverVersion">{serverVersion}</Typography>
-      </>
+        </div>
+        <div className={classes.serverVersion}>{serverVersion}</div>
+      </div>
     );
   };
 
   return (
     <Form
-      defaultValues={{ base_url: cfg_base_url || base_url }}
+      initialValues={{ base_url: cfg_base_url || base_url }}
       onSubmit={handleSubmit}
-      mode="onTouched"
-    >
-      <FormBox>
-        <Card className="card">
-          <Box className="avatar">
-            <Avatar className="icon">
-              <LockIcon />
-            </Avatar>
-          </Box>
-          <Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>
-          <Box className="form">
-            <Select
-              value={locale}
-              onChange={e => {
-                setLocale(e.target.value);
-              }}
-              fullWidth
-              disabled={loading}
-              className="input"
-            >
-              <MenuItem value="de">Deutsch</MenuItem>
-              <MenuItem value="en">English</MenuItem>
-              <MenuItem value="fr">Français</MenuItem>
-              <MenuItem value="it">Italiano</MenuItem>
-              <MenuItem value="zh">简体中文</MenuItem>
-            </Select>
-            <FormDataConsumer>
-              {formDataProps => <UserData {...formDataProps} />}
-            </FormDataConsumer>
-            <CardActions className="actions">
-              <Button
-                variant="contained"
-                type="submit"
-                color="primary"
-                disabled={loading || !supportPassAuth}
-                fullWidth
-              >
-                {loading && <CircularProgress size={25} thickness={2} />}
-                {translate("ra.auth.sign_in")}
-              </Button>
-              <Button
-                variant="contained"
-                color="secondary"
-                onClick={handleSSO}
-                disabled={loading || ssoBaseUrl === ""}
-                fullWidth
-              >
-                {loading && <CircularProgress size={25} thickness={2} />}
-                {translate("synapseadmin.auth.sso_sign_in")}
-              </Button>
-            </CardActions>
-          </Box>
-        </Card>
-      </FormBox>
-      <Notification />
-    </Form>
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit} noValidate>
+          <div className={classes.main}>
+            <Card className={classes.card}>
+              <div className={classes.avatar}>
+                <Avatar className={classes.icon}>
+                  <LockIcon />
+                </Avatar>
+              </div>
+              <div className={classes.hint}>
+                {translate("synapseadmin.auth.welcome")}
+              </div>
+              <div className={classes.form}>
+                <div className={classes.input}>
+                  <Select
+                    value={locale}
+                    onChange={e => {
+                      setLocale(e.target.value);
+                    }}
+                    fullWidth
+                    disabled={loading}
+                  >
+                    <MenuItem value="de">Deutsch</MenuItem>
+                    <MenuItem value="en">English</MenuItem>
+                    <MenuItem value="fr">Français</MenuItem>
+                    <MenuItem value="zh">简体中文</MenuItem>
+                  </Select>
+                </div>
+                <FormDataConsumer>
+                  {formDataProps => <UserData {...formDataProps} />}
+                </FormDataConsumer>
+              </div>
+              <CardActions className={classes.actions}>
+                <Button
+                  variant="contained"
+                  type="submit"
+                  color="primary"
+                  disabled={loading || !supportPassAuth}
+                  className={classes.button}
+                  fullWidth
+                >
+                  {loading && <CircularProgress size={25} thickness={2} />}
+                  {translate("ra.auth.sign_in")}
+                </Button>
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  onClick={handleSSO}
+                  disabled={loading || ssoBaseUrl === ""}
+                  className={classes.button}
+                  fullWidth
+                >
+                  {loading && <CircularProgress size={25} thickness={2} />}
+                  {translate("synapseadmin.auth.sso_sign_in")}
+                </Button>
+              </CardActions>
+            </Card>
+            <Notification />
+          </div>
+        </form>
+      )}
+    />
   );
 };
 

src/components/LoginPage.test.js

@@ -1,14 +1,14 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { AdminContext } from "react-admin";
+import { TestContext } from "ra-test";
 import LoginPage from "./LoginPage";
 
 describe("LoginForm", () => {
   it("renders", () => {
     render(
-      <AdminContext>
+      <TestContext>
         <LoginPage />
-      </AdminContext>
+      </TestContext>
     );
   });
 });

src/components/Menu.js

@@ -0,0 +1,39 @@
+// in src/Menu.js
+import * as React from "react";
+import { useSelector } from "react-redux";
+import { useMediaQuery } from "@mui/material";
+import { MenuItemLink, getResources } from "react-admin";
+import DefaultIcon from "@mui/icons-material/ViewList";
+import LabelIcon from "@mui/icons-material/Label";
+
+const Menu = ({ onMenuClick, logout }) => {
+  const isXSmall = useMediaQuery(theme => theme.breakpoints.down("xs"));
+  const open = useSelector(state => state.admin.ui.sidebarOpen);
+  const resources = useSelector(getResources);
+  return (
+    <div>
+      {resources.map(resource => (
+        <MenuItemLink
+          key={resource.name}
+          to={`/${resource.name}`}
+          primaryText={
+            (resource.options && resource.options.label) || resource.name
+          }
+          leftIcon={resource.icon ? <resource.icon /> : <DefaultIcon />}
+          onClick={onMenuClick}
+          sidebarIsOpen={open}
+        />
+      ))}
+      <MenuItemLink
+        to="/custom-route"
+        primaryText="Miscellaneous"
+        leftIcon={<LabelIcon />}
+        onClick={onMenuClick}
+        sidebarIsOpen={open}
+      />
+      {isXSmall && logout}
+    </div>
+  );
+};
+
+export default Menu;

src/components/RoomDirectory.js

@@ -1,28 +1,34 @@
 import React, { Fragment } from "react";
+import { Avatar, Chip } from "@mui/material";
+import { connect } from "react-redux";
 import FolderSharedIcon from "@mui/icons-material/FolderShared";
+import { makeStyles } from "@material-ui/core/styles";
 import {
   BooleanField,
   BulkDeleteButton,
   Button,
-  DatagridConfigurable,
-  ExportButton,
+  Datagrid,
   DeleteButton,
+  Filter,
   List,
   NumberField,
   Pagination,
-  SelectColumnsButton,
   TextField,
-  TopToolbar,
   useCreate,
-  useListContext,
+  useMutation,
   useNotify,
   useTranslate,
   useRecordContext,
   useRefresh,
   useUnselectAll,
 } from "react-admin";
-import { useMutation } from "react-query";
-import AvatarField from "./AvatarField";
+
+const useStyles = makeStyles({
+  small: {
+    height: "40px",
+    width: "40px",
+  },
+});
 
 const RoomDirectoryPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[100, 500, 1000, 2000]} />
@@ -61,23 +67,26 @@ export const RoomDirectoryBulkDeleteButton = props => (
   />
 );
 
-export const RoomDirectoryBulkSaveButton = () => {
-  const { selectedIds } = useListContext();
+export const RoomDirectoryBulkSaveButton = ({ selectedIds }) => {
   const notify = useNotify();
   const refresh = useRefresh();
   const unselectAll = useUnselectAll();
-  const { createMany, isloading } = useMutation();
+  const [createMany, { loading }] = useMutation();
 
   const handleSend = values => {
     createMany(
-      ["room_directory", "createMany", { ids: selectedIds, data: {} }],
       {
-        onSuccess: data => {
+        type: "createMany",
+        resource: "room_directory",
+        payload: { ids: selectedIds, data: {} },
+      },
+      {
+        onSuccess: ({ data }) => {
           notify("resources.room_directory.action.send_success");
           unselectAll("rooms");
           refresh();
         },
-        onError: error =>
+        onFailure: error =>
           notify("resources.room_directory.action.send_failure", {
             type: "error",
           }),
@@ -89,29 +98,30 @@ export const RoomDirectoryBulkSaveButton = () => {
     <Button
       label="resources.room_directory.action.create"
       onClick={handleSend}
-      disabled={isloading}
+      disabled={loading}
     >
       <FolderSharedIcon />
     </Button>
   );
 };
 
-export const RoomDirectorySaveButton = () => {
+export const RoomDirectorySaveButton = props => {
   const record = useRecordContext();
   const notify = useNotify();
   const refresh = useRefresh();
-  const [create, { isloading }] = useCreate();
+  const [create, { loading }] = useCreate("room_directory");
 
   const handleSend = values => {
     create(
-      "room_directory",
-      { data: { id: record.id } },
       {
-        onSuccess: data => {
+        payload: { data: { id: record.id } },
+      },
+      {
+        onSuccess: ({ data }) => {
           notify("resources.room_directory.action.send_success");
           refresh();
         },
-        onError: error =>
+        onFailure: error =>
           notify("resources.room_directory.action.send_failure", {
             type: "error",
           }),
@@ -123,78 +133,128 @@ export const RoomDirectorySaveButton = () => {
     <Button
       label="resources.room_directory.action.create"
       onClick={handleSend}
-      disabled={isloading}
+      disabled={loading}
     >
       <FolderSharedIcon />
     </Button>
   );
 };
 
-const RoomDirectoryBulkActionButtons = () => (
+const RoomDirectoryBulkActionButtons = props => (
   <Fragment>
-    <RoomDirectoryBulkDeleteButton />
+    <RoomDirectoryBulkDeleteButton {...props} />
   </Fragment>
 );
 
-const RoomDirectoryListActions = () => (
-  <TopToolbar>
-    <SelectColumnsButton />
-    <ExportButton />
-  </TopToolbar>
+const AvatarField = ({ source, className, record = {} }) => (
+  <Avatar src={record[source]} className={className} />
 );
 
-export const RoomDirectoryList = () => (
-  <List
-    pagination={<RoomDirectoryPagination />}
-    perPage={100}
-    actions={<RoomDirectoryListActions />}
-  >
-    <DatagridConfigurable
-      rowClick={(id, resource, record) => "/rooms/" + id + "/show"}
-      bulkActionButtons={<RoomDirectoryBulkActionButtons />}
-      omit={["room_id", "canonical_alias", "topic"]}
-    >
-      <AvatarField
-        source="avatar_src"
-        sortable={false}
-        sx={{ height: "40px", width: "40px" }}
-        label="resources.rooms.fields.avatar"
-      />
-      <TextField
-        source="name"
-        sortable={false}
-        label="resources.rooms.fields.name"
-      />
-      <TextField
+const RoomDirectoryFilter = ({ ...props }) => {
+  const translate = useTranslate();
+  return (
+    <Filter {...props}>
+      <Chip
+        label={translate("resources.rooms.fields.room_id")}
         source="room_id"
-        sortable={false}
-        label="resources.rooms.fields.room_id"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
       />
-      <TextField
-        source="canonical_alias"
-        sortable={false}
-        label="resources.rooms.fields.canonical_alias"
-      />
-      <TextField
+      <Chip
+        label={translate("resources.rooms.fields.topic")}
         source="topic"
-        sortable={false}
-        label="resources.rooms.fields.topic"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
       />
-      <NumberField
-        source="num_joined_members"
-        sortable={false}
-        label="resources.rooms.fields.joined_members"
+      <Chip
+        label={translate("resources.rooms.fields.canonical_alias")}
+        source="canonical_alias"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
       />
-      <BooleanField
-        source="world_readable"
-        sortable={false}
-        label="resources.room_directory.fields.world_readable"
-      />
-      <BooleanField
-        source="guest_can_join"
-        sortable={false}
-        label="resources.room_directory.fields.guest_can_join"
-      />
-    </DatagridConfigurable>
-  </List>
+    </Filter>
+  );
+};
+
+export const FilterableRoomDirectoryList = ({
+  roomDirectoryFilters,
+  dispatch,
+  ...props
+}) => {
+  const classes = useStyles();
+  const filter = 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 rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}>
+        <AvatarField
+          source="avatar_src"
+          sortable={false}
+          className={classes.small}
+          label="resources.rooms.fields.avatar"
+        />
+        <TextField
+          source="name"
+          sortable={false}
+          label="resources.rooms.fields.name"
+        />
+        {roomIdFilter && (
+          <TextField
+            source="room_id"
+            sortable={false}
+            label="resources.rooms.fields.room_id"
+          />
+        )}
+        {canonicalAliasFilter && (
+          <TextField
+            source="canonical_alias"
+            sortable={false}
+            label="resources.rooms.fields.canonical_alias"
+          />
+        )}
+        {topicFilter && (
+          <TextField
+            source="topic"
+            sortable={false}
+            label="resources.rooms.fields.topic"
+          />
+        )}
+        <NumberField
+          source="num_joined_members"
+          sortable={false}
+          label="resources.rooms.fields.joined_members"
+        />
+        <BooleanField
+          source="world_readable"
+          sortable={false}
+          label="resources.room_directory.fields.world_readable"
+        />
+        <BooleanField
+          source="guest_can_join"
+          sortable={false}
+          label="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/ServerNotices.js

@@ -7,13 +7,12 @@ import {
   Toolbar,
   required,
   useCreate,
-  useListContext,
+  useMutation,
   useNotify,
   useRecordContext,
   useTranslate,
   useUnselectAll,
 } from "react-admin";
-import { useMutation } from "react-query";
 import MessageIcon from "@mui/icons-material/Message";
 import IconCancel from "@mui/icons-material/Cancel";
 import {
@@ -49,6 +48,7 @@ const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
         </DialogContentText>
         <SimpleForm
           toolbar={<ServerNoticeToolbar />}
+          submitOnEnter={false}
           redirect={false}
           save={onSend}
         >
@@ -67,11 +67,11 @@ const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
   );
 };
 
-export const ServerNoticeButton = () => {
+export const ServerNoticeButton = props => {
   const record = useRecordContext();
   const [open, setOpen] = useState(false);
   const notify = useNotify();
-  const [create, { isloading }] = useCreate("servernotices");
+  const [create, { loading }] = useCreate("servernotices");
 
   const handleDialogOpen = () => setOpen(true);
   const handleDialogClose = () => setOpen(false);
@@ -84,7 +84,7 @@ export const ServerNoticeButton = () => {
           notify("resources.servernotices.action.send_success");
           handleDialogClose();
         },
-        onError: () =>
+        onFailure: () =>
           notify("resources.servernotices.action.send_failure", {
             type: "error",
           }),
@@ -97,7 +97,7 @@ export const ServerNoticeButton = () => {
       <Button
         label="resources.servernotices.send"
         onClick={handleDialogOpen}
-        disabled={isloading}
+        disabled={loading}
       >
         <MessageIcon />
       </Button>
@@ -110,26 +110,29 @@ export const ServerNoticeButton = () => {
   );
 };
 
-export const ServerNoticeBulkButton = () => {
-  const { selectedIds } = useListContext();
+export const ServerNoticeBulkButton = ({ selectedIds }) => {
   const [open, setOpen] = useState(false);
   const notify = useNotify();
   const unselectAll = useUnselectAll();
-  const { createMany, isloading } = useMutation();
+  const [createMany, { loading }] = useMutation();
 
   const handleDialogOpen = () => setOpen(true);
   const handleDialogClose = () => setOpen(false);
 
   const handleSend = values => {
     createMany(
-      ["servernotices", "createMany", { ids: selectedIds, data: values }],
       {
-        onSuccess: data => {
+        type: "createMany",
+        resource: "servernotices",
+        payload: { ids: selectedIds, data: values },
+      },
+      {
+        onSuccess: ({ data }) => {
           notify("resources.servernotices.action.send_success");
           unselectAll("users");
           handleDialogClose();
         },
-        onError: error =>
+        onFailure: error =>
           notify("resources.servernotices.action.send_failure", {
             type: "error",
           }),
@@ -142,7 +145,7 @@ export const ServerNoticeBulkButton = () => {
       <Button
         label="resources.servernotices.send"
         onClick={handleDialogOpen}
-        disabled={isloading}
+        disabled={loading}
       >
         <MessageIcon />
       </Button>

src/components/destinations.js

@@ -20,9 +20,9 @@ import {
   useRefresh,
   useTranslate,
 } from "react-admin";
-import AutorenewIcon from "@mui/icons-material/Autorenew";
-import FolderSharedIcon from "@mui/icons-material/FolderShared";
-import ViewListIcon from "@mui/icons-material/ViewList";
+import AutorenewIcon from "@material-ui/icons/Autorenew";
+import FolderSharedIcon from "@material-ui/icons/FolderShared";
+import ViewListIcon from "@material-ui/icons/ViewList";
 
 const DestinationPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -37,11 +37,11 @@ const date_format = {
   second: "2-digit",
 };
 
-const destinationRowSx = (record, _index) => ({
+const destinationRowStyle = (record, index) => ({
   backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "white",
 });
 
-const DestinationFilter = props => {
+const DestinationFilter = ({ ...props }) => {
   return (
     <Filter {...props}>
       <SearchInput source="destination" alwaysOn />
@@ -71,7 +71,7 @@ export const DestinationReconnectButton = props => {
           });
           refresh();
         },
-        onError: () => {
+        onFailure: () => {
           notify("ra.message.error", { type: "error" });
         },
       }
@@ -112,11 +112,11 @@ export const DestinationList = props => {
       filters={<DestinationFilter />}
       pagination={<DestinationPagination />}
       sort={{ field: "destination", order: "ASC" }}
+      bulkActionButtons={false}
     >
       <Datagrid
-        rowSx={destinationRowSx}
-        rowClick={(id, _resource, _record) => `${id}/show/rooms`}
-        bulkActionButtons={false}
+        rowStyle={destinationRowStyle}
+        rowClick={(id, basePath, record) => `${basePath}/${id}/show/rooms`}
       >
         <TextField source="destination" />
         <DateField source="failure_ts" showTime options={date_format} />
@@ -160,7 +160,7 @@ export const DestinationShow = props => {
           >
             <Datagrid
               style={{ width: "100%" }}
-              rowClick={(id, resource, record) => `/rooms/${id}/show`}
+              rowClick={(id, basePath, record) => `/rooms/${id}/show`}
             >
               <TextField
                 source="room_id"

src/components/devices.js

@@ -8,11 +8,29 @@ import {
   useRefresh,
 } from "react-admin";
 import ActionDelete from "@mui/icons-material/Delete";
-import { alpha, useTheme } from "@mui/material/styles";
+import { makeStyles } from "@material-ui/core/styles";
+import { alpha } from "@mui/material/styles";
+import classnames from "classnames";
+
+const useStyles = makeStyles(
+  theme => ({
+    deleteButton: {
+      color: theme.palette.error.main,
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
+        // Reset on mouse devices
+        "@media (hover: none)": {
+          backgroundColor: "transparent",
+        },
+      },
+    },
+  }),
+  { name: "RaDeleteDeviceButton" }
+);
 
 export const DeviceRemoveButton = props => {
-  const theme = useTheme();
   const record = useRecordContext();
+  const classes = useStyles(props);
   const [open, setOpen] = useState(false);
   const refresh = useRefresh();
   const notify = useNotify();
@@ -45,16 +63,7 @@ export const DeviceRemoveButton = props => {
       <Button
         label="ra.action.remove"
         onClick={handleClick}
-        sx={{
-          color: theme.palette.error.main,
-          "&:hover": {
-            backgroundColor: alpha(theme.palette.error.main, 0.12),
-            // Reset on mouse devices
-            "@media (hover: none)": {
-              backgroundColor: "transparent",
-            },
-          },
-        }}
+        className={classnames("ra-delete-button", classes.deleteButton)}
       >
         <ActionDelete />
       </Button>

src/components/media.js

@@ -1,4 +1,7 @@
 import React, { Fragment, useState } from "react";
+import classnames from "classnames";
+import { alpha } from "@mui/material/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import {
   BooleanInput,
   Button,
@@ -27,7 +30,22 @@ import {
 import IconCancel from "@mui/icons-material/Cancel";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
-import { alpha, useTheme } from "@mui/material/styles";
+
+const useStyles = makeStyles(
+  theme => ({
+    deleteButton: {
+      color: theme.palette.error.main,
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
+        // Reset on mouse devices
+        "@media (hover: none)": {
+          backgroundColor: "transparent",
+        },
+      },
+    },
+  }),
+  { name: "RaDeleteDeviceButton" }
+);
 
 const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
   const translate = useTranslate();
@@ -63,6 +81,7 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
         </DialogContentText>
         <SimpleForm
           toolbar={<DeleteMediaToolbar />}
+          submitOnEnter={false}
           redirect={false}
           save={onSend}
         >
@@ -94,10 +113,10 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
 };
 
 export const DeleteMediaButton = props => {
-  const theme = useTheme();
+  const classes = useStyles(props);
   const [open, setOpen] = useState(false);
   const notify = useNotify();
-  const [deleteOne, { isLoading }] = useDelete("delete_media");
+  const [deleteOne, { loading }] = useDelete("delete_media");
 
   const handleDialogOpen = () => setOpen(true);
   const handleDialogClose = () => setOpen(false);
@@ -110,7 +129,7 @@ export const DeleteMediaButton = props => {
           notify("resources.delete_media.action.send_success");
           handleDialogClose();
         },
-        onError: () =>
+        onFailure: () =>
           notify("resources.delete_media.action.send_failure", {
             type: "error",
           }),
@@ -123,17 +142,8 @@ export const DeleteMediaButton = props => {
       <Button
         label="resources.delete_media.action.send"
         onClick={handleDialogOpen}
-        disabled={isLoading}
-        sx={{
-          color: theme.palette.error.main,
-          "&:hover": {
-            backgroundColor: alpha(theme.palette.error.main, 0.12),
-            // Reset on mouse devices
-            "@media (hover: none)": {
-              backgroundColor: "transparent",
-            },
-          },
-        }}
+        disabled={loading}
+        className={classnames("ra-delete-button", classes.deleteButton)}
       >
         <DeleteSweepIcon />
       </Button>
@@ -164,7 +174,7 @@ export const ProtectMediaButton = props => {
           notify("resources.protect_media.action.send_success");
           refresh();
         },
-        onError: () =>
+        onFailure: () =>
           notify("resources.protect_media.action.send_failure", {
             type: "error",
           }),
@@ -180,7 +190,7 @@ export const ProtectMediaButton = props => {
           notify("resources.protect_media.action.send_success");
           refresh();
         },
-        onError: () =>
+        onFailure: () =>
           notify("resources.protect_media.action.send_failure", {
             type: "error",
           }),
@@ -260,7 +270,7 @@ export const QuarantineMediaButton = props => {
           notify("resources.quarantine_media.action.send_success");
           refresh();
         },
-        onError: () =>
+        onFailure: () =>
           notify("resources.quarantine_media.action.send_failure", {
             type: "error",
           }),
@@ -276,7 +286,7 @@ export const QuarantineMediaButton = props => {
           notify("resources.quarantine_media.action.send_success");
           refresh();
         },
-        onError: () =>
+        onFailure: () =>
           notify("resources.quarantine_media.action.send_failure", {
             type: "error",
           }),

src/components/rooms.js

@@ -1,21 +1,18 @@
 import React, { Fragment } from "react";
+import { connect } from "react-redux";
 import {
   BooleanField,
   BulkDeleteButton,
   DateField,
   Datagrid,
-  DatagridConfigurable,
   DeleteButton,
-  ExportButton,
   Filter,
-  FunctionField,
   List,
   NumberField,
   Pagination,
   ReferenceField,
   ReferenceManyField,
   SearchInput,
-  SelectColumnsButton,
   SelectField,
   Show,
   Tab,
@@ -25,8 +22,10 @@ import {
   useRecordContext,
   useTranslate,
 } from "react-admin";
-import { useTheme } from "@mui/material/styles";
-import Box from "@mui/material/Box";
+import get from "lodash/get";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import { Tooltip, Typography, Chip } from "@mui/material";
 import FastForwardIcon from "@mui/icons-material/FastForward";
 import HttpsIcon from "@mui/icons-material/Https";
 import NoEncryptionIcon from "@mui/icons-material/NoEncryption";
@@ -51,10 +50,43 @@ const date_format = {
   second: "2-digit",
 };
 
+const useStyles = makeStyles(theme => ({
+  helper_forward_extremities: {
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    margin: "0.5em",
+  },
+}));
+
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
 
+const EncryptionField = ({ source, record = {}, emptyText }) => {
+  const translate = useTranslate();
+  const value = get(record, source);
+  let ariaLabel = value === false ? "ra.boolean.false" : "ra.boolean.true";
+
+  if (value === false || value === true) {
+    return (
+      <Typography component="span" variant="body2">
+        <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
+          {value === true ? (
+            <HttpsIcon data-testid="true" htmlColor="limegreen" />
+          ) : (
+            <NoEncryptionIcon data-testid="false" color="error" />
+          )}
+        </Tooltip>
+      </Typography>
+    );
+  }
+
+  return (
+    <Typography component="span" variant="body2">
+      {emptyText}
+    </Typography>
+  );
+};
+
 const RoomTitle = props => {
   const record = useRecordContext();
   const translate = useTranslate();
@@ -70,7 +102,7 @@ const RoomTitle = props => {
   );
 };
 
-const RoomShowActions = ({ data, resource }) => {
+const RoomShowActions = ({ basePath, data, resource }) => {
   var roomDirectoryStatus = "";
   if (data) {
     roomDirectoryStatus = data.public;
@@ -85,6 +117,7 @@ const RoomShowActions = ({ data, resource }) => {
         <RoomDirectoryDeleteButton record={data} />
       )}
       <DeleteButton
+        basePath={basePath}
         record={data}
         resource={resource}
         mutationMode="pessimistic"
@@ -96,6 +129,7 @@ const RoomShowActions = ({ data, resource }) => {
 };
 
 export const RoomShow = props => {
+  const classes = useStyles({ props });
   const translate = useTranslate();
   return (
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
@@ -137,7 +171,7 @@ export const RoomShow = props => {
           >
             <Datagrid
               style={{ width: "100%" }}
-              rowClick={(id, resource, record) => "/users/" + id}
+              rowClick={(id, basePath, record) => "/users/" + id}
             >
               <TextField
                 source="id"
@@ -247,14 +281,9 @@ export const RoomShow = props => {
           icon={<FastForwardIcon />}
           path="forward_extremities"
         >
-          <Box
-            sx={{
-              fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-              margin: "0.5em",
-            }}
-          >
+          <div className={classes.helper_forward_extremities}>
             {translate("resources.rooms.helper.forward_extremities")}
-          </Box>
+          </div>
           <ReferenceManyField
             reference="forward_extremities"
             target="room_id"
@@ -278,11 +307,12 @@ export const RoomShow = props => {
   );
 };
 
-const RoomBulkActionButtons = () => (
+const RoomBulkActionButtons = props => (
   <Fragment>
-    <RoomDirectoryBulkSaveButton />
-    <RoomDirectoryBulkDeleteButton />
+    <RoomDirectoryBulkSaveButton {...props} />
+    <RoomDirectoryBulkDeleteButton {...props} />
     <BulkDeleteButton
+      {...props}
       confirmTitle="resources.rooms.action.erase.title"
       confirmContent="resources.rooms.action.erase.content"
       mutationMode="pessimistic"
@@ -290,63 +320,91 @@ const RoomBulkActionButtons = () => (
   </Fragment>
 );
 
-const RoomFilter = props => (
-  <Filter {...props}>
-    <SearchInput source="search_term" alwaysOn />
-  </Filter>
-);
+const RoomFilter = ({ ...props }) => {
+  const translate = useTranslate();
+  return (
+    <Filter {...props}>
+      <SearchInput source="search_term" alwaysOn />
+      <Chip
+        label={translate("resources.rooms.fields.joined_local_members")}
+        source="joined_local_members"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.state_events")}
+        source="state_events"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.version")}
+        source="version"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.federatable")}
+        source="federatable"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+    </Filter>
+  );
+};
 
-const RoomListActions = () => (
-  <TopToolbar>
-    <SelectColumnsButton />
-    <ExportButton />
-  </TopToolbar>
-);
+const RoomNameField = props => {
+  const { source } = props;
+  const record = useRecordContext();
+  return (
+    <span>{record[source] || record["canonical_alias"] || record["id"]}</span>
+  );
+};
 
-export const RoomList = () => {
-  const theme = useTheme();
+RoomNameField.propTypes = {
+  label: PropTypes.string,
+  record: PropTypes.object,
+  source: PropTypes.string.isRequired,
+};
+
+const FilterableRoomList = ({ roomFilters, dispatch, ...props }) => {
+  const filter = roomFilters;
+  const localMembersFilter =
+    filter && filter.joined_local_members ? true : false;
+  const stateEventsFilter = filter && filter.state_events ? true : false;
+  const versionFilter = filter && filter.version ? true : false;
+  const federateableFilter = filter && filter.federatable ? true : false;
 
   return (
     <List
+      {...props}
       pagination={<RoomPagination />}
       sort={{ field: "name", order: "ASC" }}
       filters={<RoomFilter />}
-      actions={<RoomListActions />}
+      bulkActionButtons={<RoomBulkActionButtons />}
     >
-      <DatagridConfigurable
-        rowClick="show"
-        bulkActionButtons={<RoomBulkActionButtons />}
-        omit={[
-          "joined_local_members",
-          "state_events",
-          "version",
-          "federatable",
-        ]}
-      >
-        <BooleanField
+      <Datagrid rowClick="show">
+        <EncryptionField
           source="is_encrypted"
           sortBy="encryption"
-          TrueIcon={HttpsIcon}
-          FalseIcon={NoEncryptionIcon}
           label={<HttpsIcon />}
-          sx={{
-            [`& [data-testid="true"]`]: { color: theme.palette.success.main },
-            [`& [data-testid="false"]`]: { color: theme.palette.error.main },
-          }}
-        />
-        <FunctionField
-          source="name"
-          render={record =>
-            record["name"] || record["canonical_alias"] || record["id"]
-          }
         />
+        <RoomNameField source="name" />
         <TextField source="joined_members" />
-        <TextField source="joined_local_members" />
-        <TextField source="state_events" />
-        <TextField source="version" />
-        <BooleanField source="federatable" />
+        {localMembersFilter && <TextField source="joined_local_members" />}
+        {stateEventsFilter && <TextField source="state_events" />}
+        {versionFilter && <TextField source="version" />}
+        {federateableFilter && <BooleanField source="federatable" />}
         <BooleanField source="public" />
-      </DatagridConfigurable>
+      </Datagrid>
     </List>
   );
 };
+
+function mapStateToProps(state) {
+  return {
+    roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
+  };
+}
+
+export const RoomList = connect(mapStateToProps)(FilterableRoomList);

src/components/statistics.js

@@ -65,11 +65,9 @@ export const UserMediaStatsList = props => {
       filters={<UserMediaStatsFilter />}
       pagination={<UserMediaStatsPagination />}
       sort={{ field: "media_length", order: "DESC" }}
+      bulkActionButtons={false}
     >
-      <Datagrid
-        rowClick={(id, resource, record) => "/users/" + id + "/media"}
-        bulkActionButtons={false}
-      >
+      <Datagrid rowClick={(id, basePath, record) => "/users/" + id + "/media"}>
         <TextField source="user_id" label="resources.users.fields.id" />
         <TextField
           source="displayname"

src/components/users.js

@@ -1,4 +1,5 @@
 import React, { cloneElement, Fragment } from "react";
+import Avatar from "@mui/material/Avatar";
 import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
 import ContactMailIcon from "@mui/icons-material/ContactMail";
 import DevicesIcon from "@mui/icons-material/Devices";
@@ -48,10 +49,28 @@ import {
   NumberField,
 } from "react-admin";
 import { Link } from "react-router-dom";
-import AvatarField from "./AvatarField";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
 import { DeviceRemoveButton } from "./devices";
 import { ProtectMediaButton, QuarantineMediaButton } from "./media";
+import { makeStyles } from "@material-ui/core/styles";
+
+const redirect = () => {
+  return {
+    pathname: "/import_users",
+  };
+};
+
+const useStyles = makeStyles({
+  small: {
+    height: "40px",
+    width: "40px",
+  },
+  large: {
+    height: "120px",
+    width: "120px",
+    float: "right",
+  },
+});
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -82,6 +101,7 @@ const UserListActions = ({
   filterValues,
   permanentFilter,
   hasCreate, // you can hide CreateButton if hasCreate = false
+  basePath,
   selectedIds,
   onUnselectItems,
   showFilter,
@@ -99,7 +119,7 @@ const UserListActions = ({
           filterValues,
           context: "button",
         })}
-      <CreateButton />
+      <CreateButton basePath={basePath} />
       <ExportButton
         disabled={total === 0}
         resource={resource}
@@ -109,8 +129,8 @@ const UserListActions = ({
         maxResults={maxResults}
       />
       {/* Add your custom actions */}
-      <Button component={Link} to="/import_users" label="CSV Import">
-        <GetAppIcon sx={{ transform: "rotate(180deg)", fontSize: "20px" }} />
+      <Button component={Link} to={redirect} label="CSV Import">
+        <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
       </Button>
     </TopToolbar>
   );
@@ -149,7 +169,12 @@ const UserBulkActionButtons = props => (
   </Fragment>
 );
 
+const AvatarField = ({ source, className, record = {} }) => (
+  <Avatar src={record[source]} className={className} />
+);
+
 export const UserList = props => {
+  const classes = useStyles();
   return (
     <List
       {...props}
@@ -157,12 +182,13 @@ export const UserList = props => {
       filterDefaultValues={{ guests: true, deactivated: false }}
       sort={{ field: "name", order: "ASC" }}
       actions={<UserListActions maxResults={10000} />}
+      bulkActionButtons={<UserBulkActionButtons />}
       pagination={<UserPagination />}
     >
-      <Datagrid rowClick="edit" bulkActionButtons={<UserBulkActionButtons />}>
+      <Datagrid rowClick="edit">
         <AvatarField
           source="avatar_src"
-          sx={{ height: "40px", width: "40px" }}
+          className={classes.small}
           sortBy="avatar_url"
         />
         <TextField source="id" sortBy="name" />
@@ -236,7 +262,7 @@ export function generateRandomUser() {
 
 const UserEditToolbar = props => (
   <Toolbar {...props}>
-    <SaveButton disabled={props.pristine} />
+    <SaveButton submitOnEnter={true} disabled={props.pristine} />
   </Toolbar>
 );
 
@@ -276,6 +302,7 @@ export const UserCreate = props => (
         source="user_type"
         choices={choices_type}
         translateChoice={false}
+        allowEmpty={true}
         resettable
       />
       <BooleanInput source="admin" />
@@ -317,6 +344,7 @@ const UserTitle = props => {
 };
 
 export const UserEdit = props => {
+  const classes = useStyles();
   const translate = useTranslate();
   return (
     <Edit {...props} title={<UserTitle />} actions={<UserEditActions />}>
@@ -328,7 +356,7 @@ export const UserEdit = props => {
           <AvatarField
             source="avatar_src"
             sortable={false}
-            sx={{ height: "120px", width: "120px", float: "right" }}
+            className={classes.large}
           />
           <TextInput source="id" disabled />
           <TextInput source="displayname" />
@@ -341,6 +369,7 @@ export const UserEdit = props => {
             source="user_type"
             choices={choices_type}
             translateChoice={false}
+            allowEmpty={true}
             resettable
           />
           <BooleanInput source="admin" />
@@ -484,7 +513,7 @@ export const UserEdit = props => {
           >
             <Datagrid
               style={{ width: "100%" }}
-              rowClick={(id, resource, record) => "/rooms/" + id + "/show"}
+              rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}
             >
               <TextField
                 source="id"

src/i18n/it.js

@@ -1,385 +0,0 @@
-import italianMessages from "ra-language-italian";
-
-const it = {
-  ...italianMessages,
-  synapseadmin: {
-    auth: {
-      base_url: "URL dell'homeserver",
-      welcome: "Benvenuto in Synapse-admin",
-      server_version: "Versione di Synapse",
-      username_error:
-        "Per favore inserisci un ID utente completo: '@utente:dominio'",
-      protocol_error: "L'URL deve iniziare per 'http://' o 'https://'",
-      url_error: "URL del server Matrix non valido",
-      sso_sign_in: "Accedi con SSO",
-    },
-    users: {
-      invalid_user_id: "ID utente non valido su questo homeserver.",
-      tabs: { sso: "SSO" },
-    },
-    rooms: {
-      tabs: {
-        basic: "Semplice",
-        members: "Membro",
-        detail: "Dettagli",
-        permission: "Permessi",
-      },
-    },
-    reports: { tabs: { basic: "Semplice", detail: "Dettagli" } },
-  },
-  import_users: {
-    error: {
-      at_entry: "Alla voce %{entry}: %{message}",
-      error: "Errore",
-      required_field: "Il campo '%{field}' non è presente",
-      invalid_value:
-        "Valore non valido alla riga %{row}. '%{field}' Il campo può essere solo 'true' o 'false'",
-      unreasonably_big:
-        "Impossibile caricare un file così grosso (%{size} megabyte)",
-      already_in_progress: "Un import è attualmente già in caricamento",
-      id_exits: "L'ID %{id} è già presente",
-    },
-    title: "Importa utenti tramite file CSV",
-    goToPdf: "Vai al PDF",
-    cards: {
-      importstats: {
-        header: "Importa utenti",
-        users_total:
-          "%{smart_count} utente nel file CSV |||| %{smart_count} utenti nel file CSV",
-        guest_count: "%{smart_count} ospite |||| %{smart_count} ospiti",
-        admin_count:
-          "%{smart_count} amministratore |||| %{smart_count} amministratori",
-      },
-      conflicts: {
-        header: "Strategia di conflitto",
-        mode: {
-          stop: "Stoppa al conflitto",
-          skip: "Mostra l'errore e ignora il conflitto",
-        },
-      },
-      ids: {
-        header: "ID",
-        all_ids_present: "ID presenti in ogni voce",
-        count_ids_present:
-          "%{smart_count} voce con ID |||| %{smart_count} voci con ID",
-        mode: {
-          ignore: "Ignora gli ID nel file CSV e creane di nuovi",
-          update: "Aggiorna le voci esistenti",
-        },
-      },
-      passwords: {
-        header: "Passwords",
-        all_passwords_present: "Password presenti in ogni voce",
-        count_passwords_present:
-          "%{smart_count} voce con password |||| %{smart_count} voci con password",
-        use_passwords: "Usa le password dal file CSV",
-      },
-      upload: {
-        header: "Input file CSV",
-        explanation:
-          "Qui puoi caricare un file con valori separati da virgole che verrà poi utilizzato per creare o aggiornare gli utenti. Il file deve includere i campi 'id' and 'displayname'. Puoi scaricare un file di esempio per adattarlo: ",
-      },
-      startImport: {
-        simulate_only: "Solo simulazione",
-        run_import: "Importa",
-      },
-      results: {
-        header: "Importa i risultati",
-        total:
-          "%{smart_count} voce in totale |||| %{smart_count} voci in totale",
-        successful: "%{smart_count} voci importate con successo",
-        skipped: "%{smart_count} voci ignorate",
-        download_skipped: "Scarica le voci ignorate",
-        with_error:
-          "%{smart_count} voce con errori ||| %{smart_count} voci con errori",
-        simulated_only: "Il processo era stato solamente simulato",
-      },
-    },
-  },
-  resources: {
-    users: {
-      name: "Utente |||| Utenti",
-      email: "Email",
-      msisdn: "Telefono",
-      threepid: "Email / Telefono",
-      fields: {
-        avatar: "Avatar",
-        id: "ID utente",
-        name: "Nome",
-        is_guest: "Ospite",
-        admin: "Amministratore",
-        deactivated: "Disattivato",
-        guests: "Mostra gli ospiti",
-        show_deactivated: "Mostra gli utenti disattivati",
-        user_id: "Cerca utente",
-        displayname: "Nickname",
-        password: "Password",
-        avatar_url: "URL dell'avatar",
-        avatar_src: "Avatar",
-        medium: "Medium",
-        threepids: "3PID",
-        address: "Indirizzo",
-        creation_ts_ms: "Creazione del timestamp",
-        consent_version: "Versione minima richiesta",
-        auth_provider: "Provider",
-        user_type: "Tipo d'utente",
-      },
-      helper: {
-        password:
-          "Cambiando la password l'utente verrà disconnesso da tutte le sessioni attive.",
-        deactivate: "Devi fornire una password per riattivare l'account.",
-        erase: "Constrassegna l'utente come cancellato dal GDPR",
-      },
-      action: {
-        erase: "Cancella i dati dell'utente",
-      },
-    },
-    rooms: {
-      name: "Stanza |||| Stanze",
-      fields: {
-        room_id: "ID della stanza",
-        name: "Nome",
-        canonical_alias: "Alias",
-        joined_members: "Membri",
-        joined_local_members: "Membri locali",
-        joined_local_devices: "Dispositivi locali",
-        state_events: "Eventi di stato / Complessità",
-        version: "Versione",
-        is_encrypted: "Criptato",
-        encryption: "Crittografia",
-        federatable: "Federabile",
-        public: "Visibile nella cartella della stanza",
-        creator: "Creatore",
-        join_rules: "Regole per entrare",
-        guest_access: "Entra come ospite",
-        history_visibility: "Visibilità temporale",
-        topic: "Topic",
-        avatar: "Avatar",
-      },
-      helper: {
-        /*        forward_extremities:
-          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.", */
-      },
-      enums: {
-        join_rules: {
-          public: "Pubblica",
-          knock: "Bussa",
-          invite: "Invita",
-          private: "Privata",
-        },
-        guest_access: {
-          can_join: "Gli utenti ospiti possono entrare",
-          forbidden: "Gli utenti ospiti non possono entrare",
-        },
-        history_visibility: {
-          invited: "Dall'invito",
-          joined: "Dall'entrata",
-          shared: "Dalla condivisione",
-          world_readable: "Chiunque",
-        },
-        unencrypted: "Non criptata",
-      },
-      action: {
-        erase: {
-          title: "Cancella stanza",
-          content:
-            "Sei sicuro di voler eliminare questa stanza? Questa azione è definitiva. Tutti i messaggi e i media condivisi in questa stanza verranno eliminati dal server!",
-        },
-      },
-    },
-    reports: {
-      name: "Evento segnalato |||| Eventi segnalati",
-      fields: {
-        id: "ID",
-        received_ts: "Orario del report",
-        user_id: "richiedente",
-        name: "nome della stanza",
-        score: "punteggio",
-        reason: "ragione",
-        event_id: "ID dell'evento",
-        event_json: {
-          origin: "server di origine",
-          origin_server_ts: "ora dell'invio",
-          type: "tipo di evento",
-          content: {
-            msgtype: "tipo di contenuto",
-            body: "contenuto",
-            format: "formato",
-            formatted_body: "contenuto formattato",
-            algorithm: "algoritmo",
-          },
-        },
-      },
-    },
-    connections: {
-      name: "Connessioni",
-      fields: {
-        last_seen: "Data",
-        ip: "Indirizzo IP",
-        user_agent: "agente utente",
-      },
-    },
-    devices: {
-      name: "Dispositivo |||| Dispositivi",
-      fields: {
-        device_id: "ID del dispositivo",
-        display_name: "Nome del dispositivo",
-        last_seen_ts: "Timestamp",
-        last_seen_ip: "Indirizzo IP",
-      },
-      action: {
-        erase: {
-          title: "Rimozione del dispositivo %{id}",
-          content: 'Sei sicuro di voler rimuovere il dispositivo "%{name}"?',
-          success: "Dispositivo rimosso con successo.",
-          failure: "C'è stato un errore.",
-        },
-      },
-    },
-    users_media: {
-      name: "Media",
-      fields: {
-        media_id: "ID del media",
-        media_length: "Peso del file (in Byte)",
-        media_type: "Tipo",
-        upload_name: "Nome del file",
-        quarantined_by: "In quarantena da",
-        safe_from_quarantine: "Protetto dalla quarantena",
-        created_ts: "Creato",
-        last_access_ts: "Ultimo accesso",
-      },
-    },
-    delete_media: {
-      name: "Media",
-      fields: {
-        before_ts: "ultimo accesso effettuato prima",
-        size_gt: "Più grande di (in byte)",
-        keep_profiles: "Mantieni le immagini del profilo",
-      },
-      action: {
-        send: "Cancella media",
-        send_success: "Richiesta inviata con successo.",
-        send_failure: "C'è stato un errore.",
-      },
-      helper: {
-        send: "Questa API cancella i media locali dal disco del tuo server. Questo include anche ogni miniatura e copia del media scaricato. Questa API non inciderà sui media che sono stati caricati nei repository esterni.",
-      },
-    },
-    protect_media: {
-      action: {
-        create: "Non protetto, proteggi",
-        delete: "Protetto, rimuovi protezione",
-        none: "In quarantena",
-        send_success: "Stato della protezione cambiato con successo.",
-        send_failure: "C'è stato un errore.",
-      },
-    },
-    quarantine_media: {
-      action: {
-        name: "Quarantina",
-        create: "Aggiungi alla quarantena",
-        delete: "In quarantena, rimuovi dalla quarantena",
-        none: "Protetto dalla quarantena",
-        send_success: "Stato della quarantena cambiato con successo.",
-        send_failure: "C'è stato un errore.",
-      },
-    },
-    pushers: {
-      name: "Pusher |||| Pusher",
-      fields: {
-        app: "App",
-        app_display_name: "Nome dell'app",
-        app_id: "ID dell'app",
-        device_display_name: "Nome del dispositivo",
-        kind: "Tipo",
-        lang: "Lingua",
-        profile_tag: "Tag del profilo",
-        pushkey: "Pushkey",
-        data: { url: "URL" },
-      },
-    },
-    servernotices: {
-      name: "Avvisi del server",
-      send: "Invia avvisi",
-      fields: {
-        body: "Messaggio",
-      },
-      action: {
-        send: "Invia nota",
-        send_success: "Avviso inviato con successo.",
-        send_failure: "C'è stato un errore.",
-      },
-      helper: {
-        send: 'Invia un avviso dal server agli utenti selezionati. La feature "Avvisi del server" è stata attivata sul server.',
-      },
-    },
-    user_media_statistics: {
-      name: "Media degli utenti",
-      fields: {
-        media_count: "Numero media",
-        media_length: "Lunghezza media",
-      },
-    },
-    forward_extremities: {
-      name: "Invia estremità",
-      fields: {
-        id: "Event ID",
-        received_ts: "Timestamp",
-        depth: "Profondità",
-        state_group: "State group",
-      },
-    },
-    room_state: {
-      name: "Eventi di stato",
-      fields: {
-        type: "Tipo",
-        content: "Contenuto",
-        origin_server_ts: "Ora dell'invio",
-        sender: "Mittente",
-      },
-    },
-    room_directory: {
-      name: "Elenco delle stanze",
-      fields: {
-        world_readable: "gli utenti ospite possono vedere senza entrare",
-        guest_can_join: "gli utenti ospite possono entrare",
-      },
-      action: {
-        title:
-          "Cancella stanza dall'elenco |||| Cancella %{smart_count} stanze dall'elenco",
-        content:
-          "Sei sicuro di voler rimuovere questa stanza dall'elenco? |||| Sei sicuro di voler rimuovere %{smart_count} stanze dall'elenco?",
-        erase: "Rimuovi dall'elenco",
-        create: "Crea",
-        send_success: "Stanza creata con successo.",
-        send_failure: "C'è stato un errore.",
-      },
-    },
-    destinations: {
-      name: "Federazione",
-      fields: {
-        destination: "Destinazione",
-        failure_ts: "Timestamp dell'errore",
-        retry_last_ts: "Tentativo ultimo timestamp",
-        retry_interval: "Intervallo dei tentativi",
-        last_successful_stream_ordering: "Ultimo flusso riuscito con successo",
-        stream_ordering: "Flusso",
-      },
-      action: { reconnect: "Riconnetti" },
-    },
-  },
-  registration_tokens: {
-    name: "Token di registrazione",
-    fields: {
-      token: "Token",
-      valid: "Token valido",
-      uses_allowed: "Usi permessi",
-      pending: "In attesa",
-      completed: "Completato",
-      expiry_time: "Data della scadenza",
-      length: "Lunghezza",
-    },
-    helper: { length: "Lunghezza del token se non viene dato alcun token." },
-  },
-};
-export default it;