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)

6 files changed, 131 insertions, 7 deletions

diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 0078ddec4..03a8ad1e8 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -170,6 +170,10 @@
                 float: left;
                 font-size: 17px;
                 line-height: 27px;
+                max-width: calc(100% - 80px);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
 
                 .name {
                     color: $white;
@@ -479,6 +483,10 @@
         .filter-row {
             margin: 5px 0 10px;
             width: 300px;
+
+            &.filter-row--full {
+                width: 100%;
+            }
         }
 
         .member-count {
@@ -582,6 +590,24 @@
         border-bottom: 1px solid $light-gray;
         display: flex;
         padding: 10px 15px;
+
+        &.clickable {
+            cursor: pointer;
+        }
+
+        &:hover {
+            .more-modal__actions--round {
+                opacity: .5;
+            }
+        }
+    }
+
+    .more-modal__actions--round {
+        height: 32px;
+        line-height: 32px;
+        opacity: 0;
+        text-align: center;
+        width: 32px;
     }
 
     p {
@@ -611,6 +637,7 @@
 
     .more-modal__list {
         flex-grow: 500;
+        height: 1px;
     }
 
     .filter-button {
diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss
index 3e587707d..c1114bbcb 100644
--- a/webapp/sass/components/_module.scss
+++ b/webapp/sass/components/_module.scss
@@ -9,6 +9,7 @@
 @import 'links';
 @import 'mentions';
 @import 'modal';
+@import 'multi-select';
 @import 'oauth';
 @import 'popover';
 @import 'save-button';
diff --git a/webapp/sass/components/_multi-select.scss b/webapp/sass/components/_multi-select.scss
new file mode 100644
index 000000000..a33116aa4
--- /dev/null
+++ b/webapp/sass/components/_multi-select.scss
@@ -0,0 +1,59 @@
+@charset 'UTF-8';
+
+.multi-select__container {
+    display: table;
+    padding: 0 15px;
+    width: 100%;
+
+    .Select {
+        display: table-cell;
+        padding-right: 15px;
+        vertical-align: top;
+        width: 100%;
+    }
+
+    .btn {
+        display: table-cell;
+        height: 36px;
+        min-width: 60px;
+        vertical-align: top;
+    }
+
+    .Select-control {
+        border-radius: 1px;
+    }
+
+    .Select-value {
+        white-space: nowrap;
+    }
+
+    .Select-value-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.multi-select__help {
+    padding: 10px 15px 0;
+
+    > div:not(.multi-select__note),
+    > span {
+        @include opacity(.6);
+    }
+}
+
+.multi-select__note {
+    @include border-radius(3px);
+    display: table;
+    margin-top: 5px;
+    padding: 8px 13px;
+    width: 100%;
+
+    > div {
+        display: table-cell;
+
+        &.note__icon {
+            width: 15px;
+        }
+    }
+}
diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss
index 5bd68f362..c2f8bca5b 100644
--- a/webapp/sass/components/_status-icon.scss
+++ b/webapp/sass/components/_status-icon.scss
@@ -36,6 +36,28 @@
     top: 1px;
     width: 12px;
 
+    &.status--group {
+        border-radius: 2px;
+        font-size: 11px;
+        font-weight: 600;
+        height: 16px;
+        left: 1px;
+        line-height: 15px;
+        margin-left: -3px;
+        text-align: center;
+        top: -1px;
+        width: 16px;
+
+        .mentions__name & {
+            height: 20px;
+            left: 0;
+            line-height: 20px;
+            margin-left: 0;
+            text-align: center;
+            width: 20px;
+        }
+    }
+
     svg {
         max-height: 14px;
     }
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index e6dc6bb68..8ee6e8fdc 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -121,7 +121,7 @@
 
         &.dropdown {
             float: left;
-            max-width: 100%;
+            max-width: 90%;
             padding-right: 1em;
 
             .header-dropdown__icon {
@@ -182,7 +182,6 @@
     }
 
     .channel-intro-profile {
-        margin-left: 63px;
         margin-top: 5px;
 
         .user-popover {
@@ -193,7 +192,10 @@
     }
 
     .channel-intro-img {
-        float: left;
+        .status-wrapper {
+            height: 50px;
+            margin: 0 10px 10px 0;
+        }
 
         img {
             @include border-radius(100px);
@@ -211,10 +213,6 @@
         background: $bg--gray;
         padding: 10px 15px;
     }
-
-    .channel-intro-text {
-        margin-top: 35px;
-    }
 }
 
 // Team Header in Sidebar
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 3170fb0d4..ee26045ac 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,23 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .multi-select__container {
+        .btn {
+            display: block;
+            min-width: 50px;
+        }
+
+        .Select-value-label {
+            max-width: 190px;
+        }
+    }
+
+    .more-modal__list {
+        .more-modal__actions--round {
+            @include opacity(.5);
+        }
+    }
+
     .post-create__container {
         padding-bottom: 10px;