// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import * as AsyncClient from 'utils/async_client.jsx'; 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'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; import {FormattedMessage} from 'react-intl'; const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; import React from 'react'; export default class AdvancedSettingsDisplay extends React.Component { constructor(props) { super(props); this.getStateFromStores = this.getStateFromStores.bind(this); 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.renderFormattingSection = this.renderFormattingSection.bind(this); this.renderJoinLeaveSection = this.renderJoinLeaveSection.bind(this); this.state = this.getStateFromStores(); } getStateFromStores() { let preReleaseFeaturesKeys = Object.keys(PreReleaseFeatures); const advancedSettings = PreferenceStore.getCategory(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS); const settings = { send_on_ctrl_enter: PreferenceStore.get( Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', 'false' ), formatting: PreferenceStore.get( Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', 'true' ), join_leave: PreferenceStore.get( Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'join_leave', 'true' ) }; let enabledFeatures = 0; for (const [name, value] of advancedSettings) { const webrtcEnabled = global.mm_config.EnableWebrtc === 'true'; if (!webrtcEnabled) { preReleaseFeaturesKeys = preReleaseFeaturesKeys.filter((f) => f !== 'WEBRTC_PREVIEW'); } for (const key of preReleaseFeaturesKeys) { const feature = PreReleaseFeatures[key]; if (name === Constants.FeatureTogglePrefix + feature.label) { settings[name] = value; if (value === 'true') { enabledFeatures += 1; } } } } return {preReleaseFeatures: PreReleaseFeatures, settings, preReleaseFeaturesKeys, enabledFeatures }; } updateSetting(setting, value) { const settings = this.state.settings; settings[setting] = value; this.setState(settings); } toggleFeature(feature, checked) { const settings = this.state.settings; settings[Constants.FeatureTogglePrefix + feature] = String(checked); let enabledFeatures = 0; Object.keys(this.state.settings).forEach((setting) => { if (setting.lastIndexOf(Constants.FeatureTogglePrefix) === 0 && this.state.settings[setting] === 'true') { enabledFeatures++; } }); this.setState({settings, enabledFeatures}); } saveEnabledFeatures() { const features = []; Object.keys(this.state.settings).forEach((setting) => { if (setting.lastIndexOf(Constants.FeatureTogglePrefix) === 0) { features.push(setting); } }); this.handleSubmit(features); } handleSubmit(settings) { const preferences = []; const userId = UserStore.getCurrentId(); // this should be refactored so we can actually be certain about what type everything is (Array.isArray(settings) ? settings : [settings]).forEach((setting) => { preferences.push({ user_id: userId, category: Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, name: setting, value: this.state.settings[setting] }); }); AsyncClient.savePreferences( preferences, () => { this.updateSection(''); }, (err) => { this.setState({serverError: err.message}); } ); } updateSection(section) { if ($('.section-max').length) { $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); } if (!section) { this.setState(this.getStateFromStores()); } this.props.updateSection(section); } renderOnOffLabel(enabled) { if (enabled === 'false') { return ( ); } return ( ); } renderFormattingSection() { if (this.props.activeSection === 'formatting') { return ( } inputs={[



]} submit={() => this.handleSubmit('formatting')} server_error={this.state.serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } return ( } describe={this.renderOnOffLabel(this.state.settings.formatting)} updateSection={() => this.props.updateSection('formatting')} /> ); } renderJoinLeaveSection() { if (window.mm_config.BuildEnterpriseReady === 'true' && window.mm_license && window.mm_license.IsLicensed === 'true') { if (this.props.activeSection === 'join_leave') { return ( } inputs={[



]} submit={() => this.handleSubmit('join_leave')} server_error={this.state.serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } return ( } describe={this.renderOnOffLabel(this.state.settings.join_leave)} updateSection={() => this.props.updateSection('join_leave')} /> ); } return null; } renderFeatureLabel(feature) { switch (feature) { case 'MARKDOWN_PREVIEW': return ( ); case 'EMBED_PREVIEW': return ( ); case 'WEBRTC_PREVIEW': return ( ); default: return null; } } render() { const serverError = this.state.serverError || null; let ctrlSendSection; if (this.props.activeSection === 'advancedCtrlSend') { const ctrlSendActive = [ this.state.settings.send_on_ctrl_enter === 'true', this.state.settings.send_on_ctrl_enter === 'false' ]; const inputs = [



]; ctrlSendSection = ( } inputs={inputs} submit={() => this.handleSubmit('send_on_ctrl_enter')} server_error={serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } else { ctrlSendSection = ( } describe={this.renderOnOffLabel(this.state.settings.send_on_ctrl_enter)} updateSection={() => this.props.updateSection('advancedCtrlSend')} /> ); } const formattingSection = this.renderFormattingSection(); let formattingSectionDivider = null; if (formattingSection) { formattingSectionDivider =
; } const displayJoinLeaveSection = this.renderJoinLeaveSection(); let displayJoinLeaveSectionDivider = null; if (displayJoinLeaveSection) { displayJoinLeaveSectionDivider =
; } let previewFeaturesSection; let previewFeaturesSectionDivider; if (this.state.preReleaseFeaturesKeys.length > 0) { previewFeaturesSectionDivider = (
); if (this.props.activeSection === 'advancedPreviewFeatures') { const inputs = []; this.state.preReleaseFeaturesKeys.forEach((key) => { const feature = this.state.preReleaseFeatures[key]; inputs.push(
); }); inputs.push(

); previewFeaturesSection = ( } inputs={inputs} submit={this.saveEnabledFeatures} server_error={serverError} updateSection={(e) => { this.updateSection(''); e.preventDefault(); }} /> ); } else { previewFeaturesSection = ( } updateSection={() => this.props.updateSection('advancedPreviewFeatures')} /> ); } } return (

{ctrlSendSection} {formattingSectionDivider} {formattingSection} {displayJoinLeaveSectionDivider} {displayJoinLeaveSection} {previewFeaturesSectionDivider} {previewFeaturesSection}
); } } AdvancedSettingsDisplay.propTypes = { user: React.PropTypes.object, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, activeSection: React.PropTypes.string, closeModal: React.PropTypes.func.isRequired, collapseModal: React.PropTypes.func.isRequired };