Implement labs tab in 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 {

res/img/feather-icons/flag.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="14" viewBox="0 0 11 14">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M.588 8.8s.588-.6 2.353-.6c1.765 0 2.941 1.2 4.706 1.2C9.412 9.4 10 8.8 10 8.8V1.6s-.588.6-2.353.6C5.882 2.2 4.706 1 2.941 1c-1.765 0-2.353.6-2.353.6v7.2zM.588 13V8.8"/>
+    </g>
+</svg>

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,69 @@
+/*
+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";
+
+export class LabsSettingToggle extends React.Component {
+    static propTypes = {
+        featureId: PropTypes.string.isRequired,
+    };
+
+    _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,7 @@
     "Deactivating your account is a permanent action - be careful!": "Deactivating your account is a permanent action - be careful!",
     "Close Account": "Close Account",
     "General": "General",
+    "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,7 +1282,6 @@
     "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",