From 9041e90276f5e7a7d1bb268b1175ba41f9f5bf39 Mon Sep 17 00:00:00 2001
From: CJ <38697367+imisshtml@users.noreply.github.com>
Date: Tue, 26 Nov 2019 20:08:05 -0500
Subject: [PATCH] MM-19834 Fixed direct mentions highlight color (#3572)

* MM-19834 Fixed direct mentions highlight color

Updated the AtMention to check if it will be highlighted before applying it's color. The highlight function was applying it's color before the AtMention color, so it was being overwritten.

* MM-19834 Start Unit Test

* MM-19834 Added Unit Tests

Added unit tests for the rendering of highlighted/non-highlighted displayname.
---
 .../__snapshots__/at_mention.test.js.snap     | 39 +++++++++++++++++
 app/components/at_mention/at_mention.js       |  6 ++-
 app/components/at_mention/at_mention.test.js  | 43 +++++++++++++++++++
 app/components/at_mention/index.js            |  3 +-
 4 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 app/components/at_mention/__snapshots__/at_mention.test.js.snap
 create mode 100644 app/components/at_mention/at_mention.test.js

diff --git a/app/components/at_mention/__snapshots__/at_mention.test.js.snap b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
new file mode 100644
index 000000000..0ce3a4bdb
--- /dev/null
+++ b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AtMention should match snapshot, no highlight 1`] = `
+<Text>
+  @John.Smith
+</Text>
+`;
+
+exports[`AtMention should match snapshot, with highlight 1`] = `
+<Text
+  onLongPress={[Function]}
+  onPress={[Function]}
+>
+  <Text
+    style={null}
+  >
+    @John.Smith
+  </Text>
+  
+</Text>
+`;
+
+exports[`AtMention should match snapshot, without highlight 1`] = `
+<Text
+  onLongPress={[Function]}
+  onPress={[Function]}
+>
+  <Text
+    style={
+      Object {
+        "color": "#ff0000",
+      }
+    }
+  >
+    @Victor.Welch
+  </Text>
+  
+</Text>
+`;
diff --git a/app/components/at_mention/at_mention.js b/app/components/at_mention/at_mention.js
index d6a985048..3dd96eb1e 100644
--- a/app/components/at_mention/at_mention.js
+++ b/app/components/at_mention/at_mention.js
@@ -16,6 +16,7 @@ import {goToScreen} from 'app/actions/navigation';
 export default class AtMention extends React.PureComponent {
     static propTypes = {
         isSearchResult: PropTypes.bool,
+        mentionKeys: PropTypes.array.isRequired,
         mentionName: PropTypes.string.isRequired,
         mentionStyle: CustomPropTypes.Style,
         onPostPress: PropTypes.func,
@@ -111,7 +112,7 @@ export default class AtMention extends React.PureComponent {
     };
 
     render() {
-        const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle} = this.props;
+        const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle, mentionKeys} = this.props;
         const {user} = this.state;
 
         if (!user.username) {
@@ -119,6 +120,7 @@ export default class AtMention extends React.PureComponent {
         }
 
         const suffix = this.props.mentionName.substring(user.username.length);
+        const highlighted = mentionKeys.some((item) => item.key === user.username);
 
         return (
             <Text
@@ -126,7 +128,7 @@ export default class AtMention extends React.PureComponent {
                 onPress={isSearchResult ? onPostPress : this.goToUserProfile}
                 onLongPress={this.handleLongPress}
             >
-                <Text style={mentionStyle}>
+                <Text style={highlighted ? null : mentionStyle}>
                     {'@' + displayUsername(user, teammateNameDisplay)}
                 </Text>
                 {suffix}
diff --git a/app/components/at_mention/at_mention.test.js b/app/components/at_mention/at_mention.test.js
new file mode 100644
index 000000000..0ba1bb4fc
--- /dev/null
+++ b/app/components/at_mention/at_mention.test.js
@@ -0,0 +1,43 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+import AtMention from './at_mention.js';
+
+describe('AtMention', () => {
+    const baseProps = {
+        usersByUsername: {},
+        mentionKeys: [{key: 'John.Smith'}, {key: 'Jane.Doe'}],
+        teammateNameDisplay: '',
+        mentionName: 'John.Smith',
+        mentionStyle: {color: '#ff0000'},
+        theme: {},
+    };
+
+    test('should match snapshot, no highlight', () => {
+        const wrapper = shallow(
+            <AtMention {...baseProps}/>
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot, with highlight', () => {
+        const wrapper = shallow(
+            <AtMention {...baseProps}/>
+        );
+
+        wrapper.setState({user: {username: 'John.Smith'}});
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should match snapshot, without highlight', () => {
+        const wrapper = shallow(
+            <AtMention {...baseProps}/>
+        );
+
+        wrapper.setState({user: {username: 'Victor.Welch'}});
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});
\ No newline at end of file
diff --git a/app/components/at_mention/index.js b/app/components/at_mention/index.js
index 07ac8c733..93345614d 100644
--- a/app/components/at_mention/index.js
+++ b/app/components/at_mention/index.js
@@ -3,7 +3,7 @@
 
 import {connect} from 'react-redux';
 
-import {getUsersByUsername} from 'mattermost-redux/selectors/entities/users';
+import {getUsersByUsername, getCurrentUserMentionKeys} from 'mattermost-redux/selectors/entities/users';
 
 import {getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
@@ -13,6 +13,7 @@ function mapStateToProps(state) {
     return {
         theme: getTheme(state),
         usersByUsername: getUsersByUsername(state),
+        mentionKeys: getCurrentUserMentionKeys(state),
         teammateNameDisplay: getTeammateNameDisplaySetting(state),
     };
 }