Merge branch 'develop' into feature-multi-language-spell-check

src/components/views/settings/AvatarSetting.js

@@ -65,7 +65,7 @@ const AvatarSetting = ({avatarUrl, avatarAltText, avatarName, uploadAvatar, remo
 
     const avatarClasses = classNames({
         "mx_AvatarSetting_avatar": true,
-        "mx_AvatarSetting_avatar_hovering": isHovering,
+        "mx_AvatarSetting_avatar_hovering": isHovering && uploadAvatar,
     });
     return <div className={avatarClasses}>
         {avatarElement}

src/components/views/settings/BridgeTile.js

@@ -1,115 +0,0 @@
-/*
-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 PropTypes from 'prop-types';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
-import {_t} from "../../../languageHandler";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import Pill from "../elements/Pill";
-import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
-import BaseAvatar from "../avatars/BaseAvatar";
-import AccessibleButton from "../elements/AccessibleButton";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
-import SettingsStore from "../../../settings/SettingsStore";
-
-@replaceableComponent("views.settings.BridgeTile")
-export default class BridgeTile extends React.PureComponent {
-    static propTypes = {
-        ev: PropTypes.object.isRequired,
-        room: PropTypes.object.isRequired,
-    }
-
-    state = {
-        visible: false,
-    }
-
-    _toggleVisible() {
-        this.setState({
-            visible: !this.state.visible,
-        });
-    }
-
-    render() {
-        const content = this.props.ev.getContent();
-        const { channel, network, protocol } = content;
-        const protocolName = protocol.displayname || protocol.id;
-        const channelName = channel.displayname || channel.id;
-        const networkName = network ? network.displayname || network.id : protocolName;
-
-        let creator = null;
-        if (content.creator) {
-            creator = _t("This bridge was provisioned by <user />.", {}, {
-                    user: <Pill
-                        type={Pill.TYPE_USER_MENTION}
-                        room={this.props.room}
-                        url={makeUserPermalink(content.creator)}
-                        shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
-                    />,
-            });
-        }
-
-        const bot = _t("This bridge is managed by <user />.", {}, {
-            user: <Pill
-                type={Pill.TYPE_USER_MENTION}
-                room={this.props.room}
-                url={makeUserPermalink(this.props.ev.getSender())}
-                shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
-                />,
-        });
-
-        let networkIcon;
-
-        if (protocol.avatar) {
-            const avatarUrl = getHttpUriForMxc(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                protocol.avatar, 64, 64, "crop",
-            );
-
-            networkIcon = <BaseAvatar className="protocol-icon"
-                width={48}
-                height={48}
-                resizeMethod='crop'
-                name={ protocolName }
-                idName={ protocolName }
-                url={ avatarUrl }
-            />;
-        } else {
-            networkIcon = <div class="noProtocolIcon"></div>;
-        }
-
-        const id = this.props.ev.getId();
-        const metadataClassname = "metadata" + (this.state.visible ? " visible" : "");
-        return (<li key={id}>
-            <div className="column-icon">
-                {networkIcon}
-            </div>
-            <div className="column-data">
-                <h3>{protocolName}</h3>
-                <p className="workspace-channel-details">
-                    <span>{_t("Workspace: %(networkName)s", {networkName})}</span>
-                    <span className="channel">{_t("Channel: %(channelName)s", {channelName})}</span>
-                </p>
-                <p className={metadataClassname}>
-                    {creator} {bot}
-                </p>
-                <AccessibleButton className="mx_showMore" kind="secondary" onClick={this._toggleVisible.bind(this)}>
-                    { this.state.visible ? _t("Show less") : _t("Show more") }
-                </AccessibleButton>
-            </div>
-        </li>);
-    }
-}

src/components/views/settings/BridgeTile.tsx

@@ -0,0 +1,167 @@
+/*
+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 PropTypes from 'prop-types';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import {_t} from "../../../languageHandler";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import Pill from "../elements/Pill";
+import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import BaseAvatar from "../avatars/BaseAvatar";
+import SettingsStore from "../../../settings/SettingsStore";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { isUrlPermitted } from '../../../HtmlUtils';
+
+interface IProps {
+    ev: MatrixEvent;
+    room: Room;
+}
+
+/**
+ * This should match https://github.com/matrix-org/matrix-doc/blob/hs/msc-bridge-inf/proposals/2346-bridge-info-state-event.md#mbridge
+ */
+interface IBridgeStateEvent {
+    bridgebot: string;
+    creator?: string;
+    protocol: {
+        id: string;
+        displayname?: string;
+        // eslint-disable-next-line camelcase
+        avatar_url?: string;
+        // eslint-disable-next-line camelcase
+        external_url?: string;
+    };
+    network?: {
+        id: string;
+        displayname?: string;
+        // eslint-disable-next-line camelcase
+        avatar_url?: string;
+        // eslint-disable-next-line camelcase
+        external_url?: string;
+    };
+    channel: {
+        id: string;
+        displayname?: string;
+        // eslint-disable-next-line camelcase
+        avatar_url?: string;
+        // eslint-disable-next-line camelcase
+        external_url?: string;
+    };
+}
+
+export default class BridgeTile extends React.PureComponent<IProps> {
+    static propTypes = {
+        ev: PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
+    }
+
+    render() {
+        const content: IBridgeStateEvent = this.props.ev.getContent();
+        // Validate
+        if (!content.channel?.id || !content.protocol?.id) {
+            console.warn(`Bridge info event ${this.props.ev.getId()} has missing content. Tile will not render`);
+            return null;
+        }
+        if (!content.bridgebot) {
+            // Bridgebot was not required previously, so in order to not break rooms we are allowing
+            // the sender to be used in place. When the proposal is merged, this should be removed.
+            console.warn(`Bridge info event ${this.props.ev.getId()} does not provide a 'bridgebot' key which`
+             + "is deprecated behaviour. Using sender for now.");
+            content.bridgebot = this.props.ev.getSender();
+        }
+        const { channel, network, protocol } = content;
+        const protocolName = protocol.displayname || protocol.id;
+        const channelName = channel.displayname || channel.id;
+
+        let creator = null;
+        if (content.creator) {
+            creator = <li>{_t("This bridge was provisioned by <user />.", {}, {
+                user: () => <Pill
+                    type={Pill.TYPE_USER_MENTION}
+                    room={this.props.room}
+                    url={makeUserPermalink(content.creator)}
+                    shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
+                />,
+            })}</li>;
+        }
+
+        const bot = <li>{_t("This bridge is managed by <user />.", {}, {
+            user: () => <Pill
+                type={Pill.TYPE_USER_MENTION}
+                room={this.props.room}
+                url={makeUserPermalink(content.bridgebot)}
+                shouldShowPillAvatar={SettingsStore.getValue("Pill.shouldShowPillAvatar")}
+            />,
+        })}</li>;
+
+        let networkIcon;
+
+        if (protocol.avatar_url) {
+            const avatarUrl = getHttpUriForMxc(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                protocol.avatar_url, 64, 64, "crop",
+            );
+
+            networkIcon = <BaseAvatar className="protocol-icon"
+                width={48}
+                height={48}
+                resizeMethod='crop'
+                name={ protocolName }
+                idName={ protocolName }
+                url={ avatarUrl }
+            />;
+        } else {
+            networkIcon = <div className="noProtocolIcon"></div>;
+        }
+        let networkItem = null;
+        if (network) {
+            const networkName = network.displayname || network.id;
+            let networkLink = <span>{networkName}</span>;
+            if (typeof network.external_url === "string" && isUrlPermitted(network.external_url)) {
+                networkLink = <a href={network.external_url} target="_blank" rel="noreferrer noopener">{networkName}</a>
+            }
+            networkItem = _t("Workspace: <networkLink/>", {}, {
+                networkLink: () => networkLink,
+            });
+        }
+
+        let channelLink = <span>{channelName}</span>;
+        if (typeof channel.external_url === "string" && isUrlPermitted(channel.external_url)) {
+            channelLink = <a href={channel.external_url} target="_blank" rel="noreferrer noopener">{channelName}</a>
+        }
+
+        const id = this.props.ev.getId();
+        return (<li key={id}>
+            <div className="column-icon">
+                {networkIcon}
+            </div>
+            <div className="column-data">
+                <h3>{protocolName}</h3>
+                <p className="workspace-channel-details">
+                    {networkItem}
+                    <span className="channel">{_t("Channel: <channelLink/>", {}, {
+                        channelLink: () => channelLink,
+                    })}</span>
+                </p>
+                <ul className="metadata">
+                    {creator} {bot}
+                </ul>
+            </div>
+        </li>);
+    }
+}

src/components/views/settings/ProfileSettings.js

@@ -52,19 +52,23 @@ export default class ProfileSettings extends React.Component {
         // clear file upload field so same file can be selected
         this._avatarUpload.current.value = "";
         this.setState({
-            avatarUrl: undefined,
-            avatarFile: undefined,
+            avatarUrl: null,
+            avatarFile: null,
             enableProfileSave: true,
         });
     };
 
-    _clearProfile = async (e) => {
+    _cancelProfileChanges = async (e) => {
         e.stopPropagation();
         e.preventDefault();
 
         if (!this.state.enableProfileSave) return;
-        this._removeAvatar();
-        this.setState({enableProfileSave: false, displayName: this.state.originalDisplayName});
+        this.setState({
+            enableProfileSave: false,
+            displayName: this.state.originalDisplayName,
+            avatarUrl: this.state.originalAvatarUrl,
+            avatarFile: null,
+        });
     };
 
     _saveProfile = async (e) => {
@@ -186,7 +190,7 @@ export default class ProfileSettings extends React.Component {
                 </div>
                 <div className="mx_ProfileSettings_buttons">
                     <AccessibleButton
-                        onClick={this._clearProfile}
+                        onClick={this._cancelProfileChanges}
                         kind="link"
                         disabled={!this.state.enableProfileSave}
                     >

src/components/views/settings/SecureBackupPanel.js

@@ -424,7 +424,7 @@ export default class SecureBackupPanel extends React.PureComponent {
                 <p>{_t(
                     "Back up your encryption keys with your account data in case you " +
                     "lose access to your sessions. Your keys will be secured with a " +
-                    "unique Recovery Key.",
+                    "unique Security Key.",
                 )}</p>
                 {statusDescription}
                 <details>

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -28,15 +28,14 @@ import { FontWatcher } from "../../../../../settings/watchers/FontWatcher";
 import { RecheckThemePayload } from '../../../../../dispatcher/payloads/RecheckThemePayload';
 import { Action } from '../../../../../dispatcher/actions';
 import { IValidationResult, IFieldState } from '../../../elements/Validation';
-import StyledRadioButton from '../../../elements/StyledRadioButton';
 import StyledCheckbox from '../../../elements/StyledCheckbox';
 import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
 import EventTilePreview from '../../../elements/EventTilePreview';
 import StyledRadioGroup from "../../../elements/StyledRadioGroup";
-import classNames from 'classnames';
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import {UIFeature} from "../../../../../settings/UIFeature";
+import {Layout} from "../../../../../settings/Layout";
 
 interface IProps {
 }
@@ -62,7 +61,7 @@ interface IState extends IThemeState {
     useSystemFont: boolean;
     systemFont: string;
     showAdvanced: boolean;
-    useIRCLayout: boolean;
+    layout: Layout;
 }
 
 
@@ -83,7 +82,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             useSystemFont: SettingsStore.getValue("useSystemFont"),
             systemFont: SettingsStore.getValue("systemFont"),
             showAdvanced: false,
-            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+            layout: SettingsStore.getValue("layout"),
         };
     }
 
@@ -213,15 +212,15 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         this.setState({customThemeUrl: e.target.value});
     };
 
-    private onLayoutChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-        const val = e.target.value === "true";
-
-        this.setState({
-            useIRCLayout: val,
-        });
-
-        SettingsStore.setValue("useIRCLayout", null, SettingLevel.DEVICE, val);
-    };
+    private onIRCLayoutChange = (enabled: boolean) => {
+        if (enabled) {
+            this.setState({layout: Layout.IRC});
+            SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+        } else {
+            this.setState({layout: Layout.Group});
+            SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
+        }
+    }
 
     private renderThemeSection() {
         const themeWatcher = new ThemeWatcher();
@@ -306,7 +305,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             <EventTilePreview
                 className="mx_AppearanceUserSettingsTab_fontSlider_preview"
                 message={this.MESSAGE_PREVIEW_TEXT}
-                useIRCLayout={this.state.useIRCLayout}
+                layout={this.state.layout}
             />
             <div className="mx_AppearanceUserSettingsTab_fontSlider">
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
@@ -342,50 +341,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         </div>;
     }
 
-    private renderLayoutSection = () => {
-        return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_Layout">
-            <span className="mx_SettingsTab_subheading">{_t("Message layout")}</span>
-
-            <div className="mx_AppearanceUserSettingsTab_Layout_RadioButtons">
-                <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: this.state.useIRCLayout,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        useIRCLayout={true}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="true"
-                        checked={this.state.useIRCLayout}
-                        onChange={this.onLayoutChange}
-                    >
-                        {_t("Compact")}
-                    </StyledRadioButton>
-                </div>
-                <div className="mx_AppearanceUserSettingsTab_spacer" />
-                <div className={classNames("mx_AppearanceUserSettingsTab_Layout_RadioButton", {
-                    mx_AppearanceUserSettingsTab_Layout_RadioButton_selected: !this.state.useIRCLayout,
-                })}>
-                    <EventTilePreview
-                        className="mx_AppearanceUserSettingsTab_Layout_RadioButton_preview"
-                        message={this.MESSAGE_PREVIEW_TEXT}
-                        useIRCLayout={false}
-                    />
-                    <StyledRadioButton
-                        name="layout"
-                        value="false"
-                        checked={!this.state.useIRCLayout}
-                        onChange={this.onLayoutChange}
-                    >
-                        {_t("Modern")}
-                    </StyledRadioButton>
-                </div>
-            </div>
-        </div>;
-    };
-
     private renderAdvancedSection() {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
@@ -409,14 +364,15 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                     name="useCompactLayout"
                     level={SettingLevel.DEVICE}
                     useCheckbox={true}
-                    disabled={this.state.useIRCLayout}
-                />
-                <SettingsFlag
-                    name="useIRCLayout"
-                    level={SettingLevel.DEVICE}
-                    useCheckbox={true}
-                    onChange={(checked) => this.setState({useIRCLayout: checked})}
+                    disabled={this.state.layout == Layout.IRC}
                 />
+                <StyledCheckbox
+                    checked={this.state.layout == Layout.IRC}
+                    onChange={(ev) => this.onIRCLayoutChange(ev.target.checked)}
+                >
+                    {_t("Enable experimental, compact IRC style layout")}
+                </StyledCheckbox>
+
                 <SettingsFlag
                     name="useSystemFont"
                     level={SettingLevel.DEVICE}

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -67,7 +67,6 @@ export default class LabsUserSettingsTab extends React.Component {
                     <SettingsFlag name={"enableWidgetScreenshots"} level={SettingLevel.ACCOUNT} />
                     <SettingsFlag name={"showHiddenEventsInTimeline"} level={SettingLevel.DEVICE} />
                     <SettingsFlag name={"lowBandwidth"} level={SettingLevel.DEVICE} />
-                    <SettingsFlag name={"sendReadReceipts"} level={SettingLevel.ACCOUNT} />
                     <SettingsFlag name={"advancedRoomListLogging"} level={SettingLevel.DEVICE} />
                 </div>
             </div>

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -34,6 +34,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         'MessageComposerInput.suggestEmoji',
         'sendTypingNotifications',
         'MessageComposerInput.ctrlEnterToSend',
+        'MessageComposerInput.showStickersButton',
     ];
 
     static TIMELINE_SETTINGS = [
@@ -46,11 +47,15 @@ export default class PreferencesUserSettingsTab extends React.Component {
         'alwaysShowTimestamps',
         'showRedactions',
         'enableSyntaxHighlightLanguageDetection',
+        'expandCodeByDefault',
+        'showCodeLineNumbers',
         'showJoinLeaves',
         'showAvatarChanges',
         'showDisplaynameChanges',
         'showImages',
+        'showChatEffects',
         'Pill.shouldShowPillAvatar',
+        'ctrlFForSearch',
     ];
 
     static GENERAL_SETTINGS = [