Merge pull request #1512 from rgarmsen2295/plt-995b

PLT-995 Applies name display preference setting in more places

web/react/components/member_list_item.jsx

@@ -110,7 +110,7 @@ export default class MemberListItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <div className='member-name'>{member.username}</div>
+                    <div className='member-name'>{Utils.displayUsername(member.id)}</div>
                     <div className='member-description'>{member.email}</div>
                 </td>
                 <td className='td--action lg'>{invite}</td>

web/react/components/member_list_team_item.jsx

@@ -174,7 +174,7 @@ export default class MemberListTeamItem extends React.Component {
                         height='36'
                         width='36'
                     />
-                    <span className='member-name'>{Utils.getDisplayName(user)}</span>
+                    <span className='member-name'>{Utils.displayUsername(user.id)}</span>
                     <span className='member-email'>{email}</span>
                     <div className='dropdown member-drop'>
                         <a

web/react/components/popover_list_members.jsx

@@ -5,6 +5,7 @@ import UserStore from '../stores/user_store.jsx';
 var Popover = ReactBootstrap.Popover;
 var Overlay = ReactBootstrap.Overlay;
 import * as Utils from '../utils/utils.jsx';
+import Constants from '../utils/constants.jsx';
 
 import ChannelStore from '../stores/channel_store.jsx';
 
@@ -68,7 +69,7 @@ export default class PopoverListMembers extends React.Component {
     }
 
     render() {
-        let popoverHtml = [];
+        const popoverHtml = [];
         const members = this.props.members;
         const teamMembers = UserStore.getProfilesUsernameMap();
         const currentUserId = UserStore.getCurrentId();
@@ -76,35 +77,13 @@ export default class PopoverListMembers extends React.Component {
 
         if (members && teamMembers) {
             members.sort((a, b) => {
-                return a.username.localeCompare(b.username);
+                const aName = Utils.displayUsername(a.id);
+                const bName = Utils.displayUsername(b.id);
+
+                return aName.localeCompare(bName);
             });
 
             members.forEach((m, i) => {
-                const details = [];
-
-                const fullName = Utils.getFullName(m);
-                if (fullName) {
-                    details.push(
-                        <span
-                            key={`${m.id}__full-name`}
-                            className='full-name'
-                        >
-                            {fullName}
-                        </span>
-                    );
-                }
-
-                if (m.nickname) {
-                    const separator = fullName ? ' - ' : '';
-                    details.push(
-                        <span
-                            key={`${m.nickname}__nickname`}
-                        >
-                            {separator + m.nickname}
-                        </span>
-                    );
-                }
-
                 let button = '';
                 if (currentUserId !== m.id && ch.type !== 'D') {
                     button = (
@@ -118,7 +97,12 @@ export default class PopoverListMembers extends React.Component {
                     );
                 }
 
-                if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) {
+                let name = '';
+                if (teamMembers[m.username]) {
+                    name = Utils.displayUsername(teamMembers[m.username].id);
+                }
+
+                if (name && teamMembers[m.username].delete_at <= 0) {
                     popoverHtml.push(
                         <div
                             className='text-nowrap'
@@ -135,7 +119,7 @@ export default class PopoverListMembers extends React.Component {
                                 <div
                                     className='more-name'
                                 >
-                                    {m.username}
+                                    {name}
                                 </div>
                             </div>
                             <div
@@ -157,8 +141,8 @@ export default class PopoverListMembers extends React.Component {
             count = members.length;
         }
 
-        if (count > 20) {
+        if (count > Constants.MAX_CHANNEL_POPOVER_COUNT) {
-            countText = '20+';
+            countText = Constants.MAX_CHANNEL_POPOVER_COUNT + '+';
         } else if (count > 0) {
             countText = count.toString();
         }

web/react/components/post.jsx

@@ -87,6 +87,10 @@ export default class Post extends React.Component {
             return true;
         }
 
+        if (nextProps.displayNameType !== this.props.displayNameType) {
+            return true;
+        }
+
         if (this.getCommentCount(nextProps) !== this.getCommentCount(this.props)) {
             return true;
         }
@@ -224,5 +228,6 @@ Post.propTypes = {
     sameRoot: React.PropTypes.bool,
     hideProfilePic: React.PropTypes.bool,
     isLastComment: React.PropTypes.bool,
-    shouldHighlight: React.PropTypes.bool
+    shouldHighlight: React.PropTypes.bool,
+    displayNameType: React.PropTypes.string
 };

web/react/components/posts_view.jsx

@@ -2,15 +2,18 @@
 // See License.txt for license information.
 
 import UserStore from '../stores/user_store.jsx';
+import PreferenceStore from '../stores/preference_store.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
 import * as Utils from '../utils/utils.jsx';
 import Post from './post.jsx';
 import Constants from '../utils/constants.jsx';
+const Preferences = Constants.Preferences;
 
 export default class PostsView extends React.Component {
     constructor(props) {
         super(props);
 
+        this.updateState = this.updateState.bind(this);
         this.handleScroll = this.handleScroll.bind(this);
         this.isAtBottom = this.isAtBottom.bind(this);
         this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
@@ -22,6 +25,8 @@ export default class PostsView extends React.Component {
         this.jumpToPostNode = null;
         this.wasAtBottom = true;
         this.scrollHeight = 0;
+
+        this.state = {displayNameType: PreferenceStore.getPreference(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value};
     }
     static get SCROLL_TYPE_FREE() {
         return 1;
@@ -38,6 +43,9 @@ export default class PostsView extends React.Component {
     static get SCROLL_TYPE_POST() {
         return 5;
     }
+    updateState() {
+        this.setState({displayNameType: PreferenceStore.getPreference(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value});
+    }
     isAtBottom() {
         return ((this.refs.postlist.scrollHeight - this.refs.postlist.scrollTop) === this.refs.postlist.clientHeight);
     }
@@ -166,6 +174,7 @@ export default class PostsView extends React.Component {
                     isLastComment={isLastComment}
                     shouldHighlight={shouldHighlight}
                     onClick={() => EventHelpers.emitPostFocusEvent(post.id)} //eslint-disable-line no-loop-func
+                    displayNameType={this.state.displayNameType}
                 />
             );
 
@@ -272,9 +281,11 @@ export default class PostsView extends React.Component {
         }
         window.addEventListener('resize', this.handleResize);
         $(this.refs.postlist).perfectScrollbar();
+        PreferenceStore.addChangeListener(this.updateState);
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
+        PreferenceStore.removeChangeListener(this.updateState);
     }
     componentDidUpdate() {
         if (this.props.postList != null) {
@@ -282,7 +293,7 @@ export default class PostsView extends React.Component {
         }
         $(this.refs.postlist).perfectScrollbar('update');
     }
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (this.props.isActive !== nextProps.isActive) {
             return true;
         }
@@ -301,6 +312,9 @@ export default class PostsView extends React.Component {
         if (!Utils.areObjectsEqual(this.props.postList, nextProps.postList)) {
             return true;
         }
+        if (nextState.displayNameType !== this.state.displayNameType) {
+            return true;
+        }
 
         return false;
     }

web/react/components/user_profile.jsx

@@ -54,9 +54,11 @@ export default class UserProfile extends React.Component {
         }
     }
     render() {
-        var name = this.state.profile.username;
+        var name = Utils.displayUsername(this.state.profile.id);
         if (this.props.overwriteName) {
             name = this.props.overwriteName;
+        } else if (!name) {
+            name = '...';
         }
 
         if (this.props.disablePopover) {
@@ -107,7 +109,7 @@ export default class UserProfile extends React.Component {
                 rootClose={true}
                 overlay={
                     <Popover
-                        title={this.state.profile.username}
+                        title={name}
                         id='user-profile-popover'
                     >
                         {dataContent}

web/react/utils/constants.jsx

@@ -137,6 +137,7 @@ export default {
     ],
     MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     MAX_DMS: 20,
+    MAX_CHANNEL_POPOVER_COUNT: 20,
     DM_CHANNEL: 'D',
     OPEN_CHANNEL: 'O',
     PRIVATE_CHANNEL: 'P',

web/react/utils/utils.jsx

@@ -981,13 +981,15 @@ export function displayUsername(userId) {
     const nameFormat = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', {value: 'false'}).value;
 
     let username = '';
-    if (nameFormat === 'nickname_full_name') {
+    if (user) {
-        username = user.nickname || getFullName(user);
+        if (nameFormat === 'nickname_full_name') {
-    } else if (nameFormat === 'full_name') {
+            username = user.nickname || getFullName(user);
-        username = getFullName(user);
+        } else if (nameFormat === 'full_name') {
-    }
+            username = getFullName(user);
-    if (!username.trim().length) {
+        }
-        username = user.username;
+        if (!username.trim().length) {
+            username = user.username;
+        }
     }
 
     return username;