Merge pull request #3180 from matrix-org/bwindels/history-actions

Edit history actions

src/components/views/dialogs/ConfirmAndWaitRedactDialog.js

@@ -0,0 +1,90 @@
+/*
+Copyright 2019 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 sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+/*
+ * A dialog for confirming a redaction.
+ * Also shows a spinner (and possible error) while the redaction is ongoing,
+ * and only closes the dialog when the redaction is done or failed.
+ *
+ * This is done to prevent the edit history dialog racing with the redaction:
+ * if this dialog closes and the MessageEditHistoryDialog is shown again,
+ * it will fetch the relations again, which will race with the ongoing /redact request.
+ * which will cause the edit to appear unredacted.
+ *
+ * To avoid this, we keep the dialog open as long as /redact is in progress.
+ */
+export default class ConfirmAndWaitRedactDialog extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isRedacting: false,
+            redactionErrorCode: null,
+        };
+    }
+
+    onParentFinished = async (proceed) => {
+        if (proceed) {
+            this.setState({isRedacting: true});
+            try {
+                await this.props.redact();
+                this.props.onFinished(true);
+            } catch (error) {
+                const code = error.errcode || error.statusCode;
+                if (typeof code !== "undefined") {
+                    this.setState({redactionErrorCode: code});
+                } else {
+                    this.props.onFinished(true);
+                }
+            }
+        } else {
+            this.props.onFinished(false);
+        }
+    };
+
+    render() {
+        if (this.state.isRedacting) {
+            if (this.state.redactionErrorCode) {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                const code = this.state.redactionErrorCode;
+                return (
+                    <ErrorDialog
+                        onFinished={this.props.onFinished}
+                        title={_t('Error')}
+                        description={_t('You cannot delete this message. (%(code)s)', {code})}
+                    />
+                );
+            } else {
+                const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+                const Spinner = sdk.getComponent('elements.Spinner');
+                return (
+                    <BaseDialog
+                        onFinished={this.props.onFinished}
+                        hasCancel={false}
+                        title={_t("Removing…")}>
+                        <Spinner />
+                    </BaseDialog>
+                );
+            }
+        } else {
+            const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
+            return <ConfirmRedactDialog onFinished={this.onParentFinished} />;
+        }
+    }
+}

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -46,12 +46,13 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         const opts = {from: this.state.nextBatch};
         const roomId = this.props.mxEvent.getRoomId();
         const eventId = this.props.mxEvent.getId();
+        const client = MatrixClientPeg.get();
         let result;
         let resolve;
         let reject;
         const promise = new Promise((_resolve, _reject) => {resolve = _resolve; reject = _reject;});
         try {
-            result = await MatrixClientPeg.get().relations(
+            result = await client.relations(
                 roomId, eventId, "m.replace", "m.room.message", opts);
         } catch (error) {
             // log if the server returned an error
@@ -61,8 +62,11 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
             this.setState({error}, () => reject(error));
             return promise;
         }
+
+        const newEvents = result.events;
+        this._locallyRedactEventsIfNeeded(newEvents);
         this.setState({
-            events: this.state.events.concat(result.events),
+            events: this.state.events.concat(newEvents),
             nextBatch: result.nextBatch,
             isLoading: false,
         }, () => {
@@ -72,6 +76,21 @@ export default class MessageEditHistoryDialog extends React.PureComponent {
         return promise;
     }
 
+    _locallyRedactEventsIfNeeded(newEvents) {
+        const roomId = this.props.mxEvent.getRoomId();
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(roomId);
+        const pendingEvents = room.getPendingEvents();
+        for (const e of newEvents) {
+            const pendingRedaction = pendingEvents.find(pe => {
+                return pe.getType() === "m.room.redaction" && pe.getAssociatedId() === e.getId();
+            });
+            if (pendingRedaction) {
+                e.markLocallyRedacted(pendingRedaction);
+            }
+        }
+    }
+
     componentDidMount() {
         this.loadMoreEdits();
     }