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

In-App Docs: tooltips

Browse Source
This commit is contained in:
Aine 2025-05-20 12:16:40 +03:00
parent 5bec4c71ea
commit 319c7aa33a
No known key found for this signature in database
GPG Key ID: 34969C908CCA2804
5 changed files with 144 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/DeleteRoomButton.tsx
View File

@ -1,7 +1,7 @@
import ActionCheck from "@mui/icons-material/CheckCircle"; import ActionCheck from "@mui/icons-material/CheckCircle";
import ActionDelete from "@mui/icons-material/Delete"; import ActionDelete from "@mui/icons-material/Delete";
import AlertError from "@mui/icons-material/ErrorOutline"; import AlertError from "@mui/icons-material/ErrorOutline";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; import { Button, Tooltip, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import { Fragment, useState } from "react"; import { Fragment, useState } from "react";
import { import {
SimpleForm, SimpleForm,
@ -63,22 +63,24 @@ const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = props => {
return ( return (
<Fragment> <Fragment>
<Button <Tooltip title={translate("ra.action.delete")}>
onClick={handleDialogOpen} <Button
disabled={isLoading} onClick={handleDialogOpen}
className={"ra-delete-button"} disabled={isLoading}
key="button" className={"ra-delete-button"}
size="small" key="button"
sx={{ size="small"
"&.MuiButton-sizeSmall": { sx={{
lineHeight: 1.5, "&.MuiButton-sizeSmall": {
}, lineHeight: 1.5,
}} },
color={"error"} }}
startIcon={<ActionDelete />} color={"error"}
> startIcon={<ActionDelete />}
{translate("ra.action.delete")} >
</Button> {translate("ra.action.delete")}
</Button>
</Tooltip>
<Dialog open={open} onClose={handleDialogClose}> <Dialog open={open} onClose={handleDialogClose}>
<DialogTitle>{translate(props.confirmTitle)}</DialogTitle> <DialogTitle>{translate(props.confirmTitle)}</DialogTitle>
<DialogContent> <DialogContent>

36
src/components/DeleteUserButton.tsx
View File

@ -1,7 +1,7 @@
import ActionCheck from "@mui/icons-material/CheckCircle"; import ActionCheck from "@mui/icons-material/CheckCircle";
import ActionDelete from "@mui/icons-material/Delete"; import ActionDelete from "@mui/icons-material/Delete";
import AlertError from "@mui/icons-material/ErrorOutline"; import AlertError from "@mui/icons-material/ErrorOutline";
import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; import { Tooltip, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
import { Fragment, useState } from "react"; import { Fragment, useState } from "react";
import { import {
SimpleForm, SimpleForm,
@ -69,22 +69,24 @@ const DeleteUserButton: React.FC<DeleteUserButtonProps> = props => {
return ( return (
<Fragment> <Fragment>
<Button <Tooltip title={translate("ra.action.delete")}>
onClick={handleDialogOpen} <Button
disabled={isLoading} onClick={handleDialogOpen}
className={"ra-delete-button"} disabled={isLoading}
key="button" className={"ra-delete-button"}
size="small" key="button"
sx={{ size="small"
"&.MuiButton-sizeSmall": { sx={{
lineHeight: 1.5, "&.MuiButton-sizeSmall": {
}, lineHeight: 1.5,
}} },
color={"error"} }}
startIcon={<ActionDelete />} color={"error"}
> startIcon={<ActionDelete />}
{translate("ra.action.delete")} >
</Button> {translate("ra.action.delete")}
</Button>
</Tooltip>
<Dialog open={open} onClose={handleDialogClose}> <Dialog open={open} onClose={handleDialogClose}>
<DialogTitle>{translate(props.confirmTitle)}</DialogTitle> <DialogTitle>{translate(props.confirmTitle)}</DialogTitle>
<DialogContent> <DialogContent>

33
src/components/DeviceRemoveButton.tsx
View File

@ -1,8 +1,11 @@
import { Tooltip } from "@mui/material";
import { DeleteWithConfirmButton, DeleteWithConfirmButtonProps, useRecordContext } from "react-admin"; import { DeleteWithConfirmButton, DeleteWithConfirmButtonProps, useRecordContext } from "react-admin";
import { useTranslate } from "react-admin";
import { isASManaged } from "../utils/mxid"; import { isASManaged } from "../utils/mxid";
export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => { export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
const translate = useTranslate();
const record = useRecordContext(); const record = useRecordContext();
if (!record) return null; if (!record) return null;
@ -12,19 +15,23 @@ export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
} }
return ( return (
<DeleteWithConfirmButton <Tooltip
{...props} title={isASManagedUser ? translate("resources.devices.action.erase.disabled") : translate("ra.action.delete")}
label="ra.action.remove" >
confirmTitle="resources.devices.action.erase.title" <DeleteWithConfirmButton
confirmContent="resources.devices.action.erase.content" {...props}
mutationMode="pessimistic" label="ra.action.remove"
redirect={false} confirmTitle="resources.devices.action.erase.title"
disabled={isASManagedUser} confirmContent="resources.devices.action.erase.content"
translateOptions={{ mutationMode="pessimistic"
id: record.id, redirect={false}
name: record.display_name ? record.display_name : record.id, disabled={isASManagedUser}
}} translateOptions={{
/> id: record.id,
name: record.display_name ? record.display_name : record.id,
}}
/>
</Tooltip>
); );
}; };

11
src/components/ExperimentalFeatures.tsx
View File

@ -1,8 +1,6 @@
import { Stack, Switch, Typography } from "@mui/material"; import { Tooltip, Stack, Switch, Typography } from "@mui/material";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useRecordContext } from "react-admin"; import { useRecordContext, useTranslate, useNotify, useDataProvider } from "react-admin";
import { useNotify } from "react-admin";
import { useDataProvider } from "react-admin";
import { ExperimentalFeaturesModel, SynapseDataProvider } from "../synapse/dataProvider"; import { ExperimentalFeaturesModel, SynapseDataProvider } from "../synapse/dataProvider";
@ -15,6 +13,7 @@ const ExperimentalFeatureRow = (props: {
featureValue: boolean; featureValue: boolean;
updateFeature: (feature_name: string, feature_value: boolean) => void; updateFeature: (feature_name: string, feature_value: boolean) => void;
}) => { }) => {
const translate = useTranslate();
const featureKey = props.featureKey; const featureKey = props.featureKey;
const featureValue = props.featureValue; const featureValue = props.featureValue;
const featureDescription = experimentalFeaturesMap[featureKey] ?? ""; const featureDescription = experimentalFeaturesMap[featureKey] ?? "";
@ -34,7 +33,9 @@ const ExperimentalFeatureRow = (props: {
padding: 2, padding: 2,
}} }}
> >
<Switch checked={checked} onChange={handleChange} /> <Tooltip title={translate("resources.experimental_features.action.toggle")}>
<Switch checked={checked} onChange={handleChange} />
</Tooltip>
<Stack> <Stack>
<Typography <Typography
variant="subtitle1" variant="subtitle1"

125
src/components/media.tsx
View File

@ -50,10 +50,14 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
const DeleteMediaToolbar = (props: ToolbarProps) => ( const DeleteMediaToolbar = (props: ToolbarProps) => (
<Toolbar {...props}> <Toolbar {...props}>
<SaveButton label="delete_media.action.send" icon={<DeleteSweepIcon />} /> <Tooltip title={translate("delete_media.helper.send")}>
<Button label="ra.action.cancel" onClick={onClose}> <SaveButton label="delete_media.action.send" icon={<DeleteSweepIcon />} />
<IconCancel /> </Tooltip>
</Button> <Tooltip title={translate("ra.action.cancel")}>
<Button label="ra.action.cancel" onClick={onClose}>
<IconCancel />
</Button>
</Tooltip>
</Toolbar> </Toolbar>
); );
@ -63,9 +67,20 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
<DialogContent> <DialogContent>
<DialogContentText>{translate("delete_media.helper.send")}</DialogContentText> <DialogContentText>{translate("delete_media.helper.send")}</DialogContentText>
<SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}> <SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}>
<DateTimeInput source="before_ts" label="delete_media.fields.before_ts" defaultValue={0} parse={dateParser} /> <Tooltip title={translate("delete_media.helper.before_ts")}>
<NumberInput source="size_gt" label="delete_media.fields.size_gt" defaultValue={0} min={0} step={1024} /> <DateTimeInput
<BooleanInput source="keep_profiles" label="delete_media.fields.keep_profiles" defaultValue={true} /> source="before_ts"
label="delete_media.fields.before_ts"
defaultValue={0}
parse={dateParser}
/>
</Tooltip>
<Tooltip title={translate("delete_media.helper.size_gt")}>
<NumberInput source="size_gt" label="delete_media.fields.size_gt" defaultValue={0} min={0} step={1024} />
</Tooltip>
<Tooltip title={translate("delete_media.helper.keep_profiles")}>
<BooleanInput source="keep_profiles" label="delete_media.fields.keep_profiles" defaultValue={true} />
</Tooltip>
</SimpleForm> </SimpleForm>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@ -76,6 +91,7 @@ export const DeleteMediaButton = (props: ButtonProps) => {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const notify = useNotify(); const notify = useNotify();
const translate = useTranslate();
const dataProvider = useDataProvider<SynapseDataProvider>(); const dataProvider = useDataProvider<SynapseDataProvider>();
const { mutate: deleteMedia, isPending } = useMutation({ const { mutate: deleteMedia, isPending } = useMutation({
mutationFn: (values: DeleteMediaParams) => dataProvider.deleteMedia(values), mutationFn: (values: DeleteMediaParams) => dataProvider.deleteMedia(values),
@ -95,24 +111,26 @@ export const DeleteMediaButton = (props: ButtonProps) => {
return ( return (
<> <>
<Button <Tooltip title={translate("delete_media.helper.send")}>
{...props} <Button
label="delete_media.action.send" {...props}
onClick={openDialog} label="delete_media.action.send"
disabled={isPending} onClick={openDialog}
sx={{ disabled={isPending}
color: theme.palette.error.main, sx={{
"&:hover": { color: theme.palette.error.main,
backgroundColor: alpha(theme.palette.error.main, 0.12), "&:hover": {
// Reset on mouse devices backgroundColor: alpha(theme.palette.error.main, 0.12),
"@media (hover: none)": { // Reset on mouse devices
backgroundColor: "transparent", "@media (hover: none)": {
backgroundColor: "transparent",
},
}, },
}, }}
}} >
> <DeleteSweepIcon />
<DeleteSweepIcon /> </Button>
</Button> </Tooltip>
<DeleteMediaDialog open={open} onClose={closeDialog} onSubmit={deleteMedia} /> <DeleteMediaDialog open={open} onClose={closeDialog} onSubmit={deleteMedia} />
</> </>
); );
@ -123,10 +141,14 @@ const PurgeRemoteMediaDialog = ({ open, onClose, onSubmit }) => {
const PurgeRemoteMediaToolbar = (props: ToolbarProps) => ( const PurgeRemoteMediaToolbar = (props: ToolbarProps) => (
<Toolbar {...props}> <Toolbar {...props}>
<SaveButton label="purge_remote_media.action.send" icon={<DeleteSweepIcon />} /> <Tooltip title={translate("purge_remote_media.helper.send")}>
<Button label="ra.action.cancel" onClick={onClose}> <SaveButton label="purge_remote_media.action.send" icon={<DeleteSweepIcon />} />
<IconCancel /> </Tooltip>
</Button> <Tooltip title={translate("ra.action.cancel")}>
<Button label="ra.action.cancel" onClick={onClose}>
<IconCancel />
</Button>
</Tooltip>
</Toolbar> </Toolbar>
); );
@ -152,6 +174,7 @@ export const PurgeRemoteMediaButton = (props: ButtonProps) => {
const theme = useTheme(); const theme = useTheme();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const notify = useNotify(); const notify = useNotify();
const translate = useTranslate();
const dataProvider = useDataProvider<SynapseDataProvider>(); const dataProvider = useDataProvider<SynapseDataProvider>();
const { mutate: purgeRemoteMedia, isPending } = useMutation({ const { mutate: purgeRemoteMedia, isPending } = useMutation({
mutationFn: (values: DeleteMediaParams) => dataProvider.purgeRemoteMedia(values), mutationFn: (values: DeleteMediaParams) => dataProvider.purgeRemoteMedia(values),
@ -171,22 +194,24 @@ export const PurgeRemoteMediaButton = (props: ButtonProps) => {
return ( return (
<> <>
<Button <Tooltip title={translate("purge_remote_media.helper.send")}>
{...props} <Button
label="purge_remote_media.action.send" {...props}
onClick={openDialog} label="purge_remote_media.action.send"
disabled={isPending} onClick={openDialog}
sx={{ disabled={isPending}
"&:hover": { sx={{
// Reset on mouse devices "&:hover": {
"@media (hover: none)": { // Reset on mouse devices
backgroundColor: "transparent", "@media (hover: none)": {
backgroundColor: "transparent",
},
}, },
}, }}
}} >
> <DeleteSweepIcon />
<DeleteSweepIcon /> </Button>
</Button> </Tooltip>
<PurgeRemoteMediaDialog open={open} onClose={closeDialog} onSubmit={purgeRemoteMedia} /> <PurgeRemoteMediaDialog open={open} onClose={closeDialog} onSubmit={purgeRemoteMedia} />
</> </>
); );
@ -462,6 +487,7 @@ export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
}; };
export const MediaIDField = ({ source }) => { export const MediaIDField = ({ source }) => {
const translate = useTranslate();
const record = useRecordContext(); const record = useRecordContext();
if (!record) { if (!record) {
return null; return null;
@ -484,10 +510,15 @@ export const MediaIDField = ({ source }) => {
mxcURL = `mxc://${homeserver}/${mediaID}`; mxcURL = `mxc://${homeserver}/${mediaID}`;
} }
return <ViewMediaButton mxcURL={mxcURL} label={mediaID} uploadName={uploadName} mimetype={record.media_type} />; return (
<Tooltip title={translate("resources.users_media.action.open")}>
<ViewMediaButton mxcURL={mxcURL} label={mediaID} uploadName={uploadName} mimetype={record.media_type} />
</Tooltip>
);
}; };
export const ReportMediaContent = ({ source }) => { export const ReportMediaContent = ({ source }) => {
const translate = useTranslate();
const record = useRecordContext(); const record = useRecordContext();
if (!record) { if (!record) {
return null; return null;
@ -503,5 +534,9 @@ export const ReportMediaContent = ({ source }) => {
uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString()); uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString());
} }
return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type} />; return (
<Tooltip title={translate("resources.users_media.action.open")}>
<ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type} />
</Tooltip>
);
}; };