Merge branch 'master' into locked_status

.github/workflows/build-test.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "18"
       - name: Install dependencies

.github/workflows/docker-release.yml

@@ -19,11 +19,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         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@v4
+        uses: docker/build-push-action@v5
         with:
           context: .
           push: true

.github/workflows/edge_ghpage.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "18"
       - name: Install and Build 🔧

.github/workflows/github-release.yml

@@ -14,7 +14,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "18"
       - run: yarn install

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

@@ -19,11 +19,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         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@v4
+        uses: docker/build-push-action@v5
         with:
           context: .
           push: false

README.md

@@ -13,10 +13,10 @@ This project is built using [react-admin](https://marmelab.com/react-admin/).
 
 ### Supported Synapse
 
-It needs at least [Synapse](https://github.com/matrix-org/synapse) v1.93.0 for all functions to work as expected!
+It needs at least [Synapse](https://github.com/element-hq/synapse) v1.93.0 for all functions to work as expected!
 
 You get your server version with the request `/_synapse/admin/v1/server_version`.
-See also [Synapse version API](https://matrix-org.github.io/synapse/develop/admin_api/version_api.html).
+See also [Synapse version API](https://element-hq.github.io/synapse/latest/admin_api/version_api.html).
 
 After entering the URL on the login page of synapse-admin the server version appears below the input field.
 
@@ -27,7 +27,7 @@ You need access to the following endpoints:
 - `/_matrix`
 - `/_synapse/admin`
 
-See also [Synapse administration endpoints](https://matrix-org.github.io/synapse/develop/reverse_proxy.html#synapse-administration-endpoints)
+See also [Synapse administration endpoints](https://element-hq.github.io/synapse/latest/reverse_proxy.html#synapse-administration-endpoints)
 
 ### Use without install
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-admin",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "author": "Awesome Technologies Innovationslabor GmbH",
   "license": "Apache-2.0",
@@ -13,27 +13,25 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
-    "eslint": "^8.48.0",
+    "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.0.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.19.12"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@mui/icons-material": "^5.14.19",
-    "@emotion/styled": "^11.10.6",
-    "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",
+    "@mui/styles": "5.14.10",
     "papaparse": "^5.4.1",
     "prop-types": "^15.8.1",
     "ra-language-chinese": "^2.0.10",
-    "ra-language-french": "^4.13.3",
+    "ra-language-french": "^4.16.2",
     "ra-language-german": "^3.13.4",
     "ra-language-italian": "^3.13.1",
     "react": "^17.0.0",
-    "react-admin": "^3.19.12",
+    "react-admin": "^4.16.9",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1"
   },

public/robots.txt

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

src/App.js

@@ -1,28 +1,22 @@
 import React from "react";
-import { Admin, Resource, resolveBrowserLocale } from "react-admin";
+import {
+  Admin,
+  CustomRoutes,
+  Resource,
+  resolveBrowserLocale,
+} from "react-admin";
 import polyglotI18nProvider from "ra-i18n-polyglot";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
-import { UserList, UserCreate, UserEdit } from "./components/users";
+import users from "./components/users";
-import { RoomList, RoomShow } from "./components/rooms";
+import rooms from "./components/rooms";
-import { ReportList, ReportShow } from "./components/EventReports";
+import userMediaStats from "./components/statistics";
+import reports from "./components/EventReports";
+import roomDirectory from "./components/RoomDirectory";
+import destinations from "./components/destinations";
+import registrationToken from "./components/RegistrationTokens";
 import LoginPage from "./components/LoginPage";
-import ConfirmationNumberIcon from "@mui/icons-material/ConfirmationNumber";
-import CloudQueueIcon from "@mui/icons-material/CloudQueue";
-import EqualizerIcon from "@mui/icons-material/Equalizer";
-import UserIcon from "@mui/icons-material/Group";
-import { UserMediaStatsList } from "./components/statistics";
-import RoomIcon from "@mui/icons-material/ViewList";
-import ReportIcon from "@mui/icons-material/Warning";
-import FolderSharedIcon from "@mui/icons-material/FolderShared";
-import { DestinationList, DestinationShow } from "./components/destinations";
 import { ImportFeature } from "./components/ImportFeature";
-import {
-  RegistrationTokenCreate,
-  RegistrationTokenEdit,
-  RegistrationTokenList,
-} from "./components/RegistrationTokens";
-import { RoomDirectoryList } from "./components/RoomDirectory";
 import { Route } from "react-router-dom";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
@@ -50,47 +44,17 @@ const App = () => (
     authProvider={authProvider}
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
-    customRoutes={[
-      <Route key="userImport" path="/import_users" component={ImportFeature} />,
-    ]}
   >
-    <Resource
+    <CustomRoutes>
-      name="users"
+      <Route path="/import_users" element={<ImportFeature />} />
-      list={UserList}
+    </CustomRoutes>
-      create={UserCreate}
+    <Resource {...users} />
-      edit={UserEdit}
+    <Resource {...rooms} />
-      icon={UserIcon}
+    <Resource {...userMediaStats} />
-    />
+    <Resource {...reports} />
-    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
+    <Resource {...roomDirectory} />
-    <Resource
+    <Resource {...destinations} />
-      name="user_media_statistics"
+    <Resource {...registrationToken} />
-      list={UserMediaStatsList}
-      icon={EqualizerIcon}
-    />
-    <Resource
-      name="reports"
-      list={ReportList}
-      show={ReportShow}
-      icon={ReportIcon}
-    />
-    <Resource
-      name="room_directory"
-      list={RoomDirectoryList}
-      icon={FolderSharedIcon}
-    />
-    <Resource
-      name="destinations"
-      list={DestinationList}
-      show={DestinationShow}
-      icon={CloudQueueIcon}
-    />
-    <Resource
-      name="registration_tokens"
-      list={RegistrationTokenList}
-      create={RegistrationTokenCreate}
-      edit={RegistrationTokenEdit}
-      icon={ConfirmationNumberIcon}
-    />
     <Resource name="connections" />
     <Resource name="devices" />
     <Resource name="room_members" />

src/components/AvatarField.js

@@ -0,0 +1,12 @@
+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

@@ -13,6 +13,7 @@ import {
   useTranslate,
 } from "react-admin";
 import PageviewIcon from "@mui/icons-material/Pageview";
+import ReportIcon from "@mui/icons-material/Warning";
 import ViewListIcon from "@mui/icons-material/ViewList";
 
 const date_format = {
@@ -24,8 +25,8 @@ const date_format = {
   second: "2-digit",
 };
 
-const ReportPagination = props => (
+const ReportPagination = () => (
-  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+  <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
 
 export const ReportShow = props => {
@@ -90,7 +91,7 @@ export const ReportShow = props => {
           <TextField source="event_json.content.algorithm" />
           <TextField
             source="event_json.content.device_id"
-            label="resources.users.fields.device_id"
+            label="resources.devices.fields.device_id"
           />
         </Tab>
       </TabbedShowLayout>
@@ -98,15 +99,13 @@ export const ReportShow = props => {
   );
 };
 
-export const ReportList = ({ ...props }) => {
+export const ReportList = props => (
-  return (
   <List
     {...props}
     pagination={<ReportPagination />}
     sort={{ field: "received_ts", order: "DESC" }}
-      bulkActionButtons={false}
   >
-      <Datagrid rowClick="show">
+    <Datagrid rowClick="show" bulkActionButtons={false}>
       <TextField source="id" sortable={false} />
       <DateField
         source="received_ts"
@@ -119,5 +118,13 @@ export const ReportList = ({ ...props }) => {
       <TextField sortable={false} source="score" />
     </Datagrid>
   </List>
-  );
+);
+
+const resource = {
+  name: "reports",
+  icon: ReportIcon,
+  list: ReportList,
+  show: ReportShow,
 };
+
+export default resource;

src/components/ImportFeature.js

@@ -1,12 +1,6 @@
 import React, { useState } from "react";
-import {
+import { useDataProvider, useNotify, Title } from "react-admin";
-  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,
@@ -23,19 +17,6 @@ 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",
@@ -51,7 +32,7 @@ function TranslatableOption({ value, text }) {
   return <option value={value}>{translate(text)}</option>;
 }
 
-const FilePicker = props => {
+const FilePicker = () => {
   const [values, setValues] = useState(null);
   const [error, setError] = useState(null);
   const [stats, setStats] = useState(null);
@@ -210,7 +191,7 @@ const FilePicker = props => {
     return true;
   };
 
-  const runImport = async e => {
+  const runImport = async _e => {
     if (progress !== null) {
       notify("import_users.errors.already_in_progress");
       return;
@@ -326,7 +307,7 @@ const FilePicker = props => {
         let retries = 0;
         const submitRecord = recordData => {
           return dataProvider.getOne("users", { id: recordData.id }).then(
-            async alreadyExists => {
+            async _alreadyExists => {
               if (LOGGING) console.log("already existed");
 
               if (useridMode === "update" || conflictMode === "skip") {
@@ -351,7 +332,7 @@ const FilePicker = props => {
                 }
               }
             },
-            async okToSubmit => {
+            async _okToSubmit => {
               if (LOGGING)
                 console.log(
                   "OK to create record " +

src/components/LoginPage.js

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

src/components/LoginPage.test.js

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

src/components/Menu.js

@@ -1,39 +0,0 @@
-// 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/RegistrationTokens.js

@@ -6,18 +6,19 @@ import {
   DateField,
   DateTimeInput,
   Edit,
-  Filter,
   List,
   maxValue,
   number,
   NumberField,
   NumberInput,
   regex,
+  SaveButton,
   SimpleForm,
   TextInput,
   TextField,
   Toolbar,
 } from "react-admin";
+import RegistrationTokenIcon from "@mui/icons-material/ConfirmationNumber";
 
 const date_format = {
   year: "numeric",
@@ -53,17 +54,12 @@ const dateFormatter = v => {
   return `${year}-${month}-${day}T${hour}:${minute}`;
 };
 
-const RegistrationTokenFilter = props => (
+const registrationTokenFilters = [<BooleanInput source="valid" alwaysOn />];
-  <Filter {...props}>
-    <BooleanInput source="valid" alwaysOn />
-  </Filter>
-);
 
-export const RegistrationTokenList = props => {
+export const RegistrationTokenList = props => (
-  return (
   <List
     {...props}
-      filters={<RegistrationTokenFilter />}
+    filters={registrationTokenFilters}
     filterDefaultValues={{ valid: true }}
     pagination={false}
     perPage={500}
@@ -81,12 +77,18 @@ export const RegistrationTokenList = props => {
       />
     </Datagrid>
   </List>
-  );
+);
-};
 
 export const RegistrationTokenCreate = props => (
-  <Create {...props}>
+  <Create {...props} redirect="list">
-    <SimpleForm redirect="list" toolbar={<Toolbar alwaysEnableSaveButton />}>
+    <SimpleForm
+      toolbar={
+        <Toolbar>
+          {/* It is possible to create tokens per default without input. */}
+          <SaveButton alwaysEnable />
+        </Toolbar>
+      }
+    >
       <TextInput
         source="token"
         autoComplete="off"
@@ -109,8 +111,7 @@ export const RegistrationTokenCreate = props => (
   </Create>
 );
 
-export const RegistrationTokenEdit = props => {
+export const RegistrationTokenEdit = props => (
-  return (
   <Edit {...props}>
     <SimpleForm>
       <TextInput source="token" disabled />
@@ -128,5 +129,14 @@ export const RegistrationTokenEdit = props => {
       />
     </SimpleForm>
   </Edit>
-  );
+);
+
+const resource = {
+  name: "users",
+  icon: RegistrationTokenIcon,
+  list: RegistrationTokenList,
+  edit: RegistrationTokenEdit,
+  create: RegistrationTokenCreate,
 };
+
+export default resource;

src/components/RoomDirectory.js

@@ -1,40 +1,35 @@
-import React, { Fragment } from "react";
+import React 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,
-  Datagrid,
+  DatagridConfigurable,
+  ExportButton,
   DeleteButton,
-  Filter,
   List,
   NumberField,
   Pagination,
+  SelectColumnsButton,
   TextField,
+  TopToolbar,
   useCreate,
-  useMutation,
+  useDataProvider,
+  useListContext,
   useNotify,
   useTranslate,
   useRecordContext,
   useRefresh,
   useUnselectAll,
 } from "react-admin";
+import { useMutation } from "react-query";
+import RoomDirectoryIcon from "@mui/icons-material/FolderShared";
+import AvatarField from "./AvatarField";
 
-const useStyles = makeStyles({
+const RoomDirectoryPagination = () => (
-  small: {
+  <Pagination rowsPerPageOptions={[100, 500, 1000, 2000]} />
-    height: "40px",
-    width: "40px",
-  },
-});
-
-const RoomDirectoryPagination = props => (
-  <Pagination {...props} rowsPerPageOptions={[100, 500, 1000, 2000]} />
 );
 
-export const RoomDirectoryDeleteButton = props => {
+export const RoomDirectoryUnpublishButton = props => {
   const translate = useTranslate();
 
   return (
@@ -50,12 +45,12 @@ export const RoomDirectoryDeleteButton = props => {
         smart_count: 1,
       })}
       resource="room_directory"
-      icon={<FolderSharedIcon />}
+      icon={<RoomDirectoryIcon />}
     />
   );
 };
 
-export const RoomDirectoryBulkDeleteButton = props => (
+export const RoomDirectoryBulkUnpublishButton = props => (
   <BulkDeleteButton
     {...props}
     label="resources.room_directory.action.erase"
@@ -63,65 +58,63 @@ export const RoomDirectoryBulkDeleteButton = props => (
     confirmTitle="resources.room_directory.action.title"
     confirmContent="resources.room_directory.action.content"
     resource="room_directory"
-    icon={<FolderSharedIcon />}
+    icon={<RoomDirectoryIcon />}
   />
 );
 
-export const RoomDirectoryBulkSaveButton = ({ selectedIds }) => {
+export const RoomDirectoryBulkPublishButton = props => {
+  const { selectedIds } = useListContext();
   const notify = useNotify();
   const refresh = useRefresh();
-  const unselectAll = useUnselectAll();
+  const unselectAllRooms = useUnselectAll("rooms");
-  const [createMany, { loading }] = useMutation();
+  const dataProvider = useDataProvider();
-
+  const { mutate, isLoading } = useMutation(
-  const handleSend = values => {
+    () =>
-    createMany(
+      dataProvider.createMany("room_directory", {
+        ids: selectedIds,
+        data: {},
+      }),
     {
-        type: "createMany",
+      onSuccess: () => {
-        resource: "room_directory",
-        payload: { ids: selectedIds, data: {} },
-      },
-      {
-        onSuccess: ({ data }) => {
         notify("resources.room_directory.action.send_success");
-          unselectAll("rooms");
+        unselectAllRooms();
         refresh();
       },
-        onFailure: error =>
+      onError: () =>
         notify("resources.room_directory.action.send_failure", {
           type: "error",
         }),
     }
   );
-  };
 
   return (
     <Button
+      {...props}
       label="resources.room_directory.action.create"
-      onClick={handleSend}
+      onClick={mutate}
-      disabled={loading}
+      disabled={isLoading}
     >
-      <FolderSharedIcon />
+      <RoomDirectoryIcon />
     </Button>
   );
 };
 
-export const RoomDirectorySaveButton = props => {
+export const RoomDirectoryPublishButton = props => {
   const record = useRecordContext();
   const notify = useNotify();
   const refresh = useRefresh();
-  const [create, { loading }] = useCreate("room_directory");
+  const [create, { isLoading }] = useCreate();
 
-  const handleSend = values => {
+  const handleSend = () => {
     create(
+      "room_directory",
+      { data: { id: record.id } },
       {
-        payload: { data: { id: record.id } },
+        onSuccess: () => {
-      },
-      {
-        onSuccess: ({ data }) => {
           notify("resources.room_directory.action.send_success");
           refresh();
         },
-        onFailure: error =>
+        onError: () =>
           notify("resources.room_directory.action.send_failure", {
             type: "error",
           }),
@@ -131,75 +124,38 @@ export const RoomDirectorySaveButton = props => {
 
   return (
     <Button
+      {...props}
       label="resources.room_directory.action.create"
       onClick={handleSend}
-      disabled={loading}
+      disabled={isLoading}
     >
-      <FolderSharedIcon />
+      <RoomDirectoryIcon />
     </Button>
   );
 };
 
-const RoomDirectoryBulkActionButtons = props => (
+const RoomDirectoryListActions = () => (
-  <Fragment>
+  <TopToolbar>
-    <RoomDirectoryBulkDeleteButton {...props} />
+    <SelectColumnsButton />
-  </Fragment>
+    <ExportButton />
+  </TopToolbar>
 );
 
-const AvatarField = ({ source, className, record = {} }) => (
+export const RoomDirectoryList = () => (
-  <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 = ({
-  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}
+    actions={<RoomDirectoryListActions />}
+  >
+    <DatagridConfigurable
+      rowClick={(id, _resource, _record) => "/rooms/" + id + "/show"}
+      bulkActionButtons={<RoomDirectoryBulkUnpublishButton />}
+      omit={["room_id", "canonical_alias", "topic"]}
     >
-      <Datagrid rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}>
       <AvatarField
         source="avatar_src"
         sortable={false}
-          className={classes.small}
+        sx={{ height: "40px", width: "40px" }}
         label="resources.rooms.fields.avatar"
       />
       <TextField
@@ -207,27 +163,21 @@ export const FilterableRoomDirectoryList = ({
         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}
@@ -243,18 +193,14 @@ export const FilterableRoomDirectoryList = ({
         sortable={false}
         label="resources.room_directory.fields.guest_can_join"
       />
-      </Datagrid>
+    </DatagridConfigurable>
   </List>
-  );
+);
+
+const resource = {
+  name: "room_directory",
+  icon: RoomDirectoryIcon,
+  list: RoomDirectoryList,
 };
 
-function mapStateToProps(state) {
+export default resource;
-  return {
-    roomDirectoryFilters:
-      state.admin.resources.room_directory.list.params.displayedFilters,
-  };
-}
-
-export const RoomDirectoryList = connect(mapStateToProps)(
-  FilterableRoomDirectoryList
-);

src/components/ServerNotices.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import {
   Button,
   SaveButton,
@@ -7,12 +7,14 @@ import {
   Toolbar,
   required,
   useCreate,
-  useMutation,
+  useDataProvider,
+  useListContext,
   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 {
@@ -22,7 +24,7 @@ import {
   DialogTitle,
 } from "@mui/material";
 
-const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
+const ServerNoticeDialog = ({ open, loading, onClose, onSubmit }) => {
   const translate = useTranslate();
 
   const ServerNoticeToolbar = props => (
@@ -46,12 +48,7 @@ const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
         <DialogContentText>
           {translate("resources.servernotices.helper.send")}
         </DialogContentText>
-        <SimpleForm
+        <SimpleForm toolbar={<ServerNoticeToolbar />} onSubmit={onSubmit}>
-          toolbar={<ServerNoticeToolbar />}
-          submitOnEnter={false}
-          redirect={false}
-          save={onSend}
-        >
           <TextInput
             source="body"
             label="resources.servernotices.fields.body"
@@ -67,24 +64,25 @@ const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
   );
 };
 
-export const ServerNoticeButton = props => {
+export const ServerNoticeButton = () => {
   const record = useRecordContext();
   const [open, setOpen] = useState(false);
   const notify = useNotify();
-  const [create, { loading }] = useCreate("servernotices");
+  const [create, { isloading }] = useCreate();
 
   const handleDialogOpen = () => setOpen(true);
   const handleDialogClose = () => setOpen(false);
 
   const handleSend = values => {
     create(
-      { payload: { data: { id: record.id, ...values } } },
+      "servernotices",
+      { data: { id: record.id, ...values } },
       {
         onSuccess: () => {
           notify("resources.servernotices.action.send_success");
           handleDialogClose();
         },
-        onFailure: () =>
+        onError: () =>
           notify("resources.servernotices.action.send_failure", {
             type: "error",
           }),
@@ -93,67 +91,65 @@ export const ServerNoticeButton = props => {
   };
 
   return (
-    <Fragment>
+    <>
       <Button
         label="resources.servernotices.send"
         onClick={handleDialogOpen}
-        disabled={loading}
+        disabled={isloading}
       >
         <MessageIcon />
       </Button>
       <ServerNoticeDialog
         open={open}
         onClose={handleDialogClose}
-        onSend={handleSend}
+        onSubmit={handleSend}
       />
-    </Fragment>
+    </>
   );
 };
 
-export const ServerNoticeBulkButton = ({ selectedIds }) => {
+export const ServerNoticeBulkButton = () => {
+  const { selectedIds } = useListContext();
   const [open, setOpen] = useState(false);
+  const openDialog = () => setOpen(true);
+  const closeDialog = () => setOpen(false);
   const notify = useNotify();
-  const unselectAll = useUnselectAll();
+  const unselectAllUsers = useUnselectAll("users");
-  const [createMany, { loading }] = useMutation();
+  const dataProvider = useDataProvider();
 
-  const handleDialogOpen = () => setOpen(true);
+  const { mutate: sendNotices, isLoading } = useMutation(
-  const handleDialogClose = () => setOpen(false);
+    data =>
-
+      dataProvider.createMany("servernotices", {
-  const handleSend = values => {
+        ids: selectedIds,
-    createMany(
+        data: data,
+      }),
     {
-        type: "createMany",
+      onSuccess: () => {
-        resource: "servernotices",
-        payload: { ids: selectedIds, data: values },
-      },
-      {
-        onSuccess: ({ data }) => {
         notify("resources.servernotices.action.send_success");
-          unselectAll("users");
+        unselectAllUsers();
-          handleDialogClose();
+        closeDialog();
       },
-        onFailure: error =>
+      onError: () =>
         notify("resources.servernotices.action.send_failure", {
           type: "error",
         }),
     }
   );
-  };
 
   return (
-    <Fragment>
+    <>
       <Button
         label="resources.servernotices.send"
-        onClick={handleDialogOpen}
+        onClick={openDialog}
-        disabled={loading}
+        disabled={isLoading}
       >
         <MessageIcon />
       </Button>
       <ServerNoticeDialog
         open={open}
-        onClose={handleDialogClose}
+        onClose={closeDialog}
-        onSend={handleSend}
+        onSubmit={sendNotices}
       />
-    </Fragment>
+    </>
   );
 };

src/components/destinations.js

@@ -3,7 +3,6 @@ import {
   Button,
   Datagrid,
   DateField,
-  Filter,
   List,
   Pagination,
   ReferenceField,
@@ -21,11 +20,12 @@ import {
   useTranslate,
 } from "react-admin";
 import AutorenewIcon from "@mui/icons-material/Autorenew";
+import DestinationsIcon from "@mui/icons-material/CloudQueue";
 import FolderSharedIcon from "@mui/icons-material/FolderShared";
 import ViewListIcon from "@mui/icons-material/ViewList";
 
-const DestinationPagination = props => (
+const DestinationPagination = () => (
-  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+  <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
 
 const date_format = {
@@ -37,23 +37,17 @@ const date_format = {
   second: "2-digit",
 };
 
-const destinationRowStyle = (record, index) => ({
+const destinationRowSx = (record, _index) => ({
   backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "white",
 });
 
-const DestinationFilter = ({ ...props }) => {
+const destinationFilters = [<SearchInput source="destination" alwaysOn />];
-  return (
-    <Filter {...props}>
-      <SearchInput source="destination" alwaysOn />
-    </Filter>
-  );
-};
 
-export const DestinationReconnectButton = props => {
+export const DestinationReconnectButton = () => {
   const record = useRecordContext();
   const refresh = useRefresh();
   const notify = useNotify();
-  const [handleReconnect, { isLoading }] = useDelete("destinations");
+  const [handleReconnect, { isLoading }] = useDelete();
 
   // Reconnect is not required if no error has occurred. (`failure_ts`)
   if (!record || !record.failure_ts) return null;
@@ -63,7 +57,8 @@ export const DestinationReconnectButton = props => {
     e.stopPropagation();
 
     handleReconnect(
-      { payload: { id: record.id } },
+      "destinations",
+      { id: record.id },
       {
         onSuccess: () => {
           notify("ra.notification.updated", {
@@ -71,7 +66,7 @@ export const DestinationReconnectButton = props => {
           });
           refresh();
         },
-        onFailure: () => {
+        onError: () => {
           notify("ra.message.error", { type: "error" });
         },
       }
@@ -89,13 +84,13 @@ export const DestinationReconnectButton = props => {
   );
 };
 
-const DestinationShowActions = props => (
+const DestinationShowActions = () => (
   <TopToolbar>
     <DestinationReconnectButton />
   </TopToolbar>
 );
 
-const DestinationTitle = props => {
+const DestinationTitle = () => {
   const record = useRecordContext();
   const translate = useTranslate();
   return (
@@ -109,14 +104,14 @@ export const DestinationList = props => {
   return (
     <List
       {...props}
-      filters={<DestinationFilter />}
+      filters={destinationFilters}
       pagination={<DestinationPagination />}
       sort={{ field: "destination", order: "ASC" }}
-      bulkActionButtons={false}
     >
       <Datagrid
-        rowStyle={destinationRowStyle}
+        rowSx={destinationRowSx}
-        rowClick={(id, basePath, record) => `${basePath}/${id}/show/rooms`}
+        rowClick={(id, _resource, _record) => `${id}/show/rooms`}
+        bulkActionButtons={false}
       >
         <TextField source="destination" />
         <DateField source="failure_ts" showTime options={date_format} />
@@ -160,7 +155,7 @@ export const DestinationShow = props => {
           >
             <Datagrid
               style={{ width: "100%" }}
-              rowClick={(id, basePath, record) => `/rooms/${id}/show`}
+              rowClick={(id, resource, record) => `/rooms/${id}/show`}
             >
               <TextField
                 source="room_id"
@@ -183,3 +178,12 @@ export const DestinationShow = props => {
     </Show>
   );
 };
+
+const resource = {
+  name: "destinations",
+  icon: DestinationsIcon,
+  list: DestinationList,
+  show: DestinationShow,
+};
+
+export default resource;

src/components/devices.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import {
   Button,
   useDelete,
@@ -8,34 +8,16 @@ import {
   useRefresh,
 } from "react-admin";
 import ActionDelete from "@mui/icons-material/Delete";
-import { makeStyles } from "@material-ui/core/styles";
+import { alpha, useTheme } from "@mui/material/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();
 
-  const [removeDevice, { isLoading }] = useDelete("devices");
+  const [removeDevice, { isLoading }] = useDelete();
 
   if (!record) return null;
 
@@ -44,13 +26,15 @@ export const DeviceRemoveButton = props => {
 
   const handleConfirm = () => {
     removeDevice(
-      { payload: { id: record.id, user_id: record.user_id } },
+      "devices",
+      // needs previousData for user_id
+      { id: record.id, previousData: record },
       {
         onSuccess: () => {
           notify("resources.devices.action.erase.success");
           refresh();
         },
-        onFailure: () => {
+        onError: () => {
           notify("resources.devices.action.erase.failure", { type: "error" });
         },
       }
@@ -59,11 +43,21 @@ export const DeviceRemoveButton = props => {
   };
 
   return (
-    <Fragment>
+    <>
       <Button
+        {...props}
         label="ra.action.remove"
         onClick={handleClick}
-        className={classnames("ra-delete-button", classes.deleteButton)}
+        sx={{
+          color: theme.palette.error.main,
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.error.main, 0.12),
+            // Reset on mouse devices
+            "@media (hover: none)": {
+              backgroundColor: "transparent",
+            },
+          },
+        }}
       >
         <ActionDelete />
       </Button>
@@ -79,6 +73,6 @@ export const DeviceRemoveButton = props => {
           name: record.display_name ? record.display_name : record.id,
         }}
       />
-    </Fragment>
+    </>
   );
 };

src/components/media.js

@@ -1,7 +1,4 @@
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
-import classnames from "classnames";
-import { alpha } from "@mui/material/styles";
-import { makeStyles } from "@material-ui/core/styles";
 import {
   BooleanInput,
   Button,
@@ -30,24 +27,9 @@ 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(
+const DeleteMediaDialog = ({ open, loading, onClose, onSubmit }) => {
-  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();
 
   const dateParser = v => {
@@ -56,8 +38,7 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
     return d.getTime();
   };
 
-  const DeleteMediaToolbar = props => {
+  const DeleteMediaToolbar = props => (
-    return (
     <Toolbar {...props}>
       <SaveButton
         label="resources.delete_media.action.send"
@@ -68,7 +49,6 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
       </Button>
     </Toolbar>
   );
-  };
 
   return (
     <Dialog open={open} onClose={onClose} loading={loading}>
@@ -79,12 +59,7 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
         <DialogContentText>
           {translate("resources.delete_media.helper.send")}
         </DialogContentText>
-        <SimpleForm
+        <SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}>
-          toolbar={<DeleteMediaToolbar />}
-          submitOnEnter={false}
-          redirect={false}
-          save={onSend}
-        >
           <DateTimeInput
             fullWidth
             source="before_ts"
@@ -113,23 +88,25 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
 };
 
 export const DeleteMediaButton = props => {
-  const classes = useStyles(props);
+  const theme = useTheme();
   const [open, setOpen] = useState(false);
   const notify = useNotify();
-  const [deleteOne, { loading }] = useDelete("delete_media");
+  const [deleteOne, { isLoading }] = useDelete();
 
-  const handleDialogOpen = () => setOpen(true);
+  const openDialog = () => setOpen(true);
-  const handleDialogClose = () => setOpen(false);
+  const closeDialog = () => setOpen(false);
 
-  const handleSend = values => {
+  const deleteMedia = values => {
     deleteOne(
-      { payload: { ...values } },
+      "delete_media",
+      // needs meta.before_ts, meta.size_gt and meta.keep_profiles
+      { meta: values },
       {
         onSuccess: () => {
           notify("resources.delete_media.action.send_success");
-          handleDialogClose();
+          closeDialog();
         },
-        onFailure: () =>
+        onError: () =>
           notify("resources.delete_media.action.send_failure", {
             type: "error",
           }),
@@ -138,43 +115,54 @@ export const DeleteMediaButton = props => {
   };
 
   return (
-    <Fragment>
+    <>
       <Button
+        {...props}
         label="resources.delete_media.action.send"
-        onClick={handleDialogOpen}
+        onClick={openDialog}
-        disabled={loading}
+        disabled={isLoading}
-        className={classnames("ra-delete-button", classes.deleteButton)}
+        sx={{
+          color: theme.palette.error.main,
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.error.main, 0.12),
+            // Reset on mouse devices
+            "@media (hover: none)": {
+              backgroundColor: "transparent",
+            },
+          },
+        }}
       >
         <DeleteSweepIcon />
       </Button>
       <DeleteMediaDialog
         open={open}
-        onClose={handleDialogClose}
+        onClose={closeDialog}
-        onSend={handleSend}
+        onSubmit={deleteMedia}
       />
-    </Fragment>
+    </>
   );
 };
 
-export const ProtectMediaButton = props => {
+export const ProtectMediaButton = () => {
   const record = useRecordContext();
   const translate = useTranslate();
   const refresh = useRefresh();
   const notify = useNotify();
-  const [create, { loading }] = useCreate("protect_media");
+  const [create, { isLoading }] = useCreate();
-  const [deleteOne] = useDelete("protect_media");
+  const [deleteOne] = useDelete();
 
   if (!record) return null;
 
   const handleProtect = () => {
     create(
-      { payload: { data: record } },
+      "protect_media",
+      { data: record },
       {
         onSuccess: () => {
           notify("resources.protect_media.action.send_success");
           refresh();
         },
-        onFailure: () =>
+        onError: () =>
           notify("resources.protect_media.action.send_failure", {
             type: "error",
           }),
@@ -184,13 +172,14 @@ export const ProtectMediaButton = props => {
 
   const handleUnprotect = () => {
     deleteOne(
-      { payload: { ...record } },
+      "protect_media",
+      { id: record.id },
       {
         onSuccess: () => {
           notify("resources.protect_media.action.send_success");
           refresh();
         },
-        onFailure: () =>
+        onError: () =>
           notify("resources.protect_media.action.send_failure", {
             type: "error",
           }),
@@ -203,7 +192,7 @@ export const ProtectMediaButton = props => {
     Wrapping Tooltip with <div>
     https://github.com/marmelab/react-admin/issues/4349#issuecomment-578594735
     */
-    <Fragment>
+    <>
       {record.quarantined_by && (
         <Tooltip
           title={translate("resources.protect_media.action.none", {
@@ -229,7 +218,7 @@ export const ProtectMediaButton = props => {
           arrow
         >
           <div>
-            <Button onClick={handleUnprotect} disabled={loading}>
+            <Button onClick={handleUnprotect} disabled={isLoading}>
               <LockIcon />
             </Button>
           </div>
@@ -242,13 +231,13 @@ export const ProtectMediaButton = props => {
           })}
         >
           <div>
-            <Button onClick={handleProtect} disabled={loading}>
+            <Button onClick={handleProtect} disabled={isLoading}>
               <LockOpenIcon />
             </Button>
           </div>
         </Tooltip>
       )}
-    </Fragment>
+    </>
   );
 };
 
@@ -257,20 +246,21 @@ export const QuarantineMediaButton = props => {
   const translate = useTranslate();
   const refresh = useRefresh();
   const notify = useNotify();
-  const [create, { loading }] = useCreate("quarantine_media");
+  const [create, { isLoading }] = useCreate();
-  const [deleteOne] = useDelete("quarantine_media");
+  const [deleteOne] = useDelete();
 
   if (!record) return null;
 
   const handleQuarantaine = () => {
     create(
-      { payload: { data: record } },
+      "quarantine_media",
+      { data: record },
       {
         onSuccess: () => {
           notify("resources.quarantine_media.action.send_success");
           refresh();
         },
-        onFailure: () =>
+        onError: () =>
           notify("resources.quarantine_media.action.send_failure", {
             type: "error",
           }),
@@ -280,13 +270,14 @@ export const QuarantineMediaButton = props => {
 
   const handleRemoveQuarantaine = () => {
     deleteOne(
-      { payload: { ...record } },
+      "quarantine_media",
+      { id: record.id, previousData: record },
       {
         onSuccess: () => {
           notify("resources.quarantine_media.action.send_success");
           refresh();
         },
-        onFailure: () =>
+        onError: () =>
           notify("resources.quarantine_media.action.send_failure", {
             type: "error",
           }),
@@ -295,7 +286,7 @@ export const QuarantineMediaButton = props => {
   };
 
   return (
-    <Fragment>
+    <>
       {record.safe_from_quarantine && (
         <Tooltip
           title={translate("resources.quarantine_media.action.none", {
@@ -303,7 +294,7 @@ export const QuarantineMediaButton = props => {
           })}
         >
           <div>
-            <Button disabled={true}>
+            <Button {...props} disabled={true}>
               <ClearIcon />
             </Button>
           </div>
@@ -316,7 +307,11 @@ export const QuarantineMediaButton = props => {
           })}
         >
           <div>
-            <Button onClick={handleRemoveQuarantaine} disabled={loading}>
+            <Button
+              {...props}
+              onClick={handleRemoveQuarantaine}
+              disabled={isLoading}
+            >
               <BlockIcon color="error" />
             </Button>
           </div>
@@ -329,12 +324,12 @@ export const QuarantineMediaButton = props => {
           })}
         >
           <div>
-            <Button onClick={handleQuarantaine} disabled={loading}>
+            <Button onClick={handleQuarantaine} disabled={isLoading}>
               <BlockIcon />
             </Button>
           </div>
         </Tooltip>
       )}
-    </Fragment>
+    </>
   );
 };

src/components/rooms.js

@@ -1,18 +1,20 @@
-import React, { Fragment } from "react";
+import React from "react";
-import { connect } from "react-redux";
 import {
   BooleanField,
   BulkDeleteButton,
   DateField,
   Datagrid,
+  DatagridConfigurable,
   DeleteButton,
-  Filter,
+  ExportButton,
+  FunctionField,
   List,
   NumberField,
   Pagination,
   ReferenceField,
   ReferenceManyField,
   SearchInput,
+  SelectColumnsButton,
   SelectField,
   Show,
   Tab,
@@ -22,10 +24,8 @@ import {
   useRecordContext,
   useTranslate,
 } from "react-admin";
-import get from "lodash/get";
+import { useTheme } from "@mui/material/styles";
-import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
-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";
@@ -34,11 +34,12 @@ import UserIcon from "@mui/icons-material/Group";
 import ViewListIcon from "@mui/icons-material/ViewList";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EventIcon from "@mui/icons-material/Event";
+import RoomIcon from "@mui/icons-material/ViewList";
 import {
-  RoomDirectoryBulkDeleteButton,
+  RoomDirectoryBulkUnpublishButton,
-  RoomDirectoryBulkSaveButton,
+  RoomDirectoryBulkPublishButton,
-  RoomDirectoryDeleteButton,
+  RoomDirectoryUnpublishButton,
-  RoomDirectorySaveButton,
+  RoomDirectoryPublishButton,
 } from "./RoomDirectory";
 
 const date_format = {
@@ -50,44 +51,11 @@ const date_format = {
   second: "2-digit",
 };
 
-const useStyles = makeStyles(theme => ({
+const RoomPagination = () => (
-  helper_forward_extremities: {
+  <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
-    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 RoomTitle = () => {
-  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();
   var name = "";
@@ -102,24 +70,18 @@ const RoomTitle = props => {
   );
 };
 
-const RoomShowActions = ({ basePath, data, resource }) => {
+const RoomShowActions = () => {
+  const record = useRecordContext();
   var roomDirectoryStatus = "";
-  if (data) {
+  if (record) {
-    roomDirectoryStatus = data.public;
+    roomDirectoryStatus = record.public;
   }
 
   return (
     <TopToolbar>
-      {roomDirectoryStatus === false && (
+      {roomDirectoryStatus === false && <RoomDirectoryPublishButton />}
-        <RoomDirectorySaveButton record={data} />
+      {roomDirectoryStatus === true && <RoomDirectoryUnpublishButton />}
-      )}
-      {roomDirectoryStatus === true && (
-        <RoomDirectoryDeleteButton record={data} />
-      )}
       <DeleteButton
-        basePath={basePath}
-        record={data}
-        resource={resource}
         mutationMode="pessimistic"
         confirmTitle="resources.rooms.action.erase.title"
         confirmContent="resources.rooms.action.erase.content"
@@ -129,7 +91,6 @@ const RoomShowActions = ({ basePath, data, resource }) => {
 };
 
 export const RoomShow = props => {
-  const classes = useStyles({ props });
   const translate = useTranslate();
   return (
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
@@ -171,7 +132,7 @@ export const RoomShow = props => {
           >
             <Datagrid
               style={{ width: "100%" }}
-              rowClick={(id, basePath, record) => "/users/" + id}
+              rowClick={(id, resource, record) => "/users/" + id}
             >
               <TextField
                 source="id"
@@ -281,9 +242,14 @@ export const RoomShow = props => {
           icon={<FastForwardIcon />}
           path="forward_extremities"
         >
-          <div className={classes.helper_forward_extremities}>
+          <Box
+            sx={{
+              fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+              margin: "0.5em",
+            }}
+          >
             {translate("resources.rooms.helper.forward_extremities")}
-          </div>
+          </Box>
           <ReferenceManyField
             reference="forward_extremities"
             target="room_id"
@@ -307,104 +273,81 @@ export const RoomShow = props => {
   );
 };
 
-const RoomBulkActionButtons = props => (
+const RoomBulkActionButtons = () => (
-  <Fragment>
+  <>
-    <RoomDirectoryBulkSaveButton {...props} />
+    <RoomDirectoryBulkPublishButton />
-    <RoomDirectoryBulkDeleteButton {...props} />
+    <RoomDirectoryBulkUnpublishButton />
     <BulkDeleteButton
-      {...props}
       confirmTitle="resources.rooms.action.erase.title"
       confirmContent="resources.rooms.action.erase.content"
       mutationMode="pessimistic"
     />
-  </Fragment>
+  </>
 );
 
-const RoomFilter = ({ ...props }) => {
+const roomFilters = [<SearchInput source="search_term" alwaysOn />];
-  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 RoomNameField = props => {
+const RoomListActions = () => (
-  const { source } = props;
+  <TopToolbar>
-  const record = useRecordContext();
+    <SelectColumnsButton />
-  return (
+    <ExportButton />
-    <span>{record[source] || record["canonical_alias"] || record["id"]}</span>
+  </TopToolbar>
-  );
+);
-};
 
-RoomNameField.propTypes = {
+export const RoomList = props => {
-  label: PropTypes.string,
+  const theme = useTheme();
-  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 />}
+      filters={roomFilters}
-      bulkActionButtons={<RoomBulkActionButtons />}
+      actions={<RoomListActions />}
     >
-      <Datagrid rowClick="show">
+      <DatagridConfigurable
-        <EncryptionField
+        rowClick="show"
+        bulkActionButtons={<RoomBulkActionButtons />}
+        omit={[
+          "joined_local_members",
+          "state_events",
+          "version",
+          "federatable",
+        ]}
+      >
+        <BooleanField
           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" />
-        {localMembersFilter && <TextField source="joined_local_members" />}
+        <TextField source="joined_local_members" />
-        {stateEventsFilter && <TextField source="state_events" />}
+        <TextField source="state_events" />
-        {versionFilter && <TextField source="version" />}
+        <TextField source="version" />
-        {federateableFilter && <BooleanField source="federatable" />}
+        <BooleanField source="federatable" />
         <BooleanField source="public" />
-      </Datagrid>
+      </DatagridConfigurable>
     </List>
   );
 };
 
-function mapStateToProps(state) {
+const resource = {
-  return {
+  name: "rooms",
-    roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
+  icon: RoomIcon,
-  };
+  list: RoomList,
-}
+  show: RoomShow,
+};
 
-export const RoomList = connect(mapStateToProps)(FilterableRoomList);
+export default resource;

src/components/statistics.js

@@ -3,7 +3,6 @@ import { cloneElement } from "react";
 import {
   Datagrid,
   ExportButton,
-  Filter,
   List,
   NumberField,
   Pagination,
@@ -13,18 +12,13 @@ import {
   TopToolbar,
   useListContext,
 } from "react-admin";
+import EqualizerIcon from "@mui/icons-material/Equalizer";
 import { DeleteMediaButton } from "./media";
 
 const ListActions = props => {
   const { className, exporter, filters, maxResults, ...rest } = props;
-  const {
+  const { sort, resource, displayedFilters, filterValues, showFilter, total } =
-    currentSort,
+    useListContext();
-    resource,
-    displayedFilters,
-    filterValues,
-    showFilter,
-    total,
-  } = useListContext();
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
       {filters &&
@@ -39,7 +33,7 @@ const ListActions = props => {
       <ExportButton
         disabled={total === 0}
         resource={resource}
-        sort={currentSort}
+        sort={sort}
         filterValues={filterValues}
         maxResults={maxResults}
       />
@@ -47,27 +41,24 @@ const ListActions = props => {
   );
 };
 
-const UserMediaStatsPagination = props => (
+const UserMediaStatsPagination = () => (
-  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+  <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
 
-const UserMediaStatsFilter = props => (
+const userMediaStatsFilters = [<SearchInput source="search_term" alwaysOn />];
-  <Filter {...props}>
-    <SearchInput source="search_term" alwaysOn />
-  </Filter>
-);
 
-export const UserMediaStatsList = props => {
+export const UserMediaStatsList = props => (
-  return (
   <List
     {...props}
     actions={<ListActions />}
-      filters={<UserMediaStatsFilter />}
+    filters={userMediaStatsFilters}
     pagination={<UserMediaStatsPagination />}
     sort={{ field: "media_length", order: "DESC" }}
+  >
+    <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"
@@ -77,5 +68,12 @@ export const UserMediaStatsList = props => {
       <NumberField source="media_length" />
     </Datagrid>
   </List>
-  );
+);
+
+const resource = {
+  name: "user_media_statistics",
+  icon: EqualizerIcon,
+  list: UserMediaStatsList,
 };
+
+export default resource;

src/components/users.js

@@ -1,5 +1,4 @@
-import React, { cloneElement, Fragment } from "react";
+import React, { cloneElement } 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";
@@ -8,6 +7,7 @@ import NotificationsIcon from "@mui/icons-material/Notifications";
 import PermMediaIcon from "@mui/icons-material/PermMedia";
 import PersonPinIcon from "@mui/icons-material/PersonPin";
 import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputComponent";
+import UserIcon from "@mui/icons-material/Group";
 import ViewListIcon from "@mui/icons-material/ViewList";
 import {
   ArrayInput,
@@ -18,7 +18,6 @@ import {
   Create,
   Edit,
   List,
-  Filter,
   Toolbar,
   SimpleForm,
   SimpleFormIterator,
@@ -49,28 +48,10 @@ 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" },
@@ -92,7 +73,7 @@ const date_format = {
 };
 
 const UserListActions = ({
-  currentSort,
+  sort,
   className,
   resource,
   filters,
@@ -101,7 +82,6 @@ const UserListActions = ({
   filterValues,
   permanentFilter,
   hasCreate, // you can hide CreateButton if hasCreate = false
-  basePath,
   selectedIds,
   onUnselectItems,
   showFilter,
@@ -119,18 +99,18 @@ const UserListActions = ({
           filterValues,
           context: "button",
         })}
-      <CreateButton basePath={basePath} />
+      <CreateButton />
       <ExportButton
         disabled={total === 0}
         resource={resource}
-        sort={currentSort}
+        sort={sort}
         filter={{ ...filterValues, ...permanentFilter }}
         exporter={exporter}
         maxResults={maxResults}
       />
       {/* Add your custom actions */}
-      <Button component={Link} to={redirect} label="CSV Import">
+      <Button component={Link} to="/import_users" label="CSV Import">
-        <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
+        <GetAppIcon sx={{ transform: "rotate(180deg)", fontSize: "20px" }} />
       </Button>
     </TopToolbar>
   );
@@ -141,54 +121,44 @@ UserListActions.defaultProps = {
   onUnselectItems: () => null,
 };
 
-const UserPagination = props => (
+const UserPagination = () => (
-  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+  <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
 
-const UserFilter = props => (
+const userFilters = [
-  <Filter {...props}>
+  <SearchInput source="name" alwaysOn />,
-    <SearchInput source="name" alwaysOn />
+  <BooleanInput source="guests" alwaysOn />,
-    <BooleanInput source="guests" alwaysOn />
   <BooleanInput
     label="resources.users.fields.show_deactivated"
     source="deactivated"
     alwaysOn
-    />
+  />,
-  </Filter>
+];
-);
 
-const UserBulkActionButtons = props => (
+const UserBulkActionButtons = () => (
-  <Fragment>
+  <>
-    <ServerNoticeBulkButton {...props} />
+    <ServerNoticeBulkButton />
     <BulkDeleteButton
-      {...props}
       label="resources.users.action.erase"
       confirmTitle="resources.users.helper.erase"
       mutationMode="pessimistic"
     />
-  </Fragment>
+  </>
 );
 
-const AvatarField = ({ source, className, record = {} }) => (
+export const UserList = props => (
-  <Avatar src={record[source]} className={className} />
-);
-
-export const UserList = props => {
-  const classes = useStyles();
-  return (
   <List
     {...props}
-      filters={<UserFilter />}
+    filters={userFilters}
     filterDefaultValues={{ guests: true, deactivated: false }}
     sort={{ field: "name", order: "ASC" }}
     actions={<UserListActions maxResults={10000} />}
-      bulkActionButtons={<UserBulkActionButtons />}
     pagination={<UserPagination />}
   >
-      <Datagrid rowClick="edit">
+    <Datagrid rowClick="edit" bulkActionButtons={<UserBulkActionButtons />}>
       <AvatarField
         source="avatar_src"
-          className={classes.small}
+        sx={{ height: "40px", width: "40px" }}
         sortBy="avatar_url"
       />
       <TextField source="id" sortBy="name" />
@@ -205,8 +175,7 @@ export const UserList = props => {
       />
     </Datagrid>
   </List>
-  );
+);
-};
 
 // https://matrix.org/docs/spec/appendices#user-identifiers
 // here only local part of user_id
@@ -263,7 +232,7 @@ export function generateRandomUser() {
 
 const UserEditToolbar = props => (
   <Toolbar {...props}>
-    <SaveButton submitOnEnter={true} disabled={props.pristine} />
+    <SaveButton disabled={props.pristine} />
   </Toolbar>
 );
 
@@ -303,7 +272,6 @@ export const UserCreate = props => (
         source="user_type"
         choices={choices_type}
         translateChoice={false}
-        allowEmpty={true}
         resettable
       />
       <BooleanInput source="admin" />
@@ -331,7 +299,7 @@ export const UserCreate = props => (
   </Create>
 );
 
-const UserTitle = props => {
+const UserTitle = () => {
   const record = useRecordContext();
   const translate = useTranslate();
   return (
@@ -345,7 +313,6 @@ const UserTitle = props => {
 };
 
 export const UserEdit = props => {
-  const classes = useStyles();
   const translate = useTranslate();
   return (
     <Edit {...props} title={<UserTitle />} actions={<UserEditActions />}>
@@ -357,7 +324,7 @@ export const UserEdit = props => {
           <AvatarField
             source="avatar_src"
             sortable={false}
-            className={classes.large}
+            sx={{ height: "120px", width: "120px", float: "right" }}
           />
           <TextInput source="id" disabled />
           <TextInput source="displayname" />
@@ -370,7 +337,6 @@ export const UserEdit = props => {
             source="user_type"
             choices={choices_type}
             translateChoice={false}
-            allowEmpty={true}
             resettable
           />
           <BooleanInput source="admin" />
@@ -515,7 +481,7 @@ export const UserEdit = props => {
           >
             <Datagrid
               style={{ width: "100%" }}
-              rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}
+              rowClick={(id, resource, record) => "/rooms/" + id + "/show"}
             >
               <TextField
                 source="id"
@@ -561,3 +527,13 @@ export const UserEdit = props => {
     </Edit>
   );
 };
+
+const resource = {
+  name: "users",
+  icon: UserIcon,
+  list: UserList,
+  edit: UserEdit,
+  create: UserCreate,
+};
+
+export default resource;

src/synapse/dataProvider.js

@@ -98,7 +98,7 @@ const resourceMap = {
     }),
     delete: params => ({
       endpoint: `/_synapse/admin/v2/users/${encodeURIComponent(
-        params.user_id
+        params.previousData.user_id
       )}/devices/${params.id}`,
     }),
   },
@@ -184,9 +184,9 @@ const resourceMap = {
     delete: params => ({
       endpoint: `/_synapse/admin/v1/media/${localStorage.getItem(
         "home_server"
-      )}/delete?before_ts=${params.before_ts}&size_gt=${
+      )}/delete?before_ts=${params.meta.before_ts}&size_gt=${
-        params.size_gt
+        params.meta.size_gt
-      }&keep_profiles=${params.keep_profiles}`,
+      }&keep_profiles=${params.meta.keep_profiles}`,
       method: "POST",
     }),
   },
@@ -197,7 +197,7 @@ const resourceMap = {
       method: "POST",
     }),
     delete: params => ({
-      endpoint: `/_synapse/admin/v1/media/unprotect/${params.media_id}`,
+      endpoint: `/_synapse/admin/v1/media/unprotect/${params.id}`,
       method: "POST",
     }),
   },
@@ -212,7 +212,7 @@ const resourceMap = {
     delete: params => ({
       endpoint: `/_synapse/admin/v1/media/unquarantine/${localStorage.getItem(
         "home_server"
-      )}/${params.media_id}`,
+      )}/${params.id}`,
       method: "POST",
     }),
   },
@@ -546,7 +546,7 @@ const dataProvider = {
       const endpoint_url = homeserver + res.path;
       return jsonClient(`${endpoint_url}/${params.id}`, {
         method: "DELETE",
-        body: JSON.stringify(params.data, filterNullValues),
+        body: JSON.stringify(params.previousData, filterNullValues),
       }).then(({ json }) => ({
         data: json,
       }));