From 83f2bf42616e1feb9a2b918bf5f93ab3401ff28b Mon Sep 17 00:00:00 2001 From: Robin Date: Fri, 18 Mar 2022 16:08:32 -0400 Subject: [PATCH] Improve remove recent messages dialog (#6114) * Allow keeping state events when removing recent messages The remove recent messages dialog redacts most state events since they can be abuse vectors as well, however some users that see the option actually want to use it to only remove messages. This adds a checkbox option to do so. Signed-off-by: Robin Townsend * Don't redact encryption events when removing recent messages Signed-off-by: Robin Townsend * Show UserMenu spinner while removing recent messages This also generalizes the UserMenu spinner to work with other types of actions in the future. Signed-off-by: Robin Townsend * Clarify remove recent messages warning Clarify that they are removed for everyone in the conversation, not just yourself. Signed-off-by: Robin Townsend * Adjust copy and preserve state events by default * Redact messages in reverse chronological order Signed-off-by: Robin Townsend --- res/css/_components.scss | 1 + res/css/views/dialogs/_BulkRedactDialog.scss | 26 ++++ .../views/dialogs/BulkRedactDialog.tsx | 136 ++++++++++++++++++ src/components/views/right_panel/UserInfo.tsx | 78 ++-------- src/components/views/rooms/RoomListHeader.tsx | 70 ++++++--- src/dispatcher/actions.ts | 10 ++ src/i18n/strings/en_EN.json | 20 +-- 7 files changed, 241 insertions(+), 100 deletions(-) create mode 100644 res/css/views/dialogs/_BulkRedactDialog.scss create mode 100644 src/components/views/dialogs/BulkRedactDialog.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 4865a8be15..2d2e3f0de7 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -78,6 +78,7 @@ @import "./views/dialogs/_Analytics.scss"; @import "./views/dialogs/_AnalyticsLearnMoreDialog.scss"; @import "./views/dialogs/_BugReportDialog.scss"; +@import "./views/dialogs/_BulkRedactDialog.scss"; @import "./views/dialogs/_ChangelogDialog.scss"; @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss"; @import "./views/dialogs/_CommunityPrototypeInviteDialog.scss"; diff --git a/res/css/views/dialogs/_BulkRedactDialog.scss b/res/css/views/dialogs/_BulkRedactDialog.scss new file mode 100644 index 0000000000..c6b2adff87 --- /dev/null +++ b/res/css/views/dialogs/_BulkRedactDialog.scss @@ -0,0 +1,26 @@ +/* +Copyright 2021 Robin Townsend + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_BulkRedactDialog { + .mx_Checkbox, .mx_BulkRedactDialog_checkboxMicrocopy { + line-height: $font-20px; + } + + .mx_BulkRedactDialog_checkboxMicrocopy { + margin-left: 26px; + color: $secondary-content; + } +} diff --git a/src/components/views/dialogs/BulkRedactDialog.tsx b/src/components/views/dialogs/BulkRedactDialog.tsx new file mode 100644 index 0000000000..86c0f4033f --- /dev/null +++ b/src/components/views/dialogs/BulkRedactDialog.tsx @@ -0,0 +1,136 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { useState } from 'react'; +import { logger } from "matrix-js-sdk/src/logger"; +import { MatrixClient } from 'matrix-js-sdk/src/client'; +import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; +import { Room } from 'matrix-js-sdk/src/models/room'; +import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline'; +import { EventType } from "matrix-js-sdk/src/@types/event"; + +import { _t } from '../../../languageHandler'; +import dis from "../../../dispatcher/dispatcher"; +import { Action } from "../../../dispatcher/actions"; +import { IDialogProps } from "../dialogs/IDialogProps"; +import BaseDialog from "../dialogs/BaseDialog"; +import InfoDialog from "../dialogs/InfoDialog"; +import DialogButtons from "../elements/DialogButtons"; +import StyledCheckbox from "../elements/StyledCheckbox"; + +interface IBulkRedactDialogProps extends IDialogProps { + matrixClient: MatrixClient; + room: Room; + member: RoomMember; +} + +const BulkRedactDialog: React.FC = props => { + const { matrixClient: cli, room, member, onFinished } = props; + const [keepStateEvents, setKeepStateEvents] = useState(true); + + let timeline = room.getLiveTimeline(); + let eventsToRedact = []; + while (timeline) { + eventsToRedact = [...eventsToRedact, ...timeline.getEvents().filter(event => + event.getSender() === member.userId && + !event.isRedacted() && !event.isRedaction() && + event.getType() !== EventType.RoomCreate && + // Don't redact ACLs because that'll obliterate the room + // See https://github.com/matrix-org/synapse/issues/4042 for details. + event.getType() !== EventType.RoomServerAcl && + // Redacting encryption events is equally bad + event.getType() !== EventType.RoomEncryption, + )]; + timeline = timeline.getNeighbouringTimeline(EventTimeline.BACKWARDS); + } + + if (eventsToRedact.length === 0) { + return +

{ _t("Try scrolling up in the timeline to see if there are any earlier ones.") }

+ + } + />; + } else { + eventsToRedact = eventsToRedact.filter(event => !(keepStateEvents && event.isState())); + const count = eventsToRedact.length; + const user = member.name; + + const redact = async () => { + logger.info(`Started redacting recent ${count} messages for ${member.userId} in ${room.roomId}`); + dis.dispatch({ + action: Action.BulkRedactStart, + room_id: room.roomId, + }); + + // Submitting a large number of redactions freezes the UI, + // so first yield to allow to rerender after closing the dialog. + await Promise.resolve(); + await Promise.all(eventsToRedact.reverse().map(async event => { + try { + await cli.redactEvent(room.roomId, event.getId()); + } catch (err) { + // log and swallow errors + logger.error("Could not redact", event.getId()); + logger.error(err); + } + })); + + logger.info(`Finished redacting recent ${count} messages for ${member.userId} in ${room.roomId}`); + dis.dispatch({ + action: Action.BulkRedactEnd, + room_id: room.roomId, + }); + }; + + return +
+

{ _t("You are about to remove %(count)s messages by %(user)s. " + + "This will remove them permanently for everyone in the conversation. " + + "Do you wish to continue?", { count, user }) }

+

{ _t("For a large amount of messages, this might take some time. " + + "Please don't refresh your client in the meantime.") }

+ setKeepStateEvents(e.target.checked)} + > + { _t("Preserve system messages") } + +
+ { _t("Uncheck if you also want to remove system messages on this user " + + "(e.g. membership change, profile change…)") } +
+
+ { setImmediate(redact); onFinished(true); }} + onCancel={() => onFinished(false)} + /> + ; + } +}; + +export default BulkRedactDialog; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index 394de5bac3..c4e4e9b282 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -23,7 +23,6 @@ import { ClientEvent, MatrixClient } from 'matrix-js-sdk/src/client'; import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; import { User } from 'matrix-js-sdk/src/models/user'; import { Room } from 'matrix-js-sdk/src/models/room'; -import { EventTimeline } from 'matrix-js-sdk/src/models/event-timeline'; import { MatrixEvent } from 'matrix-js-sdk/src/models/event'; import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import { EventType } from "matrix-js-sdk/src/@types/event"; @@ -60,11 +59,11 @@ import Spinner from "../elements/Spinner"; import PowerSelector from "../elements/PowerSelector"; import MemberAvatar from "../avatars/MemberAvatar"; import PresenceLabel from "../rooms/PresenceLabel"; +import BulkRedactDialog from "../dialogs/BulkRedactDialog"; import ShareDialog from "../dialogs/ShareDialog"; import ErrorDialog from "../dialogs/ErrorDialog"; import QuestionDialog from "../dialogs/QuestionDialog"; import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog"; -import InfoDialog from "../dialogs/InfoDialog"; import RoomAvatar from "../avatars/RoomAvatar"; import RoomName from "../elements/RoomName"; import { mediaFromMxc } from "../../../customisations/Media"; @@ -629,75 +628,14 @@ const RoomKickButton = ({ room, member, startUpdating, stopUpdating }: Omit = ({ member }) => { const cli = useContext(MatrixClientContext); - const onRedactAllMessages = async () => { - const { roomId, userId } = member; - const room = cli.getRoom(roomId); - if (!room) { - return; - } - let timeline = room.getLiveTimeline(); - let eventsToRedact = []; - while (timeline) { - eventsToRedact = timeline.getEvents().reduce((events, event) => { - if (event.getSender() === userId && !event.isRedacted() && !event.isRedaction() && - event.getType() !== EventType.RoomCreate && - // Don't redact ACLs because that'll obliterate the room - // See https://github.com/matrix-org/synapse/issues/4042 for details. - event.getType() !== EventType.RoomServerAcl - ) { - return events.concat(event); - } else { - return events; - } - }, eventsToRedact); - timeline = timeline.getNeighbouringTimeline(EventTimeline.BACKWARDS); - } + const onRedactAllMessages = () => { + const room = cli.getRoom(member.roomId); + if (!room) return; - const count = eventsToRedact.length; - const user = member.name; - - if (count === 0) { - Modal.createTrackedDialog('No user messages found to remove', '', InfoDialog, { - title: _t("No recent messages by %(user)s found", { user }), - description: -
-

