From abec097da19a56a73270a3e9b30198c07b1210ea Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Fri, 13 Nov 2015 03:15:33 +0100
Subject: PLT-1125: allow to toggle features in frontend

---
 .../user_settings/user_settings_advanced.jsx       | 134 ++++++++++++++++++---
 1 file changed, 118 insertions(+), 16 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx
index ac82595f5..ae7f41020 100644
--- a/web/react/components/user_settings/user_settings_advanced.jsx
+++ b/web/react/components/user_settings/user_settings_advanced.jsx
@@ -13,21 +13,38 @@ export default class AdvancedSettingsDisplay extends React.Component {
 
         this.updateSection = this.updateSection.bind(this);
         this.updateSetting = this.updateSetting.bind(this);
+        this.toggleFeature = this.toggleFeature.bind(this);
+        this.saveEnabledFeatures = this.saveEnabledFeatures.bind(this);
         this.setupInitialState = this.setupInitialState.bind(this);
 
-        this.state = this.setupInitialState();
+        this.state = {settings: {}, preReleaseFeatures: []};
+        this.setupInitialState();
     }
 
     setupInitialState() {
-        const sendOnCtrlEnter = PreferenceStore.getPreference(
-            Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
-            'send_on_ctrl_enter',
-            {value: 'false'}
-        ).value;
-
-        return {
-            settings: {send_on_ctrl_enter: sendOnCtrlEnter}
+        const settings = {
+            send_on_ctrl_enter: PreferenceStore.getPreference(
+                Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
+                'send_on_ctrl_enter',
+                {value: 'false'}
+            ).value
         };
+
+        let enabledFeatures = 0;
+        PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS).forEach((setting) => {
+            if (setting.name.lastIndexOf('feature_enabled_') === 0) {
+                settings[setting.name] = setting.value;
+                if (setting.value === 'true') {
+                    enabledFeatures++;
+                }
+            }
+        });
+
+        Client.getAvailablePreReleaseFeatures((data) => {
+            this.setState({settings, preReleaseFeatures: data || [], enabledFeatures});
+        }, () => {
+            this.setState({settings, preReleaseFeatures: [], enabledFeatures});
+        });
     }
 
     updateSetting(setting, value) {
@@ -36,14 +53,45 @@ export default class AdvancedSettingsDisplay extends React.Component {
         this.setState(settings);
     }
 
-    handleSubmit(setting) {
-        const preference = PreferenceStore.setPreference(
-            Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
-            setting,
-            this.state.settings[setting]
-        );
+    toggleFeature(feature, checked) {
+        const settings = this.state.settings;
+        settings['feature_enabled_' + feature] = String(checked);
 
-        Client.savePreferences([preference],
+        let enabledFeatures = 0;
+        Object.keys(this.state.settings).forEach((setting) => {
+            if (setting.lastIndexOf('feature_enabled_') === 0 && this.state.settings[setting] === 'true') {
+                enabledFeatures++;
+            }
+        });
+
+        this.setState({settings, enabledFeatures});
+    }
+
+    saveEnabledFeatures() {
+        const features = [];
+        Object.keys(this.state.settings).forEach((setting) => {
+            if (setting.lastIndexOf('feature_enabled_') === 0) {
+                features.push(setting);
+            }
+        });
+
+        this.handleSubmit(features);
+    }
+
+    handleSubmit(settings) {
+        const preferences = [];
+
+        (Array.isArray(settings) ? settings : [settings]).forEach((setting) => {
+            preferences.push(
+                PreferenceStore.setPreference(
+                    Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
+                    setting,
+                    String(this.state.settings[setting])
+                )
+            );
+        });
+
+        Client.savePreferences(preferences,
             () => {
                 PreferenceStore.emitChange();
                 this.updateSection('');
@@ -118,6 +166,58 @@ export default class AdvancedSettingsDisplay extends React.Component {
             );
         }
 
+        let previewFeaturesSection;
+        if (this.props.activeSection === 'advancedPreviewFeatures') {
+            const inputs = [];
+
+            this.state.preReleaseFeatures.forEach((feature) => {
+                inputs.push(
+                    <div key={'advancedPreviewFeatures_' + feature.label}>
+                        <div className='checkbox'>
+                            <label>
+                                <input
+                                    type='checkbox'
+                                    checked={this.state.settings['feature_enabled_' + feature.label] === 'true'}
+                                    onChange={(e) => {
+                                        this.toggleFeature(feature.label, e.target.checked);
+                                    }}
+                                />
+                                {feature.description}
+                            </label>
+                        </div>
+                    </div>
+                );
+            });
+
+            inputs.push(
+                <div key='advancedPreviewFeatures_helptext'>
+                    <br/>
+                    {'Check any pre-released features you\'d like to preview.'}
+                </div>
+            );
+
+            previewFeaturesSection = (
+                <SettingItemMax
+                    title='Preview pre-release features'
+                    inputs={inputs}
+                    submit={this.saveEnabledFeatures}
+                    server_error={serverError}
+                    updateSection={(e) => {
+                        this.updateSection('');
+                        e.preventDefault();
+                    }}
+                />
+            );
+        } else {
+            previewFeaturesSection = (
+                <SettingItemMin
+                    title='Preview pre-release features'
+                    describe={this.state.enabledFeatures + (this.state.enabledFeatures === 1 ? ' Feature ' : ' Features ') + 'enabled'}
+                    updateSection={() => this.props.updateSection('advancedPreviewFeatures')}
+                />
+            );
+        }
+
         return (
             <div>
                 <div className='modal-header'>
@@ -145,6 +245,8 @@ export default class AdvancedSettingsDisplay extends React.Component {
                     <h3 className='tab-header'>{'Advanced Settings'}</h3>
                     <div className='divider-dark first'/>
                     {ctrlSendSection}
+                    <div className='divider-light'/>
+                    {previewFeaturesSection}
                     <div className='divider-dark'/>
                 </div>
             </div>
-- 
cgit v1.2.3-1-g7c22


From 6e1e5f7ae4dcc5645a5412e17b36e5d95bf4f7c6 Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Fri, 13 Nov 2015 23:05:08 +0100
Subject: only show advanced settings section if there are any pre-release
 features

---
 .../user_settings/user_settings_advanced.jsx       | 105 +++++++++++----------
 1 file changed, 56 insertions(+), 49 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx
index ae7f41020..cfb360152 100644
--- a/web/react/components/user_settings/user_settings_advanced.jsx
+++ b/web/react/components/user_settings/user_settings_advanced.jsx
@@ -32,7 +32,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
 
         let enabledFeatures = 0;
         PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS).forEach((setting) => {
-            if (setting.name.lastIndexOf('feature_enabled_') === 0) {
+            if (setting.name.lastIndexOf(Constants.FeatureTogglePrefix) === 0) {
                 settings[setting.name] = setting.value;
                 if (setting.value === 'true') {
                     enabledFeatures++;
@@ -55,11 +55,11 @@ export default class AdvancedSettingsDisplay extends React.Component {
 
     toggleFeature(feature, checked) {
         const settings = this.state.settings;
-        settings['feature_enabled_' + feature] = String(checked);
+        settings[Constants.FeatureTogglePrefix + feature] = String(checked);
 
         let enabledFeatures = 0;
         Object.keys(this.state.settings).forEach((setting) => {
-            if (setting.lastIndexOf('feature_enabled_') === 0 && this.state.settings[setting] === 'true') {
+            if (setting.lastIndexOf(Constants.FeatureTogglePrefix) === 0 && this.state.settings[setting] === 'true') {
                 enabledFeatures++;
             }
         });
@@ -70,7 +70,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
     saveEnabledFeatures() {
         const features = [];
         Object.keys(this.state.settings).forEach((setting) => {
-            if (setting.lastIndexOf('feature_enabled_') === 0) {
+            if (setting.lastIndexOf(Constants.FeatureTogglePrefix) === 0) {
                 features.push(setting);
             }
         });
@@ -167,55 +167,62 @@ export default class AdvancedSettingsDisplay extends React.Component {
         }
 
         let previewFeaturesSection;
-        if (this.props.activeSection === 'advancedPreviewFeatures') {
-            const inputs = [];
+        let previewFeaturesSectionDivider;
+        if (this.state.preReleaseFeatures.length > 0) {
+            previewFeaturesSectionDivider = (
+                <div className='divider-light'/>
+            );
 
-            this.state.preReleaseFeatures.forEach((feature) => {
-                inputs.push(
-                    <div key={'advancedPreviewFeatures_' + feature.label}>
-                        <div className='checkbox'>
-                            <label>
-                                <input
-                                    type='checkbox'
-                                    checked={this.state.settings['feature_enabled_' + feature.label] === 'true'}
-                                    onChange={(e) => {
-                                        this.toggleFeature(feature.label, e.target.checked);
-                                    }}
-                                />
-                                {feature.description}
-                            </label>
+            if (this.props.activeSection === 'advancedPreviewFeatures') {
+                const inputs = [];
+
+                this.state.preReleaseFeatures.forEach((feature) => {
+                    inputs.push(
+                        <div key={'advancedPreviewFeatures_' + feature.label}>
+                            <div className='checkbox'>
+                                <label>
+                                    <input
+                                        type='checkbox'
+                                        checked={this.state.settings[Constants.FeatureTogglePrefix + feature.label] === 'true'}
+                                        onChange={(e) => {
+                                            this.toggleFeature(feature.label, e.target.checked);
+                                        }}
+                                    />
+                                    {feature.description}
+                                </label>
+                            </div>
                         </div>
+                    );
+                });
+
+                inputs.push(
+                    <div key='advancedPreviewFeatures_helptext'>
+                        <br/>
+                        {'Check any pre-released features you\'d like to preview.'}
                     </div>
                 );
-            });
 
-            inputs.push(
-                <div key='advancedPreviewFeatures_helptext'>
-                    <br/>
-                    {'Check any pre-released features you\'d like to preview.'}
-                </div>
-            );
-
-            previewFeaturesSection = (
-                <SettingItemMax
-                    title='Preview pre-release features'
-                    inputs={inputs}
-                    submit={this.saveEnabledFeatures}
-                    server_error={serverError}
-                    updateSection={(e) => {
-                        this.updateSection('');
-                        e.preventDefault();
-                    }}
-                />
-            );
-        } else {
-            previewFeaturesSection = (
-                <SettingItemMin
-                    title='Preview pre-release features'
-                    describe={this.state.enabledFeatures + (this.state.enabledFeatures === 1 ? ' Feature ' : ' Features ') + 'enabled'}
-                    updateSection={() => this.props.updateSection('advancedPreviewFeatures')}
-                />
-            );
+                previewFeaturesSection = (
+                    <SettingItemMax
+                        title='Preview pre-release features'
+                        inputs={inputs}
+                        submit={this.saveEnabledFeatures}
+                        server_error={serverError}
+                        updateSection={(e) => {
+                            this.updateSection('');
+                            e.preventDefault();
+                        }}
+                    />
+                );
+            } else {
+                previewFeaturesSection = (
+                    <SettingItemMin
+                        title='Preview pre-release features'
+                        describe={this.state.enabledFeatures + (this.state.enabledFeatures === 1 ? ' Feature ' : ' Features ') + 'enabled'}
+                        updateSection={() => this.props.updateSection('advancedPreviewFeatures')}
+                    />
+                );
+            }
         }
 
         return (
@@ -245,7 +252,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                     <h3 className='tab-header'>{'Advanced Settings'}</h3>
                     <div className='divider-dark first'/>
                     {ctrlSendSection}
-                    <div className='divider-light'/>
+                    {previewFeaturesSectionDivider}
                     {previewFeaturesSection}
                     <div className='divider-dark'/>
                 </div>
-- 
cgit v1.2.3-1-g7c22


From ca3856ab3b7d47b42b46db176c6678a24c1fc402 Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Tue, 17 Nov 2015 19:01:26 +0100
Subject: move preview-link-toggle outside of component markup

---
 web/react/components/textbox.jsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index e2868e946..1e9e912a8 100644
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -303,7 +303,19 @@ export default class Textbox extends React.Component {
     }
 
     render() {
-        const previewLinkVisible = this.props.messageText.length > 0;
+        let previewLink = null;
+        if (Utils.featureToggle('#1389')) {
+            const previewLinkVisible = this.props.messageText.length > 0;
+            previewLink = (
+                <a
+                    style={{visibility: previewLinkVisible ? 'visible' : 'hidden'}}
+                    onClick={this.showPreview}
+                    className='textbox-preview-link'
+                >
+                    {this.state.preview ? 'Edit message' : 'Preview'}
+                </a>
+            );
+        }
 
         return (
             <div
@@ -342,19 +354,13 @@ export default class Textbox extends React.Component {
                     dangerouslySetInnerHTML={{__html: this.state.preview ? TextFormatting.formatText(this.props.messageText) : ''}}
                 >
                 </div>
+                {previewLink}
                 <a
                     onClick={this.showHelp}
                     className='textbox-help-link'
                 >
                     {'Help'}
                 </a>
-                <a
-                    style={{visibility: previewLinkVisible ? 'visible' : 'hidden'}}
-                    onClick={this.showPreview}
-                    className='textbox-preview-link'
-                >
-                    {this.state.preview ? 'Edit' : 'Preview'}
-                </a>
             </div>
         );
     }
-- 
cgit v1.2.3-1-g7c22


From 61a35066b64085d264fbd049e2a57f70125ca65a Mon Sep 17 00:00:00 2001
From: Florian Orben <florian.orben@gmail.com>
Date: Fri, 27 Nov 2015 23:16:56 +0100
Subject: rename 'featureToggle' to 'isFeatureEnable' and move definition of
 available prerelease-features to constants.jsx

---
 web/react/components/textbox.jsx                   |  3 +-
 .../user_settings/user_settings_advanced.jsx       | 35 ++++++++++------------
 2 files changed, 18 insertions(+), 20 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index 1e9e912a8..10b3c0069 100644
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -11,6 +11,7 @@ import * as Utils from '../utils/utils.jsx';
 import Constants from '../utils/constants.jsx';
 const ActionTypes = Constants.ActionTypes;
 const KeyCodes = Constants.KeyCodes;
+const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 
 export default class Textbox extends React.Component {
     constructor(props) {
@@ -304,7 +305,7 @@ export default class Textbox extends React.Component {
 
     render() {
         let previewLink = null;
-        if (Utils.featureToggle('#1389')) {
+        if (Utils.isFeatureEnabled(PreReleaseFeatures.MARKDOWN_PREVIEW)) {
             const previewLinkVisible = this.props.messageText.length > 0;
             previewLink = (
                 <a
diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx
index cfb360152..b4d34c658 100644
--- a/web/react/components/user_settings/user_settings_advanced.jsx
+++ b/web/react/components/user_settings/user_settings_advanced.jsx
@@ -6,6 +6,7 @@ import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import Constants from '../../utils/constants.jsx';
 import PreferenceStore from '../../stores/preference_store.jsx';
+const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 
 export default class AdvancedSettingsDisplay extends React.Component {
     constructor(props) {
@@ -15,13 +16,9 @@ export default class AdvancedSettingsDisplay extends React.Component {
         this.updateSetting = this.updateSetting.bind(this);
         this.toggleFeature = this.toggleFeature.bind(this);
         this.saveEnabledFeatures = this.saveEnabledFeatures.bind(this);
-        this.setupInitialState = this.setupInitialState.bind(this);
 
-        this.state = {settings: {}, preReleaseFeatures: []};
-        this.setupInitialState();
-    }
-
-    setupInitialState() {
+        const preReleaseFeaturesKeys = Object.keys(PreReleaseFeatures);
+        const advancedSettings = PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS);
         const settings = {
             send_on_ctrl_enter: PreferenceStore.getPreference(
                 Constants.Preferences.CATEGORY_ADVANCED_SETTINGS,
@@ -31,20 +28,19 @@ export default class AdvancedSettingsDisplay extends React.Component {
         };
 
         let enabledFeatures = 0;
-        PreferenceStore.getPreferences(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS).forEach((setting) => {
-            if (setting.name.lastIndexOf(Constants.FeatureTogglePrefix) === 0) {
-                settings[setting.name] = setting.value;
-                if (setting.value === 'true') {
-                    enabledFeatures++;
+        advancedSettings.forEach((setting) => {
+            preReleaseFeaturesKeys.forEach((key) => {
+                const feature = PreReleaseFeatures[key];
+                if (setting.name === Constants.FeatureTogglePrefix + feature.label) {
+                    settings[setting.name] = setting.value;
+                    if (setting.value === 'true') {
+                        enabledFeatures++;
+                    }
                 }
-            }
+            });
         });
 
-        Client.getAvailablePreReleaseFeatures((data) => {
-            this.setState({settings, preReleaseFeatures: data || [], enabledFeatures});
-        }, () => {
-            this.setState({settings, preReleaseFeatures: [], enabledFeatures});
-        });
+        this.state = {preReleaseFeatures: PreReleaseFeatures, settings, preReleaseFeaturesKeys, enabledFeatures};
     }
 
     updateSetting(setting, value) {
@@ -168,7 +164,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
 
         let previewFeaturesSection;
         let previewFeaturesSectionDivider;
-        if (this.state.preReleaseFeatures.length > 0) {
+        if (this.state.preReleaseFeaturesKeys.length > 0) {
             previewFeaturesSectionDivider = (
                 <div className='divider-light'/>
             );
@@ -176,7 +172,8 @@ export default class AdvancedSettingsDisplay extends React.Component {
             if (this.props.activeSection === 'advancedPreviewFeatures') {
                 const inputs = [];
 
-                this.state.preReleaseFeatures.forEach((feature) => {
+                this.state.preReleaseFeaturesKeys.forEach((key) => {
+                    const feature = this.state.preReleaseFeatures[key];
                     inputs.push(
                         <div key={'advancedPreviewFeatures_' + feature.label}>
                             <div className='checkbox'>
-- 
cgit v1.2.3-1-g7c22