PLT-946 Add status icon to the left of the username in DM channel (#3258)

Add a StatusIcon component to be able to display a status icon from anywhere

1 files changed, 20 insertions, 2 deletions

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 34ac53705..181d37ca2 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -15,6 +15,7 @@ import ChannelNotificationsModal from './channel_notifications_modal.jsx';
 import DeleteChannelModal from './delete_channel_modal.jsx';
 import RenameChannelModal from './rename_channel_modal.jsx';
 import ToggleModalButton from './toggle_modal_button.jsx';
+import StatusIcon from './status_icon.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -82,6 +83,7 @@ export default class ChannelHeader extends React.Component {
         SearchStore.addSearchChangeListener(this.onListenerChange);
         PreferenceStore.addChangeListener(this.onListenerChange);
         UserStore.addChangeListener(this.onListenerChange);
+        UserStore.addStatusesChangeListener(this.onListenerChange);
         $('.sidebar--left .dropdown-menu').perfectScrollbar();
         document.addEventListener('keydown', this.openRecentMentions);
     }
@@ -91,6 +93,7 @@ export default class ChannelHeader extends React.Component {
         SearchStore.removeSearchChangeListener(this.onListenerChange);
         PreferenceStore.removeChangeListener(this.onListenerChange);
         UserStore.removeChangeListener(this.onListenerChange);
+        UserStore.removeStatusesChangeListener(this.onListenerChange);
         document.removeEventListener('keydown', this.openRecentMentions);
     }
     onListenerChange() {
@@ -157,6 +160,21 @@ export default class ChannelHeader extends React.Component {
             showRenameChannelModal: false
         });
     }
+
+    getTeammateStatus() {
+        const channel = this.state.channel;
+
+        // get status for direct message channels
+        if (channel.type === 'D') {
+            const currentUserId = this.state.currentUser.id;
+            const teammate = this.state.users.find((user) => user.id !== currentUserId);
+            if (teammate) {
+                return UserStore.getStatus(teammate.id);
+            }
+        }
+        return null;
+    }
+
     render() {
         if (!this.validState()) {
             return null;
@@ -173,7 +191,7 @@ export default class ChannelHeader extends React.Component {
         );
         const popoverContent = (
             <Popover
-                id='hader-popover'
+                id='header-popover'
                 bStyle='info'
                 bSize='large'
                 placement='bottom'
@@ -459,7 +477,7 @@ export default class ChannelHeader extends React.Component {
                                             data-toggle='dropdown'
                                             aria-expanded='true'
                                         >
-                                            <strong className='heading'>{channelTitle} </strong>
+                                            <strong className='heading'><StatusIcon status={this.getTeammateStatus()}/>{channelTitle} </strong>
                                             <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'/>
                                         </a>
                                         <ul