lirent/synapse-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor EncryptionField

Browse Source
This commit is contained in:
dklimpel 2023-02-06 09:12:05 +01:00
parent c6fd5cf301
commit 2e25a918c5
1 changed files with 43 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/rooms.js
View File

@ -24,9 +24,8 @@ import {
useRecordContext, useRecordContext,
useTranslate, useTranslate,
} from "react-admin"; } from "react-admin";
import get from "lodash/get"; import { useTheme } from "@mui/material/styles";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { Tooltip, Typography } from "@mui/material";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import FastForwardIcon from "@mui/icons-material/FastForward"; import FastForwardIcon from "@mui/icons-material/FastForward";
import HttpsIcon from "@mui/icons-material/Https"; import HttpsIcon from "@mui/icons-material/Https";
@ -56,33 +55,6 @@ const RoomPagination = props => (
<Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} /> <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
); );
const EncryptionField = ({ source, emptyText }) => {
const translate = useTranslate();
const record = useRecordContext();
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 RoomTitle = props => {
const record = useRecordContext(); const record = useRecordContext();
const translate = useTranslate(); const translate = useTranslate();
@ -345,32 +317,46 @@ const RoomListActions = () => (
</TopToolbar> </TopToolbar>
); );
export const RoomList = () => ( export const RoomList = () => {
<List const theme = useTheme();
pagination={<RoomPagination />}
sort={{ field: "name", order: "ASC" }}
filters={<RoomFilter />}
actions={<RoomListActions />}
>
<DatagridConfigurable
rowClick="show"
bulkActionButtons={<RoomBulkActionButtons />}
omit={["joined_local_members", "state_events", "version", "federatable"]}
>
<EncryptionField
source="is_encrypted"
sortBy="encryption"
// DatagridConfigurable thorws an error with an icon in `label`
//label={<HttpsIcon />}
/>
<RoomNameField source="name" /> return (
<TextField source="joined_members" /> <List
<TextField source="joined_local_members" /> pagination={<RoomPagination />}
<TextField source="state_events" /> sort={{ field: "name", order: "ASC" }}
<TextField source="version" /> filters={<RoomFilter />}
<BooleanField source="federatable" /> actions={<RoomListActions />}
<BooleanField source="public" /> >
</DatagridConfigurable> <DatagridConfigurable
</List> 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 },
}}
/>
<RoomNameField source="name" />
<TextField source="joined_members" />
<TextField source="joined_local_members" />
<TextField source="state_events" />
<TextField source="version" />
<BooleanField source="federatable" />
<BooleanField source="public" />
</DatagridConfigurable>
</List>
);
};