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)

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 {

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';

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;
+        }
+    }
+}

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;
     }