Renamed Channel.Description to Channel.Header on the client

10 files changed, 63 insertions, 62 deletions

diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index c8af2553d..f0a31ce90 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -90,8 +90,9 @@ export default class AccessHistoryModal extends React.Component {
             case '/channels/update':
                 currentAuditDesc = 'Updated the ' + channelName + ' channel/group name';
                 break;
-            case '/channels/update_desc':
-                currentAuditDesc = 'Updated the ' + channelName + ' channel/group description';
+            case '/channels/update_desc': // support the old path
+            case '/channels/update_header':
+                currentAuditDesc = 'Updated the ' + channelName + ' channel/group header';
                 break;
             default:
                 let userIdField = [];
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index d66777cc6..39f283746 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -110,11 +110,11 @@ export default class ChannelHeader extends React.Component {
                 bSize='large'
                 placement='bottom'
                 className='description'
-                onMouseOver={() => this.refs.descriptionOverlay.show()}
-                onMouseOut={() => this.refs.descriptionOverlay.hide()}
+                onMouseOver={() => this.refs.headerOverlay.show()}
+                onMouseOut={() => this.refs.headerOverlay.hide()}
             >
                 <MessageWrapper
-                    message={channel.description}
+                    message={channel.header}
                 />
             </Popover>
         );
@@ -144,7 +144,7 @@ export default class ChannelHeader extends React.Component {
         if (isDirect) {
             dropdownContents.push(
                 <li
-                    key='edit_description_direct'
+                    key='edit_header_direct'
                     role='presentation'
                 >
                     <a
@@ -152,11 +152,11 @@ export default class ChannelHeader extends React.Component {
                         href='#'
                         data-toggle='modal'
                         data-target='#edit_channel'
-                        data-desc={channel.description}
+                        data-header={channel.header}
                         data-title={channel.display_name}
                         data-channelid={channel.id}
                     >
-                        Set Channel Description...
+                        Set Channel Header...
                     </a>
                 </li>
             );
@@ -216,7 +216,7 @@ export default class ChannelHeader extends React.Component {
 
             dropdownContents.push(
                 <li
-                    key='set_channel_description'
+                    key='set_channel_header'
                     role='presentation'
                 >
                     <a
@@ -224,11 +224,11 @@ export default class ChannelHeader extends React.Component {
                         href='#'
                         data-toggle='modal'
                         data-target='#edit_channel'
-                        data-desc={channel.description}
+                        data-header={channel.header}
                         data-title={channel.display_name}
                         data-channelid={channel.id}
                     >
-                        Set {channelTerm} Description...
+                        Set {channelTerm} Header...
                     </a>
                 </li>
             );
@@ -336,12 +336,12 @@ export default class ChannelHeader extends React.Component {
                                     trigger={['hover', 'focus']}
                                     placement='bottom'
                                     overlay={popoverContent}
-                                    ref='descriptionOverlay'
+                                    ref='headerOverlay'
                                 >
                                 <div
                                     onClick={TextFormatting.handleClick}
                                     className='description'
-                                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.description, {singleline: true, mentionHighlight: false})}}
+                                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false})}}
                                 />
                                 </OverlayTrigger>
                             </div>
diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx
index d63a1db30..6f3826f75 100644
--- a/web/react/components/edit_channel_modal.jsx
+++ b/web/react/components/edit_channel_modal.jsx
@@ -14,7 +14,7 @@ export default class EditChannelModal extends React.Component {
         this.onShow = this.onShow.bind(this);
 
         this.state = {
-            description: '',
+            header: '',
             title: '',
             channelId: '',
             serverError: ''
@@ -28,32 +28,32 @@ export default class EditChannelModal extends React.Component {
             return;
         }
 
-        data.channel_description = this.state.description.trim();
+        data.channel_header = this.state.header.trim();
 
-        Client.updateChannelDesc(data,
-            function handleUpdateSuccess() {
+        Client.updateChannelHeader(data,
+            () => {
                 this.setState({serverError: ''});
                 AsyncClient.getChannel(this.state.channelId);
                 $(ReactDOM.findDOMNode(this.refs.modal)).modal('hide');
-            }.bind(this),
-            function handleUpdateError(err) {
-                if (err.message === 'Invalid channel_description parameter') {
-                    this.setState({serverError: 'This description is too long, please enter a shorter one'});
+            },
+            (err) => {
+                if (err.message === 'Invalid channel_header parameter') {
+                    this.setState({serverError: 'This channel header is too long, please enter a shorter one'});
                 } else {
                     this.setState({serverError: err.message});
                 }
-            }.bind(this)
+            }
         );
     }
     handleUserInput(e) {
-        this.setState({description: e.target.value});
+        this.setState({header: e.target.value});
     }
     handleClose() {
-        this.setState({description: '', serverError: ''});
+        this.setState({header: '', serverError: ''});
     }
     onShow(e) {
         const button = e.relatedTarget;
-        this.setState({description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), serverError: ''});
+        this.setState({header: $(button).attr('data-header'), title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), serverError: ''});
     }
     componentDidMount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
@@ -73,7 +73,7 @@ export default class EditChannelModal extends React.Component {
                 className='modal-title'
                 ref='title'
             >
-                Edit Description
+                Edit Header
             </h4>
         );
         if (this.state.title) {
@@ -82,7 +82,7 @@ export default class EditChannelModal extends React.Component {
                     className='modal-title'
                     ref='title'
                 >
-                    Edit Description for <span className='name'>{this.state.title}</span>
+                    Edit Header for <span className='name'>{this.state.title}</span>
                 </h4>
             );
         }
@@ -113,9 +113,8 @@ export default class EditChannelModal extends React.Component {
                             <textarea
                                 className='form-control no-resize'
                                 rows='6'
-                                ref='channelDesc'
                                 maxLength='1024'
-                                value={this.state.description}
+                                value={this.state.header}
                                 onChange={this.handleUserInput}
                             />
                             {serverError}
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index a0084ad30..585baee01 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -105,11 +105,12 @@ export default class MoreChannels extends React.Component {
                                         );
                                 }
 
+                                // TODO Switch channel.header to channel.purpose once that has been added
                                 return (
                                     <tr key={channel.id}>
                                         <td>
                                             <p className='more-name'>{channel.display_name}</p>
-                                            <p className='more-description'>{channel.description}</p>
+                                            <p className='more-header'>{channel.header}</p>
                                         </td>
                                         <td className='td--action'>
                                             {joinButton}
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index f9cd525fd..e3030383a 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -106,18 +106,18 @@ export default class Navbar extends React.Component {
                 </li>
             );
 
-            var setChannelDescriptionOption = (
+            var setChannelHeaderOption = (
                 <li role='presentation'>
                     <a
                         role='menuitem'
                         href='#'
                         data-toggle='modal'
                         data-target='#edit_channel'
-                        data-desc={channel.description}
+                        data-header={channel.header}
                         data-title={channel.display_name}
                         data-channelid={channel.id}
                     >
-                        Set Channel Description...
+                        Set Channel Header...
                     </a>
                 </li>
             );
@@ -249,7 +249,7 @@ export default class Navbar extends React.Component {
                             {viewInfoOption}
                             {addMembersOption}
                             {manageMembersOption}
-                            {setChannelDescriptionOption}
+                            {setChannelHeaderOption}
                             {notificationPreferenceOption}
                             {renameChannelOption}
                             {deleteChannelOption}
@@ -335,10 +335,10 @@ export default class Navbar extends React.Component {
                 <Popover
                     bsStyle='info'
                     placement='bottom'
-                    id='description-popover'
+                    id='header-popover'
                 >
                     <MessageWrapper
-                        message={channel.description}
+                        message={channel.header}
                         options={{singleline: true, mentionHighlight: false}}
                     />
                 </Popover>
@@ -360,20 +360,20 @@ export default class Navbar extends React.Component {
                 }
             }
 
-            if (channel.description.length === 0) {
+            if (channel.header.length === 0) {
                 popoverContent = (
                     <Popover
                         bsStyle='info'
                         placement='bottom'
-                        id='description-popover'
+                        id='header-popover'
                     >
                         <div>
-                            {'No channel description yet.'}
+                            {'No channel header yet.'}
                             <br/>
                             <a
                                 href='#'
                                 data-toggle='modal'
-                                data-desc={channel.description}
+                                data-header={channel.header}
                                 data-title={channel.display_name}
                                 data-channelid={channel.id}
                                 data-target='#edit_channel'
diff --git a/web/react/components/new_channel_flow.jsx b/web/react/components/new_channel_flow.jsx
index 186cfc2b0..8bcd0dacd 100644
--- a/web/react/components/new_channel_flow.jsx
+++ b/web/react/components/new_channel_flow.jsx
@@ -30,7 +30,7 @@ export default class NewChannelFlow extends React.Component {
             flowState: SHOW_NEW_CHANNEL,
             channelDisplayName: '',
             channelName: '',
-            channelDescription: '',
+            channelHeader: '',
             nameModified: false
         };
     }
@@ -43,7 +43,7 @@ export default class NewChannelFlow extends React.Component {
                 flowState: SHOW_NEW_CHANNEL,
                 channelDisplayName: '',
                 channelName: '',
-                channelDescription: '',
+                channelHeader: '',
                 nameModified: false
             });
         }
@@ -65,7 +65,7 @@ export default class NewChannelFlow extends React.Component {
 
         const cu = UserStore.getCurrentUser();
         channel.team_id = cu.team_id;
-        channel.description = this.state.channelDescription;
+        channel.header = this.state.channelHeader;
         channel.type = this.state.channelType;
 
         Client.createChannel(channel,
@@ -109,7 +109,7 @@ export default class NewChannelFlow extends React.Component {
     channelDataChanged(data) {
         this.setState({
             channelDisplayName: data.displayName,
-            channelDescription: data.description
+            channelHeader: data.header
         });
         if (!this.state.nameModified) {
             this.setState({channelName: Utils.cleanUpUrlable(data.displayName.trim())});
@@ -119,7 +119,7 @@ export default class NewChannelFlow extends React.Component {
         const channelData = {
             name: this.state.channelName,
             displayName: this.state.channelDisplayName,
-            description: this.state.channelDescription
+            header: this.state.channelHeader
         };
 
         let showChannelModal = false;
diff --git a/web/react/components/new_channel_modal.jsx b/web/react/components/new_channel_modal.jsx
index 4e6280c99..09acad15f 100644
--- a/web/react/components/new_channel_modal.jsx
+++ b/web/react/components/new_channel_modal.jsx
@@ -36,7 +36,7 @@ export default class NewChannelModal extends React.Component {
     handleChange() {
         const newData = {
             displayName: ReactDOM.findDOMNode(this.refs.display_name).value,
-            description: ReactDOM.findDOMNode(this.refs.channel_desc).value
+            header: ReactDOM.findDOMNode(this.refs.channel_header).value
         };
         this.props.onDataChanged(newData);
     }
@@ -136,22 +136,22 @@ export default class NewChannelModal extends React.Component {
                             </div>
                             <div className='form-group less'>
                                 <div className='col-sm-3'>
-                                    <label className='form__label control-label'>{'Description'}</label>
+                                    <label className='form__label control-label'>{'Header'}</label>
                                     <label className='form__label light'>{'(optional)'}</label>
                                 </div>
                                 <div className='col-sm-9'>
                                     <textarea
                                         className='form-control no-resize'
-                                        ref='channel_desc'
+                                        ref='channel_header'
                                         rows='4'
-                                        placeholder='Description'
+                                        placeholder='Header'
                                         maxLength='1024'
-                                        value={this.props.channelData.description}
+                                        value={this.props.channelData.header}
                                         onChange={this.handleChange}
                                         tabIndex='2'
                                     />
                                     <p className='input__help'>
-                                        {'Description helps others decide whether to join this channel.'}
+                                        {'This text is shown in the channel header and supports markdown formatting.'}
                                     </p>
                                     {serverError}
                                 </div>
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 3ceef478c..0d69e56bf 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -358,11 +358,11 @@ export default class PostList extends React.Component {
                         href='#'
                         data-toggle='modal'
                         data-target='#edit_channel'
-                        data-desc={channel.description}
+                        data-header={channel.header}
                         data-title={channel.display_name}
                         data-channelid={channel.id}
                     >
-                        <i className='fa fa-pencil'></i>{'Set a description'}
+                        <i className='fa fa-pencil'></i>{'Set a header'}
                     </a>
                 </div>
             );
@@ -413,11 +413,11 @@ export default class PostList extends React.Component {
                     href='#'
                     data-toggle='modal'
                     data-target='#edit_channel'
-                    data-desc={channel.description}
+                    data-header={channel.header}
                     data-title={channel.display_name}
                     data-channelid={channel.id}
                 >
-                    <i className='fa fa-pencil'></i>{'Set a description'}
+                    <i className='fa fa-pencil'></i>{'Set a header'}
                 </a>
                 <a
                     className='intro-links'
@@ -479,11 +479,11 @@ export default class PostList extends React.Component {
                     href='#'
                     data-toggle='modal'
                     data-target='#edit_channel'
-                    data-desc={channel.description}
+                    data-header={channel.header}
                     data-title={channel.display_name}
                     data-channelid={channel.id}
                 >
-                    <i className='fa fa-pencil'></i>{'Set a description'}
+                    <i className='fa fa-pencil'></i>{'Set a header'}
                 </a>
                 <a
                     className='intro-links'
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index a93257dd2..6fe373c50 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -575,21 +575,21 @@ export function updateChannel(channel, success, error) {
     track('api', 'api_channels_update');
 }
 
-export function updateChannelDesc(data, success, error) {
+export function updateChannelHeader(data, success, error) {
     $.ajax({
-        url: '/api/v1/channels/update_desc',
+        url: '/api/v1/channels/update_header',
         dataType: 'json',
         contentType: 'application/json',
         type: 'POST',
         data: JSON.stringify(data),
         success,
         error: function onError(xhr, status, err) {
-            var e = handleError('updateChannelDesc', xhr, status, err);
+            var e = handleError('updateChannelHeader', xhr, status, err);
             error(e);
         }
     });
 
-    track('api', 'api_channels_desc');
+    track('api', 'api_channels_header');
 }
 
 export function updateNotifyProps(data, success, error) {
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 1dcdbf348..a352df5f1 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -377,7 +377,7 @@
 		@include opacity(0.8);
 	}
 
-	.more-description {
+	.more-header {
 		@include opacity(0.7);
 	}