PLT-3266 Added channel header to create channel modal (#3559)

* Added channel header to create channel modal

removed React FindDOMNode

* made css changes

3 files changed, 48 insertions, 4 deletions

diff --git a/webapp/components/new_channel_flow.jsx b/webapp/components/new_channel_flow.jsx
index db06cf0be..f6e91afc4 100644
--- a/webapp/components/new_channel_flow.jsx
+++ b/webapp/components/new_channel_flow.jsx
@@ -65,6 +65,7 @@ class NewChannelFlow extends React.Component {
             channelDisplayName: '',
             channelName: '',
             channelPurpose: '',
+            channelHeader: '',
             nameModified: false
         };
     }
@@ -78,6 +79,7 @@ class NewChannelFlow extends React.Component {
                 channelDisplayName: '',
                 channelName: '',
                 channelPurpose: '',
+                channelHeader: '',
                 nameModified: false
             });
         }
@@ -99,6 +101,7 @@ class NewChannelFlow extends React.Component {
             name: this.state.channelName,
             display_name: this.state.channelDisplayName,
             purpose: this.state.channelPurpose,
+            header: this.state.channelHeader,
             type: this.state.channelType
         };
         Client.createChannel(
@@ -153,7 +156,8 @@ class NewChannelFlow extends React.Component {
     channelDataChanged(data) {
         this.setState({
             channelDisplayName: data.displayName,
-            channelPurpose: data.purpose
+            channelPurpose: data.purpose,
+            channelHeader: data.header
         });
         if (!this.state.nameModified) {
             this.setState({channelName: Utils.cleanUpUrlable(data.displayName.trim())});
diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx
index 23eee625d..1198335ca 100644
--- a/webapp/components/new_channel_modal.jsx
+++ b/webapp/components/new_channel_modal.jsx
@@ -89,8 +89,9 @@ class NewChannelModal extends React.Component {
 
     handleChange() {
         const newData = {
-            displayName: ReactDOM.findDOMNode(this.refs.display_name).value,
-            purpose: ReactDOM.findDOMNode(this.refs.channel_purpose).value
+            displayName: this.refs.display_name.value,
+            header: this.refs.channel_header.value,
+            purpose: this.refs.channel_purpose.value
         };
         this.props.onDataChanged(newData);
     }
@@ -258,7 +259,7 @@ class NewChannelModal extends React.Component {
                                     </p>
                                 </div>
                             </div>
-                            <div className='form-group less'>
+                            <div className='form-group'>
                                 <div className='col-sm-3'>
                                     <label className='form__label control-label'>
                                         <FormattedMessage
@@ -293,6 +294,43 @@ class NewChannelModal extends React.Component {
                                             }}
                                         />
                                     </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={this.props.intl.formatMessage({id: 'channel_modal.header'})}
+                                        maxLength='128'
+                                        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 {term} beside the {term} name. For example, include frequently used links by typing [Link Title](http://example.com).'
+                                            values={{
+                                                term: (channelTerm)
+                                            }}
+                                        />
+                                    </p>
                                     {serverError}
                                 </div>
                             </div>
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index f000dbf55..ab3fdca20 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -870,6 +870,8 @@
   "channel_modal.displayNameError": "This field is required",
   "channel_modal.edit": "Edit",
   "channel_modal.group": "Group",
+  "channel_modal.header": "Header",
+  "channel_modal.headerHelp": "Set text that will appear in the header of the {term} beside the {term} name. For example, include frequently used links by typing [Link Title](http://example.com).",
   "channel_modal.modalTitle": "New ",
   "channel_modal.name": "Name",
   "channel_modal.nameEx": "E.g.: \"Bugs\", \"Marketing\", \"客户支持\"",