1 files changed, 45 insertions, 21 deletions

diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index f9cd525fd..f7778f25f 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -8,6 +8,7 @@ var ChannelStore = require('../stores/channel_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
 var MessageWrapper = require('./message_wrapper.jsx');
 var NotifyCounts = require('./notify_counts.jsx');
+const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx');
 const Utils = require('../utils/utils.jsx');
 
 var Constants = require('../utils/constants.jsx');
@@ -26,7 +27,9 @@ export default class Navbar extends React.Component {
         this.createCollapseButtons = this.createCollapseButtons.bind(this);
         this.createDropdown = this.createDropdown.bind(this);
 
-        this.state = this.getStateFromStores();
+        const state = this.getStateFromStores();
+        state.showEditChannelPurposeModal = false;
+        this.state = state;
     }
     getStateFromStores() {
         return {
@@ -106,22 +109,35 @@ 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>
             );
 
+            var setChannelPurposeOption = null;
+            if (!isDirect) {
+                setChannelPurposeOption = (
+                    <li role='presentation'>
+                        <a
+                            role='menuitem'
+                            href='#'
+                            onClick={() => this.setState({showEditChannelPurposeModal: true})}
+                        />
+                    </li>
+                );
+            }
+
             var addMembersOption;
             var leaveChannelOption;
             if (!isDirect && !ChannelStore.isDefault(channel)) {
@@ -249,7 +265,8 @@ export default class Navbar extends React.Component {
                             {viewInfoOption}
                             {addMembersOption}
                             {manageMembersOption}
-                            {setChannelDescriptionOption}
+                            {setChannelHeaderOption}
+                            {setChannelPurposeOption}
                             {notificationPreferenceOption}
                             {renameChannelOption}
                             {deleteChannelOption}
@@ -335,10 +352,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 +377,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'
@@ -392,17 +409,24 @@ export default class Navbar extends React.Component {
         var channelMenuDropdown = this.createDropdown(channel, channelTitle, isAdmin, isDirect, popoverContent);
 
         return (
-            <nav
-                className='navbar navbar-default navbar-fixed-top'
-                role='navigation'
-            >
-                <div className='container-fluid theme'>
-                    <div className='navbar-header'>
-                        {collapseButtons}
-                        {channelMenuDropdown}
+            <div>
+                <nav
+                    className='navbar navbar-default navbar-fixed-top'
+                    role='navigation'
+                >
+                    <div className='container-fluid theme'>
+                        <div className='navbar-header'>
+                            {collapseButtons}
+                            {channelMenuDropdown}
+                        </div>
                     </div>
-                </div>
-            </nav>
+                </nav>
+                <EditChannelPurposeModal
+                    show={this.state.showEditChannelPurposeModal}
+                    onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})}
+                    channel={channel}
+                />
+            </div>
         );
     }
 }