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

webapp/components/channel_switch_modal.jsx

@@ -24,6 +24,7 @@ export default class SwitchChannelModal extends React.Component {
         super();
 
         this.onChange = this.onChange.bind(this);
+        this.onItemSelected = this.onItemSelected.bind(this);
         this.onShow = this.onShow.bind(this);
         this.onHide = this.onHide.bind(this);
         this.onExited = this.onExited.bind(this);
@@ -72,6 +73,10 @@ export default class SwitchChannelModal extends React.Component {
         this.setState({text: e.target.value});
     }
 
+    onItemSelected(item) {
+        this.selected = item;
+    }
+
     handleKeyDown(e) {
         this.setState({
             error: ''
@@ -82,13 +87,10 @@ export default class SwitchChannelModal extends React.Component {
     }
 
     handleSubmit() {
-        const name = this.state.text.trim();
         let channel = null;
 
-        // TODO: Replace this hack with something reasonable
+        if (this.selected.type === Constants.DM_CHANNEL) {
-        if (name.indexOf(Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)')) > 0) {
+            const user = UserStore.getProfileByUsername(this.selected.name);
-            const dmUsername = name.substr(0, name.indexOf(Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)')) - 1);
-            const user = UserStore.getProfileByUsername(dmUsername);
 
             if (user) {
                 openDirectChannelToUser(
@@ -104,7 +106,7 @@ export default class SwitchChannelModal extends React.Component {
                 );
             }
         } else {
-            channel = ChannelStore.getByName(this.state.text.trim());
+            channel = ChannelStore.getByName(this.selected.name);
             this.switchToChannel(channel);
         }
     }
@@ -155,10 +157,10 @@ export default class SwitchChannelModal extends React.Component {
                         onChange={this.onChange}
                         value={this.state.text}
                         onKeyDown={this.handleKeyDown}
+                        onItemSelected={this.onItemSelected}
                         listComponent={SuggestionList}
                         maxLength='64'
                         providers={this.suggestionProviders}
-                        preventDefaultSubmit={false}
                         listStyle='bottom'
                     />
                 </Modal.Body>

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
 };

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,
+                                display_name: displayName,
-                                name: user.username + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)'),
+                                name: user.username,
+                                id: user.id,
+                                update_at: user.update_at,
                                 type: Constants.DM_CHANNEL
                             };
                             channels.push(newChannel);