From 017cd2a9575149bb87f382f441b9c960b6816c9d Mon Sep 17 00:00:00 2001
From: Joram Wilander <jwawilander@gmail.com>
Date: Wed, 17 May 2017 11:29:41 -0400
Subject: PLT-6406 Migrate new channel modal to be pure and use redux (#6416)

* Migrate new channel modal to be pure and use redux

* Add component tests
---
 webapp/components/new_channel_flow.jsx             |   2 +-
 webapp/components/new_channel_modal.jsx            | 359 ----------
 webapp/components/new_channel_modal/index.js       |  21 +
 .../new_channel_modal/new_channel_modal.jsx        | 391 +++++++++++
 webapp/package.json                                |   1 +
 .../__snapshots__/new_channel_modal.test.jsx.snap  | 733 +++++++++++++++++++++
 webapp/tests/components/new_channel_modal.test.jsx |  79 +++
 7 files changed, 1226 insertions(+), 360 deletions(-)
 delete mode 100644 webapp/components/new_channel_modal.jsx
 create mode 100644 webapp/components/new_channel_modal/index.js
 create mode 100644 webapp/components/new_channel_modal/new_channel_modal.jsx
 create mode 100644 webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap
 create mode 100644 webapp/tests/components/new_channel_modal.test.jsx

diff --git a/webapp/components/new_channel_flow.jsx b/webapp/components/new_channel_flow.jsx
index 91dd04c0c..69c2f1c4c 100644
--- a/webapp/components/new_channel_flow.jsx
+++ b/webapp/components/new_channel_flow.jsx
@@ -5,7 +5,7 @@ import * as Utils from 'utils/utils.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import {cleanUpUrlable} from 'utils/url.jsx';
 
-import NewChannelModal from './new_channel_modal.jsx';
+import NewChannelModal from 'components/new_channel_modal';
 import ChangeURLModal from './change_url_modal.jsx';
 
 import {FormattedMessage} from 'react-intl';
diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx
deleted file mode 100644
index 49103b7a8..000000000
--- a/webapp/components/new_channel_modal.jsx
+++ /dev/null
@@ -1,359 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import $ from 'jquery';
-import ReactDOM from 'react-dom';
-
-import {getShortenedURL} from 'utils/url.jsx';
-import * as UserAgent from 'utils/user_agent.jsx';
-import * as Utils from 'utils/utils.jsx';
-import * as ChannelUtils from 'utils/channel_utils.jsx';
-import Constants from 'utils/constants.jsx';
-
-import UserStore from 'stores/user_store.jsx';
-import TeamStore from 'stores/team_store.jsx';
-import PreferenceStore from 'stores/preference_store.jsx';
-
-import {FormattedMessage} from 'react-intl';
-
-import {Modal} from 'react-bootstrap';
-
-import React from 'react';
-
-export default class NewChannelModal extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.handleChange = this.handleChange.bind(this);
-        this.onEnterKeyDown = this.onEnterKeyDown.bind(this);
-        this.onPreferenceChange = this.onPreferenceChange.bind(this);
-
-        this.ctrlSend = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter');
-
-        this.state = {
-            displayNameError: ''
-        };
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.show === true && this.props.show === false) {
-            this.setState({
-                displayNameError: ''
-            });
-
-            document.addEventListener('keydown', this.onEnterKeyDown);
-        } else if (nextProps.show === false && this.props.show === true) {
-            document.removeEventListener('keydown', this.onEnterKeyDown);
-        }
-    }
-
-    componentDidMount() {
-        // ???
-        if (UserAgent.isInternetExplorer()) {
-            $('body').addClass('browser--ie');
-        }
-
-        PreferenceStore.addChangeListener(this.onPreferenceChange);
-    }
-
-    componentWillUnmount() {
-        PreferenceStore.removeChangeListener(this.onPreferenceChange);
-    }
-
-    onPreferenceChange() {
-        this.ctrlSend = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter');
-    }
-
-    onEnterKeyDown(e) {
-        if (this.ctrlSend && e.keyCode === Constants.KeyCodes.ENTER && e.ctrlKey) {
-            this.handleSubmit(e);
-        } else if (!this.ctrlSend && e.keyCode === Constants.KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
-            this.handleSubmit(e);
-        }
-    }
-
-    handleSubmit(e) {
-        e.preventDefault();
-
-        const displayName = ReactDOM.findDOMNode(this.refs.display_name).value.trim();
-        if (displayName.length < Constants.MIN_CHANNELNAME_LENGTH) {
-            this.setState({displayNameError: true});
-            return;
-        }
-
-        this.props.onSubmitChannel();
-    }
-
-    handleChange() {
-        const newData = {
-            displayName: this.refs.display_name.value,
-            header: this.refs.channel_header.value,
-            purpose: this.refs.channel_purpose.value
-        };
-        this.props.onDataChanged(newData);
-    }
-
-    render() {
-        var displayNameError = null;
-        var serverError = null;
-        var displayNameClass = 'form-group';
-
-        if (this.state.displayNameError) {
-            displayNameError = (
-                <p className='input__help error'>
-                    <FormattedMessage
-                        id='channel_modal.displayNameError'
-                        defaultMessage='Channel name must be 2 or more characters'
-                    />
-                    {this.state.displayNameError}
-                </p>
-            );
-            displayNameClass += ' has-error';
-        }
-
-        if (this.props.serverError) {
-            serverError = <div className='form-group has-error'><div className='col-sm-12'><p className='input__help error'>{this.props.serverError}</p></div></div>;
-        }
-
-        let createPublicChannelLink = (
-            <a
-                href='#'
-                onClick={this.props.onTypeSwitched}
-            >
-                <FormattedMessage
-                    id='channel_modal.publicChannel1'
-                    defaultMessage='Create a public channel'
-                />
-            </a>
-        );
-
-        let createPrivateChannelLink = (
-            <a
-                href='#'
-                onClick={this.props.onTypeSwitched}
-            >
-                <FormattedMessage
-                    id='channel_modal.privateGroup2'
-                    defaultMessage='Create a private channel'
-                />
-            </a>
-        );
-
-        const isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
-        const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
-
-        if (!ChannelUtils.showCreateOption(Constants.OPEN_CHANNEL, isAdmin, isSystemAdmin)) {
-            createPublicChannelLink = null;
-        }
-
-        if (!ChannelUtils.showCreateOption(Constants.PRIVATE_CHANNEL, isAdmin, isSystemAdmin)) {
-            createPrivateChannelLink = null;
-        }
-
-        var channelSwitchText = '';
-        switch (this.props.channelType) {
-        case 'P':
-            channelSwitchText = (
-                <div className='modal-intro'>
-                    <FormattedMessage
-                        id='channel_modal.privateGroup1'
-                        defaultMessage='Create a new private channel with restricted membership. '
-                    />
-                    {createPublicChannelLink}
-                </div>
-            );
-            break;
-        case 'O':
-            channelSwitchText = (
-                <div className='modal-intro'>
-                    <FormattedMessage
-                        id='channel_modal.publicChannel2'
-                        defaultMessage='Create a new public channel anyone can join. '
-                    />
-                    {createPrivateChannelLink}
-                </div>
-            );
-            break;
-        }
-
-        const prettyTeamURL = getShortenedURL();
-
-        return (
-            <span>
-                <Modal
-                    dialogClassName='new-channel__modal'
-                    show={this.props.show}
-                    bsSize='large'
-                    onHide={this.props.onModalDismissed}
-                    onExited={this.props.onModalExited}
-                >
-                    <Modal.Header closeButton={true}>
-                        <Modal.Title>
-                            <FormattedMessage
-                                id='channel_modal.modalTitle'
-                                defaultMessage='New Channel'
-                            />
-                        </Modal.Title>
-                    </Modal.Header>
-                    <form
-                        role='form'
-                        className='form-horizontal'
-                    >
-                        <Modal.Body>
-                            <div>
-                                {channelSwitchText}
-                            </div>
-                            <div className={displayNameClass}>
-                                <label className='col-sm-3 form__label control-label'>
-                                    <FormattedMessage
-                                        id='channel_modal.name'
-                                        defaultMessage='Name'
-                                    />
-                                </label>
-                                <div className='col-sm-9'>
-                                    <input
-                                        onChange={this.handleChange}
-                                        type='text'
-                                        ref='display_name'
-                                        className='form-control'
-                                        placeholder={Utils.localizeMessage('channel_modal.nameEx', 'E.g.: "Bugs", "Marketing", "客户支持"')}
-                                        maxLength={Constants.MAX_CHANNELNAME_LENGTH}
-                                        value={this.props.channelData.displayName}
-                                        autoFocus={true}
-                                        tabIndex='1'
-                                    />
-                                    {displayNameError}
-                                    <p className='input__help dark'>
-                                        {'URL: ' + prettyTeamURL + this.props.channelData.name + ' ('}
-                                        <a
-                                            href='#'
-                                            onClick={this.props.onChangeURLPressed}
-                                        >
-                                            <FormattedMessage
-                                                id='channel_modal.edit'
-                                                defaultMessage='Edit'
-                                            />
-                                        </a>
-                                        {')'}
-                                    </p>
-                                </div>
-                            </div>
-                            <div className='form-group'>
-                                <div className='col-sm-3'>
-                                    <label className='form__label control-label'>
-                                        <FormattedMessage
-                                            id='channel_modal.purpose'
-                                            defaultMessage='Purpose'
-                                        />
-                                    </label>
-                                    <label className='form__label light'>
-                                        <FormattedMessage
-                                            id='channel_modal.optional'
-                                            defaultMessage='(optional)'
-                                        />
-                                    </label>
-                                </div>
-                                <div className='col-sm-9'>
-                                    <textarea
-                                        className='form-control no-resize'
-                                        ref='channel_purpose'
-                                        rows='4'
-                                        placeholder={Utils.localizeMessage('channel_modal.purposeEx', 'E.g.: "A channel to file bugs and improvements"')}
-                                        maxLength='250'
-                                        value={this.props.channelData.purpose}
-                                        onChange={this.handleChange}
-                                        tabIndex='2'
-                                    />
-                                    <p className='input__help'>
-                                        <FormattedMessage
-                                            id='channel_modal.descriptionHelp'
-                                            defaultMessage='Describe how this channel should be used.'
-                                        />
-                                    </p>
-                                </div>
-                            </div>
-                            <div className='form-group less'>
-                                <div className='col-sm-3'>
-                                    <label className='form__label control-label'>
-                                        <FormattedMessage
-                                            id='channel_modal.header'
-                                            defaultMessage='Header'
-                                        />
-                                    </label>
-                                    <label className='form__label light'>
-                                        <FormattedMessage
-                                            id='channel_modal.optional'
-                                            defaultMessage='(optional)'
-                                        />
-                                    </label>
-                                </div>
-                                <div className='col-sm-9'>
-                                    <textarea
-                                        className='form-control no-resize'
-                                        ref='channel_header'
-                                        rows='4'
-                                        placeholder={Utils.localizeMessage('channel_modal.headerEx', 'E.g.: "[Link Title](http://example.com)"')}
-                                        maxLength='1024'
-                                        value={this.props.channelData.header}
-                                        onChange={this.handleChange}
-                                        tabIndex='2'
-                                    />
-                                    <p className='input__help'>
-                                        <FormattedMessage
-                                            id='channel_modal.headerHelp'
-                                            defaultMessage='Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com).'
-                                        />
-                                    </p>
-                                    {serverError}
-                                </div>
-                            </div>
-                        </Modal.Body>
-                        <Modal.Footer>
-                            <button
-                                type='button'
-                                className='btn btn-default'
-                                onClick={this.props.onModalDismissed}
-                            >
-                                <FormattedMessage
-                                    id='channel_modal.cancel'
-                                    defaultMessage='Cancel'
-                                />
-                            </button>
-                            <button
-                                onClick={this.handleSubmit}
-                                type='submit'
-                                className='btn btn-primary'
-                                tabIndex='3'
-                            >
-                                <FormattedMessage
-                                    id='channel_modal.createNew'
-                                    defaultMessage='Create New Channel'
-                                />
-                            </button>
-                        </Modal.Footer>
-                    </form>
-                </Modal>
-            </span>
-        );
-    }
-}
-
-NewChannelModal.defaultProps = {
-    show: false,
-    channelType: 'O',
-    serverError: null
-};
-NewChannelModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
-    channelType: React.PropTypes.string.isRequired,
-    channelData: React.PropTypes.object.isRequired,
-    serverError: React.PropTypes.node,
-    onSubmitChannel: React.PropTypes.func.isRequired,
-    onModalDismissed: React.PropTypes.func.isRequired,
-    onModalExited: React.PropTypes.func,
-    onTypeSwitched: React.PropTypes.func.isRequired,
-    onChangeURLPressed: React.PropTypes.func.isRequired,
-    onDataChanged: React.PropTypes.func.isRequired
-};
-
diff --git a/webapp/components/new_channel_modal/index.js b/webapp/components/new_channel_modal/index.js
new file mode 100644
index 000000000..770084fbb
--- /dev/null
+++ b/webapp/components/new_channel_modal/index.js
@@ -0,0 +1,21 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {getBool} from 'mattermost-redux/selectors/entities/preferences';
+import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
+import {isCurrentUserCurrentTeamAdmin} from 'mattermost-redux/selectors/entities/teams';
+import {Preferences} from 'mattermost-redux/constants';
+
+import NewChannelModal from './new_channel_modal.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps,
+        ctrlSend: getBool(state, Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
+        isTeamAdmin: isCurrentUserCurrentTeamAdmin(state),
+        isSystemAdmin: isCurrentUserSystemAdmin(state)
+    };
+}
+
+export default connect(mapStateToProps)(NewChannelModal);
diff --git a/webapp/components/new_channel_modal/new_channel_modal.jsx b/webapp/components/new_channel_modal/new_channel_modal.jsx
new file mode 100644
index 000000000..48c2ddd15
--- /dev/null
+++ b/webapp/components/new_channel_modal/new_channel_modal.jsx
@@ -0,0 +1,391 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import $ from 'jquery';
+import ReactDOM from 'react-dom';
+
+import {getShortenedURL} from 'utils/url.jsx';
+import * as UserAgent from 'utils/user_agent.jsx';
+import * as Utils from 'utils/utils.jsx';
+import * as ChannelUtils from 'utils/channel_utils.jsx';
+import Constants from 'utils/constants.jsx';
+
+import {FormattedMessage} from 'react-intl';
+
+import {Modal} from 'react-bootstrap';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class NewChannelModal extends React.PureComponent {
+    static propTypes = {
+
+        /**
+         * Set whether to show the modal or not
+         */
+        show: PropTypes.bool.isRequired,
+
+        /**
+         * The type of channel to create, 'O' or 'P'
+         */
+        channelType: PropTypes.string.isRequired,
+
+        /**
+         * The data needed to create the channel
+         */
+        channelData: PropTypes.object.isRequired,
+
+        /**
+         * Set to force form submission on CTRL/CMD + ENTER instead of ENTER
+         */
+        ctrlSend: PropTypes.bool,
+
+        /**
+         * Set to show options available to team admins
+         */
+        isTeamAdmin: PropTypes.bool,
+
+        /**
+         * Set to show options available to system admins
+         */
+        isSystemAdmin: PropTypes.bool,
+
+        /**
+         * Server error from failed channel creation
+         */
+        serverError: PropTypes.node,
+
+        /**
+         * Function used to submit the channel
+         */
+        onSubmitChannel: PropTypes.func.isRequired,
+
+        /**
+         * Function to call when modal is dimissed
+         */
+        onModalDismissed: PropTypes.func.isRequired,
+
+        /**
+         * Function to call when modal has exited
+         */
+        onModalExited: PropTypes.func,
+
+        /**
+         * Function to call to switch channel type
+         */
+        onTypeSwitched: PropTypes.func.isRequired,
+
+        /**
+         * Function to call when edit URL button is pressed
+         */
+        onChangeURLPressed: PropTypes.func.isRequired,
+
+        /**
+         * Function to call when channel data is modified
+         */
+        onDataChanged: PropTypes.func.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleChange = this.handleChange.bind(this);
+        this.onEnterKeyDown = this.onEnterKeyDown.bind(this);
+
+        this.state = {
+            displayNameError: ''
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.show === true && this.props.show === false) {
+            this.setState({
+                displayNameError: ''
+            });
+
+            document.addEventListener('keydown', this.onEnterKeyDown);
+        } else if (nextProps.show === false && this.props.show === true) {
+            document.removeEventListener('keydown', this.onEnterKeyDown);
+        }
+    }
+
+    componentDidMount() {
+        // ???
+        if (UserAgent.isInternetExplorer()) {
+            $('body').addClass('browser--ie');
+        }
+    }
+
+    onEnterKeyDown(e) {
+        if (this.props.ctrlSend && e.keyCode === Constants.KeyCodes.ENTER && e.ctrlKey) {
+            this.handleSubmit(e);
+        } else if (!this.props.ctrlSend && e.keyCode === Constants.KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
+            this.handleSubmit(e);
+        }
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        const displayName = ReactDOM.findDOMNode(this.refs.display_name).value.trim();
+        if (displayName.length < Constants.MIN_CHANNELNAME_LENGTH) {
+            this.setState({displayNameError: true});
+            return;
+        }
+
+        this.props.onSubmitChannel();
+    }
+
+    handleChange() {
+        const newData = {
+            displayName: this.refs.display_name.value,
+            header: this.refs.channel_header.value,
+            purpose: this.refs.channel_purpose.value
+        };
+        this.props.onDataChanged(newData);
+    }
+
+    render() {
+        var displayNameError = null;
+        var serverError = null;
+        var displayNameClass = 'form-group';
+
+        if (this.state.displayNameError) {
+            displayNameError = (
+                <p className='input__help error'>
+                    <FormattedMessage
+                        id='channel_modal.displayNameError'
+                        defaultMessage='Channel name must be 2 or more characters'
+                    />
+                    {this.state.displayNameError}
+                </p>
+            );
+            displayNameClass += ' has-error';
+        }
+
+        if (this.props.serverError) {
+            serverError = <div className='form-group has-error'><div className='col-sm-12'><p className='input__help error'>{this.props.serverError}</p></div></div>;
+        }
+
+        let createPublicChannelLink = (
+            <a
+                href='#'
+                onClick={this.props.onTypeSwitched}
+            >
+                <FormattedMessage
+                    id='channel_modal.publicChannel1'
+                    defaultMessage='Create a public channel'
+                />
+            </a>
+        );
+
+        let createPrivateChannelLink = (
+            <a
+                href='#'
+                onClick={this.props.onTypeSwitched}
+            >
+                <FormattedMessage
+                    id='channel_modal.privateGroup2'
+                    defaultMessage='Create a private channel'
+                />
+            </a>
+        );
+
+        const isAdmin = this.props.isTeamAdmin || this.props.isSystemAdmin;
+
+        if (!ChannelUtils.showCreateOption(Constants.OPEN_CHANNEL, isAdmin, this.props.isSystemAdmin)) {
+            createPublicChannelLink = null;
+        }
+
+        if (!ChannelUtils.showCreateOption(Constants.PRIVATE_CHANNEL, isAdmin, this.props.isSystemAdmin)) {
+            createPrivateChannelLink = null;
+        }
+
+        var channelSwitchText = '';
+        switch (this.props.channelType) {
+        case 'P':
+            channelSwitchText = (
+                <div className='modal-intro'>
+                    <FormattedMessage
+                        id='channel_modal.privateGroup1'
+                        defaultMessage='Create a new private channel with restricted membership. '
+                    />
+                    {createPublicChannelLink}
+                </div>
+            );
+            break;
+        case 'O':
+            channelSwitchText = (
+                <div className='modal-intro'>
+                    <FormattedMessage
+                        id='channel_modal.publicChannel2'
+                        defaultMessage='Create a new public channel anyone can join. '
+                    />
+                    {createPrivateChannelLink}
+                </div>
+            );
+            break;
+        }
+
+        const prettyTeamURL = getShortenedURL();
+
+        return (
+            <span>
+                <Modal
+                    dialogClassName='new-channel__modal'
+                    show={this.props.show}
+                    bsSize='large'
+                    onHide={this.props.onModalDismissed}
+                    onExited={this.props.onModalExited}
+                >
+                    <Modal.Header closeButton={true}>
+                        <Modal.Title>
+                            <FormattedMessage
+                                id='channel_modal.modalTitle'
+                                defaultMessage='New Channel'
+                            />
+                        </Modal.Title>
+                    </Modal.Header>
+                    <form
+                        role='form'
+                        className='form-horizontal'
+                    >
+                        <Modal.Body>
+                            <div>
+                                {channelSwitchText}
+                            </div>
+                            <div className={displayNameClass}>
+                                <label className='col-sm-3 form__label control-label'>
+                                    <FormattedMessage
+                                        id='channel_modal.name'
+                                        defaultMessage='Name'
+                                    />
+                                </label>
+                                <div className='col-sm-9'>
+                                    <input
+                                        onChange={this.handleChange}
+                                        type='text'
+                                        ref='display_name'
+                                        className='form-control'
+                                        placeholder={Utils.localizeMessage('channel_modal.nameEx', 'E.g.: "Bugs", "Marketing", "客户支持"')}
+                                        maxLength={Constants.MAX_CHANNELNAME_LENGTH}
+                                        value={this.props.channelData.displayName}
+                                        autoFocus={true}
+                                        tabIndex='1'
+                                    />
+                                    {displayNameError}
+                                    <p className='input__help dark'>
+                                        {'URL: ' + prettyTeamURL + this.props.channelData.name + ' ('}
+                                        <a
+                                            href='#'
+                                            onClick={this.props.onChangeURLPressed}
+                                        >
+                                            <FormattedMessage
+                                                id='channel_modal.edit'
+                                                defaultMessage='Edit'
+                                            />
+                                        </a>
+                                        {')'}
+                                    </p>
+                                </div>
+                            </div>
+                            <div className='form-group'>
+                                <div className='col-sm-3'>
+                                    <label className='form__label control-label'>
+                                        <FormattedMessage
+                                            id='channel_modal.purpose'
+                                            defaultMessage='Purpose'
+                                        />
+                                    </label>
+                                    <label className='form__label light'>
+                                        <FormattedMessage
+                                            id='channel_modal.optional'
+                                            defaultMessage='(optional)'
+                                        />
+                                    </label>
+                                </div>
+                                <div className='col-sm-9'>
+                                    <textarea
+                                        className='form-control no-resize'
+                                        ref='channel_purpose'
+                                        rows='4'
+                                        placeholder={Utils.localizeMessage('channel_modal.purposeEx', 'E.g.: "A channel to file bugs and improvements"')}
+                                        maxLength='250'
+                                        value={this.props.channelData.purpose}
+                                        onChange={this.handleChange}
+                                        tabIndex='2'
+                                    />
+                                    <p className='input__help'>
+                                        <FormattedMessage
+                                            id='channel_modal.descriptionHelp'
+                                            defaultMessage='Describe how this channel should be used.'
+                                        />
+                                    </p>
+                                </div>
+                            </div>
+                            <div className='form-group less'>
+                                <div className='col-sm-3'>
+                                    <label className='form__label control-label'>
+                                        <FormattedMessage
+                                            id='channel_modal.header'
+                                            defaultMessage='Header'
+                                        />
+                                    </label>
+                                    <label className='form__label light'>
+                                        <FormattedMessage
+                                            id='channel_modal.optional'
+                                            defaultMessage='(optional)'
+                                        />
+                                    </label>
+                                </div>
+                                <div className='col-sm-9'>
+                                    <textarea
+                                        className='form-control no-resize'
+                                        ref='channel_header'
+                                        rows='4'
+                                        placeholder={Utils.localizeMessage('channel_modal.headerEx', 'E.g.: "[Link Title](http://example.com)"')}
+                                        maxLength='1024'
+                                        value={this.props.channelData.header}
+                                        onChange={this.handleChange}
+                                        tabIndex='2'
+                                    />
+                                    <p className='input__help'>
+                                        <FormattedMessage
+                                            id='channel_modal.headerHelp'
+                                            defaultMessage='Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com).'
+                                        />
+                                    </p>
+                                    {serverError}
+                                </div>
+                            </div>
+                        </Modal.Body>
+                        <Modal.Footer>
+                            <button
+                                type='button'
+                                className='btn btn-default'
+                                onClick={this.props.onModalDismissed}
+                            >
+                                <FormattedMessage
+                                    id='channel_modal.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </button>
+                            <button
+                                onClick={this.handleSubmit}
+                                type='submit'
+                                className='btn btn-primary'
+                                tabIndex='3'
+                            >
+                                <FormattedMessage
+                                    id='channel_modal.createNew'
+                                    defaultMessage='Create New Channel'
+                                />
+                            </button>
+                        </Modal.Footer>
+                    </form>
+                </Modal>
+            </span>
+        );
+    }
+}
diff --git a/webapp/package.json b/webapp/package.json
index 44f1d9386..84f012c55 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -26,6 +26,7 @@
     "object-assign": "4.1.1",
     "pdfjs-dist": "1.7.363",
     "perfect-scrollbar": "0.6.16",
