From abec097da19a56a73270a3e9b30198c07b1210ea Mon Sep 17 00:00:00 2001 From: Florian Orben 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 ++++++++++++++++++--- web/react/utils/client.jsx | 13 ++ web/react/utils/utils.jsx | 4 + 3 files changed, 135 insertions(+), 16 deletions(-) (limited to 'web/react') 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( +
+
+ +
+
+ ); + }); + + inputs.push( +
+
+ {'Check any pre-released features you\'d like to preview.'} +
+ ); + + previewFeaturesSection = ( + { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + previewFeaturesSection = ( + this.props.updateSection('advancedPreviewFeatures')} + /> + ); + } + return (
@@ -145,6 +245,8 @@ export default class AdvancedSettingsDisplay extends React.Component {

{'Advanced Settings'}

{ctrlSendSection} +
+ {previewFeaturesSection}
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 09e962161..628e885f2 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -1320,3 +1320,16 @@ export function regenOutgoingHookToken(data, success, error) { } }); } + +export function getAvailablePreReleaseFeatures(success, error) { + $.ajax({ + url: '/static/config/pre_release_features.json', + dataType: 'json', + type: 'GET', + success, + error: (xhr, status, err) => { + var e = handleError('getAvailablePreReleaseFeatures', xhr, status, err); + error(e); + } + }); +} diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 9b2f7e057..432cb05e0 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -1221,3 +1221,7 @@ export function getPostTerm(post) { return postTerm; } + +export function featureToggle(feature) { + return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'feature_enabled_' + feature, {value: 'false'}).value === 'true'; +} -- cgit v1.2.3-1-g7c22 From 6e1e5f7ae4dcc5645a5412e17b36e5d95bf4f7c6 Mon Sep 17 00:00:00 2001 From: Florian Orben 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 +++++++++++---------- web/react/utils/constants.jsx | 3 +- web/react/utils/utils.jsx | 2 +- 3 files changed, 59 insertions(+), 51 deletions(-) (limited to 'web/react') 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 = ( +
+ ); - this.state.preReleaseFeatures.forEach((feature) => { - inputs.push( -
-
- + if (this.props.activeSection === 'advancedPreviewFeatures') { + const inputs = []; + + this.state.preReleaseFeatures.forEach((feature) => { + inputs.push( +
+
+ +
+ ); + }); + + inputs.push( +
+
+ {'Check any pre-released features you\'d like to preview.'}
); - }); - inputs.push( -
-
- {'Check any pre-released features you\'d like to preview.'} -
- ); - - previewFeaturesSection = ( - { - this.updateSection(''); - e.preventDefault(); - }} - /> - ); - } else { - previewFeaturesSection = ( - this.props.updateSection('advancedPreviewFeatures')} - /> - ); + previewFeaturesSection = ( + { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + previewFeaturesSection = ( + this.props.updateSection('advancedPreviewFeatures')} + /> + ); + } } return ( @@ -245,7 +252,7 @@ export default class AdvancedSettingsDisplay extends React.Component {

{'Advanced Settings'}

{ctrlSendSection} -
+ {previewFeaturesSectionDivider} {previewFeaturesSection}
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 372e15556..31c2b940e 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -398,5 +398,6 @@ export default { }, NotificationPrefs: { MENTION: 'mention' - } + }, + FeatureTogglePrefix: 'feature_enabled_' }; diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 432cb05e0..58e570455 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -1223,5 +1223,5 @@ export function getPostTerm(post) { } export function featureToggle(feature) { - return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'feature_enabled_' + feature, {value: 'false'}).value === 'true'; + return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature, {value: 'false'}).value === 'true'; } -- cgit v1.2.3-1-g7c22 From ca3856ab3b7d47b42b46db176c6678a24c1fc402 Mon Sep 17 00:00:00 2001 From: Florian Orben 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') 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 = ( + + {this.state.preview ? 'Edit message' : 'Preview'} + + ); + } return (
+ {previewLink} {'Help'} - - {this.state.preview ? 'Edit' : 'Preview'} -
); } -- cgit v1.2.3-1-g7c22 From 61a35066b64085d264fbd049e2a57f70125ca65a Mon Sep 17 00:00:00 2001 From: Florian Orben 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 ++++++++++------------ web/react/utils/client.jsx | 13 -------- web/react/utils/constants.jsx | 8 ++++- web/react/utils/utils.jsx | 4 +-- 5 files changed, 27 insertions(+), 36 deletions(-) (limited to 'web/react') 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 = ( { - 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 = (
); @@ -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(
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 628e885f2..09e962161 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -1320,16 +1320,3 @@ export function regenOutgoingHookToken(data, success, error) { } }); } - -export function getAvailablePreReleaseFeatures(success, error) { - $.ajax({ - url: '/static/config/pre_release_features.json', - dataType: 'json', - type: 'GET', - success, - error: (xhr, status, err) => { - var e = handleError('getAvailablePreReleaseFeatures', xhr, status, err); - error(e); - } - }); -} diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 31c2b940e..2009e07dd 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -399,5 +399,11 @@ export default { NotificationPrefs: { MENTION: 'mention' }, - FeatureTogglePrefix: 'feature_enabled_' + FeatureTogglePrefix: 'feature_enabled_', + PRE_RELEASE_FEATURES: { + MARKDOWN_PREVIEW: { + label: 'markdown_preview', // github issue: https://github.com/mattermost/platform/pull/1389 + description: 'Show markdown preview option in message input box' + } + } }; diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 58e570455..80c377d7f 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -1222,6 +1222,6 @@ export function getPostTerm(post) { return postTerm; } -export function featureToggle(feature) { - return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature, {value: 'false'}).value === 'true'; +export function isFeatureEnabled(feature) { + return PreferenceStore.getPreference(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, Constants.FeatureTogglePrefix + feature.label, {value: 'false'}).value === 'true'; } -- cgit v1.2.3-1-g7c22