PLT-3470: Changed all instances of user list to show full name, username, and nickname (#6994)

5 files changed, 43 insertions, 14 deletions

diff --git a/webapp/components/add_users_to_team/add_users_to_team.jsx b/webapp/components/add_users_to_team/add_users_to_team.jsx
index e3eb8477b..b86176c34 100644
--- a/webapp/components/add_users_to_team/add_users_to_team.jsx
+++ b/webapp/components/add_users_to_team/add_users_to_team.jsx
@@ -11,7 +11,7 @@ import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import Constants from 'utils/constants.jsx';
-import {displayUsernameForUser} from 'utils/utils.jsx';
+import {displayEntireNameForUser} from 'utils/utils.jsx';
 import {Client4} from 'mattermost-redux/client';
 
 import PropTypes from 'prop-types';
@@ -178,7 +178,7 @@ export default class AddUsersToTeam extends React.Component {
                     className='more-modal__details'
                 >
                     <div className='more-modal__name'>
-                        {displayUsernameForUser(option)}
+                        {displayEntireNameForUser(option)}
                     </div>
                     <div className='more-modal__description'>
                         {option.email}
diff --git a/webapp/components/more_direct_channels/more_direct_channels.jsx b/webapp/components/more_direct_channels/more_direct_channels.jsx
index 0e50eca72..46c04c46e 100644
--- a/webapp/components/more_direct_channels/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels/more_direct_channels.jsx
@@ -11,7 +11,7 @@ import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import Constants from 'utils/constants.jsx';
-import {displayUsernameForUser} from 'utils/utils.jsx';
+import {displayEntireNameForUser} from 'utils/utils.jsx';
 import {Client4} from 'mattermost-redux/client';
 
 import PropTypes from 'prop-types';
@@ -236,7 +236,7 @@ export default class MoreDirectChannels extends React.Component {
                     className='more-modal__details'
                 >
                     <div className='more-modal__name'>
-                        {displayUsernameForUser(option)}
+                        {displayEntireNameForUser(option)}
                     </div>
                     <div className='more-modal__description'>
                         {option.email}
diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx
index c669231f7..256f09d0e 100644
--- a/webapp/components/popover_list_members/popover_list_members.jsx
+++ b/webapp/components/popover_list_members/popover_list_members.jsx
@@ -98,8 +98,8 @@ export default class PopoverListMembers extends React.Component {
 
         if (members && teamMembers) {
             members.sort((a, b) => {
-                const aName = Utils.displayUsername(a.id);
-                const bName = Utils.displayUsername(b.id);
+                const aName = Utils.displayEntireName(a.id);
+                const bName = Utils.displayEntireName(b.id);
 
                 return aName.localeCompare(bName);
             });
@@ -112,7 +112,7 @@ export default class PopoverListMembers extends React.Component {
 
                 let name = '';
                 if (teamMembers[m.username]) {
-                    name = Utils.displayUsername(teamMembers[m.username].id);
+                    name = Utils.displayEntireNameForUser(teamMembers[m.username]);
                 }
 
                 if (name) {
diff --git a/webapp/components/user_list_row.jsx b/webapp/components/user_list_row.jsx
index c8a4ac7ba..af71a8f0d 100644
--- a/webapp/components/user_list_row.jsx
+++ b/webapp/components/user_list_row.jsx
@@ -14,12 +14,6 @@ import React from 'react';
 import {FormattedHTMLMessage} from 'react-intl';
 
 export default function UserListRow({user, extraInfo, actions, actionProps, actionUserProps, userCount}) {
-    const displayName = Utils.displayUsernameForUser(user);
-    let name = `${displayName} (@${user.username})`;
-    if (displayName === user.username) {
-        name = user.username;
-    }
-
     let buttons = null;
     if (actions) {
         buttons = actions.map((Action, index) => {
@@ -80,7 +74,7 @@ export default function UserListRow({user, extraInfo, actions, actionProps, acti
                     id={userCountID}
                     className='more-modal__name'
                 >
-                    {name}
+                    {Utils.displayEntireNameForUser(user)}
                 </div>
                 <div
                     id={userCountEmail}
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 0bd8c7bff..da5436737 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -1003,10 +1003,16 @@ export function getDisplayName(user) {
     return user.username;
 }
 
+/**
+ * Gets the display name of the user with the specified id, respecting the TeammateNameDisplay configuration setting
+ */
 export function displayUsername(userId) {
     return displayUsernameForUser(UserStore.getProfile(userId));
 }
 
+/**
+ * Gets the display name of the specified user, respecting the TeammateNameDisplay configuration setting
+ */
 export function displayUsernameForUser(user) {
     if (user) {
         const nameFormat = global.window.mm_config.TeammateNameDisplay;
@@ -1023,6 +1029,35 @@ export function displayUsernameForUser(user) {
     return '';
 }
 
+/**
+ * Gets the entire name, including username, full name, and nickname, of the user with the specified id
+ */
+export function displayEntireName(userId) {
+    return displayEntireNameForUser(UserStore.getProfile(userId));
+}
+
+/**
+ * Gets the entire name, including username, full name, and nickname, of the specified user
+ */
+export function displayEntireNameForUser(user) {
+    if (!user) {
+        return '';
+    }
+
+    let displayName = user.username;
+    const fullName = getFullName(user);
+
+    if (fullName && user.nickname) {
+        displayName += ` - ${fullName} (${user.nickname})`;
+    } else if (fullName) {
+        displayName += ` - ${fullName}`;
+    } else if (user.nickname) {
+        displayName += ` - ${user.nickname}`;
+    }
+
+    return displayName;
+}
+
 export function imageURLForUser(userIdOrObject) {
     if (typeof userIdOrObject == 'string') {
         const profile = UserStore.getProfile(userIdOrObject);