PLT-3077 Add group messaging (mattermost#5489)

* Implement server changes for group messaging

* Majority of client-side implementation

* Some server updates

* Added new React multiselect component

* Fix style issues

* Add custom renderer for options

* Fix model test

* Update ENTER functionality for multiselect control

* Remove buttons from multiselect UI control

* Updating group messaging UI (mattermost#5524)

* Move filter controls up a component level

* Scroll with arrow keys

* Updating mobile layout for multiselect (mattermost#5534)

* Fix race condition when backspacing quickly

* Hidden or new GMs show up for regular messages

* Add overriding of number remaining text

* Add UI filtering for team if config setting set

* Add icon to channel switcher and class prop to status icon

* Minor updates per feedback

* Improving group messaging UI (mattermost#5563)

* UX changes per feedback

* Update email for group messages

* UI fixes for group messaging (mattermost#5587)

* Fix missing localization string

* Add maximum users message when adding members to GM

* Fix input clearing on Android

* Updating group messaging UI (mattermost#5603)

* Updating UI for group messaging (mattermost#5604)

actions/channel_actions.jsx

@@ -9,7 +9,7 @@ import ChannelStore from 'stores/channel_store.jsx';
 import * as ChannelUtils from 'utils/channel_utils.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
 
-import {loadProfilesAndTeamMembersForDMSidebar} from 'actions/user_actions.jsx';
+import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 
 import Client from 'client/web_client.jsx';
@@ -22,8 +22,12 @@ import {browserHistory} from 'react-router/es6';
 
 export function goToChannel(channel) {
  if (channel.fake) {
+ const user = UserStore.getProfileByUsername(channel.display_name);
+ if (!user) {
+ return;
+ }
  openDirectChannelToUser(
- UserStore.getProfileByUsername(channel.display_name),
+ user.id,
  () => {
  browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name);
  },
@@ -167,18 +171,18 @@ export function makeUserChannelMember(channelId, userId, success, error) {
  );
 }
 
-export function openDirectChannelToUser(user, success, error) {
- const channelName = Utils.getDirectChannelName(UserStore.getCurrentId(), user.id);
+export function openDirectChannelToUser(userId, success, error) {
+ const channelName = Utils.getDirectChannelName(UserStore.getCurrentId(), userId);
  const channel = ChannelStore.getByName(channelName);
 
  if (channel) {
  trackEvent('api', 'api_channels_join_direct');
- PreferenceStore.setPreference(Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, user.id, 'true');
- loadProfilesAndTeamMembersForDMSidebar();
+ PreferenceStore.setPreference(Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, userId, 'true');
+ loadProfilesForSidebar();
 
  AsyncClient.savePreference(
  Preferences.CATEGORY_DIRECT_CHANNEL_SHOW,
- user.id,
+ userId,
  'true'
  );
 
@@ -190,7 +194,7 @@ export function openDirectChannelToUser(user, success, error) {
  }
 
  Client.createDirectChannel(
- user.id,
+ userId,
  (data) => {
  Client.getChannel(
  data.id,
@@ -201,12 +205,12 @@ export function openDirectChannelToUser(user, success, error) {
  member: data2.member
  });
 
- PreferenceStore.setPreference(Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, user.id, 'true');
- loadProfilesAndTeamMembersForDMSidebar();
+ PreferenceStore.setPreference(Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, userId, 'true');
+ loadProfilesForSidebar();
 
  AsyncClient.savePreference(
  Preferences.CATEGORY_DIRECT_CHANNEL_SHOW,
- user.id,
+ userId,
  'true'
  );
 
@@ -225,6 +229,43 @@ export function openDirectChannelToUser(user, success, error) {
  );
 }
 
+export function openGroupChannelToUsers(userIds, success, error) {
+ Client.createGroupChannel(
+ userIds,
+ (data) => {
+ Client.getChannelMember(
+ data.id,
+ UserStore.getCurrentId(),
+ (data2) => {
+ AppDispatcher.handleServerAction({
+ type: ActionTypes.RECEIVED_CHANNEL,
+ channel: data,
+ member: data2
+ });
+
+ PreferenceStore.setPreference(Preferences.CATEGORY_GROUP_CHANNEL_SHOW, data.id, 'true');
+ loadProfilesForSidebar();
+
+ AsyncClient.savePreference(
+ Preferences.CATEGORY_GROUP_CHANNEL_SHOW,
+ data.id,
+ 'true'
+ );
+
+ if (success) {
+ success(data);
+ }
+ }
+ );
+ },
+ () => {
+ if (error) {
+ error();
+ }
+ }
+ );
+}
+
 export function markFavorite(channelId) {
  trackEvent('api', 'api_channels_favorited');
  AsyncClient.savePreference(Preferences.CATEGORY_FAVORITE_CHANNEL, channelId, 'true');

actions/global_actions.jsx

@@ -13,7 +13,7 @@ import PreferenceStore from 'stores/preference_store.jsx';
 import SearchStore from 'stores/search_store.jsx';
 
 import {handleNewPost, loadPosts, loadPostsBefore, loadPostsAfter} from 'actions/post_actions.jsx';
-import {loadProfilesAndTeamMembersForDMSidebar} from 'actions/user_actions.jsx';
+import {loadProfilesForSidebar} from 'actions/user_actions.jsx';
 import {loadChannelsForCurrentUser} from 'actions/channel_actions.jsx';
 import {stopPeriodicStatusUpdates} from 'actions/status_actions.jsx';
 import * as WebsocketActions from 'actions/websocket_actions.jsx';
@@ -387,7 +387,7 @@ export function emitPreferenceChangedEvent(preference) {
  });
 
  if (preference.category === Constants.Preferences.CATEGORY_DIRECT_CHANNEL_SHOW) {
- loadProfilesAndTeamMembersForDMSidebar();
+ loadProfilesForSidebar();
  }
 }
 

actions/post_actions.jsx

@@ -8,7 +8,7 @@ import PostStore from 'stores/post_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
 import {loadStatusesForChannel} from 'actions/status_actions.jsx';
-import {loadNewDMIfNeeded} from 'actions/user_actions.jsx';
+import {loadNewDMIfNeeded, loadNewGMIfNeeded} from 'actions/user_actions.jsx';
 import {trackEvent} from 'actions/diagnostics_actions.jsx';
 
 import Client from 'client/web_client.jsx';
@@ -24,8 +24,12 @@ export function handleNewPost(post, msg) {
  websocketMessageProps = msg.data;
  }
 
- if (msg && msg.data && msg.data.channel_type === Constants.DM_CHANNEL) {
- loadNewDMIfNeeded(post.user_id);
+ if (msg && msg.data) {
+ if (msg.data.channel_type === Constants.DM_CHANNEL) {
+ loadNewDMIfNeeded(post.user_id);
+ } else if (msg.data.channel_type === Constants.GM_CHANNEL) {
+ loadNewGMIfNeeded(post.channel_id, post.user_id);
+ }
  }
 
  if (post.root_id && PostStore.getPost(post.channel_id, post.root_id) == null) {