Upgrade to React-Admin 4 (#332)

Change-Id: Ia03486edfd934438580e614af754a0966f6fd6e3

src/components/rooms.js

@@ -1,18 +1,21 @@
 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,
@@ -22,9 +25,7 @@ import {
   useRecordContext,
   useTranslate,
 } from "react-admin";
-import get from "lodash/get";
-import PropTypes from "prop-types";
-import { Tooltip, Typography, Chip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import Box from "@mui/material/Box";
 import FastForwardIcon from "@mui/icons-material/FastForward";
 import HttpsIcon from "@mui/icons-material/Https";
@@ -54,32 +55,6 @@ 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();
@@ -95,7 +70,7 @@ const RoomTitle = props => {
   );
 };
 
-const RoomShowActions = ({ basePath, data, resource }) => {
+const RoomShowActions = ({ data, resource }) => {
   var roomDirectoryStatus = "";
   if (data) {
     roomDirectoryStatus = data.public;
@@ -110,7 +85,6 @@ const RoomShowActions = ({ basePath, data, resource }) => {
         <RoomDirectoryDeleteButton record={data} />
       )}
       <DeleteButton
-        basePath={basePath}
         record={data}
         resource={resource}
         mutationMode="pessimistic"
@@ -163,7 +137,7 @@ export const RoomShow = props => {
           >
             <Datagrid
               style={{ width: "100%" }}
-              rowClick={(id, basePath, record) => "/users/" + id}
+              rowClick={(id, resource, record) => "/users/" + id}
             >
               <TextField
                 source="id"
@@ -304,12 +278,11 @@ export const RoomShow = props => {
   );
 };
 
-const RoomBulkActionButtons = props => (
+const RoomBulkActionButtons = () => (
   <Fragment>
-    <RoomDirectoryBulkSaveButton {...props} />
-    <RoomDirectoryBulkDeleteButton {...props} />
+    <RoomDirectoryBulkSaveButton />
+    <RoomDirectoryBulkDeleteButton />
     <BulkDeleteButton
-      {...props}
       confirmTitle="resources.rooms.action.erase.title"
       confirmContent="resources.rooms.action.erase.content"
       mutationMode="pessimistic"
@@ -317,91 +290,63 @@ const RoomBulkActionButtons = props => (
   </Fragment>
 );
 
-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}
-        sx={{ marginBottom: "8px" }}
-      />
-      <Chip
-        label={translate("resources.rooms.fields.state_events")}
-        source="state_events"
-        defaultValue={false}
-        sx={{ marginBottom: "8px" }}
-      />
-      <Chip
-        label={translate("resources.rooms.fields.version")}
-        source="version"
-        defaultValue={false}
-        sx={{ marginBottom: "8px" }}
-      />
-      <Chip
-        label={translate("resources.rooms.fields.federatable")}
-        source="federatable"
-        defaultValue={false}
-        sx={{ marginBottom: "8px" }}
-      />
-    </Filter>
-  );
-};
+const RoomFilter = props => (
+  <Filter {...props}>
+    <SearchInput source="search_term" alwaysOn />
+  </Filter>
+);
 
-const RoomNameField = props => {
-  const { source } = props;
-  const record = useRecordContext();
-  return (
-    <span>{record[source] || record["canonical_alias"] || record["id"]}</span>
-  );
-};
+const RoomListActions = () => (
+  <TopToolbar>
+    <SelectColumnsButton />
+    <ExportButton />
+  </TopToolbar>
+);
 
-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;
+export const RoomList = () => {
+  const theme = useTheme();
 
   return (
     <List
-      {...props}
       pagination={<RoomPagination />}
       sort={{ field: "name", order: "ASC" }}
       filters={<RoomFilter />}
-      bulkActionButtons={<RoomBulkActionButtons />}
+      actions={<RoomListActions />}
     >
-      <Datagrid rowClick="show">
-        <EncryptionField
+      <DatagridConfigurable
+        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" />}
-        {stateEventsFilter && <TextField source="state_events" />}
-        {versionFilter && <TextField source="version" />}
-        {federateableFilter && <BooleanField source="federatable" />}
+        <TextField source="joined_local_members" />
+        <TextField source="state_events" />
+        <TextField source="version" />
+        <BooleanField source="federatable" />
         <BooleanField source="public" />
-      </Datagrid>
+      </DatagridConfigurable>
     </List>
   );
 };
-
-function mapStateToProps(state) {
-  return {
-    roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
-  };
-}
-
-export const RoomList = connect(mapStateToProps)(FilterableRoomList);