first draft of Redaction ELS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/messages/_RedactedBody.scss

@@ -15,6 +15,7 @@ limitations under the License.
 .mx_RedactedBody {
     white-space: pre-wrap;
     color: $muted-fg-color;
+    vertical-align: middle;
 
     padding-left: 16px;
     position: relative;

src/components/structures/MessagePanel.js

@@ -29,6 +29,7 @@ import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
 import {haveTileForEvent} from "../views/rooms/EventTile";
 import {textForEvent} from "../../TextForEvent";
+import RedactionEventListSummary from "../views/elements/RedactionEventListSummary";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = ['m.sticker', 'm.room.message'];
@@ -1062,5 +1063,102 @@ class MemberGrouper {
     }
 }
 
+// Wrap consecutive redactions by the same user in a ListSummary, ignore if redacted
+class RedactionGrouper {
+    static canStartGroup = function(panel, ev) {
+        return panel._shouldShowEvent(ev) && ev.isRedacted();
+    }
+
+    constructor(panel, ev, prevEvent, lastShownEvent) {
+        this.panel = panel;
+        this.readMarker = panel._readMarkerForEvent(
+            ev.getId(),
+            ev === lastShownEvent,
+        );
+        this.events = [ev];
+        this.prevEvent = prevEvent;
+        this.lastShownEvent = lastShownEvent;
+    }
+
+    shouldGroup(ev) {
+        if (this.panel._wantsDateSeparator(this.events[0], ev.getDate())) return false;
+        if (ev.getType() === "m.room.redaction") return true; // for show-hidden-events users
+        return ev.isRedacted() && ev.sender === this.events[0].sender &&
+            ev.getUnsigned().redacted_because.sender === this.events[0].getUnsigned().redacted_because.sender;
+    }
+
+    add(ev) {
+        if (ev.getType() === "m.room.redaction") return; // for show-hidden-events users
+        this.readMarker = this.readMarker || this.panel._readMarkerForEvent(
+            ev.getId(),
+            ev === this.lastShownEvent,
+        );
+        this.events.push(ev);
+    }
+
+    getTiles() {
+        // If we don't have any events to group, don't even try to group them. The logic
+        // below assumes that we have a group of events to deal with, but we might not if
+        // the events we were supposed to group were redacted.
+        if (!this.events || !this.events.length) return [];
+
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+
+        const panel = this.panel;
+        const lastShownEvent = this.lastShownEvent;
+        const ret = [];
+
+        if (panel._wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
+            const ts = this.events[0].getTs();
+            ret.push(
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+            );
+        }
+
+        // Ensure that the key of the MemberEventListSummary does not change with new
+        // member events. This will prevent it from being re-created unnecessarily, and
+        // instead will allow new props to be provided. In turn, the shouldComponentUpdate
+        // method on ELS can be used to prevent unnecessary renderings.
+        const key = "redactioneventlistsummary-" + (this.prevEvent ? this.events[0].getId() : "initial");
+
+        let highlightInMels = false;
+        let eventTiles = this.events.map((e) => {
+            if (e.getId() === panel.props.highlightedEventId) {
+                highlightInMels = true;
+            }
+            // In order to prevent DateSeparators from appearing in the expanded form
+            // of MemberEventListSummary, render each member event as if the previous
+            // one was itself. This way, the timestamp of the previous event === the
+            // timestamp of the current event, and no DateSeparator is inserted.
+            return panel._getTilesForEvent(e, e, e === lastShownEvent);
+        }).reduce((a, b) => a.concat(b), []);
+
+        if (eventTiles.length === 0) {
+            eventTiles = null;
+        }
+
+        ret.push(
+            <RedactionEventListSummary
+                key={key}
+                events={this.events}
+                onToggle={panel._onHeightChanged} // Update scroll state
+                startExpanded={highlightInMels}
+            >
+                 { eventTiles }
+            </RedactionEventListSummary>,
+        );
+
+        if (this.readMarker) {
+            ret.push(this.readMarker);
+        }
+
+        return ret;
+    }
+
+    getNewPrevEvent() {
+        return this.events[0];
+    }
+}
+
 // all the grouper classes that we use
