Implement the "Labs" tab of new user settings

res/css/structures/_TabbedView.scss

@@ -65,7 +65,7 @@ limitations under the License.
   mask-repeat: no-repeat;
   mask-size: 14px;
   width: 14px;
-  height: 14px;
+  height: 15px;
   mask-position: center;
   content: '';
   vertical-align: middle;

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -60,4 +60,8 @@
 
 .mx_UserSettingsDialog_helpIcon:before {
   mask-image: url('$(res)/img/feather-icons/help-circle.svg');
-}
+}
+
+.mx_UserSettingsDialog_labsIcon:before {
+  mask-image: url('$(res)/img/feather-icons/flag.svg');
+}

res/css/views/settings/tabs/_SettingsTab.scss

@@ -48,6 +48,7 @@ limitations under the License.
   display: inline-block;
   font-size: 12px;
   color: $primary-fg-color;
+  max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
 }
 
 .mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch {

src/components/views/dialogs/UserSettingsDialog.js

@@ -21,6 +21,8 @@ import {_t, _td} from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import GeneralSettingsTab from "../settings/tabs/GeneralSettingsTab";
 import dis from '../../../dispatcher';
+import SettingsStore from "../../../settings/SettingsStore";
+import LabsSettingsTab from "../settings/tabs/LabsSettingsTab";
 
 // TODO: Ditch this whole component
 export class TempTab extends React.Component {
@@ -44,43 +46,52 @@ export default class UserSettingsDialog extends React.Component {
     };
 
     _getTabs() {
-        return [
-            new Tab(
-                _td("General"),
-                "mx_UserSettingsDialog_settingsIcon",
-                <GeneralSettingsTab />,
-            ),
-            new Tab(
-                _td("Notifications"),
-                "mx_UserSettingsDialog_bellIcon",
-                <div>Notifications Test</div>,
-            ),
-            new Tab(
-                _td("Preferences"),
-                "mx_UserSettingsDialog_preferencesIcon",
-                <div>Preferences Test</div>,
-            ),
-            new Tab(
-                _td("Voice & Video"),
-                "mx_UserSettingsDialog_voiceIcon",
-                <div>Voice Test</div>,
-            ),
-            new Tab(
-                _td("Security & Privacy"),
-                "mx_UserSettingsDialog_securityIcon",
-                <div>Security Test</div>,
-            ),
-            new Tab(
-                _td("Help & About"),
-                "mx_UserSettingsDialog_helpIcon",
-                <div>Help Test</div>,
-            ),
-            new Tab(
-                _td("Visit old settings"),
-                "mx_UserSettingsDialog_helpIcon",
-                <TempTab onClose={this.props.onFinished} />,
-            ),
-        ];
+        const tabs = [];
+
+        tabs.push(new Tab(
+            _td("General"),
+            "mx_UserSettingsDialog_settingsIcon",
+            <GeneralSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Notifications"),
+            "mx_UserSettingsDialog_bellIcon",
+            <div>Notifications Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Preferences"),
+            "mx_UserSettingsDialog_preferencesIcon",
+            <div>Preferences Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Voice & Video"),
+            "mx_UserSettingsDialog_voiceIcon",
+            <div>Voice Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Security & Privacy"),
+            "mx_UserSettingsDialog_securityIcon",
+            <div>Security Test</div>,
+        ));
+        if (SettingsStore.getLabsFeatures().length > 0) {
+            tabs.push(new Tab(
+                _td("Labs"),
+                "mx_UserSettingsDialog_labsIcon",
+                <LabsSettingsTab />,
+            ));
+        }
+        tabs.push(new Tab(
+            _td("Help & About"),
+            "mx_UserSettingsDialog_helpIcon",
+            <div>Help Test</div>,
+        ));
+        tabs.push(new Tab(
+            _td("Visit old settings"),
+            "mx_UserSettingsDialog_helpIcon",
+            <TempTab onClose={this.props.onFinished} />,
+        ));
+
+        return tabs;
     }
 
     render() {

src/components/views/settings/tabs/LabsSettingsTab.js

@@ -0,0 +1,96 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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 PropTypes from "prop-types";
+import SettingsStore from "../../../../settings/SettingsStore";
+import ToggleSwitch from "../../elements/ToggleSwitch";
+import MatrixClientPeg from "../../../../MatrixClientPeg";
+const Modal = require("../../../../Modal");
+const sdk = require("../../../../index");
+
+export class LabsSettingToggle extends React.Component {
+    static propTypes = {
+        featureId: PropTypes.string.isRequired,
+    };
+
+    async _onLazyLoadChanging(enabling) {
+        // don't prevent turning LL off when not supported
+        if (enabling) {
+            const supported = await MatrixClientPeg.get().doesServerSupportLazyLoading();
+            if (!supported) {
+                await new Promise((resolve) => {
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    Modal.createDialog(QuestionDialog, {
+                        title: _t("Lazy loading members not supported"),
+                        description:
+                            <div>
+                                { _t("Lazy loading is not supported by your " +
+                                    "current homeserver.") }
+                            </div>,
+                        button: _t("OK"),
+                        onFinished: resolve,
+                    });
+                });
+                return false;
+            }
+        }
+        return true;
+    }
+
+    _onChange = async (checked) => {
+        if (this.props.featureId === "feature_lazyloading") {
+            const confirmed = await this._onLazyLoadChanging(checked);
+            if (!confirmed) {
+                return;
+            }
+        }
+
+        await SettingsStore.setFeatureEnabled(this.props.featureId, checked);
+        this.forceUpdate();
+    };
+
+    render() {
+        // This is a minimal version of a SettingsFlag
+        const label = _t(SettingsStore.getDisplayName(this.props.featureId));
+        const value = SettingsStore.isFeatureEnabled(this.props.featureId);
+        return (
+            <div className="mx_SettingsFlag">
+                <span className="mx_SettingsFlag_label">{label}</span>
+                <ToggleSwitch checked={value} onChange={this._onChange} />
+            </div>
+        );
+    }
+}
+
+export default class LabsSettingsTab extends React.Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        const flags = SettingsStore.getLabsFeatures().map(f => <LabsSettingToggle featureId={f} key={f} />);
+        return (
+            <div className="mx_SettingsTab">
+                <div className="mx_SettingsTab_heading">{_t("Labs")}</div>
+                <div className="mx_SettingsTab_section">
+                    {flags}
+                </div>
+            </div>
+        );
+    }
+}

src/i18n/strings/en_EN.json

@@ -439,6 +439,9 @@
     "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!",
     "Close Account": "Close Account",
     "General": "General",
+    "Lazy loading members not supported": "Lazy loading members not supported",
+    "Lazy loading is not supported by your current homeserver.": "Lazy loading is not supported by your current homeserver.",
+    "Labs": "Labs",
     "Cannot add any more widgets": "Cannot add any more widgets",
     "The maximum permitted number of widgets have already been added to this room.": "The maximum permitted number of widgets have already been added to this room.",
     "Add a widget": "Add a widget",
@@ -1281,11 +1284,8 @@
     "Riot collects anonymous analytics to allow us to improve the application.": "Riot collects anonymous analytics to allow us to improve the application.",
     "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.",
     "Learn more about how we use analytics.": "Learn more about how we use analytics.",
-    "Labs": "Labs",
     "These are experimental features that may break in unexpected ways": "These are experimental features that may break in unexpected ways",
     "Use with caution": "Use with caution",
-    "Lazy loading members not supported": "Lazy loading members not supported",
-    "Lazy loading is not supported by your current homeserver.": "Lazy loading is not supported by your current homeserver.",
     "Deactivate my account": "Deactivate my account",
     "Legal": "Legal",
     "Clear Cache": "Clear Cache",