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, 59 insertions, 3 deletions

diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx
index 8b431b643..d7d9929ee 100644
--- a/webapp/components/profile_popover.jsx
+++ b/webapp/components/profile_popover.jsx
@@ -4,14 +4,17 @@
 import * as Utils from 'utils/utils.jsx';
 import UserStore from 'stores/user_store.jsx';
 import WebrtcStore from 'stores/webrtc_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import * as WebrtcActions from 'actions/webrtc_actions.jsx';
+import {openDirectChannelToUser} from 'actions/channel_actions.jsx';
 import Constants from 'utils/constants.jsx';
 const UserStatuses = Constants.UserStatuses;
 const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES;
 
 import {Popover, OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
+import {browserHistory} from 'react-router/es6';
 import React from 'react';
 
 export default class ProfilePopover extends React.Component {
@@ -19,8 +22,10 @@ export default class ProfilePopover extends React.Component {
         super(props);
 
         this.initWebrtc = this.initWebrtc.bind(this);
+        this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
         this.state = {
-            currentUserId: UserStore.getCurrentId()
+            currentUserId: UserStore.getCurrentId(),
+            loadingDMChannel: -1
         };
     }
     shouldComponentUpdate(nextProps) {
@@ -60,6 +65,33 @@ export default class ProfilePopover extends React.Component {
         return false;
     }
 
+    handleShowDirectChannel(e) {
+        e.preventDefault();
+
+        if (!this.props.user) {
+            return;
+        }
+
+        const user = this.props.user;
+
+        if (this.state.loadingDMChannel !== -1) {
+            return;
+        }
+
+        this.setState({loadingDMChannel: user.id});
+
+        openDirectChannelToUser(
+            user,
+            (channel) => {
+                this.setState({loadingDMChannel: -1});
+                if (this.props.hide) {
+                    this.props.hide();
+                }
+                browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name);
+            }
+        );
+    }
+
     initWebrtc() {
         if (this.props.status !== UserStatuses.OFFLINE && !WebrtcStore.isBusy()) {
             GlobalActions.emitCloseRightHandSide();
@@ -73,6 +105,7 @@ export default class ProfilePopover extends React.Component {
         delete popoverProps.src;
         delete popoverProps.status;
         delete popoverProps.isBusy;
+        delete popoverProps.hide;
 
         let webrtc;
         const userMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@@ -203,6 +236,28 @@ export default class ProfilePopover extends React.Component {
             );
         }
 
+        if (this.props.user.id !== UserStore.getCurrentId()) {
+            dataContent.push(
+                <div
+                    data-toggle='tooltip'
+                    key='user-popover-dm'
+                    className='popover-dm__content'
+                >
+                    <a
+                        href='#'
+                        className='text-nowrap text-lowercase user-popover__email'
+                        onClick={this.handleShowDirectChannel}
+                    >
+                        <i className='fa fa-paper-plane'/>
+                        <FormattedMessage
+                            id='user_profile.send.dm'
+                            defaultMessage='Send Message'
+                        />
+                    </a>
+                </div>
+            );
+        }
+
         return (
             <Popover
                 {...popoverProps}
@@ -218,7 +273,8 @@ export default class ProfilePopover extends React.Component {
 ProfilePopover.propTypes = Object.assign({
     src: React.PropTypes.string.isRequired,
     user: React.PropTypes.object.isRequired,
-    status: React.PropTypes.string.isRequired,
-    isBusy: React.PropTypes.bool.isRequired
+    status: React.PropTypes.string,
+    isBusy: React.PropTypes.bool,
+    hide: React.PropTypes.func
 }, Popover.propTypes);
 delete ProfilePopover.propTypes.id;