From bb8ebfba42f256da8b52a70f06a63853fa2b23c5 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Wed, 27 Nov 2019 02:12:10 +0100
Subject: [PATCH] Automated cherry pick of #3572 (#3612)

* 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 0000000000..0ce3a4bdb1
--- /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 d6a9850486..3dd96eb1ee 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 0000000000..0ba1bb4fc3
--- /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 07ac8c7334..93345614d0 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),
     };
 }