Changed information displayed in user list to obey display name settings

web/react/components/user_list_row.jsx

@@ -1,32 +1,18 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import Constants from '../utils/constants.jsx';
+import PreferenceStore from '../stores/preference_store.jsx';
 import * as Utils from '../utils/utils.jsx';
 
 export default function UserListRow({user, actions}) {
-    const details = [];
+    const nameFormat = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', '');
 
-    const fullName = Utils.getFullName(user);
-    if (fullName) {
-        details.push(
-            <span
-                key={`${user.id}__full-name`}
-                className='full-name'
-            >
-                {fullName}
-            </span>
-        );
-    }
-
-    if (user.nickname) {
-        const separator = fullName ? ' - ' : '';
-        details.push(
-            <span
-                key={`${user.nickname}__nickname`}
-            >
-                {separator + user.nickname}
-            </span>
-        );
+    let name = user.username;
+    if (user.nickname && nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME) {
+        name = `${user.nickname} (${user.username})`;
+    } else if ((user.first_name || user.last_name) && (nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME || nameFormat === Constants.Preferences.DISPLAY_PREFER_FULL_NAME)) {
+        name = `${Utils.getFullName(user)} (${user.username})`;
     }
 
     const buttons = actions.map((Action, index) => {
@@ -53,10 +39,10 @@ export default function UserListRow({user, actions}) {
                     className='user-list-item__details'
                 >
                     <div className='more-name'>
-                        {user.username}
+                        {name}
                     </div>
                     <div className='more-description'>
-                        {details}
+                        {user.email}
                     </div>
                 </div>
                 <div

web/react/utils/constants.jsx

@@ -437,6 +437,8 @@ export default {
     Preferences: {
         CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show',
         CATEGORY_DISPLAY_SETTINGS: 'display_settings',
+        DISPLAY_PREFER_NICKNAME: 'nickname_full_name',
+        DISPLAY_PREFER_FULL_NAME: 'full_name',
         CATEGORY_ADVANCED_SETTINGS: 'advanced_settings',
         TUTORIAL_STEP: 'tutorial_step'
     },

web/react/utils/utils.jsx

@@ -1082,9 +1082,9 @@ export function displayUsername(userId) {
 
     let username = '';
     if (user) {
-        if (nameFormat === 'nickname_full_name') {
+        if (nameFormat === Constants.Preferences.DISPLAY_PREFER_NICKNAME) {
             username = user.nickname || getFullName(user);
-        } else if (nameFormat === 'full_name') {
+        } else if (nameFormat === Constants.Preferences.DISPLAY_PREFER_FULL_NAME) {
             username = getFullName(user);
         }
         if (!username.trim().length) {