PLT-3185 Added support for DMs in Channel Switcher (#3260)

* Added support for DMs

* Checked username beginning characters

webapp/components/channel_switch_modal.jsx

@@ -4,12 +4,17 @@
 import SuggestionList from './suggestion/suggestion_list.jsx';
 import SuggestionBox from './suggestion/suggestion_box.jsx';
 import SwitchChannelProvider from './suggestion/switch_channel_provider.jsx';
+
 import {FormattedMessage} from 'react-intl';
 import {Modal} from 'react-bootstrap';
-import * as Utils from 'utils/utils.jsx';
+
 import ChannelStore from 'stores/channel_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+
 import Constants from 'utils/constants.jsx';
+import * as Utils from 'utils/utils.jsx';
 import * as ChannelActions from 'actions/channel_actions.jsx';
+
 import React from 'react';
 
 export default class SwitchChannelModal extends React.Component {
@@ -66,8 +71,17 @@ export default class SwitchChannelModal extends React.Component {
     }
 
     handleSubmit() {
-        const channel = ChannelStore.getByName(this.state.text.trim());
+        const name = this.state.text.trim();
-        if (channel !== null && channel.name === this.state.text.trim() && channel.type !== Constants.DM_CHANNEL) {
+        let channel = null;
+
+        if (name.indexOf(Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)')) > 0) {
+            const dmUsername = name.substr(0, name.indexOf(Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)')) - 1);
+            channel = ChannelStore.getByName(Utils.getDirectChannelNameByUsername(dmUsername, UserStore.getCurrentUser().username).trim());
+        } else {
+            channel = ChannelStore.getByName(this.state.text.trim());
+        }
+
+        if (channel !== null) {
             ChannelActions.goToChannel(channel);
             this.onHide();
         } else if (this.state.text !== '') {

webapp/components/suggestion/switch_channel_provider.jsx

@@ -6,6 +6,8 @@ import React from 'react';
 import ChannelStore from 'stores/channel_store.jsx';
 import SuggestionStore from 'stores/suggestion_store.jsx';
 import Suggestion from './suggestion.jsx';
+import Constants from 'utils/constants.jsx';
+import * as Utils from 'utils/utils.jsx';
 
 class SwitchChannelSuggestion extends Suggestion {
     render() {
@@ -16,7 +18,12 @@ class SwitchChannelSuggestion extends Suggestion {
             className += ' suggestion--selected';
         }
 
-        const displayName = item.display_name + ' (' + item.name + ')';
+        let displayName = '';
+        if (item.type === Constants.DM_CHANNEL) {
+            displayName = item.display_name + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)');
+        } else {
+            displayName = item.display_name + ' (' + item.name + ')';
+        }
 
         return (
             <div
@@ -39,6 +46,14 @@ export default class SwitchChannelProvider {
                 const channel = allChannels[id];
                 if (channel.display_name.toLowerCase().startsWith(channelPrefix.toLowerCase())) {
                     channels.push(channel);
+                } else if (channel.type === Constants.DM_CHANNEL && Utils.getDirectTeammate(channel.id).username.startsWith(channelPrefix.toLowerCase())) {
+                    // New channel to not modify existing channel
+                    const newChannel = {
+                        display_name: Utils.getDirectTeammate(channel.id).username,
+                        name: Utils.getDirectTeammate(channel.id).username + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)'),
+                        type: Constants.DM_CHANNEL
+                    };
+                    channels.push(newChannel);
                 }
             }
 

webapp/i18n/en.json

@@ -724,6 +724,7 @@
   "channel_switch_modal.not_found": "No matches found.",
   "channel_switch_modal.submit": "Switch",
   "channel_switch_modal.title": "Switch Channels",
+  "channel_switch_modal.dm": "(Direct Message)",
   "choose_auth_page.emailCreate": "Create new team with email address",
   "choose_auth_page.find": "Find my teams",
   "choose_auth_page.gitlabCreate": "Create new team with GitLab Account",

webapp/utils/utils.jsx

@@ -1147,6 +1147,13 @@ export function getDirectChannelName(id, otherId) {
     return handle;
 }
 
+export function getDirectChannelNameByUsername(username, otherUsername) {
+    const id = UserStore.getProfileByUsername(username).id;
+    const otherId = UserStore.getProfileByUsername(otherUsername).id;
+
+    return getDirectChannelName(id, otherId);
+}
+
 // Used to get the id of the other user from a DM channel
 export function getUserIdFromChannelName(channel) {
     var ids = channel.name.split('__');