Upgrade to React-Admin 4 (#332)

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

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"
}, },

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}

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;

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>
)}
/>
); );
}; };

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>
); );
}); });
}); });

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

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>

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"

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>

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",
}), }),

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

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"

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

File diff suppressed because it is too large Load diff