1 files changed, 19 insertions, 53 deletions

diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx
index 8e14fa5fa..17a4ddc65 100644
--- a/webapp/components/profile_picture.jsx
+++ b/webapp/components/profile_picture.jsx
@@ -1,12 +1,17 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
+import ProfilePopover from './profile_popover.jsx';
 import * as Utils from 'utils/utils.jsx';
-import UserStore from 'stores/user_store.jsx';
+
 import React from 'react';
-import {Popover, OverlayTrigger} from 'react-bootstrap';
+import {OverlayTrigger} from 'react-bootstrap';
 
 export default class ProfilePicture extends React.Component {
     shouldComponentUpdate(nextProps) {
+        if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
+            return true;
+        }
+
         if (nextProps.src !== this.props.src) {
             return true;
         }
@@ -23,71 +28,31 @@ export default class ProfilePicture extends React.Component {
             return true;
         }
 
+        if (nextProps.isBusy !== this.props.isBusy) {
+            return true;
+        }
+
         return false;
     }
 
     render() {
-        let email = '';
         let statusClass = '';
         if (this.props.status) {
             statusClass = 'status-' + this.props.status;
         }
         if (this.props.user) {
-            email = this.props.user.email;
-            var dataContent = [];
-            dataContent.push(
-                <img
-                    className='user-popover__image'
-                    src={this.props.src}
-                    height='128'
-                    width='128'
-                    key='user-popover-image'
-                />
-                );
-            const fullname = Utils.getFullName(this.props.user);
-            if (fullname) {
-                dataContent.push(
-                    <div
-                        data-toggle='tooltip'
-                        title={fullname}
-                        key='user-popover-fullname'
-                    >
-                        <p
-                            className='text-nowrap'
-                        >
-                            {fullname}
-                        </p>
-                    </div>
-                        );
-            }
-            if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user.id === UserStore.getCurrentId()) {
-                dataContent.push(
-                    <div
-                        data-toggle='tooltip'
-                        title={email}
-                        key='user-popover-email'
-                    >
-                        <a
-                            href={'mailto:' + email}
-                            className='text-nowrap text-lowercase user-popover__email'
-                        >
-                            {email}
-                        </a>
-                    </div>
-                );
-            }
             return (
                 <OverlayTrigger
                     trigger='click'
                     placement='right'
                     rootClose={true}
                     overlay={
-                        <Popover
-                            title={'@' + this.props.user.username}
-                            id='user-profile-popover'
-                        >
-                            {dataContent}
-                        </Popover>
+                        <ProfilePopover
+                            user={this.props.user}
+                            src={this.props.src}
+                            status={this.props.status}
+                            isBusy={this.props.isBusy}
+                        />
                 }
                 >
                     <span className={`status-wrapper ${statusClass}`}>
@@ -123,5 +88,6 @@ ProfilePicture.propTypes = {
     status: React.PropTypes.string,
     width: React.PropTypes.string,
     height: React.PropTypes.string,
-    user: React.PropTypes.object
+    user: React.PropTypes.object,
+    isBusy: React.PropTypes.bool
 };