Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

src/components/views/messages/EditHistoryMessage.js

@@ -26,6 +26,7 @@ import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import classNames from 'classnames';
+import RedactedBody from "./RedactedBody";
 
 function getReplacedContent(event) {
     const originalContent = event.getOriginalContent();
@@ -132,8 +133,7 @@ export default class EditHistoryMessage extends React.PureComponent {
         const content = getReplacedContent(mxEvent);
         let contentContainer;
         if (mxEvent.isRedacted()) {
-            const UnknownBody = sdk.getComponent('messages.UnknownBody');
-            contentContainer = <UnknownBody mxEvent={this.props.mxEvent} />;
+            contentContainer = <RedactedBody mxEvent={this.props.mxEvent} />;
         } else {
             let contentElements;
             if (this.props.previousEdit) {
@@ -158,7 +158,6 @@ export default class EditHistoryMessage extends React.PureComponent {
         const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.state.sendStatus) !== -1);
         const classes = classNames({
             "mx_EventTile": true,
-            "mx_EventTile_redacted": mxEvent.isRedacted(),
             "mx_EventTile_sending": isSending,
             "mx_EventTile_notSent": this.state.sendStatus === 'not_sent',
         });

src/components/views/messages/MKeyVerificationRequest.js

@@ -21,7 +21,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {getNameForEventRoom, userLabelForEventRoom}
     from '../../../utils/KeyVerificationStateObserver';
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 
 export default class MKeyVerificationRequest extends React.Component {

src/components/views/messages/MessageActionBar.js

@@ -21,11 +21,12 @@ import PropTypes from 'prop-types';
 
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import Modal from '../../../Modal';
 import {aboveLeftOf, ContextMenu, ContextMenuButton, useContextMenu} from '../../structures/ContextMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import RoomContext from "../../../contexts/RoomContext";
+import SettingsStore from '../../../settings/SettingsStore';
 
 const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFocusChange}) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
@@ -48,7 +49,7 @@ const OptionsButton = ({mxEvent, getTile, getReplyThread, permalinkCreator, onFo
         };
 
         let e2eInfoCallback = null;
-        if (mxEvent.isEncrypted()) {
+        if (mxEvent.isEncrypted() && !SettingsStore.getValue("feature_cross_signing")) {
             e2eInfoCallback = onCryptoClick;
         }
 

src/components/views/messages/MessageEvent.js

@@ -20,6 +20,8 @@ import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
 import SettingsStore from "../../../settings/SettingsStore";
 import {Mjolnir} from "../../../mjolnir/Mjolnir";
+import RedactedBody from "./RedactedBody";
+import UnknownBody from "./UnknownBody";
 
 export default createReactClass({
     displayName: 'MessageEvent',
@@ -64,8 +66,6 @@ export default createReactClass({
     },
 
     render: function() {
-        const UnknownBody = sdk.getComponent('messages.UnknownBody');
-
         const bodyTypes = {
             'm.text': sdk.getComponent('messages.TextualBody'),
             'm.notice': sdk.getComponent('messages.TextualBody'),
@@ -84,7 +84,7 @@ export default createReactClass({
         const content = this.props.mxEvent.getContent();
         const type = this.props.mxEvent.getType();
         const msgtype = content.msgtype;
-        let BodyType = UnknownBody;
+        let BodyType = RedactedBody;
         if (!this.props.mxEvent.isRedacted()) {
             // only resolve BodyType if event is not redacted
             if (type && evTypes[type]) {
@@ -94,6 +94,9 @@ export default createReactClass({
             } else if (content.url) {
                 // Fallback to MFileBody if there's a content URL
                 BodyType = bodyTypes['m.file'];
+            } else {
+                // Fallback to UnknownBody otherwise if not redacted
+                BodyType = UnknownBody;
             }
         }
 

src/components/views/messages/RedactedBody.tsx

@@ -0,0 +1,46 @@
+/*
+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, {useContext} from "react";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { _t } from "../../../languageHandler";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+const RedactedBody = React.forwardRef<any, IProps>(({mxEvent}, ref) => {
+    const cli: MatrixClient = useContext(MatrixClientContext);
+
+    let text = _t("Message deleted");
+    const unsigned = mxEvent.getUnsigned();
+    const redactedBecauseUserId = unsigned && unsigned.redacted_because && unsigned.redacted_because.sender;
+    if (redactedBecauseUserId && redactedBecauseUserId !== mxEvent.getSender()) {
+        const room = cli.getRoom(mxEvent.getRoomId());
+        const sender = room && room.getMember(redactedBecauseUserId);
+        text = _t("Message deleted by %(name)s", { name: sender ? sender.name : redactedBecauseUserId });
+    }
+
+    return (
+        <span className="mx_RedactedBody" ref={ref}>
+            { text }
+        </span>
+    );
+});
+
+export default RedactedBody;

src/components/views/messages/RoomCreate.js

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';

src/components/views/messages/SenderProfile.js

@@ -131,7 +131,9 @@ export default createReactClass({
 
         return (
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
-                { content }
+                <div className="mx_SenderProfile_hover">
+                    { content }
+                </div>
             </div>
         );
     },

src/components/views/messages/TextualBody.js

@@ -25,7 +25,7 @@ import * as HtmlUtils from '../../../HtmlUtils';
 import {formatDate} from '../../../DateUtils';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import * as ContextMenu from '../../structures/ContextMenu';
 import SettingsStore from "../../../settings/SettingsStore";
@@ -34,6 +34,7 @@ import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
 import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext} from "../../../utils/strings";
 
 export default createReactClass({
     displayName: 'TextualBody',
@@ -69,23 +70,6 @@ export default createReactClass({
         };
     },
 
-    copyToClipboard: function(text) {
-        const textArea = document.createElement("textarea");
-        textArea.value = text;
-        document.body.appendChild(textArea);
-        textArea.select();
-
-        let successful = false;
-        try {
-            successful = document.execCommand('copy');
-        } catch (err) {
-            console.log('Unable to copy');
-        }
-
-        document.body.removeChild(textArea);
-        return successful;
-    },
-
     // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._content = createRef();
@@ -277,17 +261,17 @@ export default createReactClass({
         Array.from(ReactDOM.findDOMNode(this).querySelectorAll('.mx_EventTile_body pre')).forEach((p) => {
             const button = document.createElement("span");
             button.className = "mx_EventTile_copyButton";
-            button.onclick = (e) => {
+            button.onclick = async () => {
                 const copyCode = button.parentNode.getElementsByTagName("pre")[0];
-                const successful = this.copyToClipboard(copyCode.textContent);
+                const successful = await copyPlaintext(copyCode.textContent);
 
-                const buttonRect = e.target.getBoundingClientRect();
+                const buttonRect = button.getBoundingClientRect();
                 const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
                 const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
                     ...toRightOf(buttonRect, 2),
                     message: successful ? _t('Copied!') : _t('Failed to copy'),
                 });
-                e.target.onmouseleave = close;
+                button.onmouseleave = close;
             };
 
             // Wrap a div around <pre> so that the copy button can be correctly positioned

src/components/views/messages/TileErrorBoundary.js

@@ -0,0 +1,72 @@
+/*
+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 classNames from 'classnames';
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import Modal from '../../../Modal';
+
+export default class TileErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            error: null,
+        };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Side effects are not permitted here, so we only update the state so
+        // that the next render shows an error message.
+        return { error };
+    }
+
+    _onBugReport = () => {
+        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        if (!BugReportDialog) {
+            return;
+        }
+        Modal.createTrackedDialog('Bug Report Dialog', '', BugReportDialog, {
+            label: 'react-soft-crash-tile',
+        });
+    };
+
+    render() {
+        if (this.state.error) {
+            const { mxEvent } = this.props;
+            const classes = {
+                mx_EventTile: true,
+                mx_EventTile_info: true,
+                mx_EventTile_content: true,
+                mx_EventTile_tileError: true,
+            };
+            return (<div className={classNames(classes)}>
+                <div className="mx_EventTile_line">
+                    <span>
+                        {_t("Can't load this message")}
+                        { mxEvent && ` (${mxEvent.getType()})` }
+                        <a onClick={this._onBugReport} href="#">
+                            {_t("Submit logs")}
+                        </a>
+                    </span>
+                </div>
+            </div>);
+        }
+
+        return this.props.children;
+    }
+}

src/components/views/messages/UnknownBody.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+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.
@@ -14,27 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
+import React from "react";
 
-export default createReactClass({
-    displayName: 'UnknownBody',
-
-    render: function() {
-        let tooltip = _t("Removed or unknown message type");
-        if (this.props.mxEvent.isRedacted()) {
-            const redactedBecauseUserId = this.props.mxEvent.getUnsigned().redacted_because.sender;
-            tooltip = redactedBecauseUserId ?
-                _t("Message removed by %(userId)s", { userId: redactedBecauseUserId }) :
-                _t("Message removed");
-        }
-
-        const text = this.props.mxEvent.getContent().body;
-        return (
-            <span className="mx_UnknownBody" title={tooltip}>
-                { text }
-            </span>
-        );
-    },
-});
+export default ({mxEvent}) => {
+    const text = mxEvent.getContent().body;
+    return (
+        <span className="mx_UnknownBody">
+            { text }
+        </span>
+    );
+};