From 11f24a76a16d37a7c63b2907f2d6607094fcb49d Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Tue, 1 Sep 2020 14:58:46 -0400
Subject: [PATCH] Add word boundaries for (all | channel | here) (#4754)
 (#4762)

* Add word boundaries for (all | channel | here)

* do not include underscore in channel wide mention highlight

* Regex suggested in code review

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

* Restyle at_mention suffix

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
(cherry picked from commit dce5675f05a3f81a151313bd42f71ae6e9c9aa8f)

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
---
 .../__snapshots__/at_mention.test.js.snap          |  2 --
 app/components/at_mention/at_mention.js            | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 4 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 47405ba7c..7613e1e18 100644
--- a/app/components/at_mention/__snapshots__/at_mention.test.js.snap
+++ b/app/components/at_mention/__snapshots__/at_mention.test.js.snap
@@ -37,7 +37,6 @@ exports[`AtMention should match snapshot, with highlight 1`] = `
   >
     @John.Smith
   </Text>
-  
 </Text>
 `;
 
@@ -61,6 +60,5 @@ exports[`AtMention should match snapshot, without highlight 1`] = `
   >
     @Victor.Welch
   </Text>
-  
 </Text>
 `;
diff --git a/app/components/at_mention/at_mention.js b/app/components/at_mention/at_mention.js
index 76c661e11..667597bd5 100644
--- a/app/components/at_mention/at_mention.js
+++ b/app/components/at_mention/at_mention.js
@@ -146,6 +146,7 @@ export default class AtMention extends React.PureComponent {
         let highlighted;
         let mention;
         let suffix;
+        let suffixElement;
 
         if (user?.username) {
             suffix = this.props.mentionName.substring(user.username.length);
@@ -159,7 +160,7 @@ export default class AtMention extends React.PureComponent {
                 mention = group.name;
                 suffix = this.props.mentionName.substring(group.name.length);
             } else {
-                const pattern = new RegExp(/(all|channel|here)\.?/, 'i');
+                const pattern = new RegExp(/\b(all|channel|here)(?:\.\B|_\b|\b)/, 'i');
                 const mentionMatch = pattern.exec(mentionName);
 
                 if (mentionMatch) {
@@ -180,6 +181,15 @@ export default class AtMention extends React.PureComponent {
             onPress = isSearchResult ? onPostPress : this.goToUserProfile;
         }
 
+        if (suffix) {
+            const suffixStyle = {...styleText, color: this.props.theme.centerChannelColor};
+            suffixElement = (
+                <Text style={suffixStyle}>
+                    {suffix}
+                </Text>
+            );
+        }
+
         return (
             <Text
                 style={styleText}
@@ -189,7 +199,7 @@ export default class AtMention extends React.PureComponent {
                 <Text style={[highlighted ? null : mentionStyle, {backgroundColor}]}>
                     {'@' + mention}
                 </Text>
-                {suffix}
+                {suffixElement}
             </Text>
         );
     }