Fix group message names in channel switcher (#6246)

2 files changed, 16 insertions, 6 deletions

diff --git a/webapp/components/suggestion/switch_channel_provider.jsx b/webapp/components/suggestion/switch_channel_provider.jsx
index 67cda61ea..03930c3f4 100644
--- a/webapp/components/suggestion/switch_channel_provider.jsx
+++ b/webapp/components/suggestion/switch_channel_provider.jsx
@@ -12,7 +12,7 @@ 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';
-import {sortChannelsByDisplayName, buildGroupChannelName} from 'utils/channel_utils.jsx';
+import {sortChannelsByDisplayName, getChannelDisplayName} from 'utils/channel_utils.jsx';
 
 import React from 'react';
 
@@ -32,8 +32,8 @@ class SwitchChannelSuggestion extends Suggestion {
         } else if (item.type === Constants.PRIVATE_CHANNEL) {
             icon = <div className='status'><i className='fa fa-lock'/></div>;
         } else if (item.type === Constants.GM_CHANNEL) {
-            displayName = buildGroupChannelName(item.id);
-            icon = <div className='status status--group'>{UserStore.getProfileListInChannel(item.id, true).length}</div>;
+            displayName = getChannelDisplayName(item);
+            icon = <div className='status status--group'>{'G'}</div>;
         } else {
             icon = (
                 <div className='pull-left'>
@@ -81,7 +81,7 @@ export default class SwitchChannelProvider extends Provider {
                         if (channel.display_name.toLowerCase().indexOf(channelPrefix.toLowerCase()) !== -1) {
                             const newChannel = Object.assign({}, channel);
                             if (newChannel.type === Constants.GM_CHANNEL) {
-                                newChannel.name = buildGroupChannelName(newChannel.id);
+                                newChannel.name = getChannelDisplayName(newChannel);
                             }
                             channels.push(newChannel);
                         }
diff --git a/webapp/utils/channel_utils.jsx b/webapp/utils/channel_utils.jsx
index 2930e58b6..10d06fbe1 100644
--- a/webapp/utils/channel_utils.jsx
+++ b/webapp/utils/channel_utils.jsx
@@ -112,7 +112,9 @@ export function sortChannelsByDisplayName(a, b) {
     return a.name.localeCompare(b.name, locale, {numeric: true});
 }
 
-function getChannelDisplayName(channel) {
+const MAX_CHANNEL_NAME_LENGTH = 64;
+
+export function getChannelDisplayName(channel) {
     if (channel.type !== Constants.GM_CHANNEL) {
         return channel.display_name;
     }
@@ -120,7 +122,15 @@ function getChannelDisplayName(channel) {
     const currentUser = UserStore.getCurrentUser();
 
     if (currentUser) {
-        return channel.display_name.replace(currentUser.username + ', ', '');
+        let displayName = channel.display_name;
+        if (displayName.length >= MAX_CHANNEL_NAME_LENGTH) {
+            displayName += '...';
+        }
+        displayName = displayName.replace(currentUser.username + ', ', '').replace(currentUser.username, '').trim();
+        if (displayName[displayName.length - 1] === ',') {
+            return displayName.slice(0, -1);
+        }
+        return displayName;
     }
 
     return channel.display_name;