PLT-3252 Bring up profile popover after clicking on a profile picture… (#4144)

* PLT-3252 Bring up profile popover after clicking on a profile picture in a channel

* PLT-3252 Bring up profile popover after clicking on a profile picture in a channel

remove important

* fixed 'Cannot read property first_name of undefined' bug

* fix status indicator position

* refactoring per request

webapp/components/post_view/components/post.jsx

@@ -196,6 +196,7 @@ export default class Post extends React.Component {
             <ProfilePicture
                 src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
                 status={this.props.status}
+                user={this.props.user}
             />
         );
 

webapp/components/profile_picture.jsx

@@ -1,7 +1,9 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
-
+import * as Utils from 'utils/utils.jsx';
+import UserStore from 'stores/user_store.jsx';
 import React from 'react';
+import {Popover, OverlayTrigger} from 'react-bootstrap';
 
 export default class ProfilePicture extends React.Component {
     shouldComponentUpdate(nextProps) {
@@ -25,11 +27,80 @@ export default class ProfilePicture extends React.Component {
     }
 
     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>
+                }
+                >
+                    <span className={`status-wrapper ${statusClass}`}>
+                        <img
+                            className='more-modal__image'
+                            width={this.props.width}
+                            height={this.props.width}
+                            src={this.props.src}
+                        />
+                    </span>
+                </OverlayTrigger>
+            );
+        }
         return (
             <span className={`status-wrapper ${statusClass}`}>
                 <img
@@ -51,5 +122,6 @@ ProfilePicture.propTypes = {
     src: React.PropTypes.string.isRequired,
     status: React.PropTypes.string,
     width: React.PropTypes.string,
-    height: React.PropTypes.string
+    height: React.PropTypes.string,
+    user: React.PropTypes.object
 };

webapp/components/rhs_comment.jsx

@@ -283,6 +283,7 @@ export default class RhsComment extends React.Component {
                 status={this.props.status}
                 width='36'
                 height='36'
+                user={this.props.user}
             />
         );
 

webapp/components/rhs_root_post.jsx

@@ -284,6 +284,7 @@ export default class RhsRootPost extends React.Component {
                 status={this.props.status}
                 width='36'
                 height='36'
+                user={this.props.user}
             />
         );
 

webapp/components/search_results_item.jsx

@@ -4,6 +4,7 @@
 import $ from 'jquery';
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
 import UserProfile from './user_profile.jsx';
+import ProfilePicture from './profile_picture.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -97,11 +98,11 @@ export default class SearchResultsItem extends React.Component {
         }
 
         const profilePic = (
-            <img
+            <ProfilePicture
                 src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
-                height='36'
+                user={this.props.user}
-                width='36'
             />
+
         );
 
         let compactClass = '';

webapp/sass/layout/_post.scss

@@ -646,6 +646,10 @@ body.ios {
         }
     }
 
+    .post__img:hover {
+        cursor: pointer;
+    }
+
     .post--fail {
         position: relative;
     }