Add error to RHS reply box for messages > 4000 chars, consistent with create post and edit post errors (#4871)

* functionality

* CSS updates

* cleanup

* moved message length checks to Textbox component

* cleanup

webapp/components/create_comment.jsx

@@ -55,6 +55,7 @@ export default class CreateComment extends React.Component {
         this.focusTextbox = this.focusTextbox.bind(this);
         this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
         this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
+        this.handlePostError = this.handlePostError.bind(this);
 
         PostStore.clearCommentDraftUploads();
         MessageHistoryStore.resetHistoryIndex('comment');
@@ -96,6 +97,10 @@ export default class CreateComment extends React.Component {
         }
     }
 
+    handlePostError(postError) {
+        this.setState({postError});
+    }
+
     handleSubmit(e) {
         e.preventDefault();
 
@@ -109,16 +114,11 @@ export default class CreateComment extends React.Component {
 
         const message = this.state.message;
 
-        if (message.length > Constants.CHARACTER_LIMIT) {
+        if (this.state.postError) {
-            this.setState({
+            this.setState({errorClass: 'animation--highlight'});
-                postError: (
+            setTimeout(() => {
-                    <FormattedMessage
+                this.setState({errorClass: null});
-                        id='create_comment.commentLength'
+            }, Constants.ANIMATION_TIMEOUT);
-                        defaultMessage='Comment length must be less than {max} characters.'
-                        values={{max: Constants.CHARACTER_LIMIT}}
-                    />
-                )
-            });
             return;
         }
 
@@ -420,7 +420,8 @@ export default class CreateComment extends React.Component {
 
         let postError = null;
         if (this.state.postError) {
-            postError = <label className='control-label'>{this.state.postError}</label>;
+            const postErrorClass = 'post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : '');
+            postError = <label className={postErrorClass}>{this.state.postError}</label>;
         }
 
         let preview = null;
@@ -434,11 +435,6 @@ export default class CreateComment extends React.Component {
             );
         }
 
-        let postFooterClassName = 'post-create-footer';
-        if (postError) {
-            postFooterClassName += ' has-error';
-        }
-
         let uploadsInProgressText = null;
         if (this.state.uploadsInProgress.length > 0) {
             uploadsInProgressText = (
@@ -470,6 +466,7 @@ export default class CreateComment extends React.Component {
                                 onChange={this.handleChange}
                                 onKeyPress={this.commentMsgKeyPress}
                                 onKeyDown={this.handleKeyDown}
+                                handlePostError={this.handlePostError}
                                 value={this.state.message}
                                 onBlur={this.handleBlur}
                                 createMessage={Utils.localizeMessage('create_comment.addComment', 'Add a comment...')}
@@ -494,7 +491,7 @@ export default class CreateComment extends React.Component {
                         channelId={this.props.channelId}
                         parentId={this.props.rootId}
                     />
-                    <div className={postFooterClassName}>
+                    <div className='post-create-footer'>
                         <input
                             type='button'
                             className='btn btn-primary comment-btn pull-right'
@@ -502,8 +499,8 @@ export default class CreateComment extends React.Component {
                             onClick={this.handleSubmit}
                         />
                         {uploadsInProgressText}
-                        {preview}
                         {postError}
+                        {preview}
                         {serverError}
                     </div>
                 </div>

webapp/components/create_post.jsx

@@ -25,7 +25,7 @@ import PreferenceStore from 'stores/preference_store.jsx';
 
 import Constants from 'utils/constants.jsx';
 
-import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
+import {FormattedHTMLMessage} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
 
 const Preferences = Constants.Preferences;
@@ -61,7 +61,7 @@ export default class CreatePost extends React.Component {
         this.showPostDeletedModal = this.showPostDeletedModal.bind(this);
         this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this);
         this.showShortcuts = this.showShortcuts.bind(this);
-        this.checkMessageLength = this.checkMessageLength.bind(this);
+        this.handlePostError = this.handlePostError.bind(this);
 
         PostStore.clearDraftUploads();
 
@@ -81,6 +81,10 @@ export default class CreatePost extends React.Component {
         };
     }
 
+    handlePostError(postError) {
+        this.setState({postError});
+    }
+
     handleSubmit(e) {
         e.preventDefault();
 
@@ -218,25 +222,6 @@ export default class CreatePost extends React.Component {
         const draft = PostStore.getCurrentDraft();
         draft.message = message;
         PostStore.storeCurrentDraft(draft);
-
-        this.checkMessageLength(message);
-    }
-
-    checkMessageLength(message) {
-        if (message.length > Constants.CHARACTER_LIMIT) {
-            const errorMessage = (
-                <FormattedMessage
-                    id='create_post.error_message'
-                    defaultMessage='Your message is too long. Character count: {length}/{limit}'
-                    values={{
-                        length: message.length,
-                        limit: Constants.CHARACTER_LIMIT
-                    }}
-                />);
-            this.setState({postError: errorMessage});
-        } else {
-            this.setState({postError: null});
-        }
     }
 
     handleUploadClick() {
@@ -335,8 +320,6 @@ export default class CreatePost extends React.Component {
             fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
             showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER
         });
-
-        this.checkMessageLength(this.state.message);
     }
 
     componentDidMount() {
@@ -543,6 +526,7 @@ export default class CreatePost extends React.Component {
                                 onChange={this.handleChange}
                                 onKeyPress={this.postMsgKeyPress}
                                 onKeyDown={this.handleKeyDown}
+                                handlePostError={this.handlePostError}
                                 value={this.state.message}
                                 onBlur={this.handleBlur}
                                 createMessage={Utils.localizeMessage('create_post.write', 'Write a message...')}

webapp/components/edit_post_modal.jsx

@@ -38,6 +38,7 @@ export default class EditPostModal extends React.Component {
         this.onModalShown = this.onModalShown.bind(this);
         this.onModalHide = this.onModalHide.bind(this);
         this.onModalKeyDown = this.onModalKeyDown.bind(this);
+        this.handlePostError = this.handlePostError.bind(this);
 
         this.state = {
             editText: '',
@@ -52,6 +53,12 @@ export default class EditPostModal extends React.Component {
         };
     }
 
+    handlePostError(postError) {
+        if (this.state.postError !== postError) {
+            this.setState({postError});
+        }
+    }
+
     handleEdit() {
         const updatedPost = {
             message: this.state.editText,
@@ -103,21 +110,6 @@ export default class EditPostModal extends React.Component {
         this.setState({
             editText: message
         });
-
-        if (message.length > Constants.CHARACTER_LIMIT) {
-            const errorMessage = (
-                <FormattedMessage
-                    id='create_post.error_message'
-                    defaultMessage='Your message is too long. Character count: {length}/{limit}'
-                    values={{
-                        length: message.length,
-                        limit: Constants.CHARACTER_LIMIT
-                    }}
-                />);
-            this.setState({postError: errorMessage});
-        } else {
-            this.setState({postError: ''});
-        }
     }
 
     handleEditKeyPress(e) {
@@ -262,6 +254,7 @@ export default class EditPostModal extends React.Component {
                                 onChange={this.handleChange}
                                 onKeyPress={this.handleEditKeyPress}
                                 onKeyDown={this.handleKeyDown}
+                                handlePostError={this.handlePostError}
                                 value={this.state.editText}
                                 channelId={this.state.channel_id}
                                 createMessage={Utils.localizeMessage('edit_post.editPost', 'Edit the post...')}

webapp/components/textbox.jsx

@@ -32,6 +32,7 @@ export default class Textbox extends React.Component {
         this.handleBlur = this.handleBlur.bind(this);
         this.handleHeightChange = this.handleHeightChange.bind(this);
         this.showPreview = this.showPreview.bind(this);
+        this.handleChange = this.handleChange.bind(this);
 
         this.state = {
             connection: ''
@@ -51,6 +52,10 @@ export default class Textbox extends React.Component {
         ErrorStore.addChangeListener(this.onRecievedError);
     }
 
+    componentWillMount() {
+        this.checkMessageLength(this.props.value);
+    }
+
     componentWillUnmount() {
         ErrorStore.removeChangeListener(this.onRecievedError);
     }
@@ -65,6 +70,30 @@ export default class Textbox extends React.Component {
         }
     }
 
+    handleChange(e) {
+        this.checkMessageLength(e.target.value);
+        this.props.onChange(e);
+    }
+
+    checkMessageLength(message) {
+        if (this.props.handlePostError) {
+            if (message.length > Constants.CHARACTER_LIMIT) {
+                const errorMessage = (
+                    <FormattedMessage
+                        id='create_post.error_message'
+                        defaultMessage='Your message is too long. Character count: {length}/{limit}'
+                        values={{
+                            length: message.length,
+                            limit: Constants.CHARACTER_LIMIT
+                        }}
+                    />);
+                this.props.handlePostError(errorMessage);
+            } else {
+                this.props.handlePostError(null);
+            }
+        }
+    }
+
     handleKeyPress(e) {
         this.props.onKeyPress(e);
     }
@@ -206,7 +235,7 @@ export default class Textbox extends React.Component {
                     type='textarea'
                     spellCheck='true'
                     placeholder={this.props.createMessage}
-                    onChange={this.props.onChange}
+                    onChange={this.handleChange}
                     onKeyPress={this.handleKeyPress}
                     onKeyDown={this.handleKeyDown}
                     onBlur={this.handleBlur}
@@ -257,5 +286,6 @@ Textbox.propTypes = {
     createMessage: React.PropTypes.string.isRequired,
     onKeyDown: React.PropTypes.func,
     onBlur: React.PropTypes.func,
-    supportsCommands: React.PropTypes.bool.isRequired
+    supportsCommands: React.PropTypes.bool.isRequired,
+    handlePostError: React.PropTypes.func
 };

webapp/sass/layout/_sidebar-right.scss

@@ -59,6 +59,24 @@
         form {
             padding: .5em 15px 0;
         }
+
+        .post-create-footer {
+            @include clearfix;
+            font-size: 13px;
+            overflow: visible;
+            position: relative;
+            clear: both;
+
+            .post-error {
+                font-weight: normal;
+                margin-bottom: 0;
+                display: inline-block;
+                font-size: .85em;
+                @include opacity(.55);
+                position: absolute;
+                top: -25px;
+          }
+       }
     }
 
     .help__format-text {

webapp/sass/responsive/_mobile.scss

@@ -1073,6 +1073,11 @@
                     margin: .5em 0;
                     top: 0;
                 }
+
+                .post-error {
+                    top: 0;
+                    left: 0;
+              }
             }
         }
 

webapp/sass/responsive/_tablet.scss

@@ -42,6 +42,10 @@
                 top: 0;
                 left: 32px;
                 position: relative;
+
+                .sidebar--right & {
+                    left: 0;
+                }
             }
         }