[GH-5915] Clicking on @mention of a user in a post shows the profile popover (#6129)

* post message at-mention profile pop-over

* remove hover effect to special mentions

* make non-clickable the non-existing at-mention username

* fix "video call" position

* use usernameMap instead of initially defined liteUsernameMap

* update per comments

3 files changed, 19 insertions, 11 deletions

diff --git a/webapp/utils/channel_intro_messages.jsx b/webapp/utils/channel_intro_messages.jsx
index 31ba8708d..cc5071047 100644
--- a/webapp/utils/channel_intro_messages.jsx
+++ b/webapp/utils/channel_intro_messages.jsx
@@ -5,14 +5,14 @@ import * as Utils from './utils.jsx';
 import ChannelInviteModal from 'components/channel_invite_modal';
 import EditChannelHeaderModal from 'components/edit_channel_header_modal.jsx';
 import ToggleModalButton from 'components/toggle_modal_button.jsx';
-import UserProfile from 'components/user_profile.jsx';
+import UserProfile from 'components/profile_popover/username_profile_popover.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import Constants from 'utils/constants.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import Client from 'client/web_client.jsx';
-import ProfilePicture from 'components/profile_picture.jsx';
+import ProfilePicture from 'components/profile_popover/picture_profile_popover.jsx';
 
 import {showManagementOptions} from './channel_utils.jsx';
 
diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx
index c2c71a4e1..bd718b363 100644
--- a/webapp/utils/text_formatting.jsx
+++ b/webapp/utils/text_formatting.jsx
@@ -166,8 +166,13 @@ export function autolinkAtMentions(text, tokens, usernameMap) {
         const index = tokens.size;
         const alias = `$MM_ATMENTION${index}`;
 
+        let tokenValue = `<span data-mention='${username}'><a class='mention-link' href='#'>${mention}</a></span>`;
+        if (Constants.SPECIAL_MENTIONS.indexOf(username) >= 0) {
+            tokenValue = mention;
+        }
+
         tokens.set(alias, {
-            value: `<a class='mention-link' href='#' data-mention='${username}'>${mention}</a>`,
+            value: tokenValue,
             originalText: mention
         });
         return alias;
@@ -181,8 +186,7 @@ export function autolinkAtMentions(text, tokens, usernameMap) {
             const truncated = usernameLower.substring(0, c);
             const suffix = usernameLower.substring(c);
 
-            // If we've found a username or run out of punctuation to trim off, render it as an at mention
-            if (mentionExists(truncated) || !punctuation.test(truncated[truncated.length - 1])) {
+            if (mentionExists(truncated) && (c === usernameLower.length || punctuation.test(usernameLower[c]))) {
                 const alias = addToken(truncated, '@' + truncated);
                 return prefix + alias + suffix;
             }
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index f56b9bb09..9b29c5362 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -989,12 +989,16 @@ export function changeOpacity(oldColor, opacity) {
 }
 
 export function getFullName(user) {
-    if (user.first_name && user.last_name) {
-        return user.first_name + ' ' + user.last_name;
-    } else if (user.first_name) {
-        return user.first_name;
-    } else if (user.last_name) {
-        return user.last_name;
+    if (user !== null && typeof user !== 'undefined' && typeof user === 'object') {
+        const firstName = user.hasOwnProperty('first_name') ? user.first_name : '';
+        const lastName = user.hasOwnProperty('last_name') ? user.last_name : '';
+        if (firstName && lastName) {
+            return firstName + ' ' + lastName;
+        } else if (firstName) {
+            return firstName;
+        } else if (lastName) {
+            return lastName;
+        }
     }
 
     return '';