PLT-4943: Warn when editing a message > 4000 chars (#4789)

* added basic functionality

* css fixes

* css fixes part II: electric boogaloo

* removed css interference with theme changes, for this and post length error

webapp/components/create_post.jsx

@@ -494,7 +494,7 @@ export default class CreatePost extends React.Component {
 
         let postError = null;
         if (this.state.postError) {
-            const postErrorClass = 'control-label post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : '');
+            const postErrorClass = 'post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : '');
             postError = <label className={postErrorClass}>{this.state.postError}</label>;
         }
 

webapp/components/edit_post_modal.jsx

@@ -47,7 +47,8 @@ export default class EditPostModal extends React.Component {
             channel_id: '',
             comments: 0,
             refocusId: '',
-            ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter')
+            ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
+            postError: ''
         };
     }
 
@@ -58,6 +59,14 @@ export default class EditPostModal extends React.Component {
             channel_id: this.state.channel_id
         };
 
+        if (this.state.postError) {
+            this.setState({errorClass: 'animation--highlight'});
+            setTimeout(() => {
+                this.setState({errorClass: null});
+            }, Constants.ANIMATION_TIMEOUT);
+            return;
+        }
+
         if (updatedPost.message === this.state.originalText) {
             // no changes so just close the modal
             $('#edit_post').modal('hide');
@@ -90,9 +99,25 @@ export default class EditPostModal extends React.Component {
     }
 
     handleChange(e) {
+        const message = e.target.value;
         this.setState({
-            editText: e.target.value
+            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) {
@@ -195,9 +220,11 @@ export default class EditPostModal extends React.Component {
     }
 
     render() {
-        var error = (<div className='form-group'><br/></div>);
-        if (this.state.error) {
-            error = (<div className='form-group has-error'><br/><label className='control-label'>{this.state.error}</label></div>);
+        const errorBoxClass = 'edit-post-footer' + (this.state.postError ? ' has-error' : '');
+        let postError = null;
+        if (this.state.postError) {
+            const postErrorClass = 'post-error' + (this.state.errorClass ? (' ' + this.state.errorClass) : '');
+            postError = (<label className={postErrorClass}>{this.state.postError}</label>);
         }
 
         return (
@@ -242,7 +269,9 @@ export default class EditPostModal extends React.Component {
                                 id='edit_textbox'
                                 ref='editbox'
                             />
-                            {error}
+                            <div className={errorBoxClass}>
+                                {postError}
+                            </div>
                         </div>
                         <div className='modal-footer'>
                             <button

webapp/sass/components/_modal.scss

@@ -31,6 +31,21 @@
         .suggestion-list__content {
             max-height: 150px;
         }
+
+        .edit-post-footer {
+            font-size: 13px;
+            position: relative;
+            display: inline-block;
+
+            .post-error {
+                position: relative;
+                font-weight: normal;
+                margin-bottom: 0;
+                font-size: .85em;
+                @include opacity(.55);
+                top: 3px;
+            }
+        }
     }
 
     .row--invite {

webapp/sass/layout/_post.scss

@@ -448,20 +448,14 @@
         padding: 3px 0 0;
         position: relative;
 
-        .control-label {
+        .post-error {
             font-weight: normal;
             margin-bottom: 0;
-            position: relative;
-            top: -5px;
-
-            &.post-error {
-              display: inline-block;
-              font-size: .85em;
-              @include opacity(.55);
-              color: rgb(51, 51, 51);
-              position: absolute;
-              top: 4px;
-          }
+            display: inline-block;
+            font-size: .85em;
+            @include opacity(.55);
+            position: absolute;
+            top: 4px;
       }
   }
 

webapp/sass/responsive/_tablet.scss

@@ -32,14 +32,10 @@
                 display: none;
             }
 
-            .control-label {
+            .post-error {
                 top: 0;
-
-                &.post-error {
-                    left: 32px;
-                    position: relative;
-                    top: 0;
-                }
+                left: 32px;
+                position: relative;
             }
         }
 

webapp/sass/routes/_activity-log.scss

@@ -9,6 +9,7 @@
         position: absolute;
         top: 0;
         width: 100%;
+        display: inline-block;
     }
 }
 

webapp/utils/constants.jsx

@@ -865,6 +865,8 @@ export const Constants = {
     MENTION_SPECIAL: 'mention.special',
     DEFAULT_NOTIFICATION_DURATION: 5000,
     STATUS_INTERVAL: 60000,
+    AUTOCOMPLETE_TIMEOUT: 100,
+    ANIMATION_TIMEOUT: 1000,
     SEARCH_TIMEOUT_MILLISECONDS: 100
 };