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, 159 insertions, 355 deletions

diff --git a/webapp/components/admin_console/gitlab_settings.jsx b/webapp/components/admin_console/gitlab_settings.jsx
index 510fd0887..bd3cd8dec 100644
--- a/webapp/components/admin_console/gitlab_settings.jsx
+++ b/webapp/components/admin_console/gitlab_settings.jsx
@@ -1,382 +1,186 @@
 // 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, FormattedHTMLMessage} from 'react-intl';
+import React from 'react';
 
-const holders = defineMessages({
-    clientIdExample: {
-        id: 'admin.gitlab.clientIdExample',
-        defaultMessage: 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
-    },
-    clientSecretExample: {
-        id: 'admin.gitlab.clientSecretExample',
-        defaultMessage: 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
-    },
-    authExample: {
-        id: 'admin.gitlab.authExample',
-        defaultMessage: 'Ex ""'
-    },
-    tokenExample: {
-        id: 'admin.gitlab.tokenExample',
-        defaultMessage: 'Ex ""'
-    },
-    userExample: {
-        id: 'admin.gitlab.userExample',
-        defaultMessage: 'Ex ""'
-    },
-    saving: {
-        id: 'admin.gitlab.saving',
-        defaultMessage: 'Saving Config...'
-    }
-});
+import * as Utils from 'utils/utils.jsx';
 
-import React from 'react';
+import AdminSettings from './admin_settings.jsx';
+import BooleanSetting from './boolean_setting.jsx';
+import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
+import SettingsGroup from './settings_group.jsx';
+import TextSetting from './text_setting.jsx';
 
