PLT-914 Add mention notifications for replies on a comment thread (#3130)

* PLT-914 Add mention notifications for replies on a comment thread

* remove useless store method
fix highlighting comments posted before th user write something to thread

* refactor out isCommentMention function after rebase

* change comment bar highlighting to replay icon mention highlighting

* settings and always visible highlight

* fix unit tests for new settings

* change highlight behaviour
- if any message in comment thread generates mention - all thread is highlighted
- remove always visible highlightion

* fix bug about the textarea in the center channel not clearing

* fix default settings value notify_props.comments

* do not highlight own comments if there is no other user's messages in thread

* refactor out ReactDOM.findDOMNode

* refactor out using of UserStore from component

4 files changed, 39 insertions, 4 deletions

diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index ff443e355..3fdd8094e 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -76,6 +76,10 @@ export default class Post extends React.Component {
             return true;
         }
 
+        if (nextProps.isCommentMention !== this.props.isCommentMention) {
+            return true;
+        }
+
         if (nextProps.shouldHighlight !== this.props.shouldHighlight) {
             return true;
         }
@@ -231,6 +235,7 @@ export default class Post extends React.Component {
                                 post={post}
                                 sameRoot={this.props.sameRoot}
                                 commentCount={commentCount}
+                                isCommentMention={this.props.isCommentMention}
                                 handleCommentClick={this.handleCommentClick}
                                 handleDropdownOpened={this.handleDropdownOpened}
                                 isLastComment={this.props.isLastComment}
@@ -274,6 +279,7 @@ Post.propTypes = {
     compactDisplay: React.PropTypes.bool,
     previewCollapsed: React.PropTypes.string,
     commentCount: React.PropTypes.number,
+    isCommentMention: React.PropTypes.bool,
     useMilitaryTime: React.PropTypes.bool.isRequired,
     emojis: React.PropTypes.object.isRequired
 };
diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx
index e76358304..07b601baf 100644
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/webapp/components/post_view/components/post_header.jsx
@@ -63,6 +63,7 @@ export default class PostHeader extends React.Component {
                     <PostInfo
                         post={post}
                         commentCount={this.props.commentCount}
+                        isCommentMention={this.props.isCommentMention}
                         handleCommentClick={this.props.handleCommentClick}
                         handleDropdownOpened={this.props.handleDropdownOpened}
                         allowReply='true'
@@ -89,6 +90,7 @@ PostHeader.propTypes = {
     user: React.PropTypes.object,
     currentUser: React.PropTypes.object.isRequired,
     commentCount: React.PropTypes.number.isRequired,
+    isCommentMention: React.PropTypes.bool.isRequired,
     isLastComment: React.PropTypes.bool.isRequired,
     handleCommentClick: React.PropTypes.func.isRequired,
     handleDropdownOpened: React.PropTypes.func.isRequired,
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index d74be4c72..98639529e 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -174,6 +174,7 @@ export default class PostInfo extends React.Component {
         var post = this.props.post;
         var comments = '';
         var showCommentClass = '';
+        var highlightMentionClass = '';
         var commentCountText = this.props.commentCount;
 
         if (this.props.commentCount >= 1) {
@@ -182,11 +183,15 @@ export default class PostInfo extends React.Component {
             commentCountText = '';
         }
 
+        if (this.props.isCommentMention) {
+            highlightMentionClass = ' mention--highlight';
+        }
+
         if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && !Utils.isPostEphemeral(post)) {
             comments = (
                 <a
                     href='#'
-                    className={'comment-icon__container' + showCommentClass}
+                    className={'comment-icon__container' + showCommentClass + highlightMentionClass}
                     onClick={this.props.handleCommentClick}
                 >
                     <span
@@ -234,6 +239,7 @@ PostInfo.defaultProps = {
 PostInfo.propTypes = {
     post: React.PropTypes.object.isRequired,
     commentCount: React.PropTypes.number.isRequired,
+    isCommentMention: React.PropTypes.bool.isRequired,
     isLastComment: React.PropTypes.bool.isRequired,
     allowReply: React.PropTypes.string.isRequired,
     handleCommentClick: React.PropTypes.func.isRequired,
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index 70107c838..9f958a5b6 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -251,15 +251,35 @@ export default class PostList extends React.Component {
             }
 
             let commentCount = 0;
+            let nonOwnCommentsExists = false;
+            let isCommentMention = false;
             let commentRootId;
             if (parentPost) {
                 commentRootId = post.root_id;
             } else {
                 commentRootId = post.id;
             }
-            for (const postId in posts) {
-                if (posts[postId].root_id === commentRootId) {
-                    commentCount += 1;
+            if (commentRootId) {
+                const commentsNotifyLevel = this.props.currentUser.notify_props.comments || 'never';
+                for (const postId in posts) {
+                    if (posts[postId].root_id === commentRootId) {
+                        commentCount += 1;
+                        if (posts[postId].user_id !== this.props.currentUser.id) {
+                            nonOwnCommentsExists = true;
+                        }
+                        if (posts[postId].user_id === this.props.currentUser.id && commentsNotifyLevel === 'any' && !isCommentMention) {
+                            for (const nextPostId in posts) {
+                                if (posts[nextPostId].root_id === commentRootId && posts[nextPostId].user_id !== this.props.currentUser.id &&
+                                        posts[postId].create_at < posts[nextPostId].create_at) {
+                                    isCommentMention = true;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                if (nonOwnCommentsExists && posts[commentRootId].user_id === this.props.currentUser.id && commentsNotifyLevel !== 'never') {
+                    isCommentMention = true;
                 }
             }
 
@@ -279,6 +299,7 @@ export default class PostList extends React.Component {
                     currentUser={this.props.currentUser}
                     center={this.props.displayPostsInCenter}
                     commentCount={commentCount}
+                    isCommentMention={isCommentMention}
                     compactDisplay={this.props.compactDisplay}
                     previewCollapsed={this.props.previewsCollapsed}
                     useMilitaryTime={this.props.useMilitaryTime}