Merge branches 'develop' and 't3chguy/cs_verification_decoration' of https://github.com/matrix-org/matrix-react-sdk into t3chguy/cs_verification_decoration

src/components/views/auth/AuthBody.js

@@ -17,29 +17,10 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
 
 export default class AuthBody extends React.PureComponent {
-    static PropTypes = {
-        header: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        header: true,
-    };
-
     render() {
-        const classes = {
-            'mx_AuthBody': true,
-            'mx_AuthBody_noHeader': !this.props.header,
-            // XXX The login pages all use a smaller fonts size but we don't want this
-            // for subsequent auth screens like the e2e setup. Doing this a terrible way
-            // for now.
-            'mx_AuthBody_loginRegister': this.props.header,
-        };
-
-        return <div className={classnames(classes)}>
+        return <div className="mx_AuthBody">
             { this.props.children }
         </div>;
     }

src/components/views/auth/CaptchaForm.js

@@ -62,7 +62,7 @@ export default createReactClass({
             console.log("Loading recaptcha script...");
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
             let protocol = global.location.protocol;
-            if (protocol === "vector:") {
+            if (protocol !== "http:") {
                 protocol = "https:";
             }
             const scriptTag = document.createElement('script');

src/components/views/auth/CompleteSecurityBody.js

@@ -0,0 +1,27 @@
+/*
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class CompleteSecurityBody extends React.PureComponent {
+    render() {
+        return <div className="mx_CompleteSecurityBody">
+            { this.props.children }
+        </div>;
+    }
+}

src/components/views/dialogs/NewSessionReviewDialog.js

@@ -0,0 +1,91 @@
+/*
+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 { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
+import DeviceVerifyDialog from './DeviceVerifyDialog';
+import BaseDialog from './BaseDialog';
+import DialogButtons from '../elements/DialogButtons';
+
+@replaceableComponent("views.dialogs.NewSessionReviewDialog")
+export default class NewSessionReviewDialog extends React.PureComponent {
+    static propTypes = {
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    onCancelClick = () => {
+        this.props.onFinished(false);
+    }
+
+    onContinueClick = () => {
+        const { userId, device } = this.props;
+        Modal.createTrackedDialog('New Session Verification', 'Starting dialog', DeviceVerifyDialog, {
+            userId,
+            device,
+        }, null, /* priority = */ false, /* static = */ true);
+    }
+
+    render() {
+        const { device } = this.props;
+
+        const icon = <span className="mx_NewSessionReviewDialog_headerIcon mx_E2EIcon_warning"></span>;
+        const titleText = _t("New session");
+
+        const title = <h2 className="mx_NewSessionReviewDialog_header">
+            {icon}
+            {titleText}
+        </h2>;
+
+        return (
+            <BaseDialog
+                title={title}
+                onFinished={this.props.onFinished}
+            >
+                <div className="mx_NewSessionReviewDialog_body">
+                    <p>{_t(
+                        "Use this session to verify your new one, " +
+                        "granting it access to encrypted messages:",
+                    )}</p>
+                    <div className="mx_NewSessionReviewDialog_deviceInfo">
+                        <div>
+                            <span className="mx_NewSessionReviewDialog_deviceName">
+                                {device.getDisplayName()}
+                            </span> <span className="mx_NewSessionReviewDialog_deviceID">
+                                ({device.deviceId})
+                            </span>
+                        </div>
+                    </div>
+                    <p>{_t(
+                        "If you didn’t sign in to this session, " +
+                        "your account may be compromised.",
+                    )}</p>
+                    <DialogButtons
+                        cancelButton={_t("This wasn't me")}
+                        cancelButtonClass="danger"
+                        primaryButton={_t("Continue")}
+                        onCancel={this.onCancelClick}
+                        onPrimaryButtonClick={this.onContinueClick}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/RoomSettingsDialog.js

@@ -54,9 +54,6 @@ export default class RoomSettingsDialog extends React.Component {
 
     _getTabs() {
         const tabs = [];
-        const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state");
-        const shouldShowBridgeIcon = featureFlag &&
-            BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0;
 
         tabs.push(new Tab(
             _td("General"),
@@ -79,9 +76,9 @@ export default class RoomSettingsDialog extends React.Component {
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
 
-        if (shouldShowBridgeIcon) {
+        if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
             tabs.push(new Tab(
-                _td("Bridge Info"),
+                _td("Bridges"),
                 "mx_RoomSettingsDialog_bridgesIcon",
                 <BridgeSettingsTab roomId={this.props.roomId} />,
             ));

src/components/views/elements/DialogButtons.js

@@ -43,6 +43,10 @@ export default createReactClass({
         // should there be a cancel button? default: true
         hasCancel: PropTypes.bool,
 
+        // The class of the cancel button, only used if a cancel button is
+        // enabled
+        cancelButtonClass: PropTypes.node,
+
         // onClick handler for the cancel button.
         onCancel: PropTypes.func,
 
@@ -72,12 +76,14 @@ export default createReactClass({
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
         let cancelButton;
+
         if (this.props.cancelButton || this.props.hasCancel) {
             cancelButton = <button
                 // important: the default type is 'submit' and this button comes before the
                 // primary in the DOM so will get form submissions unless we make it not a submit.
                 type="button"
                 onClick={this._onCancelClick}
+                className={this.props.cancelButtonClass}
                 disabled={this.props.disabled}
             >
                 { this.props.cancelButton || _t("Cancel") }

src/components/views/rooms/RoomTile.js

@@ -166,7 +166,7 @@ export default createReactClass({
             });
 
         /* Check all verified user devices. */
-        for (const userId of verified) {
+        for (const userId of [...verified, cli.getUserId()]) {
             const devices = await cli.getStoredDevicesForUser(userId);
             const allDevicesVerified = devices.every(({deviceId}) => {
                 return cli.checkDeviceTrust(userId, deviceId).isVerified();

src/components/views/settings/BridgeTile.js

@@ -0,0 +1,114 @@
+/*
+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";
+
+@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={true}
+                    />,
+            });
+        }
+
+        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={true}
+                />,
+        });
+
+        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/EventIndexPanel.js

@@ -0,0 +1,187 @@
+/*
+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 { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import Modal from '../../../Modal';
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import AccessibleButton from "../elements/AccessibleButton";
+import {formatBytes, formatCountLong} from "../../../utils/FormattingUtils";
+import EventIndexPeg from "../../../indexing/EventIndexPeg";
+
+export default class EventIndexPanel extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            enabling: false,
+            eventIndexSize: 0,
+            roomCount: 0,
+            eventIndexingEnabled:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableEventIndexing'),
+        };
+    }
+
+    async updateCurrentRoom(room) {
+        const eventIndex = EventIndexPeg.get();
+        const stats = await eventIndex.getStats();
+
+        this.setState({
+            eventIndexSize: stats.size,
+            roomCount: stats.roomCount,
+        });
+    }
+
+    componentWillUnmount(): void {
+        const eventIndex = EventIndexPeg.get();
+
+        if (eventIndex !== null) {
+            eventIndex.removeListener("changedCheckpoint", this.updateCurrentRoom.bind(this));
+        }
+    }
+
+    async componentWillMount(): void {
+        this.updateState();
+    }
+
+    async updateState() {
+        const eventIndex = EventIndexPeg.get();
+        const eventIndexingEnabled = SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableEventIndexing');
+        const enabling = false;
+
+        let eventIndexSize = 0;
+        let roomCount = 0;
+
+        if (eventIndex !== null) {
+            eventIndex.on("changedCheckpoint", this.updateCurrentRoom.bind(this));
+
+            const stats = await eventIndex.getStats();
+            eventIndexSize = stats.size;
+            roomCount = stats.roomCount;
+        }
+
+        this.setState({
+            enabling,
+            eventIndexSize,
+            roomCount,
+            eventIndexingEnabled,
+        });
+    }
+
+    _onManage = async () => {
+        Modal.createTrackedDialogAsync('Message search', 'Message search',
+            import('../../../async-components/views/dialogs/eventindex/ManageEventIndexDialog'),
+            {
+                onFinished: () => {},
+            }, null, /* priority = */ false, /* static = */ true,
+        );
+    }
+
+    _onEnable = async () => {
+        this.setState({
+            enabling: true,
+        });
+
+        await EventIndexPeg.initEventIndex();
+        await EventIndexPeg.get().addInitialCheckpoints();
+        await EventIndexPeg.get().startCrawler();
+        await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, true);
+        await this.updateState();
+    }
+
+    render() {
+        let eventIndexingSettings = null;
+        const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
+
+        if (EventIndexPeg.get() !== null) {
+            eventIndexingSettings = (
+                <div>
+                    <div className='mx_SettingsTab_subsectionText'>
+                        {_t( "Securely cache encrypted messages locally for them " +
+                             "to appear in search results, using ")
+                        } {formatBytes(this.state.eventIndexSize, 0)}
+                        {_t( " to store messages from ")}
+                        {formatCountLong(this.state.roomCount)} {_t("rooms.")}
+                    </div>
+                    <div>
+                        <AccessibleButton kind="primary" onClick={this._onManage}>
+                            {_t("Manage")}
+                        </AccessibleButton>
+                    </div>
+                </div>
+            );
+        } else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
+            eventIndexingSettings = (
+                <div>
+                    <div className='mx_SettingsTab_subsectionText'>
+                        {_t( "Securely cache encrypted messages locally for them to " +
+                             "appear in search results.")}
+                    </div>
+                    <div>
+                        <AccessibleButton kind="primary" disabled={this.state.enabling}
+                            onClick={this._onEnable}>
+                            {_t("Enable")}
+                        </AccessibleButton>
+                        {this.state.enabling ? <InlineSpinner /> : <div />}
+                    </div>
+                </div>
+            );
+        } else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
+            const nativeLink = (
+                "https://github.com/vector-im/riot-web/blob/develop/" +
+                "docs/native-node-modules.md#" +
+                "adding-seshat-for-search-in-e2e-encrypted-rooms"
+            );
+
+            eventIndexingSettings = (
+                <div>
+                    {
+                        _t( "Riot is missing some components required for securely " +
+                            "caching encrypted messages locally. If you'd like to " +
+                            "experiment with this feature, build a custom Riot Desktop " +
+                            "with <nativeLink>search components added</nativeLink>.",
+                            {},
+                            {
+                                'nativeLink': (sub) => <a href={nativeLink} target="_blank"
+                                    rel="noopener">{sub}</a>,
+                            },
+                        )
+                    }
+                </div>
+            );
+        } else {
+            eventIndexingSettings = (
+                <div>
+                    {
+                        _t( "Riot can't securely cache encrypted messages locally " +
+                            "while running in a web browser. Use <riotLink>Riot Desktop</riotLink> " +
+                            "for encrypted messages to appear in search results.",
+                            {},
+                            {
+                                'riotLink': (sub) => <a href="https://riot.im/download/desktop"
+                                    target="_blank" rel="noopener">{sub}</a>,
+                            },
+                        )
+                    }
+                </div>
+            );
+        }
+
+        return eventIndexingSettings;
+    }
+}

src/components/views/settings/tabs/room/BridgeSettingsTab.js

@@ -18,16 +18,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 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 {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import BridgeTile from "../../BridgeTile";
 
 const BRIDGE_EVENT_TYPES = [
     "uk.half-shot.bridge",
     // m.bridge
 ];
 
+const BRIDGES_LINK = "https://matrix.org/bridges/";
+
 export default class BridgeSettingsTab extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
@@ -38,99 +37,7 @@ export default class BridgeSettingsTab extends React.Component {
         if (!content || !content.channel || !content.protocol) {
             return null;
         }
-        const { channel, network } = content;
-        const protocolName = content.protocol.displayname || content.protocol.id;
-        const channelName = channel.displayname || channel.id;
-        const networkName = network ? network.displayname || network.id : protocolName;
-
-        let creator = null;
-        if (content.creator) {
-            creator = <p> { _t("This bridge was provisioned by <user />", {}, {
-                    user: <Pill
-                        type={Pill.TYPE_USER_MENTION}
-                        room={room}
-                        url={makeUserPermalink(content.creator)}
-                        shouldShowPillAvatar={true}
-                    />,
-                })}</p>;
-        }
-
-        const bot = (<p> {_t("This bridge is managed by <user />.", {}, {
-            user: <Pill
-                type={Pill.TYPE_USER_MENTION}
-                room={room}
-                url={makeUserPermalink(event.getSender())}
-                shouldShowPillAvatar={true}
-                />,
-        })} </p>);
-        let channelLink = channelName;
-        if (channel.external_url) {
-            channelLink = <a target="_blank" href={channel.external_url} rel="noopener">{channelName}</a>;
-        }
-
-        let networkLink = networkName;
-        if (network && network.external_url) {
-            networkLink = <a target="_blank" href={network.external_url} rel="noopener">{networkName}</a>;
-        }
-
-        const chanAndNetworkInfo = (
-            _t("Bridged into <channelLink /> <networkLink />, on <protocolName />", {}, {
-                channelLink,
-                networkLink,
-                protocolName,
-            })
-        );
-
-        let networkIcon = null;
-        if (networkName && network.avatar) {
-            const avatarUrl = getHttpUriForMxc(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                network.avatar, 32, 32, "crop",
-            );
-            networkIcon = <BaseAvatar
-                width={32}
-                height={32}
-                resizeMethod='crop'
-                name={ networkName }
-                idName={ networkName }
-                url={ avatarUrl }
-            />;
-        }
-
-        let channelIcon = null;
-        if (channel.avatar) {
-            const avatarUrl = getHttpUriForMxc(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                channel.avatar, 32, 32, "crop",
-            );
-            channelIcon = <BaseAvatar
-                width={32}
-                height={32}
-                resizeMethod='crop'
-                name={ networkName }
-                idName={ networkName }
-                url={ avatarUrl }
-            />;
-        }
-
-        const heading = _t("Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />", { }, {
-            channelIcon,
-            channelName,
-            networkName,
-            networkIcon,
-        });
-
-        return (<li key={event.stateKey}>
-            <div>
-                <h3>{heading}</h3>
-                <p>{_t("Connected via %(protocolName)s", { protocolName })}</p>
-                <details>
-                    {creator}
-                    {bot}
-                    <p>{chanAndNetworkInfo}</p>
-                </details>
-            </div>
-        </li>);
+        return <BridgeTile room={room} ev={event}></BridgeTile>;
     }
 
     static getBridgeStateEvents(roomId) {
@@ -151,14 +58,40 @@ export default class BridgeSettingsTab extends React.Component {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
 
+        let content = null;
+
+        if (bridgeEvents.length > 0) {
+            content = <div>
+                <p>{_t(
+                    "This room is bridging messages to the following platforms. " +
+                    "<a>Learn more.</a>", {},
+                    {
+                        // TODO: We don't have this link yet: this will prevent the translators
+                        // having to re-translate the string when we do.
+                        a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noopener">{sub}</a>,
+                    },
+                )}</p>
+                <ul className="mx_RoomSettingsDialog_BridgeList">
+                    { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
+                </ul>
+            </div>;
+        } else {
+            content = <p>{_t(
+                "This room isn’t bridging messages to any platforms. " +
+                "<a>Learn more.</a>", {},
+                {
+                    // TODO: We don't have this link yet: this will prevent the translators
+                    // having to re-translate the string when we do.
+                    a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noopener">{sub}</a>,
+                },
+            )}</p>;
+        }
+
         return (
             <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Bridge Info")}</div>
+                <div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <p>{ _t("Below is a list of bridges connected to this room.") }</p>
-                    <ul className="mx_RoomSettingsDialog_BridgeList">
-                        { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
-                    </ul>
+                    {content}
                 </div>
             </div>
         );

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

@@ -170,6 +170,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         return (
             <div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Preferences")}</div>
+
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
                     {this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}

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

@@ -242,6 +242,7 @@ export default class SecurityUserSettingsTab extends React.Component {
     render() {
         const DevicesPanel = sdk.getComponent('views.settings.DevicesPanel');
         const SettingsFlag = sdk.getComponent('views.elements.SettingsFlag');
+        const EventIndexPanel = sdk.getComponent('views.settings.EventIndexPanel');
 
         const KeyBackupPanel = sdk.getComponent('views.settings.KeyBackupPanel');
         const keyBackup = (
@@ -253,6 +254,16 @@ export default class SecurityUserSettingsTab extends React.Component {
             </div>
         );
 
+        let eventIndex;
+        if (SettingsStore.isFeatureEnabled("feature_event_indexing")) {
+            eventIndex = (
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{_t("Message search")}</span>
+                    <EventIndexPanel />
+                </div>
+            );
+        }
+
         // XXX: There's no such panel in the current cross-signing designs, but
         // it's useful to have for testing the feature. If there's no interest
         // in having advanced details here once all flows are implemented, we
@@ -281,6 +292,7 @@ export default class SecurityUserSettingsTab extends React.Component {
                     </div>
                 </div>
                 {keyBackup}
+                {eventIndex}
                 {crossSigning}
                 {this._renderCurrentDeviceInfo()}
                 <div className='mx_SettingsTab_section'>

src/components/views/toasts/NewSessionToast.js

@@ -16,12 +16,15 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 import Modal from "../../../Modal";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import DeviceListener from '../../../DeviceListener';
+import NewSessionReviewDialog from '../dialogs/NewSessionReviewDialog';
+import FormButton from '../elements/FormButton';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
 
+@replaceableComponent("views.toasts.VerifySessionToast")
 export default class VerifySessionToast extends React.PureComponent {
     static propTypes = {
         toastKey: PropTypes.string.isRequired,
@@ -34,18 +37,16 @@ export default class VerifySessionToast extends React.PureComponent {
 
     _onReviewClick = async () => {
         const cli = MatrixClientPeg.get();
-        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
 
         const device = await cli.getStoredDevice(cli.getUserId(), this.props.deviceId);
 
-        Modal.createTrackedDialog('New Session Verify', 'Starting dialog', DeviceVerifyDialog, {
+        Modal.createTrackedDialog('New Session Review', 'Starting dialog', NewSessionReviewDialog, {
             userId: MatrixClientPeg.get().getUserId(),
             device,
         }, null, /* priority = */ false, /* static = */ true);
     };
 
     render() {
-        const FormButton = sdk.getComponent("elements.FormButton");
         return (<div>
             <div className="mx_Toast_description">{_t("Review & verify your new session")}</div>
             <div className="mx_Toast_buttons" aria-live="off">