PLT-2640 Added searching users by additional field when autocompleting @mentions (#3412)

* Added the ability to search users by their first/last name or nickname when using @mentions

* Changed @mention autocomplete to display a user's nickname

2 files changed, 41 insertions, 14 deletions

diff --git a/webapp/components/suggestion/at_mention_provider.jsx b/webapp/components/suggestion/at_mention_provider.jsx
index aec1252ea..e650ad3e7 100644
--- a/webapp/components/suggestion/at_mention_provider.jsx
+++ b/webapp/components/suggestion/at_mention_provider.jsx
@@ -16,12 +16,13 @@ const MaxUserSuggestions = 40;
 
 class AtMentionSuggestion extends Suggestion {
     render() {
-        const {item, isSelection} = this.props;
+        const isSelection = this.props.isSelection;
+        const user = this.props.item;
 
         let username;
         let description;
         let icon;
-        if (item.username === 'all') {
+        if (user.username === 'all') {
             username = 'all';
             description = (
                 <FormattedMessage
@@ -33,7 +34,7 @@ class AtMentionSuggestion extends Suggestion {
                 />
             );
             icon = <i className='mention__image fa fa-users fa-2x'/>;
-        } else if (item.username === 'channel') {
+        } else if (user.username === 'channel') {
             username = 'channel';
             description = (
                 <FormattedMessage
@@ -43,12 +44,20 @@ class AtMentionSuggestion extends Suggestion {
             );
             icon = <i className='mention__image fa fa-users fa-2x'/>;
         } else {
-            username = item.username;
-            description = Utils.getFullName(item);
+            username = user.username;
+
+            if ((user.first_name || user.last_name) && user.nickname) {
+                description = ` - ${Utils.getFullName(user)} (${user.nickname})`;
+            } else if (user.nickname) {
+                description = ` - (${user.nickname})`;
+            } else if (user.first_name || user.last_name) {
+                description = ` - ${Utils.getFullName(user)}`;
+            }
+
             icon = (
                 <img
                     className='mention__image'
-                    src={Client.getUsersRoute() + '/' + item.id + '/image?time=' + item.update_at}
+                    src={Client.getUsersRoute() + '/' + user.id + '/image?time=' + user.update_at}
                 />
             );
         }
@@ -81,17 +90,25 @@ class AtMentionSuggestion extends Suggestion {
 
 export default class AtMentionProvider {
     handlePretextChanged(suggestionId, pretext) {
-        const captured = (/@([a-z0-9\-\._]*)$/i).exec(pretext);
+        const captured = (/@([a-z0-9\-\._]*)$/i).exec(pretext.toLowerCase());
         if (captured) {
-            const usernamePrefix = captured[1];
+            const prefix = captured[1];
 
             const users = UserStore.getActiveOnlyProfiles(true);
-            let filtered = [];
+
+            const filtered = [];
 
             for (const id of Object.keys(users)) {
                 const user = users[id];
 
-                if (user.username.startsWith(usernamePrefix) && user.delete_at <= 0) {
+                if (user.delete_at > 0) {
+                    continue;
+                }
+
+                if (user.username.startsWith(prefix) ||
+                    (user.first_name && user.first_name.toLowerCase().startsWith(prefix)) ||
+                    (user.last_name && user.last_name.toLowerCase().startsWith(prefix)) ||
+                    (user.nickname && user.nickname.toLowerCase().startsWith(prefix))) {
                     filtered.push(user);
                 }
 
@@ -102,15 +119,26 @@ export default class AtMentionProvider {
 
             if (!pretext.startsWith('/msg')) {
                 // add dummy users to represent the @channel and @all special mentions when not using the /msg command
-                if ('channel'.startsWith(usernamePrefix)) {
+                if ('channel'.startsWith(prefix)) {
                     filtered.push({username: 'channel'});
                 }
-                if ('all'.startsWith(usernamePrefix)) {
+                if ('all'.startsWith(prefix)) {
                     filtered.push({username: 'all'});
                 }
             }
 
-            filtered = filtered.sort((a, b) => a.username.localeCompare(b.username));
+            filtered.sort((a, b) => {
+                const aPrefix = a.username.startsWith(prefix);
+                const bPrefix = b.username.startsWith(prefix);
+
+                if (aPrefix === bPrefix) {
+                    return a.username.localeCompare(b.username);
+                } else if (aPrefix) {
+                    return -1;
+                }
+
+                return 1;
+            });
 
             const mentions = filtered.map((user) => '@' + user.username);
 
diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index 82f626eaf..17f67d080 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -50,7 +50,6 @@
 
 .mention__fullname {
     @include opacity(.5);
-    padding-left: 10px;
 }
 
 .mention--highlight {