PLT-3132 Add a direct message link to the contact pop-over (#4853)

* added DM button to the user picture and name popover

* removed isRequired from status and busy properties from profile_popover.jsx

1 files changed, 11 insertions, 0 deletions

diff --git a/webapp/components/user_profile.jsx b/webapp/components/user_profile.jsx
index 807c5f023..d0267c0d8 100644
--- a/webapp/components/user_profile.jsx
+++ b/webapp/components/user_profile.jsx
@@ -10,6 +10,11 @@ import {OverlayTrigger} from 'react-bootstrap';
 import React from 'react';
 
 export default class UserProfile extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.hideProfilePopover = this.hideProfilePopover.bind(this);
+    }
     shouldComponentUpdate(nextProps) {
         if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
             return true;
@@ -42,6 +47,10 @@ export default class UserProfile extends React.Component {
         return false;
     }
 
+    hideProfilePopover() {
+        this.refs.overlay.hide();
+    }
+
     render() {
         let name = '...';
         let profileImg = '';
@@ -60,6 +69,7 @@ export default class UserProfile extends React.Component {
 
         return (
             <OverlayTrigger
+                ref='overlay'
                 trigger='click'
                 placement='right'
                 rootClose={true}
@@ -69,6 +79,7 @@ export default class UserProfile extends React.Component {
                         src={profileImg}
                         status={this.props.status}
                         isBusy={this.props.isBusy}
+                        hide={this.hideProfilePopover}
                     />
                 }
             >