-const groupers = [CreationGrouper, MemberGrouper];
+const groupers = [CreationGrouper, MemberGrouper, RedactionGrouper];

src/components/views/elements/RedactionEventListSummary.tsx

@@ -0,0 +1,81 @@
+/*
+Copyright 2020 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 from "react";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+
+import { _t } from "../../../languageHandler";
+import * as sdk from "../../../index";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+    // An array of member events to summarise
+    events: MatrixEvent[];
+    // An array of EventTiles to render when expanded
+    children: React.ReactChildren;
+    // The minimum number of events needed to trigger summarisation
+    threshold?: number;
+    // Called when the ELS expansion is toggled
+    onToggle: () => void;
+    // Whether or not to begin with state.expanded=true
+    startExpanded?: boolean;
+}
+
+export default class RedactionEventListSummary extends React.Component<IProps> {
+    static displayName = "RedactionEventListSummary";
+
+    static defaultProps = {
+        threshold: 2,
+    };
+
+    static contextType = MatrixClientContext;
+
+    shouldComponentUpdate(nextProps) {
+        // Update if
+        //  - The number of summarised events has changed
+        //  - or if the summary is about to toggle to become collapsed
+        //  - or if there are fewEvents, meaning the child eventTiles are shown as-is
+        return (
+            nextProps.events.length !== this.props.events.length ||
+            nextProps.events.length < this.props.threshold
+        );
+    }
+
+    render() {
+        const count = this.props.events.length;
+        const redactionSender = this.props.events[0].getUnsigned().redacted_because.sender;
+
+        let avatarMember = this.props.events[0].sender;
+        let summaryText = _t("%(count)s messages deleted", { count });
+        if (redactionSender !== this.context.getUserId()) {
+            const room = (this.context as MatrixClient).getRoom(redactionSender || this.props.events[0].getSender());
+            avatarMember = room && room.getMember(redactionSender);
+            const name = avatarMember ? avatarMember.name : redactionSender;
+            summaryText = _t("%(count)s messages deleted by %(name)s", { count, name });
+        }
+
+        const EventListSummary = sdk.getComponent("views.elements.EventListSummary");
+        return <EventListSummary
+            events={this.props.events}
+            threshold={this.props.threshold}
+            onToggle={this.props.onToggle}
+            startExpanded={this.props.startExpanded}
+            children={this.props.children}
+            summaryMembers={[avatarMember]}
+            summaryText={summaryText} />;
+    }
+}

src/components/views/messages/RedactedBody.tsx

@@ -32,7 +32,7 @@ const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
     if (redactedBecauseUserId !== cli.getUserId()) {
         const room = cli.getRoom(mxEvent.getRoomId());
         const sender = room && room.getMember(redactedBecauseUserId);
-        text = _t("Message deleted by %(user)s", { user: sender.name || redactedBecauseUserId });
+        text = _t("Message deleted by %(name)s", { name: sender ? sender.name : redactedBecauseUserId });
     }
 
     return (

src/i18n/strings/en_EN.json

@@ -1329,7 +1329,7 @@
     "<reactors/><reactedWith> reacted with %(content)s</reactedWith>": "<reactors/><reactedWith> reacted with %(content)s</reactedWith>",
     "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
     "Message deleted": "Message deleted",
-    "Message deleted by %(user)s": "Message deleted by %(user)s",
+    "Message deleted by %(name)s": "Message deleted by %(name)s",
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
     "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
     "%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
@@ -1487,6 +1487,8 @@
     "%(oneUser)smade no changes %(count)s times|one": "%(oneUser)smade no changes",
     "Power level": "Power level",
     "Custom level": "Custom level",
+    "%(count)s messages deleted|other": "%(count)s messages deleted",
+    "%(count)s messages deleted by %(name)s|other": "%(count)s messages deleted by %(name)s",
     "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
     "<a>In reply to</a> <pill>": "<a>In reply to</a> <pill>",
     "Room alias": "Room alias",