PLT-5441 Disabled the "Add Comment" button in the right-hand side unless there is a valid input (#5320)

webapp/components/create_comment.jsx

@@ -61,13 +61,15 @@ export default class CreateComment extends React.Component {
         MessageHistoryStore.resetHistoryIndex('comment');
 
         const draft = PostStore.getCommentDraft(this.props.rootId);
+        const enableAddButton = this.handleEnableAddButton(draft.message, draft.fileInfos);
         this.state = {
             message: draft.message,
             uploadsInProgress: draft.uploadsInProgress,
             fileInfos: draft.fileInfos,
             submitting: false,
             ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
-            showPostDeletedModal: false
+            showPostDeletedModal: false,
+            enableAddButton
         };
 
         this.lastBlurAt = 0;
@@ -142,7 +144,8 @@ export default class CreateComment extends React.Component {
             submitting: false,
             postError: null,
             fileInfos: [],
-            serverError: null
+            serverError: null,
+            enableAddButton: false
         });
 
         const fasterThanHumanWillClick = 150;
@@ -152,7 +155,12 @@ export default class CreateComment extends React.Component {
 
     handleSubmitCommand(message) {
         PostStore.storeCommentDraft(this.props.rootId, null);
-        this.setState({message: '', postError: null, fileInfos: []});
+        this.setState({
+            message: '',
+            postError: null,
+            fileInfos: [],
+            enableAddButton: false
+        });
 
         const args = {};
         args.channel_id = this.props.channelId;
@@ -216,7 +224,8 @@ export default class CreateComment extends React.Component {
             submitting: false,
             postError: null,
             fileInfos: [],
-            serverError: null
+            serverError: null,
+            enableAddButton: false
         });
 
         const fasterThanHumanWillClick = 150;
@@ -260,7 +269,12 @@ export default class CreateComment extends React.Component {
 
         $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight);
 
-        this.setState({message});
+        const enableAddButton = this.handleEnableAddButton(message, this.state.fileInfos);
+
+        this.setState({
+            message,
+            enableAddButton
+        });
     }
 
     handleKeyDown(e) {
@@ -293,7 +307,8 @@ export default class CreateComment extends React.Component {
             if (lastMessage !== null) {
                 e.preventDefault();
                 this.setState({
-                    message: lastMessage
+                    message: lastMessage,
+                    enableAddButton: true
                 });
             }
         }
@@ -334,7 +349,13 @@ export default class CreateComment extends React.Component {
         // Focus on preview if needed
         this.refs.preview.refs.container.scrollIntoViewIfNeeded();
 
-        this.setState({uploadsInProgress: draft.uploadsInProgress, fileInfos: draft.fileInfos});
+        const enableAddButton = this.handleEnableAddButton(draft.message, draft.fileInfos);
+
+        this.setState({
+            uploadsInProgress: draft.uploadsInProgress,
+            fileInfos: draft.fileInfos,
+            enableAddButton
+        });
     }
 
     handleUploadError(err, clientId) {
@@ -379,13 +400,21 @@ export default class CreateComment extends React.Component {
         draft.uploadsInProgress = uploadsInProgress;
         PostStore.storeCommentDraft(this.props.rootId, draft);
 
-        this.setState({fileInfos, uploadsInProgress});
+        const enableAddButton = this.handleEnableAddButton(this.state.message, fileInfos);
+
+        this.setState({fileInfos, uploadsInProgress, enableAddButton});
     }
 
     componentWillReceiveProps(newProps) {
         if (newProps.rootId !== this.props.rootId) {
             const draft = PostStore.getCommentDraft(newProps.rootId);
-            this.setState({message: draft.message, uploadsInProgress: draft.uploadsInProgress, fileInfos: draft.fileInfos});
+            const enableAddButton = this.handleEnableAddButton(draft.message, draft.fileInfos);
+            this.setState({
+                message: draft.message,
+                uploadsInProgress: draft.uploadsInProgress,
+                fileInfos: draft.fileInfos,
+                enableAddButton
+            });
         }
     }
 
@@ -415,6 +444,10 @@ export default class CreateComment extends React.Component {
         this.lastBlurAt = Date.now();
     }
 
+    handleEnableAddButton(message, fileInfos) {
+        return message.trim().length !== 0 || fileInfos.length !== 0;
+    }
+
     render() {
         let serverError = null;
         if (this.state.serverError) {
@@ -462,6 +495,11 @@ export default class CreateComment extends React.Component {
             );
         }
 
+        let addButtonClass = 'btn btn-primary comment-btn pull-right';
+        if (!this.state.enableAddButton) {
+            addButtonClass += ' disabled';
+        }
+
         return (
             <form onSubmit={this.handleSubmit}>
                 <div className='post-create'>
@@ -502,7 +540,7 @@ export default class CreateComment extends React.Component {
                     <div className='post-create-footer'>
                         <input
                             type='button'
-                            className='btn btn-primary comment-btn pull-right'
+                            className={addButtonClass}
                             value={Utils.localizeMessage('create_comment.comment', 'Add Comment')}
                             onClick={this.handleSubmit}
                         />

webapp/sass/layout/_post-right.scss

@@ -62,6 +62,11 @@
 
         .btn {
             margin-bottom: 10px;
+            
+            &.disabled {
+                background: grey !important;
+                border-color: transparent !important;
+            }
         }
 
         .custom-textarea {