PLT-2257 Reorganized System Console (#3003)

* Reorganized system console

* Fixed the names of some components

* Fixed timestamp for BrandImageSetting

* Fixed merge issues

* Updated push notification settings to match master branch

* Removed top level setting pages and moved enable Gitlab/LDAP settings onto their respective pages

* Re-added restrictDirectMessage setting to system console

* Re-added email connection test and fixed some margins

* Fixed ESLint errors

* Renamed Authentication > Onboarding to Authentication > Email in the system console

* Renamed Customization > Whitelabeling to Customization > Custom Branding in System Console

* Re-added EnableOpenServer to system console

1 files changed, 68 insertions, 193 deletions

diff --git a/webapp/components/admin_console/privacy_settings.jsx b/webapp/components/admin_console/privacy_settings.jsx
index 8759472a2..8905e57ef 100644
--- a/webapp/components/admin_console/privacy_settings.jsx
+++ b/webapp/components/admin_console/privacy_settings.jsx
@@ -1,215 +1,90 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
-import ReactDOM from 'react-dom';
-import Client from 'utils/web_client.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
-
-import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'react-intl';
-
-const holders = defineMessages({
-    saving: {
-        id: 'admin.privacy.saving',
-        defaultMessage: 'Saving Config...'
-    }
-});
-
 import React from 'react';
 
-class PrivacySettings extends React.Component {
+import AdminSettings from './admin_settings.jsx';
+import BooleanSetting from './boolean_setting.jsx';
+import {FormattedMessage} from 'react-intl';
+import SettingsGroup from './settings_group.jsx';
+
+export default class PrivacySettings extends AdminSettings {
     constructor(props) {
         super(props);
 
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
+        this.getConfigFromState = this.getConfigFromState.bind(this);
 
-        this.state = {
-            saveNeeded: false,
-            serverError: null
-        };
-    }
-
-    handleChange() {
-        var s = {saveNeeded: true, serverError: this.state.serverError};
+        this.renderSettings = this.renderSettings.bind(this);
 
-        this.setState(s);
+        this.state = Object.assign(this.state, {
+            showEmailAddress: props.config.PrivacySettings.ShowEmailAddress,
+            showFullName: props.config.PrivacySettings.ShowFullName
+        });
     }
 
-    handleSubmit(e) {
-        e.preventDefault();
-        $('#save-button').button('loading');
+    getConfigFromState(config) {
+        config.PrivacySettings.ShowEmailAddress = this.state.showEmailAddress;
+        config.PrivacySettings.ShowFullName = this.state.showFullName;
 
-        var config = this.props.config;
-        config.PrivacySettings.ShowEmailAddress = ReactDOM.findDOMNode(this.refs.ShowEmailAddress).checked;
-        config.PrivacySettings.ShowFullName = ReactDOM.findDOMNode(this.refs.ShowFullName).checked;
+        return config;
+    }
 
-        Client.saveConfig(
-            config,
-            () => {
-                AsyncClient.getConfig();
-                this.setState({
-                    serverError: null,
-                    saveNeeded: false
-                });
-                $('#save-button').button('reset');
-            },
-            (err) => {
-                this.setState({
-                    serverError: err.message,
-                    saveNeeded: true
-                });
-                $('#save-button').button('reset');
-            }
+    renderTitle() {
+        return (
+            <h3>
+                <FormattedMessage
+                    id='admin.general.title'
+                    defaultMessage='General Settings'
+                />
+            </h3>
         );
     }
 
-    render() {
-        var serverError = '';
-        if (this.state.serverError) {
-            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
-        }
-
-        var saveClass = 'btn';
-        if (this.state.saveNeeded) {
-            saveClass = 'btn btn-primary';
-        }
-
+    renderSettings() {
         return (
-            <div className='wrapper--fixed'>
-                <h3>
+            <SettingsGroup
+                header={
                     <FormattedMessage
-                        id='admin.privacy.title'
-                        defaultMessage='Privacy Settings'
+                        id='admin.general.privacy'
+                        defaultMessage='Privacy'
                     />
-                </h3>
-                <form
-                    className='form-horizontal'
-                    role='form'
-                >
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='ShowEmailAddress'
-                        >
-                            <FormattedMessage
-                                id='admin.privacy.showEmailTitle'
-                                defaultMessage='Show Email Address: '
-                            />
-                        </label>
-                        <div className='col-sm-8'>
-                            <label className='radio-inline'>
-                                <input
-                                    type='radio'
-                                    name='ShowEmailAddress'
-                                    value='true'
-                                    ref='ShowEmailAddress'
-                                    defaultChecked={this.props.config.PrivacySettings.ShowEmailAddress}
-                                    onChange={this.handleChange}
-                                />
-                                <FormattedMessage
-                                    id='admin.privacy.true'
-                                    defaultMessage='true'
-                                />
-                            </label>
-                            <label className='radio-inline'>
-                                <input
-                                    type='radio'
-                                    name='ShowEmailAddress'
-                                    value='false'
-                                    defaultChecked={!this.props.config.PrivacySettings.ShowEmailAddress}
-                                    onChange={this.handleChange}
-                                />
-                                <FormattedMessage
-                                    id='admin.privacy.false'
-                                    defaultMessage='false'
-                                />
-                            </label>
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.privacy.showEmailDescription'
-                                    defaultMessage='When false, hides email address of users from other users in the user interface, including team owners and team administrators. Used when system is set up for managing teams where some users choose to keep their contact information private.'
-                                />
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='ShowFullName'
-                        >
-                            <FormattedMessage
-                                id='admin.privacy.showFullNameTitle'
-                                defaultMessage='Show Full Name: '
-                            />
-                        </label>
-                        <div className='col-sm-8'>
-                            <label className='radio-inline'>
-                                <input
-                                    type='radio'
-                                    name='ShowFullName'
-                                    value='true'
-                                    ref='ShowFullName'
-                                    defaultChecked={this.props.config.PrivacySettings.ShowFullName}
-                                    onChange={this.handleChange}
-                                />
-                                <FormattedMessage
-                                    id='admin.privacy.true'
-                                    defaultMessage='true'
-                                />
-                            </label>
-                            <label className='radio-inline'>
-                                <input
-                                    type='radio'
-                                    name='ShowFullName'
-                                    value='false'
-                                    defaultChecked={!this.props.config.PrivacySettings.ShowFullName}
-                                    onChange={this.handleChange}
-                                />
-                                <FormattedMessage
-                                    id='admin.privacy.false'
-                                    defaultMessage='false'
-                                />
-                            </label>
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.privacy.showFullNameDescription'
-                                    defaultMessage='When false, hides full name of users from other users, including team owners and team administrators. Username is shown in place of full name.'
-                                />
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <div className='col-sm-12'>
-                            {serverError}
-                            <button
-                                disabled={!this.state.saveNeeded}
-                                type='submit'
-                                className={saveClass}
-                                onClick={this.handleSubmit}
-                                id='save-button'
-                                data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + this.props.intl.formatMessage(holders.saving)}
-                            >
-                                <FormattedMessage
-                                    id='admin.privacy.save'
-                                    defaultMessage='Save'
-                                />
-                            </button>
-                        </div>
-                    </div>
-
-                </form>
-            </div>
+                }
+            >
+                <BooleanSetting
+                    id='showEmailAddress'
+                    label={
+                        <FormattedMessage
+                            id='admin.privacy.showEmailTitle'
+                            defaultMessage='Show Email Address: '
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.privacy.showEmailDescription'
+                            defaultMessage='When false, hides email address of users from other users in the user interface, including team owners and team administrators. Used when system is set up for managing teams where some users choose to keep their contact information private.'
+                        />
+                    }
+                    value={this.state.showEmailAddress}
+                    onChange={this.handleChange}
+                />
+                <BooleanSetting
+                    id='showFullName'
+                    label={
+                        <FormattedMessage
+                            id='admin.privacy.showFullNameTitle'
+                            defaultMessage='Show Full Name: '
+                        />
+                    }
+                    helpText={
+                        <FormattedMessage
+                            id='admin.privacy.showFullNameDescription'
+                            defaultMessage='When false, hides full name of users from other users, including team owners and team administrators. Username is shown in place of full name.'
+                        />
+                    }
+                    value={this.state.showFullName}
+                    onChange={this.handleChange}
+                />
+            </SettingsGroup>
         );
     }
-}
-
-PrivacySettings.propTypes = {
-    intl: intlShape.isRequired,
-    config: React.PropTypes.object
-};
-
-export default injectIntl(PrivacySettings);
+}
\ No newline at end of file