{ _t("Try scrolling up in the timeline to see if there are any earlier ones.") }

-
, - }); - } else { - const { finished } = Modal.createTrackedDialog('Remove recent messages by user', '', QuestionDialog, { - title: _t("Remove recent messages by %(user)s", { user }), - description: -
-

{ _t("You are about to remove %(count)s messages by %(user)s. " + - "This cannot be undone. Do you wish to continue?", { count, user }) }

-

{ _t("For a large amount of messages, this might take some time. " + - "Please don't refresh your client in the meantime.") }

-
, - button: _t("Remove %(count)s messages", { count }), - }); - - const [confirmed] = await finished; - if (!confirmed) { - return; - } - - // Submitting a large number of redactions freezes the UI, - // so first yield to allow to rerender after closing the dialog. - await Promise.resolve(); - - logger.info(`Started redacting recent ${count} messages for ${user} in ${roomId}`); - await Promise.all(eventsToRedact.map(async event => { - try { - await cli.redactEvent(roomId, event.getId()); - } catch (err) { - // log and swallow errors - logger.error("Could not redact", event.getId()); - logger.error(err); - } - })); - logger.info(`Finished redacting recent ${count} messages for ${user} in ${roomId}`); - } + Modal.createTrackedDialog("Bulk Redact Dialog", "", BulkRedactDialog, { + matrixClient: cli, + room, member, + }); }; return diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx index fef7c6807f..958c2a533a 100644 --- a/src/components/views/rooms/RoomListHeader.tsx +++ b/src/components/views/rooms/RoomListHeader.tsx @@ -137,29 +137,50 @@ const PrototypeCommunityContextMenu = (props: ComponentProps; }; -const useJoiningRooms = (): Set => { +// Long-running actions that should trigger a spinner +enum PendingActionType { + JoinRoom, + BulkRedact, +} + +const usePendingActions = (): Map> => { const cli = useContext(MatrixClientContext); - const [joiningRooms, setJoiningRooms] = useState(new Set()); + const [actions, setActions] = useState(new Map>()); + + const addAction = (type: PendingActionType, key: string) => { + const keys = new Set(actions.get(type)); + keys.add(key); + setActions(new Map(actions).set(type, keys)); + }; + const removeAction = (type: PendingActionType, key: string) => { + const keys = new Set(actions.get(type)); + if (keys.delete(key)) { + setActions(new Map(actions).set(type, keys)); + } + }; + useDispatcher(defaultDispatcher, payload => { switch (payload.action) { case Action.JoinRoom: - setJoiningRooms(new Set(joiningRooms.add(payload.roomId))); + addAction(PendingActionType.JoinRoom, payload.roomId); break; case Action.JoinRoomReady: case Action.JoinRoomError: - if (joiningRooms.delete(payload.roomId)) { - setJoiningRooms(new Set(joiningRooms)); - } + removeAction(PendingActionType.JoinRoom, payload.roomId); + break; + case Action.BulkRedactStart: + addAction(PendingActionType.BulkRedact, payload.roomId); + break; + case Action.BulkRedactEnd: + removeAction(PendingActionType.BulkRedact, payload.roomId); break; } }); - useTypedEventEmitter(cli, ClientEvent.Room, (room: Room) => { - if (joiningRooms.delete(room.roomId)) { - setJoiningRooms(new Set(joiningRooms)); - } - }); + useTypedEventEmitter(cli, ClientEvent.Room, (room: Room) => + removeAction(PendingActionType.JoinRoom, room.roomId), + ); - return joiningRooms; + return actions; }; interface IProps { @@ -179,7 +200,7 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => { const allRoomsInHome = useEventEmitterState(SpaceStore.instance, UPDATE_HOME_BEHAVIOUR, () => { return SpaceStore.instance.allRoomsInHome; }); - const joiningRooms = useJoiningRooms(); + const pendingActions = usePendingActions(); const filterCondition = RoomListStore.instance.getFirstNameFilterCondition(); const count = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () => { @@ -398,14 +419,17 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => { title = getMetaSpaceName(spaceKey as MetaSpace, allRoomsInHome); } - let pendingRoomJoinSpinner: JSX.Element; - if (joiningRooms.size) { - pendingRoomJoinSpinner = - - ; - } + const pendingActionSummary = [...pendingActions.entries()] + .filter(([type, keys]) => keys.size > 0) + .map(([type, keys]) => { + switch (type) { + case PendingActionType.JoinRoom: + return _t("Currently joining %(count)s rooms", { count: keys.size }); + case PendingActionType.BulkRedact: + return _t("Currently removing messages in %(count)s rooms", { count: keys.size }); + } + }) + .join("\n"); let contextMenuButton: JSX.Element =
{ title }
; if (activeSpace || spaceKey === MetaSpace.Home) { @@ -424,7 +448,9 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => { return
{ contextMenuButton } - { pendingRoomJoinSpinner } + { pendingActionSummary ? + : + null } { canShowPlusMenu &&