PLT-3700 Made error message for too short channel URL more clear (#3773)

webapp/components/change_url_modal.jsx

@@ -119,16 +119,20 @@ export default class ChangeUrlModal extends React.Component {
     }
     render() {
         let urlClass = 'input-group input-group--limit';
-        let urlError = null;
+        let error = null;
-        let serverError = null;
 
         if (this.state.urlError) {
             urlClass += ' has-error';
-            urlError = (<p className='input__help error'>{this.state.urlError}</p>);
         }
 
-        if (this.props.serverError) {
+        if (this.props.serverError || this.state.urlError) {
-            serverError = <div className='form-group has-error'><p className='input__help error'>{this.props.serverError}</p></div>;
+            error = (
+                <div className='form-group has-error'>
+                    <p className='input__help error'>
+                        {this.state.urlError || this.props.serverError}
+                    </p>
+                </div>
+            );
         }
 
         const fullTeamUrl = TeamStore.getCurrentTeamUrl();
@@ -173,8 +177,7 @@ export default class ChangeUrlModal extends React.Component {
                                         tabIndex='1'
                                     />
                                 </div>
-                                {urlError}
+                                {error}
-                                {serverError}
                             </div>
                         </div>
                     </Modal.Body>
@@ -211,7 +214,7 @@ ChangeUrlModal.defaultProps = {
     urlLabel: 'URL',
     submitButtonText: 'Save',
     currentURL: '',
-    serverError: ''
+    serverError: null
 };
 
 ChangeUrlModal.propTypes = {
@@ -221,7 +224,7 @@ ChangeUrlModal.propTypes = {
     urlLabel: React.PropTypes.string,
     submitButtonText: React.PropTypes.string,
     currentURL: React.PropTypes.string,
-    serverError: React.PropTypes.string,
+    serverError: React.PropTypes.node,
     onModalSubmit: React.PropTypes.func.isRequired,
     onModalDismissed: React.PropTypes.func.isRequired
 };

webapp/components/new_channel_flow.jsx

@@ -9,7 +9,7 @@ import UserStore from 'stores/user_store.jsx';
 import NewChannelModal from './new_channel_modal.jsx';
 import ChangeURLModal from './change_url_modal.jsx';
 
-import {intlShape, injectIntl, defineMessages} from 'react-intl';
+import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
 
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
@@ -124,7 +124,16 @@ class NewChannelFlow extends React.Component {
             },
             (err) => {
                 if (err.id === 'model.channel.is_valid.2_or_more.app_error') {
-                    this.setState({flowState: SHOW_EDIT_URL_THEN_COMPLETE});
+                    this.setState({
+                        flowState: SHOW_EDIT_URL_THEN_COMPLETE,
+                        serverError: (
+                            <FormattedMessage
+                                id='channel_flow.handleTooShort'
+                                defaultMessage='Channel URL must be 2 or more lowercase alphanumeric characters'
+                            />
+                        )
+                    });
+                    return;
                 }
                 if (err.id === 'store.sql_channel.update.exists.app_error') {
                     this.setState({serverError: Utils.localizeMessage('channel_flow.alreadyExist', 'A channel with that URL already exists')});
@@ -148,7 +157,7 @@ class NewChannelFlow extends React.Component {
         if (this.state.flowState === SHOW_EDIT_URL_THEN_COMPLETE) {
             this.setState({channelName: newURL, nameModified: true}, this.doSubmit);
         } else {
-            this.setState({flowState: SHOW_NEW_CHANNEL, serverError: '', channelName: newURL, nameModified: true});
+            this.setState({flowState: SHOW_NEW_CHANNEL, serverError: null, channelName: newURL, nameModified: true});
         }
     }
     urlChangeDismissed() {

webapp/components/new_channel_modal.jsx

@@ -372,14 +372,14 @@ class NewChannelModal extends React.Component {
 NewChannelModal.defaultProps = {
     show: false,
     channelType: 'O',
-    serverError: ''
+    serverError: null
 };
 NewChannelModal.propTypes = {
     intl: intlShape.isRequired,
     show: React.PropTypes.bool.isRequired,
     channelType: React.PropTypes.string.isRequired,
     channelData: React.PropTypes.object.isRequired,
-    serverError: React.PropTypes.string,
+    serverError: React.PropTypes.node,
     onSubmitChannel: React.PropTypes.func.isRequired,
     onModalDismissed: React.PropTypes.func.isRequired,
     onTypeSwitched: React.PropTypes.func.isRequired,

webapp/i18n/en.json

@@ -919,6 +919,7 @@
   "channel_flow.channel": "Channel",
   "channel_flow.create": "Create {term}",
   "channel_flow.group": "Group",
+  "channel_flow.handleTooShort": "Channel URL must be 2 or more lowercase alphanumeric characters",
   "channel_flow.invalidName": "Invalid Channel Name",
   "channel_flow.set_url_title": "Set {term} URL",
   "channel_header.channel": "Channel",