+    "prop-types": "15.5.9",
     "react": "15.4.2",
     "react-addons-pure-render-mixin": "15.4.2",
     "react-bootstrap": "0.30.8",
diff --git a/webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap b/webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap
new file mode 100644
index 000000000..67194d321
--- /dev/null
+++ b/webapp/tests/components/__snapshots__/new_channel_modal.test.jsx.snap
@@ -0,0 +1,733 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/NewChannelModal should match snapshot, modal not showing 1`] = `
+<span>
+  <Modal
+    animation={true}
+    autoFocus={true}
+    backdrop={true}
+    bsClass="modal"
+    bsSize="large"
+    dialogClassName="new-channel__modal"
+    dialogComponentClass={[Function]}
+    enforceFocus={true}
+    keyboard={true}
+    manager={
+      ModalManager {
+        "containers": Array [],
+        "data": Array [],
+        "handleContainerOverflow": true,
+        "hideSiblingNodes": true,
+        "modals": Array [],
+      }
+    }
+    onHide={[Function]}
+    renderBackdrop={[Function]}
+    restoreFocus={true}
+    show={true}
+  >
+    <ModalHeader
+      aria-label="Close"
+      bsClass="modal-header"
+      closeButton={true}
+    >
+      <ModalTitle
+        bsClass="modal-title"
+        componentClass="h4"
+      >
+        <FormattedMessage
+          defaultMessage="New Channel"
+          id="channel_modal.modalTitle"
+          values={Object {}}
+        />
+      </ModalTitle>
+    </ModalHeader>
+    <form
+      className="form-horizontal"
+      role="form"
+    >
+      <ModalBody
+        bsClass="modal-body"
+        componentClass="div"
+      >
+        <div>
+          <div
+            className="modal-intro"
+          >
+            <FormattedMessage
+              defaultMessage="Create a new public channel anyone can join. "
+              id="channel_modal.publicChannel2"
+              values={Object {}}
+            />
+            <a
+              href="#"
+              onClick={[Function]}
+            >
+              <FormattedMessage
+                defaultMessage="Create a private channel"
+                id="channel_modal.privateGroup2"
+                values={Object {}}
+              />
+            </a>
+          </div>
+        </div>
+        <div
+          className="form-group"
+        >
+          <label
+            className="col-sm-3 form__label control-label"
+          >
+            <FormattedMessage
+              defaultMessage="Name"
+              id="channel_modal.name"
+              values={Object {}}
+            />
+          </label>
+          <div
+            className="col-sm-9"
+          >
+            <input
+              autoFocus={true}
+              className="form-control"
+              maxLength={22}
+              onChange={[Function]}
+              placeholder="E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\""
+              tabIndex="1"
+              type="text"
+              value="testchannel"
+            />
+            <p
+              className="input__help dark"
+            >
+              URL: /testchannel (
+              <a
+                href="#"
+                onClick={[Function]}
+              >
+                <FormattedMessage
+                  defaultMessage="Edit"
+                  id="channel_modal.edit"
+                  values={Object {}}
+                />
+              </a>
+              )
+            </p>
+          </div>
+        </div>
+        <div
+          className="form-group"
+        >
+          <div
+            className="col-sm-3"
+          >
+            <label
+              className="form__label control-label"
+            >
+              <FormattedMessage
+                defaultMessage="Purpose"
+                id="channel_modal.purpose"
+                values={Object {}}
+              />
+            </label>
+            <label
+              className="form__label light"
+            >
+              <FormattedMessage
+                defaultMessage="(optional)"
+                id="channel_modal.optional"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="col-sm-9"
+          >
+            <textarea
+              className="form-control no-resize"
+              maxLength="250"
+              onChange={[Function]}
+              placeholder="E.g.: \\"A channel to file bugs and improvements\\""
+              rows="4"
+              tabIndex="2"
+              value=""
+            />
+            <p
+              className="input__help"
+            >
+              <FormattedMessage
+                defaultMessage="Describe how this channel should be used."
+                id="channel_modal.descriptionHelp"
+                values={Object {}}
+              />
+            </p>
+          </div>
+        </div>
+        <div
+          className="form-group less"
+        >
+          <div
+            className="col-sm-3"
+          >
+            <label
+              className="form__label control-label"
+            >
+              <FormattedMessage
+                defaultMessage="Header"
+                id="channel_modal.header"
+                values={Object {}}
+              />
+            </label>
+            <label
+              className="form__label light"
+            >
+              <FormattedMessage
+                defaultMessage="(optional)"
+                id="channel_modal.optional"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="col-sm-9"
+          >
+            <textarea
+              className="form-control no-resize"
+              maxLength="1024"
+              onChange={[Function]}
+              placeholder="E.g.: \\"[Link Title](http://example.com)\\""
+              rows="4"
+              tabIndex="2"
+              value=""
+            />
+            <p
+              className="input__help"
+            >
+              <FormattedMessage
+                defaultMessage="Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com)."
+                id="channel_modal.headerHelp"
+                values={Object {}}
+              />
+            </p>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter
+        bsClass="modal-footer"
+        componentClass="div"
+      >
+        <button
+          className="btn btn-default"
+          onClick={[Function]}
+          type="button"
+        >
+          <FormattedMessage
+            defaultMessage="Cancel"
+            id="channel_modal.cancel"
+            values={Object {}}
+          />
+        </button>
+        <button
+          className="btn btn-primary"
+          onClick={[Function]}
+          tabIndex="3"
+          type="submit"
+        >
+          <FormattedMessage
+            defaultMessage="Create New Channel"
+            id="channel_modal.createNew"
+            values={Object {}}
+          />
+        </button>
+      </ModalFooter>
+    </form>
+  </Modal>
+</span>
+`;
+
+exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
+<span>
+  <Modal
+    animation={true}
+    autoFocus={true}
+    backdrop={true}
+    bsClass="modal"
+    bsSize="large"
+    dialogClassName="new-channel__modal"
+    dialogComponentClass={[Function]}
+    enforceFocus={true}
+    keyboard={true}
+    manager={
+      ModalManager {
+        "containers": Array [],
+        "data": Array [],
+        "handleContainerOverflow": true,
+        "hideSiblingNodes": true,
+        "modals": Array [],
+      }
+    }
+    onHide={[Function]}
+    renderBackdrop={[Function]}
+    restoreFocus={true}
+    show={true}
+  >
+    <ModalHeader
+      aria-label="Close"
+      bsClass="modal-header"
+      closeButton={true}
+    >
+      <ModalTitle
+        bsClass="modal-title"
+        componentClass="h4"
+      >
+        <FormattedMessage
+          defaultMessage="New Channel"
+          id="channel_modal.modalTitle"
+          values={Object {}}
+        />
+      </ModalTitle>
+    </ModalHeader>
+    <form
+      className="form-horizontal"
+      role="form"
+    >
+      <ModalBody
+        bsClass="modal-body"
+        componentClass="div"
+      >
+        <div>
+          <div
+            className="modal-intro"
+          >
+            <FormattedMessage
+              defaultMessage="Create a new public channel anyone can join. "
+              id="channel_modal.publicChannel2"
+              values={Object {}}
+            />
+            <a
+              href="#"
+              onClick={[Function]}
+            >
+              <FormattedMessage
+                defaultMessage="Create a private channel"
+                id="channel_modal.privateGroup2"
+                values={Object {}}
+              />
+            </a>
+          </div>
+        </div>
+        <div
+          className="form-group"
+        >
+          <label
+            className="col-sm-3 form__label control-label"
+          >
+            <FormattedMessage
+              defaultMessage="Name"
+              id="channel_modal.name"
+              values={Object {}}
+            />
+          </label>
+          <div
+            className="col-sm-9"
+          >
+            <input
+              autoFocus={true}
+              className="form-control"
+              maxLength={22}
+              onChange={[Function]}
+              placeholder="E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\""
+              tabIndex="1"
+              type="text"
+              value="testchannel"
+            />
+            <p
+              className="input__help dark"
+            >
+              URL: /testchannel (
+              <a
+                href="#"
+                onClick={[Function]}
+              >
+                <FormattedMessage
+                  defaultMessage="Edit"
+                  id="channel_modal.edit"
+                  values={Object {}}
+                />
+              </a>
+              )
+            </p>
+          </div>
+        </div>
+        <div
+          className="form-group"
+        >
+          <div
+            className="col-sm-3"
+          >
+            <label
+              className="form__label control-label"
+            >
+              <FormattedMessage
+                defaultMessage="Purpose"
+                id="channel_modal.purpose"
+                values={Object {}}
+              />
+            </label>
+            <label
+              className="form__label light"
+            >
+              <FormattedMessage
+                defaultMessage="(optional)"
+                id="channel_modal.optional"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="col-sm-9"
+          >
+            <textarea
+              className="form-control no-resize"
+              maxLength="250"
+              onChange={[Function]}
+              placeholder="E.g.: \\"A channel to file bugs and improvements\\""
+              rows="4"
+              tabIndex="2"
+              value=""
+            />
+            <p
+              className="input__help"
+            >
+              <FormattedMessage
+                defaultMessage="Describe how this channel should be used."
+                id="channel_modal.descriptionHelp"
+                values={Object {}}
+              />
+            </p>
+          </div>
+        </div>
+        <div
+          className="form-group less"
+        >
+          <div
+            className="col-sm-3"
+          >
+            <label
+              className="form__label control-label"
+            >
+              <FormattedMessage
+                defaultMessage="Header"
+                id="channel_modal.header"
+                values={Object {}}
+              />
+            </label>
+            <label
+              className="form__label light"
+            >
+              <FormattedMessage
+                defaultMessage="(optional)"
+                id="channel_modal.optional"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="col-sm-9"
+          >
+            <textarea
+              className="form-control no-resize"
+              maxLength="1024"
+              onChange={[Function]}
+              placeholder="E.g.: \\"[Link Title](http://example.com)\\""
+              rows="4"
+              tabIndex="2"
+              value=""
+            />
+            <p
+              className="input__help"
+            >
+              <FormattedMessage
+                defaultMessage="Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com)."
+                id="channel_modal.headerHelp"
+                values={Object {}}
+              />
+            </p>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter
+        bsClass="modal-footer"
+        componentClass="div"
+      >
+        <button
+          className="btn btn-default"
+          onClick={[Function]}
+          type="button"
+        >
+          <FormattedMessage
+            defaultMessage="Cancel"
+            id="channel_modal.cancel"
+            values={Object {}}
+          />
+        </button>
+        <button
+          className="btn btn-primary"
+          onClick={[Function]}
+          tabIndex="3"
+          type="submit"
+        >
+          <FormattedMessage
+            defaultMessage="Create New Channel"
+            id="channel_modal.createNew"
+            values={Object {}}
+          />
+        </button>
+      </ModalFooter>
+    </form>
+  </Modal>
+</span>
+`;
+
+exports[`components/NewChannelModal should match snapshot, private channel filled in header and purpose 1`] = `
+<span>
+  <Modal
+    animation={true}
+    autoFocus={true}
+    backdrop={true}
+    bsClass="modal"
+    bsSize="large"
+    dialogClassName="new-channel__modal"
+    dialogComponentClass={[Function]}
+    enforceFocus={true}
+    keyboard={true}
+    manager={
+      ModalManager {
+        "containers": Array [],
+        "data": Array [],
+        "handleContainerOverflow": true,
+        "hideSiblingNodes": true,
+        "modals": Array [],
+      }
+    }
+    onHide={[Function]}
+    renderBackdrop={[Function]}
+    restoreFocus={true}
+    show={true}
+  >
+    <ModalHeader
+      aria-label="Close"
+      bsClass="modal-header"
+      closeButton={true}
+    >
+      <ModalTitle
+        bsClass="modal-title"
+        componentClass="h4"
+      >
+        <FormattedMessage
+          defaultMessage="New Channel"
+          id="channel_modal.modalTitle"
+          values={Object {}}
+        />
+      </ModalTitle>
+    </ModalHeader>
+    <form
+      className="form-horizontal"
+      role="form"
+    >
+      <ModalBody
+        bsClass="modal-body"
+        componentClass="div"
+      >
+        <div>
+          <div
+            className="modal-intro"
+          >
+            <FormattedMessage
+              defaultMessage="Create a new private channel with restricted membership. "
+              id="channel_modal.privateGroup1"
+              values={Object {}}
+            />
+            <a
+              href="#"
+              onClick={[Function]}
+            >
+              <FormattedMessage
+                defaultMessage="Create a public channel"
+                id="channel_modal.publicChannel1"
+                values={Object {}}
+              />
+            </a>
+          </div>
+        </div>
+        <div
+          className="form-group"
+        >
+          <label
+            className="col-sm-3 form__label control-label"
+          >
+            <FormattedMessage
+              defaultMessage="Name"
+              id="channel_modal.name"
+              values={Object {}}
+            />
+          </label>
+          <div
+            className="col-sm-9"
+          >
+            <input
+              autoFocus={true}
+              className="form-control"
+              maxLength={22}
+              onChange={[Function]}
+              placeholder="E.g.: \\"Bugs\\", \\"Marketing\\", \\"客户支持\\""
+              tabIndex="1"
+              type="text"
+              value="testchannel"
+            />
+            <p
+              className="input__help dark"
+            >
+              URL: /testchannel (
+              <a
+                href="#"
+                onClick={[Function]}
+              >
+                <FormattedMessage
+                  defaultMessage="Edit"
+                  id="channel_modal.edit"
+                  values={Object {}}
+                />
+              </a>
+              )
+            </p>
+          </div>
+        </div>
+        <div
+          className="form-group"
+        >
+          <div
+            className="col-sm-3"
+          >
+            <label
+              className="form__label control-label"
+            >
+              <FormattedMessage
+                defaultMessage="Purpose"
+                id="channel_modal.purpose"
+                values={Object {}}
+              />
+            </label>
+            <label
+              className="form__label light"
+            >
+              <FormattedMessage
+                defaultMessage="(optional)"
+                id="channel_modal.optional"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="col-sm-9"
+          >
+            <textarea
+              className="form-control no-resize"
+              maxLength="250"
+              onChange={[Function]}
+              placeholder="E.g.: \\"A channel to file bugs and improvements\\""
+              rows="4"
+              tabIndex="2"
+              value="some purpose"
+            />
+            <p
+              className="input__help"
+            >
+              <FormattedMessage
+                defaultMessage="Describe how this channel should be used."
+                id="channel_modal.descriptionHelp"
+                values={Object {}}
+              />
+            </p>
+          </div>
+        </div>
+        <div
+          className="form-group less"
+        >
+          <div
+            className="col-sm-3"
+          >
+            <label
+              className="form__label control-label"
+            >
+              <FormattedMessage
+                defaultMessage="Header"
+                id="channel_modal.header"
+                values={Object {}}
+              />
+            </label>
+            <label
+              className="form__label light"
+            >
+              <FormattedMessage
+                defaultMessage="(optional)"
+                id="channel_modal.optional"
+                values={Object {}}
+              />
+            </label>
+          </div>
+          <div
+            className="col-sm-9"
+          >
+            <textarea
+              className="form-control no-resize"
+              maxLength="1024"
+              onChange={[Function]}
+              placeholder="E.g.: \\"[Link Title](http://example.com)\\""
+              rows="4"
+              tabIndex="2"
+              value="some header"
+            />
+            <p
+              className="input__help"
+            >
+              <FormattedMessage
+                defaultMessage="Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com)."
+                id="channel_modal.headerHelp"
+                values={Object {}}
+              />
+            </p>
+          </div>
+        </div>
+      </ModalBody>
+      <ModalFooter
+        bsClass="modal-footer"
+        componentClass="div"
+      >
+        <button
+          className="btn btn-default"
+          onClick={[Function]}
+          type="button"
+        >
+          <FormattedMessage
+            defaultMessage="Cancel"
+            id="channel_modal.cancel"
+            values={Object {}}
+          />
+        </button>
+        <button
+          className="btn btn-primary"
+          onClick={[Function]}
+          tabIndex="3"
+          type="submit"
+        >
+          <FormattedMessage
+            defaultMessage="Create New Channel"
+            id="channel_modal.createNew"
+            values={Object {}}
+          />
+        </button>
+      </ModalFooter>
+    </form>
+  </Modal>
+</span>
+`;
diff --git a/webapp/tests/components/new_channel_modal.test.jsx b/webapp/tests/components/new_channel_modal.test.jsx
new file mode 100644
index 000000000..358a839a3
--- /dev/null
+++ b/webapp/tests/components/new_channel_modal.test.jsx
@@ -0,0 +1,79 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import Constants from 'utils/constants.jsx';
+
+import NewChannelModal from 'components/new_channel_modal/new_channel_modal.jsx';
+
+describe('components/NewChannelModal', () => {
+    afterEach(() => {
+        global.window.mm_config = null;
+        global.window.mm_license = null;
+    });
+
+    test('should match snapshot, modal not showing', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        global.window.mm_license = {};
+        global.window.mm_license.IsLicensed = 'false';
+
+        const wrapper = shallow(
+            <NewChannelModal
+                show={true}
+                channelType={Constants.OPEN_CHANNEL}
+                channelData={{name: 'testchannel', displayName: 'testchannel', header: '', purpose: ''}}
+                onSubmitChannel={emptyFunction}
+                onModalDismissed={emptyFunction}
+                onTypeSwitched={emptyFunction}
+                onChangeURLPressed={emptyFunction}
+                onDataChanged={emptyFunction}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, modal showing', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        global.window.mm_license = {};
+        global.window.mm_license.IsLicensed = 'false';
+
+        const wrapper = shallow(
+            <NewChannelModal
+                show={true}
+                channelType={Constants.OPEN_CHANNEL}
+                channelData={{name: 'testchannel', displayName: 'testchannel', header: '', purpose: ''}}
+                onSubmitChannel={emptyFunction}
+                onModalDismissed={emptyFunction}
+                onTypeSwitched={emptyFunction}
+                onChangeURLPressed={emptyFunction}
+                onDataChanged={emptyFunction}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, private channel filled in header and purpose', () => {
+        function emptyFunction() {} //eslint-disable-line no-empty-function
+
+        global.window.mm_license = {};
+        global.window.mm_license.IsLicensed = 'false';
+
+        const wrapper = shallow(
+            <NewChannelModal
+                show={true}
+                channelType={Constants.PRIVATE_CHANNEL}
+                channelData={{name: 'testchannel', displayName: 'testchannel', header: 'some header', purpose: 'some purpose'}}
+                onSubmitChannel={emptyFunction}
+                onModalDismissed={emptyFunction}
+                onTypeSwitched={emptyFunction}
+                onChangeURLPressed={emptyFunction}
+                onDataChanged={emptyFunction}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});
-- 
cgit v1.2.3-1-g7c22