PLT-3077 Add group messaging (#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 (#5524)

* Move filter controls up a component level

* Scroll with arrow keys

* Updating mobile layout for multiselect (#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 (#5563)

* UX changes per feedback

* Update email for group messages

* UI fixes for group messaging (#5587)

* Fix missing localization string

* Add maximum users message when adding members to GM

* Fix input clearing on Android

* Updating group messaging UI (#5603)

* Updating UI for group messaging (#5604)

1 files changed, 62 insertions, 1 deletions

diff --git a/webapp/utils/channel_intro_messages.jsx b/webapp/utils/channel_intro_messages.jsx
index 991bf54e8..390ce6d28 100644
--- a/webapp/utils/channel_intro_messages.jsx
+++ b/webapp/utils/channel_intro_messages.jsx
@@ -23,8 +23,10 @@ export function createChannelIntroMessage(channel, fullWidthIntro) {
         centeredIntro = 'channel-intro--centered';
     }
 
-    if (channel.type === 'D') {
+    if (channel.type === Constants.DM_CHANNEL) {
         return createDMIntroMessage(channel, centeredIntro);
+    } else if (channel.type === Constants.GM_CHANNEL) {
+        return createGMIntroMessage(channel, centeredIntro);
     } else if (ChannelStore.isDefault(channel)) {
         return createDefaultIntroMessage(channel, centeredIntro);
     } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
@@ -35,6 +37,65 @@ export function createChannelIntroMessage(channel, fullWidthIntro) {
     return null;
 }
 
+export function createGMIntroMessage(channel, centeredIntro) {
+    const profiles = UserStore.getProfileListInChannel(channel.id, true);
+
+    if (profiles.length > 0) {
+        const pictures = [];
+        let names = '';
+        for (let i = 0; i < profiles.length; i++) {
+            const profile = profiles[i];
+
+            pictures.push(
+                <ProfilePicture
+                    key={'introprofilepicture' + profile.id}
+                    src={Client.getUsersRoute() + '/' + profile.id + '/image?time=' + profile.last_picture_update}
+                    width='50'
+                    height='50'
+                    user={profile}
+                />
+            );
+
+            if (i === profiles.length - 1) {
+                names += Utils.displayUsernameForUser(profile);
+            } else if (i === profiles.length - 2) {
+                names += Utils.displayUsernameForUser(profile) + ' and ';
+            } else {
+                names += Utils.displayUsernameForUser(profile) + ', ';
+            }
+        }
+
+        return (
+            <div className={'channel-intro ' + centeredIntro}>
+                <div className='post-profile-img__container channel-intro-img'>
+                    {pictures}
+                </div>
+                <p className='channel-intro-text'>
+                    <FormattedHTMLMessage
+                        id='intro_messages.GM'
+                        defaultMessage='This is the start of your group message history with {names}.<br />Messages and files shared here are not shown to people outside this area.'
+                        values={{
+                            names
+                        }}
+                    />
+                </p>
+                {createSetHeaderButton(channel)}
+            </div>
+        );
+    }
+
+    return (
+        <div className={'channel-intro ' + centeredIntro}>
+            <p className='channel-intro-text'>
+                <FormattedMessage
+                    id='intro_messages.group_message'
+                    defaultMessage='This is the start of your group message history with these teammates. Messages and files shared here are not shown to people outside this area.'
+                />
+            </p>
+        </div>
+    );
+}
+
 export function createDMIntroMessage(channel, centeredIntro) {
     var teammate = Utils.getDirectTeammate(channel.id);