Mm 62677 - modal focus management - find channels modal (#29957)

* MM-62312 - modal focus management; revamp quick switch channel modal!

* get quick switch test working

* configure the generic modal to accept refs to focus within and onhide to the origin element

* apply pr feedback, get modal element get autofocus, use id instead of ref

* update more direct channels modal to use generic modal

* fix unit tests and snapshots

* fix unit tests

* fix modal margin top to fit in smaller screens

* fix e2e test

* remove unnecesary onexited extra call

* fix e2e tests

* set correct label

* fix snapshots

* create helper function for sending custom focus event

* migrate quick switch modal to use new approach to focus

* migrate more direct channels modal to new approach

* fix snapshots

* fix types

* fix modal closing behavior

* fix snapshots

* fix cypress tests

* remove only

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/support/ui/channel.d.ts

@@ -40,6 +40,15 @@ declare namespace Cypress {
          */
         uiAddUsersToCurrentChannel(usernameList: string[]);
 
+        /**
+         * Invite users to the current channel.
+         * @param {string[]} usernameList - list of userids to be invited to the channel
+         *
+         * @example
+         *   cy.uiInviteUsersToCurrentChannel(['user1', 'user2']);
+         */
+        uiInviteUsersToCurrentChannel(usernameList: string[]);
+
         /**
          * Archive the current channel.
          *

e2e-tests/cypress/tests/support/ui/channel.js

@@ -54,6 +54,19 @@ Cypress.Commands.add('uiAddUsersToCurrentChannel', (usernameList) => {
     }
 });
 
+Cypress.Commands.add('uiInviteUsersToCurrentChannel', (usernameList) => {
+    if (usernameList.length) {
+        cy.get('#channelHeaderDropdownIcon').click();
+        cy.get('#channelInviteMembers').click();
+        cy.get('#addUsersToChannelModal').should('be.visible');
+        usernameList.forEach((username) => {
+            cy.get('#selectItems input').typeWithForce(`@${username}{enter}`);
+        });
+        cy.get('#saveItems').click();
+        cy.get('#addUsersToChannelModal').should('not.exist');
+    }
+});
+
 Cypress.Commands.add('uiArchiveChannel', () => {
     cy.get('#channelHeaderDropdownIcon').click();
     cy.get('#channelArchiveChannel').click();