Merge pull request #1437 from rgarmsen2295/plt-1086

PLT-1086 Enables the ability to rename the default channel (Town Square)

4 files changed, 87 insertions, 65 deletions

diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index a8d4ec100..79c7f90a9 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -276,26 +276,27 @@ export default class ChannelHeader extends React.Component {
                 </li>
             );
 
-            if (!ChannelStore.isDefault(channel)) {
-                if (isAdmin) {
-                    dropdownContents.push(
-                        <li
-                            key='rename_channel'
-                            role='presentation'
+            if (isAdmin) {
+                dropdownContents.push(
+                    <li
+                        key='rename_channel'
+                        role='presentation'
+                    >
+                        <a
+                            role='menuitem'
+                            href='#'
+                            data-toggle='modal'
+                            data-target='#rename_channel'
+                            data-display={channel.display_name}
+                            data-name={channel.name}
+                            data-channelid={channel.id}
                         >
-                            <a
-                                role='menuitem'
-                                href='#'
-                                data-toggle='modal'
-                                data-target='#rename_channel'
-                                data-display={channel.display_name}
-                                data-name={channel.name}
-                                data-channelid={channel.id}
-                            >
-                                {'Rename '}{channelTerm}{'...'}
-                            </a>
-                        </li>
-                    );
+                            {'Rename '}{channelTerm}{'...'}
+                        </a>
+                    </li>
+                );
+
+                if (!ChannelStore.isDefault(channel)) {
                     dropdownContents.push(
                         <li
                             key='delete_channel'
@@ -314,7 +315,9 @@ export default class ChannelHeader extends React.Component {
                         </li>
                     );
                 }
+            }
 
+            if (!ChannelStore.isDefault(channel)) {
                 dropdownContents.push(
                     <li
                         key='leave_channel'
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index af29f219e..7ad1f9305 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -178,18 +178,35 @@ export default class Navbar extends React.Component {
             var manageMembersOption;
             var renameChannelOption;
             var deleteChannelOption;
-            if (!isDirect && isAdmin && !ChannelStore.isDefault(channel)) {
-                manageMembersOption = (
-                    <li role='presentation'>
-                        <a
-                            role='menuitem'
-                            href='#'
-                            onClick={() => this.setState({showMembersModal: true})}
-                        >
-                            {'Manage Members'}
-                        </a>
-                    </li>
-                );
+            if (!isDirect && isAdmin) {
+                if (!ChannelStore.isDefault(channel)) {
+                    manageMembersOption = (
+                        <li role='presentation'>
+                            <a
+                                role='menuitem'
+                                href='#'
+                                onClick={() => this.setState({showMembersModal: true})}
+                            >
+                                {'Manage Members'}
+                            </a>
+                        </li>
+                    );
+
+                    deleteChannelOption = (
+                        <li role='presentation'>
+                            <a
+                                role='menuitem'
+                                href='#'
+                                data-toggle='modal'
+                                data-target='#delete_channel'
+                                data-title={channel.display_name}
+                                data-channelid={channel.id}
+                            >
+                                {'Delete Channel...'}
+                            </a>
+                        </li>
+                    );
+                }
 
                 renameChannelOption = (
                     <li role='presentation'>
@@ -206,21 +223,6 @@ export default class Navbar extends React.Component {
                         </a>
                     </li>
                 );
-
-                deleteChannelOption = (
-                    <li role='presentation'>
-                        <a
-                            role='menuitem'
-                            href='#'
-                            data-toggle='modal'
-                            data-target='#delete_channel'
-                            data-title={channel.display_name}
-                            data-channelid={channel.id}
-                        >
-                            {'Delete Channel...'}
-                        </a>
-                    </li>
-                );
             }
 
             var notificationPreferenceOption;
diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx
index 9fb3af035..f47009cce 100644
--- a/web/react/components/rename_channel_modal.jsx
+++ b/web/react/components/rename_channel_modal.jsx
@@ -5,6 +5,7 @@ const Utils = require('../utils/utils.jsx');
 const Client = require('../utils/client.jsx');
 const AsyncClient = require('../utils/async_client.jsx');
 const ChannelStore = require('../stores/channel_store.jsx');
+const Constants = require('../utils/constants.jsx');
 
 export default class RenameChannelModal extends React.Component {
     constructor(props) {
@@ -36,10 +37,10 @@ export default class RenameChannelModal extends React.Component {
             return;
         }
 
-        let channel = ChannelStore.get(this.state.channelId);
+        const channel = ChannelStore.get(this.state.channelId);
         const oldName = channel.name;
         const oldDisplayName = channel.displayName;
-        let state = {serverError: ''};
+        const state = {serverError: ''};
 
         channel.display_name = this.state.displayName.trim();
         if (!channel.display_name) {
@@ -60,7 +61,7 @@ export default class RenameChannelModal extends React.Component {
             state.nameError = 'This field must be less than 22 characters';
             state.invalid = true;
         } else {
-            let cleanedName = Utils.cleanUpUrlable(channel.name);
+            const cleanedName = Utils.cleanUpUrlable(channel.name);
             if (cleanedName === channel.name) {
                 state.nameError = '';
             } else {
@@ -76,7 +77,7 @@ export default class RenameChannelModal extends React.Component {
         }
 
         Client.updateChannel(channel,
-            function handleUpdateSuccess() {
+            () => {
                 $(ReactDOM.findDOMNode(this.refs.modal)).modal('hide');
 
                 AsyncClient.getChannel(channel.id);
@@ -84,12 +85,12 @@ export default class RenameChannelModal extends React.Component {
 
                 ReactDOM.findDOMNode(this.refs.displayName).value = '';
                 ReactDOM.findDOMNode(this.refs.channelName).value = '';
-            }.bind(this),
-            function handleUpdateError(err) {
+            },
+            (err) => {
                 state.serverError = err.message;
                 state.invalid = true;
                 this.setState(state);
-            }.bind(this)
+            }
         );
     }
     onNameChange() {
@@ -99,10 +100,12 @@ export default class RenameChannelModal extends React.Component {
         this.setState({displayName: ReactDOM.findDOMNode(this.refs.displayName).value});
     }
     displayNameKeyUp() {
-        const displayName = ReactDOM.findDOMNode(this.refs.displayName).value.trim();
-        const channelName = Utils.cleanUpUrlable(displayName);
-        ReactDOM.findDOMNode(this.refs.channelName).value = channelName;
-        this.setState({channelName: channelName});
+        if (this.state.channelName !== Constants.DEFAULT_CHANNEL) {
+            const displayName = ReactDOM.findDOMNode(this.refs.displayName).value.trim();
+            const channelName = Utils.cleanUpUrlable(displayName);
+            ReactDOM.findDOMNode(this.refs.channelName).value = channelName;
+            this.setState({channelName: channelName});
+        }
     }
     handleClose() {
         this.setState({
@@ -150,6 +153,15 @@ export default class RenameChannelModal extends React.Component {
             serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
         }
 
+        let handleInputLabel = 'Handle';
+        let handleInputClass = 'form-control';
+        let readOnlyHandleInput = false;
+        if (this.state.channelName === Constants.DEFAULT_CHANNEL) {
+            handleInputLabel += ' - Cannot be changed for the default channel';
+            handleInputClass += ' disabled-input';
+            readOnlyHandleInput = true;
+        }
+
         return (
             <div
                 className='modal fade'
@@ -167,15 +179,15 @@ export default class RenameChannelModal extends React.Component {
                                 className='close'
                                 data-dismiss='modal'
                             >
-                                <span aria-hidden='true'>&times;</span>
-                                <span className='sr-only'>Close</span>
+                                <span aria-hidden='true'>{'×'}</span>
+                                <span className='sr-only'>{'Close'}</span>
                             </button>
-                        <h4 className='modal-title'>Rename Channel</h4>
+                        <h4 className='modal-title'>{'Rename Channel'}</h4>
                         </div>
                         <form role='form'>
                             <div className='modal-body'>
                                 <div className={displayNameClass}>
-                                    <label className='control-label'>Display Name</label>
+                                    <label className='control-label'>{'Display Name'}</label>
                                     <input
                                         onKeyUp={this.displayNameKeyUp}
                                         onChange={this.onDisplayNameChange}
@@ -190,15 +202,16 @@ export default class RenameChannelModal extends React.Component {
                                     {displayNameError}
                                 </div>
                                 <div className={nameClass}>
-                                    <label className='control-label'>Handle</label>
+                                    <label className='control-label'>{handleInputLabel}</label>
                                     <input
                                         onChange={this.onNameChange}
                                         type='text'
-                                        className='form-control'
+                                        className={handleInputClass}
                                         ref='channelName'
                                         placeholder='lowercase alphanumeric&#39;s only'
                                         value={this.state.channelName}
                                         maxLength='64'
+                                        readOnly={readOnlyHandleInput}
                                     />
                                     {nameError}
                                 </div>
@@ -210,14 +223,14 @@ export default class RenameChannelModal extends React.Component {
                                     className='btn btn-default'
                                     data-dismiss='modal'
                                 >
-                                    Cancel
+                                    {'Cancel'}
                                 </button>
                                 <button
                                     onClick={this.handleSubmit}
                                     type='submit'
                                     className='btn btn-primary'
                                 >
-                                    Save
+                                    {'Save'}
                                 </button>
                             </div>
                         </form>
diff --git a/web/sass-files/sass/partials/_forms.scss b/web/sass-files/sass/partials/_forms.scss
index 2d7b6cd26..685677ad0 100644
--- a/web/sass-files/sass/partials/_forms.scss
+++ b/web/sass-files/sass/partials/_forms.scss
@@ -43,3 +43,7 @@
 	margin: 10px 0 0;
 	color: #999;
 }
+
+.disabled-input {
+	background-color: #dddddd !important;
+}