From 9db54fb46296fce13e54c8d9eeccbce39cab1d20 Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Tue, 8 Sep 2020 12:20:55 -0400
Subject: [PATCH] MM-28296 Fix Android @mention render (#4764) (#4774)

* MM-28296 Fix Android @mention render

* Simplify mention style

* Update @mention snapshot

* @mention fix lint

* Address QA feedback

* QA Review

(cherry picked from commit c97b2be9270cde6b340bf88b1445dd4bacdc1d9a)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
---
 .../__snapshots__/at_mention.test.js.snap     |  8 +++---
 app/components/at_mention/at_mention.js       | 25 ++++++++++++++-----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/app/components/at_mention/__snapshots__/at_mention.test.js.snap b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
index 7613e1e18..ae4e354a1 100644
--- a/app/components/at_mention/__snapshots__/at_mention.test.js.snap
+++ b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
@@ -7,7 +7,6 @@ exports[`AtMention should match snapshot, no highlight 1`] = `
   <Text
     style={
       Array [
-        null,
         Object {
           "backgroundColor": "yellow",
         },
@@ -28,7 +27,9 @@ exports[`AtMention should match snapshot, with highlight 1`] = `
   <Text
     style={
       Array [
-        null,
+        Object {
+          "color": "#ff0000",
+        },
         Object {
           "backgroundColor": "yellow",
         },
@@ -52,9 +53,6 @@ exports[`AtMention should match snapshot, without highlight 1`] = `
         Object {
           "color": "#ff0000",
         },
-        Object {
-          "backgroundColor": "yellow",
-        },
       ]
     }
   >
diff --git a/app/components/at_mention/at_mention.js b/app/components/at_mention/at_mention.js
index 667597bd5..08753e193 100644
--- a/app/components/at_mention/at_mention.js
+++ b/app/components/at_mention/at_mention.js
@@ -142,40 +142,45 @@ export default class AtMention extends React.PureComponent {
         const {isSearchResult, mentionName, mentionStyle, onPostPress, teammateNameDisplay, textStyle, mentionKeys} = this.props;
         const {user} = this.state;
         const {backgroundColor, ...styleText} = StyleSheet.flatten(textStyle);
+        const mentionTextStyle = [];
+
         let canPress = false;
         let highlighted;
+        let isMention = false;
         let mention;
+        let onLongPress;
+        let onPress;
         let suffix;
         let suffixElement;
 
         if (user?.username) {
             suffix = this.props.mentionName.substring(user.username.length);
-            highlighted = mentionKeys.some((item) => item.key === user.username);
+            highlighted = mentionKeys.some((item) => item.key.includes(user.username));
             mention = displayUsername(user, teammateNameDisplay);
+            isMention = true;
             canPress = true;
         } else {
             const group = this.getGroupFromMentionName();
             if (group.allow_reference) {
                 highlighted = mentionKeys.some((item) => item.key === group.name);
+                isMention = true;
                 mention = group.name;
                 suffix = this.props.mentionName.substring(group.name.length);
             } else {
                 const pattern = new RegExp(/\b(all|channel|here)(?:\.\B|_\b|\b)/, 'i');
                 const mentionMatch = pattern.exec(mentionName);
+                highlighted = true;
 
                 if (mentionMatch) {
-                    highlighted = false;
                     mention = mentionMatch.length > 1 ? mentionMatch[1] : mentionMatch[0];
                     suffix = mentionName.replace(mention, '');
+                    isMention = true;
                 } else {
-                    highlighted = true;
                     mention = mentionName;
                 }
             }
         }
 
-        let onPress;
-        let onLongPress;
         if (canPress) {
             onLongPress = this.handleLongPress;
             onPress = isSearchResult ? onPostPress : this.goToUserProfile;
@@ -190,13 +195,21 @@ export default class AtMention extends React.PureComponent {
             );
         }
 
+        if (isMention) {
+            mentionTextStyle.push(mentionStyle);
+        }
+
+        if (highlighted) {
+            mentionTextStyle.push({backgroundColor});
+        }
+
         return (
             <Text
                 style={styleText}
                 onPress={onPress}
                 onLongPress={onLongPress}
             >
-                <Text style={[highlighted ? null : mentionStyle, {backgroundColor}]}>
+                <Text style={mentionTextStyle}>
                     {'@' + mention}
                 </Text>
                 {suffixElement}