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

Upgrade to React-Admin 4 (#332)

Browse Source 
Change-Id: Ia03486edfd934438580e614af754a0966f6fd6e3
This commit is contained in:
dklimpel 2023-02-04 16:57:37 +01:00 committed by Manuel Stahl
parent 9f03ec9b0f
commit b70ee7c55d
14 changed files with 601 additions and 1066 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -18,12 +18,9 @@
"eslint-config-react-app": "^7.0.1", "eslint-config-react-app": "^7.0.1",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",
"prettier": "^2.2.0", "prettier": "^2.2.0"
"ra-test": "^3.19.12"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.14.19", "@mui/icons-material": "^5.14.19",
"@mui/material": "^5.14.8", "@mui/material": "^5.14.8",
"@mui/styles": "5.14.10", "@mui/styles": "5.14.10",
@ -34,7 +31,7 @@
"ra-language-german": "^3.13.4", "ra-language-german": "^3.13.4",
"ra-language-italian": "^3.13.1", "ra-language-italian": "^3.13.1",
"react": "^17.0.0", "react": "^17.0.0",
"react-admin": "^3.19.12", "react-admin": "^4.16.9",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "^5.0.1" "react-scripts": "^5.0.1"
}, },

13
src/App.js
View File

@ -1,5 +1,10 @@
import React from "react"; 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 polyglotI18nProvider from "ra-i18n-polyglot";
import authProvider from "./synapse/authProvider"; import authProvider from "./synapse/authProvider";
import dataProvider from "./synapse/dataProvider"; import dataProvider from "./synapse/dataProvider";
@ -50,10 +55,10 @@ const App = () => (
authProvider={authProvider} authProvider={authProvider}
dataProvider={dataProvider} dataProvider={dataProvider}
i18nProvider={i18nProvider} i18nProvider={i18nProvider}
customRoutes={[
<Route key="userImport" path="/import_users" component={ImportFeature} />,
]}
> >
<CustomRoutes>
<Route path="/import_users" element={<ImportFeature />} />
</CustomRoutes>
<Resource <Resource
name="users" name="users"
list={UserList} list={UserList}

12
src/components/AvatarField.js Normal file
View File

@ -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;

240
src/components/LoginPage.js
View File

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

6
src/components/LoginPage.test.js
View File

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

211
src/components/RoomDirectory.js
View File

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

29
src/components/ServerNotices.js
View File

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

14
src/components/destinations.js
View File

@ -37,11 +37,11 @@ const date_format = {
second: "2-digit", second: "2-digit",
}; };
const destinationRowStyle = (record, index) => ({ const destinationRowSx = (record, _index) => ({
backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "white", backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "white",
}); });
const DestinationFilter = ({ ...props }) => { const DestinationFilter = props => {
return ( return (
<Filter {...props}> <Filter {...props}>
<SearchInput source="destination" alwaysOn /> <SearchInput source="destination" alwaysOn />
@ -71,7 +71,7 @@ export const DestinationReconnectButton = props => {
}); });
refresh(); refresh();
}, },
onFailure: () => { onError: () => {
notify("ra.message.error", { type: "error" }); notify("ra.message.error", { type: "error" });
}, },
} }
@ -112,11 +112,11 @@ export const DestinationList = props => {
filters={<DestinationFilter />} filters={<DestinationFilter />}
pagination={<DestinationPagination />} pagination={<DestinationPagination />}
sort={{ field: "destination", order: "ASC" }} sort={{ field: "destination", order: "ASC" }}
bulkActionButtons={false}
> >
<Datagrid <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" /> <TextField source="destination" />
<DateField source="failure_ts" showTime options={date_format} /> <DateField source="failure_ts" showTime options={date_format} />
@ -160,7 +160,7 @@ export const DestinationShow = props => {
> >
<Datagrid <Datagrid
style={{ width: "100%" }} style={{ width: "100%" }}
rowClick={(id, basePath, record) => `/rooms/${id}/show`} rowClick={(id, resource, record) => `/rooms/${id}/show`}
> >
<TextField <TextField
source="room_id" source="room_id"

33
src/components/devices.js
View File

@ -8,29 +8,11 @@ import {
useRefresh, useRefresh,
} from "react-admin"; } from "react-admin";
import ActionDelete from "@mui/icons-material/Delete"; 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 => { export const DeviceRemoveButton = props => {
const theme = useTheme();
const record = useRecordContext(); const record = useRecordContext();
const classes = useStyles(props);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const refresh = useRefresh(); const refresh = useRefresh();
const notify = useNotify(); const notify = useNotify();
@ -63,7 +45,16 @@ export const DeviceRemoveButton = props => {
<Button <Button
label="ra.action.remove" label="ra.action.remove"
onClick={handleClick} 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 /> <ActionDelete />
</Button> </Button>

48
src/components/media.js
View File

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

159
src/components/rooms.js
View File

@ -1,18 +1,21 @@
import React, { Fragment } from "react"; import React, { Fragment } from "react";
import { connect } from "react-redux";
import { import {
BooleanField, BooleanField,
BulkDeleteButton, BulkDeleteButton,
DateField, DateField,
Datagrid, Datagrid,
DatagridConfigurable,
DeleteButton, DeleteButton,
ExportButton,
Filter, Filter,
FunctionField,
List, List,
NumberField, NumberField,
Pagination, Pagination,
ReferenceField, ReferenceField,
ReferenceManyField, ReferenceManyField,
SearchInput, SearchInput,
SelectColumnsButton,
SelectField, SelectField,
Show, Show,
Tab, Tab,
@ -22,9 +25,7 @@ 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 { Tooltip, Typography, Chip } 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";
@ -54,32 +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, 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 RoomTitle = props => {
const record = useRecordContext(); const record = useRecordContext();
const translate = useTranslate(); const translate = useTranslate();
@ -95,7 +70,7 @@ const RoomTitle = props => {
); );
}; };
const RoomShowActions = ({ basePath, data, resource }) => { const RoomShowActions = ({ data, resource }) => {
var roomDirectoryStatus = ""; var roomDirectoryStatus = "";
if (data) { if (data) {
roomDirectoryStatus = data.public; roomDirectoryStatus = data.public;
@ -110,7 +85,6 @@ const RoomShowActions = ({ basePath, data, resource }) => {
<RoomDirectoryDeleteButton record={data} /> <RoomDirectoryDeleteButton record={data} />
)} )}
<DeleteButton <DeleteButton
basePath={basePath}
record={data} record={data}
resource={resource} resource={resource}
mutationMode="pessimistic" mutationMode="pessimistic"
@ -163,7 +137,7 @@ export const RoomShow = props => {
> >
<Datagrid <Datagrid
style={{ width: "100%" }} style={{ width: "100%" }}
rowClick={(id, basePath, record) => "/users/" + id} rowClick={(id, resource, record) => "/users/" + id}
> >
<TextField <TextField
source="id" source="id"
@ -304,12 +278,11 @@ export const RoomShow = props => {
); );
}; };
const RoomBulkActionButtons = props => ( const RoomBulkActionButtons = () => (
<Fragment> <Fragment>
<RoomDirectoryBulkSaveButton {...props} /> <RoomDirectoryBulkSaveButton />
<RoomDirectoryBulkDeleteButton {...props} /> <RoomDirectoryBulkDeleteButton />
<BulkDeleteButton <BulkDeleteButton
{...props}
confirmTitle="resources.rooms.action.erase.title" confirmTitle="resources.rooms.action.erase.title"
confirmContent="resources.rooms.action.erase.content" confirmContent="resources.rooms.action.erase.content"
mutationMode="pessimistic" mutationMode="pessimistic"
@ -317,91 +290,63 @@ const RoomBulkActionButtons = props => (
</Fragment> </Fragment>
); );
const RoomFilter = ({ ...props }) => { const RoomFilter = props => (
const translate = useTranslate(); <Filter {...props}>
return ( <SearchInput source="search_term" alwaysOn />
<Filter {...props}> </Filter>
<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 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 = () => {
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 ( return (
<List <List
{...props}
pagination={<RoomPagination />} pagination={<RoomPagination />}
sort={{ field: "name", order: "ASC" }} sort={{ field: "name", order: "ASC" }}
filters={<RoomFilter />} filters={<RoomFilter />}
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" source="is_encrypted"
sortBy="encryption" sortBy="encryption"
TrueIcon={HttpsIcon}
FalseIcon={NoEncryptionIcon}
label={<HttpsIcon />} 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_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" /> <BooleanField source="public" />
</Datagrid> </DatagridConfigurable>
</List> </List>
); );
}; };
function mapStateToProps(state) {
return {
roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
};
}
export const RoomList = connect(mapStateToProps)(FilterableRoomList);

6
src/components/statistics.js
View File

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

26
src/components/users.js
View File

@ -1,5 +1,4 @@
import React, { cloneElement, Fragment } from "react"; import React, { cloneElement, Fragment } from "react";
import Avatar from "@mui/material/Avatar";
import AssignmentIndIcon from "@mui/icons-material/AssignmentInd"; import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
import ContactMailIcon from "@mui/icons-material/ContactMail"; import ContactMailIcon from "@mui/icons-material/ContactMail";
import DevicesIcon from "@mui/icons-material/Devices"; import DevicesIcon from "@mui/icons-material/Devices";
@ -49,16 +48,11 @@ import {
NumberField, NumberField,
} from "react-admin"; } from "react-admin";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import AvatarField from "./AvatarField";
import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices"; import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
import { DeviceRemoveButton } from "./devices"; import { DeviceRemoveButton } from "./devices";
import { ProtectMediaButton, QuarantineMediaButton } from "./media"; import { ProtectMediaButton, QuarantineMediaButton } from "./media";
const redirect = () => {
return {
pathname: "/import_users",
};
};
const choices_medium = [ const choices_medium = [
{ id: "email", name: "resources.users.email" }, { id: "email", name: "resources.users.email" },
{ id: "msisdn", name: "resources.users.msisdn" }, { id: "msisdn", name: "resources.users.msisdn" },
@ -88,7 +82,6 @@ const UserListActions = ({
filterValues, filterValues,
permanentFilter, permanentFilter,
hasCreate, // you can hide CreateButton if hasCreate = false hasCreate, // you can hide CreateButton if hasCreate = false
basePath,
selectedIds, selectedIds,
onUnselectItems, onUnselectItems,
showFilter, showFilter,
@ -106,7 +99,7 @@ const UserListActions = ({
filterValues, filterValues,
context: "button", context: "button",
})} })}
<CreateButton basePath={basePath} /> <CreateButton />
<ExportButton <ExportButton
disabled={total === 0} disabled={total === 0}
resource={resource} resource={resource}
@ -116,7 +109,7 @@ const UserListActions = ({
maxResults={maxResults} maxResults={maxResults}
/> />
{/* Add your custom actions */} {/* Add your custom actions */}
<Button component={Link} to={redirect} label="CSV Import"> <Button component={Link} to="/import_users" label="CSV Import">
<GetAppIcon sx={{ transform: "rotate(180deg)", fontSize: "20px" }} /> <GetAppIcon sx={{ transform: "rotate(180deg)", fontSize: "20px" }} />
</Button> </Button>
</TopToolbar> </TopToolbar>
@ -156,10 +149,6 @@ const UserBulkActionButtons = props => (
</Fragment> </Fragment>
); );
const AvatarField = ({ source, record = {}, sx }) => (
<Avatar src={record[source]} sx={sx} />
);
export const UserList = props => { export const UserList = props => {
return ( return (
<List <List
@ -168,10 +157,9 @@ export const UserList = props => {
filterDefaultValues={{ guests: true, deactivated: false }} filterDefaultValues={{ guests: true, deactivated: false }}
sort={{ field: "name", order: "ASC" }} sort={{ field: "name", order: "ASC" }}
actions={<UserListActions maxResults={10000} />} actions={<UserListActions maxResults={10000} />}
bulkActionButtons={<UserBulkActionButtons />}
pagination={<UserPagination />} pagination={<UserPagination />}
> >
<Datagrid rowClick="edit"> <Datagrid rowClick="edit" bulkActionButtons={<UserBulkActionButtons />}>
<AvatarField <AvatarField
source="avatar_src" source="avatar_src"
sx={{ height: "40px", width: "40px" }} sx={{ height: "40px", width: "40px" }}
@ -248,7 +236,7 @@ export function generateRandomUser() {
const UserEditToolbar = props => ( const UserEditToolbar = props => (
<Toolbar {...props}> <Toolbar {...props}>
<SaveButton submitOnEnter={true} disabled={props.pristine} /> <SaveButton disabled={props.pristine} />
</Toolbar> </Toolbar>
); );
@ -288,7 +276,6 @@ export const UserCreate = props => (
source="user_type" source="user_type"
choices={choices_type} choices={choices_type}
translateChoice={false} translateChoice={false}
allowEmpty={true}
resettable resettable
/> />
<BooleanInput source="admin" /> <BooleanInput source="admin" />
@ -354,7 +341,6 @@ export const UserEdit = props => {
source="user_type" source="user_type"
choices={choices_type} choices={choices_type}
translateChoice={false} translateChoice={false}
allowEmpty={true}
resettable resettable
/> />
<BooleanInput source="admin" /> <BooleanInput source="admin" />
@ -498,7 +484,7 @@ export const UserEdit = props => {
> >
<Datagrid <Datagrid
style={{ width: "100%" }} style={{ width: "100%" }}
rowClick={(id, basePath, record) => "/rooms/" + id + "/show"} rowClick={(id, resource, record) => "/rooms/" + id + "/show"}
> >
<TextField <TextField
source="id" source="id"

863
yarn.lock
View File

File diff suppressed because it is too large Load Diff