Upgrade to React-Admin 4

package.json

@@ -18,8 +18,7 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^4.2.1",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "^2.2.0",
-    "ra-test": "^3.19.12"
+    "prettier": "^2.2.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -34,7 +33,7 @@
     "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"
   },

src/App.js

@@ -1,5 +1,10 @@
 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";
@@ -50,10 +55,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/EventReports.js

@@ -28,10 +28,10 @@ const ReportPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
 
-export const ReportShow = props => {
+export const ReportShow = () => {
   const translate = useTranslate();
   return (
-    <Show {...props}>
+    <Show>
       <TabbedShowLayout>
         <Tab
           label={translate("synapseadmin.reports.tabs.basic", {
@@ -98,26 +98,23 @@ export const ReportShow = props => {
   );
 };
 
-export const ReportList = ({ ...props }) => {
-  return (
-    <List
-      {...props}
-      pagination={<ReportPagination />}
-      sort={{ field: "received_ts", order: "DESC" }}
-      bulkActionButtons={false}
-    >
-      <Datagrid rowClick="show">
-        <TextField source="id" sortable={false} />
-        <DateField
-          source="received_ts"
-          showTime
-          options={date_format}
-          sortable={true}
-        />
-        <TextField sortable={false} source="user_id" />
-        <TextField sortable={false} source="name" />
-        <TextField sortable={false} source="score" />
-      </Datagrid>
-    </List>
-  );
-};
+export const ReportList = () => (
+  <List
+    pagination={<ReportPagination />}
+    sort={{ field: "received_ts", order: "DESC" }}
+    bulkActionButtons={false}
+  >
+    <Datagrid rowClick="show">
+      <TextField source="id" sortable={false} />
+      <DateField
+        source="received_ts"
+        showTime
+        options={date_format}
+        sortable={true}
+      />
+      <TextField sortable={false} source="user_id" />
+      <TextField sortable={false} source="name" />
+      <TextField sortable={false} source="score" />
+    </Datagrid>
+  </List>
+);