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/profile_picture.jsx b/webapp/components/profile_picture.jsx
index 17a4ddc65..26e9f30d9 100644
--- a/webapp/components/profile_picture.jsx
+++ b/webapp/components/profile_picture.jsx
@@ -7,6 +7,11 @@ import React from 'react';
 import {OverlayTrigger} from 'react-bootstrap';
 
 export default class ProfilePicture 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;
@@ -35,6 +40,10 @@ export default class ProfilePicture extends React.Component {
         return false;
     }
 
+    hideProfilePopover() {
+        this.refs.overlay.hide();
+    }
+
     render() {
         let statusClass = '';
         if (this.props.status) {
@@ -43,6 +52,7 @@ export default class ProfilePicture extends React.Component {
         if (this.props.user) {
             return (
                 <OverlayTrigger
+                    ref='overlay'
                     trigger='click'
                     placement='right'
                     rootClose={true}
@@ -52,6 +62,7 @@ export default class ProfilePicture extends React.Component {
                             src={this.props.src}
                             status={this.props.status}
                             isBusy={this.props.isBusy}
+                            hide={this.hideProfilePopover}
                         />
                 }
                 >