MM-12755 Add reply mention highlight for replyBar (#2359)

* MM-12755 Add reply mention highlight for replyBar
* Update MM-redux hash

app/components/post/index.js

@@ -7,7 +7,7 @@ import {bindActionCreators} from 'redux';
 import {createPost, removePost} from 'mattermost-redux/actions/posts';
 import {Posts} from 'mattermost-redux/constants';
 import {isCurrentChannelReadOnly} from 'mattermost-redux/selectors/entities/channels';
-import {getPost, makeGetCommentCountForPost} from 'mattermost-redux/selectors/entities/posts';
+import {getPost, makeGetCommentCountForPost, makeIsPostCommentMention} from 'mattermost-redux/selectors/entities/posts';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {getMyPreferences, getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {isPostFlagged, isSystemMessage} from 'mattermost-redux/utils/post_utils';
@@ -39,11 +39,12 @@ function isConsecutivePost(state, ownProps) {
 
 function makeMapStateToProps() {
     const getCommentCountForPost = makeGetCommentCountForPost();
+    const isPostCommentMention = makeIsPostCommentMention();
     return function mapStateToProps(state, ownProps) {
         const post = getPost(state, ownProps.postId);
         const myPreferences = getMyPreferences(state);
         const currentUserId = getCurrentUserId(state);
-
+        const isCommentMention = isPostCommentMention(state, post.id);
         let isFirstReply = true;
         let isLastReply = true;
         let commentedOnPost = null;
@@ -80,6 +81,7 @@ function makeMapStateToProps() {
             commentedOnPost,
             theme: getTheme(state),
             isFlagged: isPostFlagged(post.id, myPreferences),
+            isCommentMention,
         };
     };
 }

app/components/post/post.js

@@ -62,6 +62,7 @@ export default class Post extends PureComponent {
         highlightPinnedOrFlagged: PropTypes.bool,
         skipFlaggedHeader: PropTypes.bool,
         skipPinnedHeader: PropTypes.bool,
+        isCommentMention: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -196,6 +197,7 @@ export default class Post extends PureComponent {
             isFirstReply,
             isLastReply,
             theme,
+            isCommentMention,
         } = this.props;
 
         if (!this.isReplyPost()) {
@@ -213,6 +215,10 @@ export default class Post extends PureComponent {
             replyBarStyle.push(style.replyBarLast);
         }
 
+        if (isCommentMention) {
+            replyBarStyle.push(style.commentMentionBgColor);
+        }
+
         return replyBarStyle;
     };
 
@@ -399,6 +405,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         replyBarLast: {
             paddingBottom: 10,
         },
+        commentMentionBgColor: {
+            backgroundColor: theme.mentionHighlightBg,
+            opacity: 1,
+        },
         highlight: {
             backgroundColor: changeOpacity(theme.mentionHighlightBg, 0.5),
         },

package-lock.json

@@ -8229,8 +8229,8 @@
       "integrity": "sha1-izqsWIuKZuSXXjzepn97sylgH6w="
     },
     "mattermost-redux": {
-      "version": "github:mattermost/mattermost-redux#638fb54604e795a4776e3ae6b0d06aed84a9bdb9",
-      "from": "github:mattermost/mattermost-redux#638fb54604e795a4776e3ae6b0d06aed84a9bdb9",
+      "version": "github:mattermost/mattermost-redux#f815f6bdc56003e9feac1e82f3d4ae52656eb8bd",
+      "from": "github:mattermost/mattermost-redux#f815f6bdc56003e9feac1e82f3d4ae52656eb8bd",
       "requires": {
         "deep-equal": "1.0.1",
         "eslint-plugin-header": "1.2.0",

package.json

@@ -17,7 +17,7 @@
     "intl": "1.2.5",
     "jail-monkey": "1.0.0",
     "jsc-android": "236355.1.0",
-    "mattermost-redux": "github:mattermost/mattermost-redux#638fb54604e795a4776e3ae6b0d06aed84a9bdb9",
+    "mattermost-redux": "github:mattermost/mattermost-redux#f815f6bdc56003e9feac1e82f3d4ae52656eb8bd",
     "mime-db": "1.37.0",
     "moment-timezone": "0.5.23",
     "prop-types": "15.6.2",