EventIndexPanel: Move the bulk of the event index info into a modal.

src/async-components/views/dialogs/eventindex/ManageEventIndex.js

@@ -0,0 +1,226 @@
+/*
+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 * as sdk from '../../../../index';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import PropTypes from 'prop-types';
+import { _t } from '../../../../languageHandler';
+
+import SettingsStore, {SettingLevel} from "../../../../settings/SettingsStore";
+import LabelledToggleSwitch from "../../../../components/views/elements/LabelledToggleSwitch";
+import Field from "../../../../components/views/elements/Field";
+import {formatBytes} from "../../../../utils/FormattingUtils";
+import EventIndexPeg from "../../../../indexing/EventIndexPeg";
+import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
+
+
+/*
+ * Walks the user through the process of creating an e2e key backup
+ * on the server.
+ */
+export default class ManageEventIndex extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            eventIndexSize: 0,
+            crawlingRooms: 0,
+            totalCrawlingRooms: 0,
+            eventCount: 0,
+            roomCount: 0,
+            currentRoom: null,
+            eventIndexingEnabled:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableCrawling'),
+            crawlerSleepTime:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'crawlerSleepTime'),
+        };
+
+    }
+
+    async updateCurrentRoom(room) {
+        const eventIndex = EventIndexPeg.get();
+        const stats = await eventIndex.getStats();
+        let currentRoom = null;
+
+        if (room) currentRoom = room.name;
+
+        this.setState({
+            eventIndexSize: stats.size,
+            roomCount: stats.roomCount,
+            eventCount: stats.eventCount,
+            currentRoom: currentRoom,
+        });
+    }
+
+    componentWillUnmount(): void {
+        const eventIndex = EventIndexPeg.get();
+
+        if (eventIndex !== null) {
+            eventIndex.removeListener("changedCheckpoint", this.updateCurrentRoom.bind(this));
+        }
+    }
+
+    async componentWillMount(): void {
+        let eventIndexSize = 0;
+        let roomCount = 0;
+        let eventCount = 0;
+        let crawlingRooms = 0;
+        let totalCrawlingRooms = 0;
+        let currentRoom = null;
+
+        const eventIndex = EventIndexPeg.get();
+
+        if (eventIndex !== null) {
+            eventIndex.on("changedCheckpoint", this.updateCurrentRoom.bind(this));
+
+            const stats = await eventIndex.getStats();
+            eventIndexSize = stats.size;
+            roomCount = stats.roomCount;
+            eventCount = stats.eventCount;
+
+            const crawledRooms = eventIndex.currentlyCrawledRooms();
+            crawlingRooms = crawledRooms.crawlingRooms.size;
+            totalCrawlingRooms = crawledRooms.totalRooms.size;
+
+            const room = eventIndex.currentRoom();
+            if (room) currentRoom = room.name;
+        }
+
+        this.setState({
+            eventIndexSize,
+            crawlingRooms,
+            totalCrawlingRooms,
+            eventCount,
+            roomCount,
+            currentRoom,
+        });
+    }
+
+    _onEventIndexingEnabledChange = (checked) => {
+        SettingsStore.setValue("enableCrawling", null, SettingLevel.DEVICE, checked);
+
+        if (checked) EventIndexPeg.start();
+        else EventIndexPeg.stop();
+
+        this.setState({eventIndexingEnabled: checked});
+    }
+
+    _onCrawlerSleepTimeChange = (e) => {
+        this.setState({crawlerSleepTime: e.target.value});
+        SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
+    }
+
+    _onDisable = () => {
+        this.props.onFinished(false);
+    }
+
+    _onDone = () => {
+        this.props.onFinished(true);
+    }
+
+    render() {
+        let eventIndexingSettings = null;
+        let crawlerState;
+
+        if (!this.state.eventIndexingEnabled) {
+            crawlerState = <div>{_t("Message search for encrypted rooms is disabled.")}</div>;
+        } else if (this.state.currentRoom === null) {
+            crawlerState = <div>{_t("Not downloading messages for any room.")}</div>;
+        } else {
+            crawlerState = (
+                <div>{_t(
+                    "Downloading mesages for %(currentRoom)s.",
+                    { currentRoom: this.state.currentRoom }
+                )}
+                </div>
+            );
+        }
+
+        if (EventIndexPeg.get() !== null) {
+            eventIndexingSettings = (
+                <div>
+                    {
+                        _t( "Riot is securely caching encrypted messages locally for them " +
+                            "to appear in search results:"
+                        )
+                    }
+                    <div className='mx_SettingsTab_subsectionText'>
+                        {_t("Space used:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
+                        {_t("Indexed messages:")} {this.state.eventCount}<br />
+                        {_t("Number of rooms:")} {this.state.roomCount}<br />
+                        {crawlerState}<br />
+                    </div>
+
+                    <LabelledToggleSwitch
+                        value={this.state.eventIndexingEnabled}
+                        onChange={this._onEventIndexingEnabledChange}
+                        label={_t('Download and index encrypted messages')} />
+
+                    <Field
+                        id={"crawlerSleepTimeMs"}
+                        label={_t('Message downloading sleep time(ms)')}
+                        type='number'
+                        value={this.state.crawlerSleepTime}
+                        onChange={this._onCrawlerSleepTimeChange} />
+                </div>
+            );
+        } else {
+            eventIndexingSettings = (
+                <div>
+                    {
+                        _t( "Riot can't securely cache encrypted messages locally" +
+                            "while running in a web browser. Use Riot Desktop for" +
+                            "encrypted messages to appear in search results."
+                        )
+                    }
+                </div>
+            );
+        }
+
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        let buttons;
+
+        buttons = <div>
+            <div className="mx_Dialog_buttons">
+                <AccessibleButton kind="secondary" onClick={this._onDisable}>
+                    {_t("Disable")}
+                </AccessibleButton>
+                <AccessibleButton kind="primary" onClick={this._onDone}>
+                    {_t("Done")}
+                </AccessibleButton>
+            </div>
+        </div>;
+
+        return (
+            <BaseDialog className='mx_ManageEventIndexDialog'
+                onFinished={() => {}}
+                title={_t("Message search")}
+            >
+            <div>
+                {eventIndexingSettings}
+            </div>
+            <div>
+                {buttons}
+            </div>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/settings/EventIndexPanel.js

@@ -21,6 +21,7 @@ import classNames from 'classnames';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
+import AccessibleButton from "../elements/AccessibleButton";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import Field from "../elements/Field";
@@ -33,30 +34,17 @@ export default class EventIndexPanel extends React.Component {
 
         this.state = {
             eventIndexSize: 0,
-            crawlingRooms: 0,
-            totalCrawlingRooms: 0,
-            eventCount: 0,
             roomCount: 0,
-            currentRoom: null,
-            eventIndexingEnabled:
-                SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableCrawling'),
-            crawlerSleepTime:
-                SettingsStore.getValueAt(SettingLevel.DEVICE, 'crawlerSleepTime'),
         };
     }
 
     async updateCurrentRoom(room) {
         const eventIndex = EventIndexPeg.get();
         const stats = await eventIndex.getStats();
-        let currentRoom = null;
-
-        if (room) currentRoom = room.name;
 
         this.setState({
             eventIndexSize: stats.size,
             roomCount: stats.roomCount,
-            eventCount: stats.eventCount,
-            currentRoom: currentRoom,
         });
     }
 
@@ -71,10 +59,6 @@ export default class EventIndexPanel extends React.Component {
     async componentWillMount(): void {
         let eventIndexSize = 0;
         let roomCount = 0;
-        let eventCount = 0;
-        let crawlingRooms = 0;
-        let totalCrawlingRooms = 0;
-        let currentRoom = null;
 
         const eventIndex = EventIndexPeg.get();
 
@@ -84,84 +68,41 @@ export default class EventIndexPanel extends React.Component {
             const stats = await eventIndex.getStats();
             eventIndexSize = stats.size;
             roomCount = stats.roomCount;
-            eventCount = stats.eventCount;
-
-            const crawledRooms = eventIndex.currentlyCrawledRooms();
-            crawlingRooms = crawledRooms.crawlingRooms.size;
-            totalCrawlingRooms = crawledRooms.totalRooms.size;
-
-            const room = eventIndex.currentRoom();
-            if (room) currentRoom = room.name;
         }
 
         this.setState({
             eventIndexSize,
-            crawlingRooms,
-            totalCrawlingRooms,
-            eventCount,
             roomCount,
-            currentRoom,
         });
     }
 
-    _onEventIndexingEnabledChange = (checked) => {
+    _onManage = async () => {
-        SettingsStore.setValue("enableCrawling", null, SettingLevel.DEVICE, checked);
+        Modal.createTrackedDialogAsync('Message search', 'Message search',
+            import('../../../async-components/views/dialogs/eventindex/ManageEventIndex'),
+            {
+                onFinished: () => {},
+            }, null, /* priority = */ false, /* static = */ true,
+        );
 
-        if (checked) EventIndexPeg.start();
-        else EventIndexPeg.stop();
-
-        this.setState({eventIndexingEnabled: checked});
-    }
-
-    _onCrawlerSleepTimeChange = (e) => {
-        this.setState({crawlerSleepTime: e.target.value});
-        SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
     }
 
     render() {
         let eventIndexingSettings = null;
-        let crawlerState;
-
-        if (!this.state.eventIndexingEnabled) {
-            crawlerState = <div>{_t("Message search for encrypted rooms is disabled.")}</div>;
-        } else if (this.state.currentRoom === null) {
-            crawlerState = <div>{_t("Not downloading messages for any room.")}</div>;
-        } else {
-            crawlerState = (
-                <div>{_t(
-                    "Downloading mesages for %(currentRoom)s.",
-                    { currentRoom: this.state.currentRoom }
-                )}
-                </div>
-            );
-        }
 
         if (EventIndexPeg.get() !== null) {
             eventIndexingSettings = (
                 <div>
-                    {
-                        _t( "Riot is securely caching encrypted messages locally for them" +
-                            "to appear in search results:"
-                        )
-                    }
                     <div className='mx_SettingsTab_subsectionText'>
-                        {_t("Space used:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
+                        {_t( "Securely cache encrypted messages locally for them " +
-                        {_t("Indexed messages:")} {this.state.eventCount}<br />
+                             "to appear in search results, using ")
-                        {_t("Number of rooms:")} {this.state.roomCount}<br />
+                        } {formatBytes(this.state.eventIndexSize, 0)}
-                        {crawlerState}<br />
+                        {_t( " to store messages from ")} {this.state.roomCount} {_t("rooms.")}
+                    </div>
+                    <div>
+                        <AccessibleButton kind="primary" onClick={this._onManage}>
+                            {_t("Manage")}
+                        </AccessibleButton>
                     </div>
-
-                    <LabelledToggleSwitch
-                        value={this.state.eventIndexingEnabled}
-                        onChange={this._onEventIndexingEnabledChange}
-                        label={_t('Download and index encrypted messages')} />
-
-                    <Field
-                        id={"crawlerSleepTimeMs"}
-                        label={_t('Message downloading sleep time(ms)')}
-                        type='number'
-                        value={this.state.crawlerSleepTime}
-                        onChange={this._onCrawlerSleepTimeChange} />
                 </div>
             );
         } else {

src/i18n/strings/en_EN.json

@@ -554,15 +554,10 @@
     "Failed to set display name": "Failed to set display name",
     "Disable Notifications": "Disable Notifications",
     "Enable Notifications": "Enable Notifications",
-    "Message search for encrypted rooms is disabled.": "Message search for encrypted rooms is disabled.",
+    "Securely cache encrypted messages locally for them to appear in search results, using ": "Securely cache encrypted messages locally for them to appear in search results, using ",
-    "Not downloading messages for any room.": "Not downloading messages for any room.",
+    " to store messages from ": " to store messages from ",
-    "Downloading mesages for %(currentRoom)s.": "Downloading mesages for %(currentRoom)s.",
+    "rooms.": "rooms.",
-    "Riot is securely caching encrypted messages locally for themto appear in search results:": "Riot is securely caching encrypted messages locally for themto appear in search results:",
+    "Manage": "Manage",
-    "Space used:": "Space used:",
-    "Indexed messages:": "Indexed messages:",
-    "Number of rooms:": "Number of rooms:",
-    "Download and index encrypted messages": "Download and index encrypted messages",
-    "Message downloading sleep time(ms)": "Message downloading sleep time(ms)",
     "Riot can't securely cache encrypted messages locallywhile running in a web browser. Use Riot Desktop forencrypted messages to appear in search results.": "Riot can't securely cache encrypted messages locallywhile running in a web browser. Use Riot Desktop forencrypted messages to appear in search results.",
     "Connecting to integration manager...": "Connecting to integration manager...",
     "Cannot connect to integration manager": "Cannot connect to integration manager",
@@ -2040,6 +2035,18 @@
     "This device has detected that your recovery passphrase and key for Secure Messages have been removed.": "This device has detected that your recovery passphrase and key for Secure Messages have been removed.",
     "If you did this accidentally, you can setup Secure Messages on this device which will re-encrypt this device's message history with a new recovery method.": "If you did this accidentally, you can setup Secure Messages on this device which will re-encrypt this device's message history with a new recovery method.",
     "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.",
+    "Message search for encrypted rooms is disabled.": "Message search for encrypted rooms is disabled.",
+    "Not downloading messages for any room.": "Not downloading messages for any room.",
+    "Downloading mesages for %(currentRoom)s.": "Downloading mesages for %(currentRoom)s.",
+    "Riot is securely caching encrypted messages locally for them to appear in search results:": "Riot is securely caching encrypted messages locally for them to appear in search results:",
+    "Space used:": "Space used:",
+    "Indexed messages:": "Indexed messages:",
+    "Number of rooms:": "Number of rooms:",
+    "Download and index encrypted messages": "Download and index encrypted messages",
+    "Message downloading sleep time(ms)": "Message downloading sleep time(ms)",
+    "Disable or enable": "Disable or enable",
+    "Disable": "Disable",
+    "Message search": "Message search",
     "Failed to set direct chat tag": "Failed to set direct chat tag",
     "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
     "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"