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

webapp/components/change_url_modal.jsx

@@ -135,10 +135,10 @@ export default class ChangeUrlModal extends React.Component {
             );
         }
 
-        const fullTeamUrl = TeamStore.getCurrentTeamUrl();
+        const fullUrl = TeamStore.getCurrentTeamUrl() + '/channels';
-        const teamURL = URL.getShortenedTeamURL(TeamStore.getCurrentTeamUrl());
+        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'

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>

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: {
+    url: {
-        id: 'rename_channel.handle',
+        id: 'rename_channel.url',
-        defaultMessage: 'Handle'
+        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>
+                            <label className='control-label'>{urlInputLabel}</label>
-                            <input
+
-                                onChange={this.onNameChange}
+                            <div className='input-group input-group--limit'>
-                                type='text'
+                                <OverlayTrigger
-                                className={handleInputClass}
+                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                ref='channelName'
+                                    placement='top'
-                                placeholder={formatMessage(holders.handleHolder)}
+                                    overlay={urlTooltip}
-                                value={this.state.channelName}
+                                >
-                                maxLength='64'
+                                    <span className='input-group-addon'>{shortUrl}</span>
-                                readOnly={readOnlyHandleInput}
+                                </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}

webapp/i18n/en.json

@@ -1730,7 +1730,7 @@
   "rename_channel.defaultError": " - Cannot be changed for the default channel",
   "rename_channel.displayName": "Display Name",
   "rename_channel.displayNameHolder": "Enter display name",
-  "rename_channel.handle": "Handle",
+  "rename_channel.url": "URL",
   "rename_channel.handleHolder": "lowercase alphanumeric's only",
   "rename_channel.lowercase": "Must be lowercase alphanumeric characters",
   "rename_channel.maxLength": "This field must be less than 22 characters",

webapp/i18n/zh_CN.json

@@ -1730,7 +1730,7 @@
   "rename_channel.defaultError": "-不能改变默认频道",
   "rename_channel.displayName": "显示名称",
   "rename_channel.displayNameHolder": "输入显示名",
-  "rename_channel.handle": "识别名",
+  "rename_channel.url": "链接地址",
   "rename_channel.handleHolder": "小写字母数字#39;只有",
   "rename_channel.lowercase": "必须小写字母数字字符",
   "rename_channel.maxLength": "这个字段必须少于22个字符",

webapp/i18n/zh_TW.json

@@ -1730,7 +1730,7 @@
   "rename_channel.defaultError": " - 預設頻道不能更改",
   "rename_channel.displayName": "顯示名稱",
   "rename_channel.displayNameHolder": "請輸入顯示名稱",
-  "rename_channel.handle": "識別名",
+  "rename_channel.url": "鏈接地址",
   "rename_channel.handleHolder": "僅限小寫英數字",
   "rename_channel.lowercase": "請用小寫英數字",
   "rename_channel.maxLength": "此欄位必須少於22個字元",

webapp/utils/url.jsx

@@ -9,11 +9,12 @@ export function cleanUpUrlable(input) {
     return cleaned;
 }
 
-export function getShortenedTeamURL(teamURL = '') {
+export function getShortenedURL(url = '', getLength = 27) {
-    if (teamURL.length > 35) {
+    if (url.length > 35) {
-        return teamURL.substring(0, 10) + '...' + teamURL.substring(teamURL.length - 12, teamURL.length) + '/';
+        const subLength = getLength - 14;
+        return url.substring(0, 10) + '...' + url.substring(url.length - subLength, url.length) + '/';
     }
-    return teamURL + '/';
+    return url + '/';
 }
 
 export function getSiteURL() {