-class GitLabSettings extends React.Component {
+export default class GitLabSettings extends AdminSettings {
     constructor(props) {
         super(props);
 
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-
-        this.state = {
-            Enable: this.props.config.GitLabSettings.Enable,
-            saveNeeded: false,
-            serverError: null
-        };
-    }
+        this.getConfigFromState = this.getConfigFromState.bind(this);
 
-    handleChange(action) {
-        var s = {saveNeeded: true, serverError: this.state.serverError};
+        this.renderSettings = this.renderSettings.bind(this);
 
-        if (action === 'EnableTrue') {
-            s.Enable = true;
-        }
-
-        if (action === 'EnableFalse') {
-            s.Enable = false;
-        }
-
-        this.setState(s);
+        this.state = Object.assign(this.state, {
+            enable: props.config.GitLabSettings.Enable,
+            id: props.config.GitLabSettings.Id,
+            secret: props.config.GitLabSettings.Secret,
+            userApiEndpoint: props.config.GitLabSettings.UserApiEndpoint,
+            authEndpoint: props.config.GitLabSettings.AuthEndpoint,
+            tokenEndpoint: props.config.GitLabSettings.TokenEndpoint
+        });
     }
 
-    handleSubmit(e) {
-        e.preventDefault();
-        $('#save-button').button('loading');
+    getConfigFromState(config) {
+        config.GitLabSettings.Enable = this.state.enable;
+        config.GitLabSettings.Id = this.state.id;
+        config.GitLabSettings.Secret = this.state.secret;
+        config.GitLabSettings.UserApiEndpoint = this.state.userApiEndpoint;
+        config.GitLabSettings.AuthEndpoint = this.state.authEndpoint;
+        config.GitLabSettings.TokenEndpoint = this.state.tokenEndpoint;
 
-        var config = this.props.config;
-        config.GitLabSettings.Enable = ReactDOM.findDOMNode(this.refs.Enable).checked;
-        config.GitLabSettings.Secret = ReactDOM.findDOMNode(this.refs.Secret).value.trim();
-        config.GitLabSettings.Id = ReactDOM.findDOMNode(this.refs.Id).value.trim();
-        config.GitLabSettings.AuthEndpoint = ReactDOM.findDOMNode(this.refs.AuthEndpoint).value.trim();
-        config.GitLabSettings.TokenEndpoint = ReactDOM.findDOMNode(this.refs.TokenEndpoint).value.trim();
-        config.GitLabSettings.UserApiEndpoint = ReactDOM.findDOMNode(this.refs.UserApiEndpoint).value.trim();
+        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.authentication.title'
+                    defaultMessage='Authentication Settings'
+                />
+            </h3>
         );
     }
 
-    render() {
-        const {formatMessage} = this.props.intl;
-        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.gitlab.settingsTitle'
-                        defaultMessage='GitLab Settings'
+                        id='admin.authentication.gitlab'
+                        defaultMessage='GitLab'
                     />
-                </h3>
-                <form
-                    className='form-horizontal'
-                    role='form'
-                >
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='Enable'
-                        >
-                            <FormattedMessage
-                                id='admin.gitlab.enableTitle'
-                                defaultMessage='Enable Sign Up With GitLab: '
-                            />
-                        </label>
-                        <div className='col-sm-8'>
-                            <label className='radio-inline'>
-                                <input
-                                    type='radio'
-                                    name='Enable'
-                                    value='true'
-                                    ref='Enable'
-                                    defaultChecked={this.props.config.GitLabSettings.Enable}
-                                    onChange={this.handleChange.bind(this, 'EnableTrue')}
-                                />
-                                <FormattedMessage
-                                    id='admin.gitlab.true'
-                                    defaultMessage='true'
-                                />
-                            </label>
-                            <label className='radio-inline'>
-                                <input
-                                    type='radio'
-                                    name='Enable'
-                                    value='false'
-                                    defaultChecked={!this.props.config.GitLabSettings.Enable}
-                                    onChange={this.handleChange.bind(this, 'EnableFalse')}
-                                />
-                                <FormattedMessage
-                                    id='admin.gitlab.false'
-                                    defaultMessage='false'
-                                />
-                            </label>
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.gitlab.enableDescription'
-                                    defaultMessage='When true, Mattermost allows team creation and account signup using GitLab OAuth.'
-                                />
-                                <br/>
-                            </p>
-                            <div className='help-text'>
-                                <FormattedHTMLMessage
-                                    id='admin.gitlab.EnableHtmlDesc'
-                                    defaultMessage='<ol><li>Log in to your GitLab account and go to Profile Settings -> Applications.</li><li>Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". </li><li>Then use "Secret" and "Id" fields from GitLab to complete the options below.</li><li>Complete the Endpoint URLs below. </li></ol>'
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='Id'
-                        >
-                            <FormattedMessage
-                                id='admin.gitlab.clientIdTitle'
-                                defaultMessage='Id:'
-                            />
-                        </label>
-                        <div className='col-sm-8'>
-                            <input
-                                type='text'
-                                className='form-control'
-                                id='Id'
-                                ref='Id'
-                                placeholder={formatMessage(holders.clientIdExample)}
-                                defaultValue={this.props.config.GitLabSettings.Id}
-                                onChange={this.handleChange}
-                                disabled={!this.state.Enable}
-                            />
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.gitlab.clientIdDescription'
-                                    defaultMessage='Obtain this value via the instructions above for logging into GitLab'
-                                />
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='Secret'
-                        >
+                }
+            >
+                <BooleanSetting
+                    id='enable'
+                    label={
+                        <FormattedMessage
+                            id='admin.gitlab.enableTitle'
+                            defaultMessage='Enable Sign Up With GitLab: '
+                        />
+                    }
+                    helpText={
+                        <div>
                             <FormattedMessage
-                                id='admin.gitlab.clientSecretTitle'
-                                defaultMessage='Secret:'
+                                id='admin.gitlab.enableDescription'
+                                defaultMessage='When true, Mattermost allows team creation and account signup using GitLab OAuth.'
                             />
-                        </label>
-                        <div className='col-sm-8'>
-                            <input
-                                type='text'
-                                className='form-control'
-                                id='Secret'
-                                ref='Secret'
-                                placeholder={formatMessage(holders.clientSecretExample)}
-                                defaultValue={this.props.config.GitLabSettings.Secret}
-                                onChange={this.handleChange}
-                                disabled={!this.state.Enable}
+                            <br/>
+                            <FormattedHTMLMessage
+                                id='admin.gitlab.EnableHtmlDesc'
+                                defaultMessage='<ol><li>Log in to your GitLab account and go to Profile Settings -> Applications.</li><li>Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". </li><li>Then use "Secret" and "Id" fields from GitLab to complete the options below.</li><li>Complete the Endpoint URLs below. </li></ol>'
                             />
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.gitab.clientSecretDescription'
-                                    defaultMessage='Obtain this value via the instructions above for logging into GitLab.'
-                                />
-                            </p>
                         </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='AuthEndpoint'
-                        >
-                            <FormattedMessage
-                                id='admin.gitlab.authTitle'
-                                defaultMessage='Auth Endpoint:'
-                            />
-                        </label>
-                        <div className='col-sm-8'>
-                            <input
-                                type='text'
-                                className='form-control'
-                                id='AuthEndpoint'
-                                ref='AuthEndpoint'
-                                placeholder={formatMessage(holders.authExample)}
-                                defaultValue={this.props.config.GitLabSettings.AuthEndpoint}
-                                onChange={this.handleChange}
-                                disabled={!this.state.Enable}
-                            />
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.gitlab.authDescription'
-                                    defaultMessage='Enter https://<your-gitlab-url>/oauth/authorize (example https://example.com:3000/oauth/authorize).   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
-                                />
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='TokenEndpoint'
-                        >
-                            <FormattedMessage
-                                id='admin.gitlab.tokenTitle'
-                                defaultMessage='Token Endpoint:'
-                            />
-                        </label>
-                        <div className='col-sm-8'>
-                            <input
-                                type='text'
-                                className='form-control'
-                                id='TokenEndpoint'
-                                ref='TokenEndpoint'
-                                placeholder={formatMessage(holders.tokenExample)}
-                                defaultValue={this.props.config.GitLabSettings.TokenEndpoint}
-                                onChange={this.handleChange}
-                                disabled={!this.state.Enable}
-                            />
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.gitlab.tokenDescription'
-                                    defaultMessage='Enter https://<your-gitlab-url>/oauth/token.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
-                                />
-                            </p>
-                        </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
-                            htmlFor='UserApiEndpoint'
-                        >
-                            <FormattedMessage
-                                id='admin.gitlab.userTitle'
-                                defaultMessage='User API Endpoint:'
-                            />
-                        </label>
-                        <div className='col-sm-8'>
-                            <input
-                                type='text'
-                                className='form-control'
-                                id='UserApiEndpoint'
-                                ref='UserApiEndpoint'
-                                placeholder={formatMessage(holders.userExample)}
-                                defaultValue={this.props.config.GitLabSettings.UserApiEndpoint}
-                                onChange={this.handleChange}
-                                disabled={!this.state.Enable}
-                            />
-                            <p className='help-text'>
-                                <FormattedMessage
-                                    id='admin.gitlab.userDescription'
-                                    defaultMessage='Enter https://<your-gitlab-url>/api/v3/user.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
-                                />
-                            </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> ' + formatMessage(holders.saving)}
-                            >
-                                <FormattedMessage
-                                    id='admin.gitlab.save'
-                                    defaultMessage='Save'
-                                />
-                            </button>
-                        </div>
-                    </div>
-
-                </form>
-            </div>
+                    }
+                    value={this.state.enable}
+                    onChange={this.handleChange}
+                />
+                <TextSetting
+                    id='id'
+                    label={
+                        <FormattedMessage
+                            id='admin.gitlab.clientIdTitle'
+                            defaultMessage='Id:'
+                        />
+                    }
+                    placeholder={Utils.localizeMessage('admin.gitlab.clientIdExample', 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"')}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.gitlab.clientIdDescription'
+                            defaultMessage='Obtain this value via the instructions above for logging into GitLab'
+                        />
+                    }
+                    value={this.state.id}
+                    onChange={this.handleChange}
+                    disabled={!this.state.enable}
+                />
+                <TextSetting
+                    id='secret'
+                    label={
+                        <FormattedMessage
+                            id='admin.gitlab.clientSecretTitle'
+                            defaultMessage='Secret:'
+                        />
+                    }
+                    placeholder={Utils.localizeMessage('admin.gitlab.clientSecretExample', 'Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"')}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.gitab.clientSecretDescription'
+                            defaultMessage='Obtain this value via the instructions above for logging into GitLab.'
+                        />
+                    }
+                    value={this.state.secret}
+                    onChange={this.handleChange}
+                    disabled={!this.state.enable}
+                />
+                <TextSetting
+                    id='userApiEndpoint'
+                    label={
+                        <FormattedMessage
+                            id='admin.gitlab.userTitle'
+                            defaultMessage='User API Endpoint:'
+                        />
+                    }
+                    placeholder={Utils.localizeMessage('admin.gitlab.userExample', 'Ex ""')}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.gitlab.userDescription'
+                            defaultMessage='Enter https://<your-gitlab-url>/api/v3/user.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                        />
+                    }
+                    value={this.state.userApiEndpoint}
+                    onChange={this.handleChange}
+                    disabled={!this.state.enable}
+                />
+                <TextSetting
+                    id='authEndpoint'
+                    label={
+                        <FormattedMessage
+                            id='admin.gitlab.authTitle'
+                            defaultMessage='Auth Endpoint:'
+                        />
+                    }
+                    placeholder={Utils.localizeMessage('admin.gitlab.authExample', 'Ex ""')}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.gitlab.authDescription'
+                            defaultMessage='Enter https://<your-gitlab-url>/oauth/authorize (example https://example.com:3000/oauth/authorize).   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                        />
+                    }
+                    value={this.state.authEndpoint}
+                    onChange={this.handleChange}
+                    disabled={!this.state.enable}
+                />
+                <TextSetting
+                    id='tokenEndpoint'
+                    label={
+                        <FormattedMessage
+                            id='admin.gitlab.tokenTitle'
+                            defaultMessage='Token Endpoint:'
+                        />
+                    }
+                    placeholder={Utils.localizeMessage('admin.gitlab.tokenExample', 'Ex ""')}
+                    helpText={
+                        <FormattedMessage
+                            id='admin.gitlab.tokenDescription'
+                            defaultMessage='Enter https://<your-gitlab-url>/oauth/token.   Make sure you use HTTP or HTTPS in your URL depending on your server configuration.'
+                        />
+                    }
+                    value={this.state.tokenEndpoint}
+                    onChange={this.handleChange}
+                    disabled={!this.state.enable}
+                />
+            </SettingsGroup>
         );
     }
-}
-
-//config.GitLabSettings.Scope = ReactDOM.findDOMNode(this.refs.Scope).value.trim();
-//  <div className='form-group'>
-//     <label
-//         className='control-label col-sm-4'
-//         htmlFor='Scope'
-//     >
-//         {'Scope:'}
-//     </label>
-//     <div className='col-sm-8'>
-//         <input
-//             type='text'
-//             className='form-control'
-//             id='Scope'
-//             ref='Scope'
-//             placeholder='Not currently used by GitLab. Please leave blank'
-//             defaultValue={this.props.config.GitLabSettings.Scope}
-//             onChange={this.handleChange}
-//             disabled={!this.state.Allow}
-//         />
-//         <p className='help-text'>{'This field is not yet used by GitLab OAuth. Other OAuth providers may use this field to specify the scope of account data from OAuth provider that is sent to Mattermost.'}</p>
-//     </div>
-// </div>
-
-GitLabSettings.propTypes = {
-    intl: intlShape.isRequired,
-    config: React.PropTypes.object
-};
-
-export default injectIntl(GitLabSettings);
+}
\ No newline at end of file