PLT-4894 channel switcher (CTRL+K) to match message autocomplete (#4733)

* PLT-4894 Change name display of direct messages in channel switcher (CTRL+K) to match message autocomplete

* Addressing feedback

2 files changed, 37 insertions, 6 deletions

diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 7f8bbf309..67a29fec3 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -152,6 +152,17 @@ export default class SuggestionBox extends React.Component {
             this.props.onChange(e);
         }
 
+        if (this.props.onItemSelected) {
+            const items = SuggestionStore.getItems(this.suggestionId);
+            const selection = SuggestionStore.getSelection(this.suggestionId);
+            for (const i of items) {
+                if (i.name === selection) {
+                    this.props.onItemSelected(i);
+                    break;
+                }
+            }
+        }
+
         textbox.focus();
 
         // set the caret position after the next rendering
@@ -199,6 +210,7 @@ export default class SuggestionBox extends React.Component {
 
         // Don't pass props used by SuggestionBox
         Reflect.deleteProperty(props, 'providers');
+        Reflect.deleteProperty(props, 'onItemSelected');
 
         const childProps = {
             ref: 'textbox',
@@ -280,5 +292,6 @@ SuggestionBox.propTypes = {
 
     // explicitly name any input event handlers we override and need to manually call
     onChange: React.PropTypes.func,
-    onKeyDown: React.PropTypes.func
+    onKeyDown: React.PropTypes.func,
+    onItemSelected: React.PropTypes.func
 };
diff --git a/webapp/components/suggestion/switch_channel_provider.jsx b/webapp/components/suggestion/switch_channel_provider.jsx
index cb907862a..b41bc4f11 100644
--- a/webapp/components/suggestion/switch_channel_provider.jsx
+++ b/webapp/components/suggestion/switch_channel_provider.jsx
@@ -7,7 +7,7 @@ import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
 import {autocompleteUsers} from 'actions/user_actions.jsx';
-
+import Client from 'client/web_client.jsx';
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import {Constants, ActionTypes} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
@@ -25,7 +25,7 @@ class SwitchChannelSuggestion extends Suggestion {
 
         let displayName = '';
         if (item.type === Constants.DM_CHANNEL) {
-            displayName = item.display_name + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)');
+            displayName = item.display_name;
         } else {
             displayName = item.display_name + ' (' + item.name + ')';
         }
@@ -36,7 +36,14 @@ class SwitchChannelSuggestion extends Suggestion {
         } else if (item.type === Constants.PRIVATE_CHANNEL) {
             icon = <div className='status'><i className='fa fa-lock'/></div>;
         } else {
-            icon = <div className='status'><i className='fa fa-user'/></div>;
+            icon = (
+                <div className='pull-left'>
+                    <img
+                        className='mention__image'
+                        src={Client.getUsersRoute() + '/' + item.id + '/image?time=' + item.update_at}
+                    />
+                </div>
+            );
         }
 
         return (
@@ -81,14 +88,25 @@ export default class SwitchChannelProvider {
                         const userMap = {};
                         for (let i = 0; i < users.length; i++) {
                             const user = users[i];
+                            let displayName = `@${user.username} `;
 
                             if (user.id === currentId) {
                                 continue;
                             }
 
+                            if ((user.first_name || user.last_name) && user.nickname) {
+                                displayName += `- ${Utils.getFullName(user)} (${user.nickname})`;
+                            } else if (user.nickname) {
+                                displayName += `- (${user.nickname})`;
+                            } else if (user.first_name || user.last_name) {
+                                displayName += `- ${Utils.getFullName(user)}`;
+                            }
+
                             const newChannel = {
-                                display_name: user.username,
-                                name: user.username + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)'),
+                                display_name: displayName,
+                                name: user.username,
+                                id: user.id,
+                                update_at: user.update_at,
                                 type: Constants.DM_CHANNEL
                             };
                             channels.push(newChannel);