Rename channel (#5322)

* fix react proptypes

* Replace the handle field and label with url

* Update rename channel url correctly

* fix merge

* fix after test-1

* update i18n

3 files changed, 42 insertions, 24 deletions

diff --git a/webapp/components/change_url_modal.jsx b/webapp/components/change_url_modal.jsx
index 4abc469ea..009a9b798 100644
--- a/webapp/components/change_url_modal.jsx
+++ b/webapp/components/change_url_modal.jsx
@@ -135,10 +135,10 @@ export default class ChangeUrlModal extends React.Component {
             );
         }
 
-        const fullTeamUrl = TeamStore.getCurrentTeamUrl();
-        const teamURL = URL.getShortenedTeamURL(TeamStore.getCurrentTeamUrl());
+        const fullUrl = TeamStore.getCurrentTeamUrl() + '/channels';
+        const shortURL = URL.getShortenedURL(fullUrl);
         const urlTooltip = (
-            <Tooltip id='urlTooltip'>{fullTeamUrl}</Tooltip>
+            <Tooltip id='urlTooltip'>{fullUrl}</Tooltip>
         );
 
         return (
@@ -165,7 +165,7 @@ export default class ChangeUrlModal extends React.Component {
                                         placement='top'
                                         overlay={urlTooltip}
                                     >
-                                        <span className='input-group-addon'>{teamURL}</span>
+                                        <span className='input-group-addon'>{shortURL}</span>
                                     </OverlayTrigger>
                                     <input
                                         type='text'
diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx
index 3a6e8b67f..2f9533b0e 100644
--- a/webapp/components/new_channel_modal.jsx
+++ b/webapp/components/new_channel_modal.jsx
@@ -4,7 +4,7 @@
 import $ from 'jquery';
 import ReactDOM from 'react-dom';
 
-import {getShortenedTeamURL} from 'utils/url.jsx';
+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';
@@ -190,7 +190,7 @@ export default class NewChannelModal extends React.Component {
             break;
         }
 
-        const prettyTeamURL = getShortenedTeamURL();
+        const prettyTeamURL = getShortenedURL();
 
         return (
             <span>
diff --git a/webapp/components/rename_channel_modal.jsx b/webapp/components/rename_channel_modal.jsx
index 9e2cfd8d8..7ed3b4987 100644
--- a/webapp/components/rename_channel_modal.jsx
+++ b/webapp/components/rename_channel_modal.jsx
@@ -4,12 +4,14 @@
 import ReactDOM from 'react-dom';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
-import {cleanUpUrlable} from 'utils/url.jsx';
+import {cleanUpUrlable, getShortenedURL} from 'utils/url.jsx';
+
+import TeamStore from 'stores/team_store.jsx';
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
 import {updateChannel} from 'actions/channel_actions.jsx';
 
-import {Modal} from 'react-bootstrap';
+import {Modal, Tooltip, OverlayTrigger} from 'react-bootstrap';
 
 const holders = defineMessages({
     required: {
@@ -24,9 +26,9 @@ const holders = defineMessages({
         id: 'rename_channel.lowercase',
         defaultMessage: 'Must be lowercase alphanumeric characters'
     },
-    handle: {
-        id: 'rename_channel.handle',
-        defaultMessage: 'Handle'
+    url: {
+        id: 'rename_channel.url',
+        defaultMessage: 'URL'
     },
     defaultError: {
         id: 'rename_channel.defaultError',
@@ -213,14 +215,20 @@ export class RenameChannelModal extends React.Component {
 
         const {formatMessage} = this.props.intl;
 
-        let handleInputLabel = formatMessage(holders.handle);
+        let urlInputLabel = formatMessage(holders.url);
         const handleInputClass = 'form-control';
         let readOnlyHandleInput = false;
         if (this.state.channelName === Constants.DEFAULT_CHANNEL) {
-            handleInputLabel += formatMessage(holders.defaultError);
+            urlInputLabel += formatMessage(holders.defaultError);
             readOnlyHandleInput = true;
         }
 
+        const fullUrl = TeamStore.getCurrentTeamUrl() + '/channels';
+        const shortUrl = getShortenedURL(fullUrl, 35);
+        const urlTooltip = (
+            <Tooltip id='urlTooltip'>{fullUrl}</Tooltip>
+        );
+
         return (
             <Modal
                 show={this.props.show}
@@ -256,17 +264,27 @@ export class RenameChannelModal extends React.Component {
                             {displayNameError}
                         </div>
                         <div className={nameClass}>
-                            <label className='control-label'>{handleInputLabel}</label>
-                            <input
-                                onChange={this.onNameChange}
-                                type='text'
-                                className={handleInputClass}
-                                ref='channelName'
-                                placeholder={formatMessage(holders.handleHolder)}
-                                value={this.state.channelName}
-                                maxLength='64'
-                                readOnly={readOnlyHandleInput}
-                            />
+                            <label className='control-label'>{urlInputLabel}</label>
+
+                            <div className='input-group input-group--limit'>
+                                <OverlayTrigger
+                                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                                    placement='top'
+                                    overlay={urlTooltip}
+                                >
+                                    <span className='input-group-addon'>{shortUrl}</span>
+                                </OverlayTrigger>
+                                <input
+                                    onChange={this.onNameChange}
+                                    type='text'
+                                    className={handleInputClass}
+                                    ref='channelName'
+                                    placeholder={formatMessage(holders.handleHolder)}
+                                    value={this.state.channelName}
+                                    maxLength='64'
+                                    readOnly={readOnlyHandleInput}
+                                />
+                            </div>
                             {nameError}
                         </div>
                         {serverError}