MM-54123 Add group to channel (#22954)

* adding group members to channel initial commit

* adding group to channel functionality along with add new team members

* fixing circular dependency

* fixing e2e and other optimizations

* adding e2e tests for adding group members to channels

* cypress lint

* fixing comments

* adding count to button

* improvements

* adjusting some stuff from PR comments

* remove ability to add user to team, update message for non-team members

* remove adding to team from add groups functionality

* update misspelled variable

* lint and unit test fixes

* add tests, cleanup

* lint fix

* revert package-lock.json

* fixes for cypress tests

* rename TeamInviteBanner to TeamWarningBanner, since invites are no longer allowed

* update for warning

* lint fixes

* cleanup

* fix failing e2e tests

* update messages to not use markdown

---------

Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/sass/components/_channel-invite-modal.scss

@@ -9,6 +9,15 @@
         padding: 0 2.4rem;
     }
 
+    .AlertBanner {
+        margin: 1.2rem 2.4rem 0;
+
+        button.btn {
+            border-radius: 4px;
+            font-weight: 600;
+        }
+    }
+
     .react-select__multi-value {
         border-radius: 50px;
     }
@@ -92,6 +101,34 @@
         .more-modal__options {
             overflow: visible;
             min-height: auto;
+
+            .group-name {
+                font-size: 12px;
+                line-height: 20px;
+            }
+
+            .more-modal__group-image {
+                display: flex;
+                width: 32px;
+                min-width: 32px;
+                height: 32px;
+                align-items: center;
+                justify-content: center;
+                background: rgba(var(--center-channel-color-rgb), 0.08);
+                border-radius: 30px;
+            }
+
+            .add-group-members {
+                display: none;
+                min-width: 110px;
+                margin-left: auto;
+                color: var(--button-bg);
+                font-family: 'Open Sans';
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 20px;
+            }
         }
     }
 
@@ -124,6 +161,10 @@
     .more-modal__details {
         padding-left: 12px;
     }
+
+    .add-others-link {
+        color: var(--button-bg);
+    }
 }
 
 .modal .channel-invite__content {

webapp/channels/src/sass/components/_modal.scss

@@ -879,6 +879,7 @@
             display: flex;
             overflow: hidden;
             min-width: 0;
+            align-items: center;
             margin: 5px 0;
             gap: 4px;
             text-overflow: ellipsis;
@@ -966,6 +967,12 @@
             .more-modal__lastPostAt {
                 display: none;
             }
+
+            .more-modal__details {
+                .add-group-members {
+                    display: flex;
+                }
+            }
         }
 
         .more-modal__shared-actions {