Highlight comment bar for comments considered mentions (#3938)

webapp/components/post_view/components/post.jsx

@@ -236,7 +236,6 @@ 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}
@@ -255,6 +254,7 @@ export default class Post extends React.Component {
                                 handleCommentClick={this.handleCommentClick}
                                 compactDisplay={this.props.compactDisplay}
                                 previewCollapsed={this.props.previewCollapsed}
+                                isCommentMention={this.props.isCommentMention}
                             />
                         </div>
                     </div>

webapp/components/post_view/components/post_body.jsx

@@ -23,6 +23,10 @@ export default class PostBody extends React.Component {
         this.removePost = this.removePost.bind(this);
     }
     shouldComponentUpdate(nextProps) {
+        if (nextProps.isCommentMention !== this.props.isCommentMention) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
@@ -190,10 +194,15 @@ export default class PostBody extends React.Component {
             );
         }
 
+        let mentionHighlightClass = '';
+        if (this.props.isCommentMention) {
+            mentionHighlightClass = 'mention-comment';
+        }
+
         return (
             <div>
                 {comment}
-                <div className='post__body'>
+                <div className={'post__body ' + mentionHighlightClass}>
                     {messageWithAdditionalContent}
                     {fileAttachmentHolder}
                 </div>
@@ -208,5 +217,6 @@ PostBody.propTypes = {
     retryPost: React.PropTypes.func.isRequired,
     handleCommentClick: React.PropTypes.func.isRequired,
     compactDisplay: React.PropTypes.bool,
-    previewCollapsed: React.PropTypes.string
+    previewCollapsed: React.PropTypes.string,
+    isCommentMention: React.PropTypes.bool
 };

webapp/components/post_view/components/post_header.jsx

@@ -64,7 +64,6 @@ 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={!isSystemMessage}
@@ -92,7 +91,6 @@ 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,

webapp/components/post_view/components/post_info.jsx

@@ -250,7 +250,6 @@ export default class PostInfo extends React.Component {
         var post = this.props.post;
         var comments = '';
         var showCommentClass = '';
-        var highlightMentionClass = '';
         var commentCountText = this.props.commentCount;
         const flagIcon = Constants.FLAG_ICON_SVG;
 
@@ -260,15 +259,11 @@ 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) && this.props.allowReply) {
             comments = (
                 <a
                     href='#'
-                    className={'comment-icon__container' + showCommentClass + highlightMentionClass}
+                    className={'comment-icon__container' + showCommentClass}
                     onClick={this.props.handleCommentClick}
                 >
                     <span
@@ -386,7 +381,6 @@ 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.bool.isRequired,
     handleCommentClick: React.PropTypes.func.isRequired,

webapp/components/post_view/components/post_list.jsx

@@ -253,35 +253,34 @@ export default class PostList extends React.Component {
             }
 
             let commentCount = 0;
-            let nonOwnCommentsExists = false;
             let isCommentMention = false;
+            let lastCommentOnThreadTime = Number.MAX_SAFE_INTEGER;
             let commentRootId;
             if (parentPost) {
                 commentRootId = post.root_id;
             } else {
                 commentRootId = post.id;
             }
-            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;
-                                }
-                            }
-                        }
+
+            for (const postId in posts) {
+                if (posts[postId].root_id === commentRootId) {
+                    commentCount += 1;
+                    if (posts[postId].user_id === userId && (lastCommentOnThreadTime === Number.MAX_SAFE_INTEGER || lastCommentOnThreadTime < posts[postId].create_at)) {
+                        lastCommentOnThreadTime = posts[postId].create_at;
                     }
                 }
-                if (nonOwnCommentsExists && posts[commentRootId].user_id === this.props.currentUser.id && commentsNotifyLevel !== 'never') {
-                    isCommentMention = true;
+            }
+
+            if (parentPost && commentRootId) {
+                const commentsNotifyLevel = this.props.currentUser.notify_props.comments || 'never';
+                const notCurrentUser = post.user_id !== userId || (post.props && post.props.from_webhook);
+                const notViewed = this.props.lastViewed !== 0 && post.create_at > this.props.lastViewed;
+                if (notCurrentUser && notViewed) {
+                    if (commentsNotifyLevel === 'any' && (posts[commentRootId].user_id === userId || post.create_at > lastCommentOnThreadTime)) {
+                        isCommentMention = true;
+                    } else if (commentsNotifyLevel === 'root' && posts[commentRootId].user_id === userId) {
+                        isCommentMention = true;
+                    }
                 }
             }
 

webapp/sass/layout/_post.scss

@@ -681,6 +681,11 @@ body.ios {
         .post__body {
             border-left: 4px solid $gray;
             padding-left: 7px;
+
+            &.mention-comment {
+                border-left: 4px solid $yellow;
+                border-color: $yellow;
+            }
         }
     }
 

webapp/utils/utils.jsx

@@ -663,9 +663,7 @@ export function applyTheme(theme) {
 
     if (theme.mentionHighlightBg) {
         changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg, 1);
-    }
-
-    if (theme.mentionHighlightBg) {
+        changeCss('.mention-comment', 'border-color:' + theme.mentionHighlightBg + ' !important', 1);
         changeCss('.app__body .post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1);
     }
 
@@ -1375,4 +1373,4 @@ export function handleFormattedTextClick(e) {
             browserHistory.push(linkAttribute.value);
         }
     }
-}
+}