PLT-6486 Add an `@username` button to the profile popover, that puts the username in the post when clicked (#6349)

* PLT-6486 Add an `@username` button to the profile popover, that puts the username in the post when clicked

* PLT-6486 Display `@username` mention on the right text area on center or RHS.

* Disable @mentions from profile popover on searches, mentions and pinned posts. Fix js errors.

* Control undefined post in SearchStore that causes an exception.

1 files changed, 30 insertions, 2 deletions

diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx
index 3c57f41b6..9e7d7636a 100644
--- a/webapp/components/profile_popover.jsx
+++ b/webapp/components/profile_popover.jsx
@@ -24,6 +24,7 @@ export default class ProfilePopover extends React.Component {
 
         this.initWebrtc = this.initWebrtc.bind(this);
         this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
+        this.handleMentionKeyClick = this.handleMentionKeyClick.bind(this);
         this.state = {
             currentUserId: UserStore.getCurrentId(),
             loadingDMChannel: -1
@@ -103,6 +104,18 @@ export default class ProfilePopover extends React.Component {
         }
     }
 
+    handleMentionKeyClick(e) {
+        e.preventDefault();
+
+        if (!this.props.user) {
+            return;
+        }
+        if (this.props.hide) {
+            this.props.hide();
+        }
+        GlobalActions.emitPopoverMentionKeyClick(this.props.isRHS, this.props.user.username);
+    }
+
     render() {
         const popoverProps = Object.assign({}, this.props);
         delete popoverProps.user;
@@ -110,6 +123,8 @@ export default class ProfilePopover extends React.Component {
         delete popoverProps.status;
         delete popoverProps.isBusy;
         delete popoverProps.hide;
+        delete popoverProps.isRHS;
+        delete popoverProps.hasMention;
 
         let webrtc;
         const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@@ -179,6 +194,7 @@ export default class ProfilePopover extends React.Component {
                     delayShow={Constants.WEBRTC_TIME_DELAY}
                     placement='top'
                     overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>}
+                    key='user-popover-fullname'
                 >
                     <div
                         className='overflow--ellipsis text-nowrap padding-bottom'
@@ -247,10 +263,15 @@ export default class ProfilePopover extends React.Component {
             dataContent.push(webrtc);
         }
 
+        let title = `@${this.props.user.username}`;
+        if (this.props.hasMention) {
+            title = <a onClick={this.handleMentionKeyClick}>{title}</a>;
+        }
+
         return (
             <Popover
                 {...popoverProps}
-                title={'@' + this.props.user.username}
+                title={title}
                 id='user-profile-popover'
             >
                 {dataContent}
@@ -259,11 +280,18 @@ export default class ProfilePopover extends React.Component {
     }
 }
 
+ProfilePopover.defaultProps = {
+    isRHS: false,
+    hasMention: false
+};
+
 ProfilePopover.propTypes = Object.assign({
     src: PropTypes.string.isRequired,
     user: PropTypes.object.isRequired,
     status: PropTypes.string,
     isBusy: PropTypes.bool,
-    hide: PropTypes.func
+    hide: PropTypes.func,
+    isRHS: PropTypes.bool,
+    hasMention: PropTypes.bool
 }, Popover.propTypes);
 delete ProfilePopover.propTypes.id;