[PLT-1031] Update clicking on @mention to show the contact card (#6989)

* update clicking on @mention to show the contact card

* update per comment - getUserFromMentionName and suffix

webapp/components/at_mention/at_mention.jsx

@@ -1,40 +1,48 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import ProfilePopover from 'components/profile_popover.jsx';
+import {Client4} from 'mattermost-redux/client';
+
 import React from 'react';
 import PropTypes from 'prop-types';
+import {OverlayTrigger} from 'react-bootstrap';
 
 export default class AtMention extends React.PureComponent {
     static propTypes = {
         mentionName: PropTypes.string.isRequired,
-        usersByUsername: PropTypes.object.isRequired,
+        usersByUsername: PropTypes.object.isRequired
-        actions: PropTypes.shape({
-            searchForTerm: PropTypes.func.isRequired
-        }).isRequired
     };
 
     constructor(props) {
         super(props);
 
+        this.hideProfilePopover = this.hideProfilePopover.bind(this);
+
         this.state = {
-            username: this.getUsernameFromMentionName(props)
+            user: this.getUserFromMentionName(props)
         };
     }
 
     componentWillReceiveProps(nextProps) {
         if (nextProps.mentionName !== this.props.mentionName || nextProps.usersByUsername !== this.props.usersByUsername) {
             this.setState({
-                username: this.getUsernameFromMentionName(nextProps)
+                user: this.getUserFromMentionName(nextProps)
             });
         }
     }
 
-    getUsernameFromMentionName(props) {
+    hideProfilePopover() {
+        this.refs.overlay.hide();
+    }
+
+    getUserFromMentionName(props) {
+        const usersByUsername = props.usersByUsername;
         let mentionName = props.mentionName;
 
         while (mentionName.length > 0) {
-            if (props.usersByUsername[mentionName]) {
+            if (usersByUsername[mentionName]) {
-                return props.usersByUsername[mentionName].username;
+                return usersByUsername[mentionName];
             }
 
             // Repeatedly trim off trailing punctuation in case this is at the end of a sentence
@@ -48,30 +56,31 @@ export default class AtMention extends React.PureComponent {
         return '';
     }
 
-    search = (e) => {
-        e.preventDefault();
-
-        this.props.actions.searchForTerm(this.state.username);
-    }
-
     render() {
-        const username = this.state.username;
+        if (!this.state.user) {
-
-        if (!username) {
             return <span>{'@' + this.props.mentionName}</span>;
         }
 
-        const suffix = this.props.mentionName.substring(username.length);
+        const user = this.state.user;
+        const suffix = this.props.mentionName.substring(user.username.length);
 
         return (
             <span>
-                <a
+                <OverlayTrigger
-                    className='mention-link'
+                    ref='overlay'
-                    href='#'
+                    trigger='click'
-                    onClick={this.search}
+                    placement='right'
+                    rootClose={true}
+                    overlay={
+                        <ProfilePopover
+                            user={user}
+                            src={Client4.getProfilePictureUrl(user.id, user.last_picture_update)}
+                            hide={this.hideProfilePopover}
+                        />
+                    }
                 >
-                    {'@' + username}
+                    <a className='mention-link'>{'@' + user.username}</a>
-                </a>
+                </OverlayTrigger>
                 {suffix}
             </span>
         );

webapp/components/at_mention/index.jsx

@@ -5,8 +5,6 @@ import {connect} from 'react-redux';
 
 import {getUsersByUsername} from 'mattermost-redux/selectors/entities/users';
 
-import {searchForTerm} from 'actions/post_actions.jsx';
-
 import AtMention from './at_mention.jsx';
 
 function mapStateToProps(state, ownProps) {
@@ -16,12 +14,4 @@ function mapStateToProps(state, ownProps) {
     };
 }
 
-function mapDispatchToProps() {
+export default connect(mapStateToProps)(AtMention);
-    return {
-        actions: {
-            searchForTerm
-        }
-    };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(AtMention);