MM-59065 - New channel menu using new menu system (#30093)

* New channel menu using new menu system

* fix e2e-tests

* remove extraneous separator

* lint fix

* fix test after merge

* update to pass properties to first menu item

* fix e2etest

* refactor: Update channel header menu items to use const event handlers

* refactor: Extract plugin item click handler in channel header menu

* refactor: Improve error handling and button click handlers in mobile channel header plugins

* lint fixes

* updates for code reveiw

* run i18n-extract

* fix unit test

* fix: Close channel dropdown menu by clicking channel header title

* fix: Use keyboard escape to close channel dropdown menu in e2e tests

* fix cypress test

* fix: Resolve MUI Menu component fragment rendering issue

* cleanup

* remove unneccessary css

* fixing testing issues

---------

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

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

@@ -43,8 +43,9 @@ Cypress.Commands.add('uiCreateChannel', ({
 
 Cypress.Commands.add('uiAddUsersToCurrentChannel', (usernameList) => {
     if (usernameList.length) {
-        cy.get('#channelHeaderDropdownIcon').click();
-        cy.get('#channelAddMembers').click();
+        cy.get('#channelHeaderTitle').click();
+        cy.get('#channelMembers').click();
+        cy.uiGetButton('Add').click();
         cy.get('#addUsersToChannelModal').should('be.visible');
         usernameList.forEach((username) => {
             cy.get('#selectItems input').typeWithForce(`@${username}{enter}`);
@@ -56,8 +57,9 @@ Cypress.Commands.add('uiAddUsersToCurrentChannel', (usernameList) => {
 
 Cypress.Commands.add('uiInviteUsersToCurrentChannel', (usernameList) => {
     if (usernameList.length) {
-        cy.get('#channelHeaderDropdownIcon').click();
-        cy.get('#channelInviteMembers').click();
+        cy.get('#channelHeaderTitle').click();
+        cy.get('#channelMembers').click();
+        cy.uiGetButton('Add').click();
         cy.get('#addUsersToChannelModal').should('be.visible');
         usernameList.forEach((username) => {
             cy.get('#selectItems input').typeWithForce(`@${username}{enter}`);
@@ -68,19 +70,19 @@ Cypress.Commands.add('uiInviteUsersToCurrentChannel', (usernameList) => {
 });
 
 Cypress.Commands.add('uiArchiveChannel', () => {
-    cy.get('#channelHeaderDropdownIcon').click();
+    cy.get('#channelHeaderTitle').click();
     cy.get('#channelArchiveChannel').click();
     return cy.get('#deleteChannelModalDeleteButton').click();
 });
 
 Cypress.Commands.add('uiUnarchiveChannel', () => {
-    cy.get('#channelHeaderDropdownIcon').should('be.visible').click();
+    cy.get('#channelHeaderTitle').should('be.visible').click();
     cy.get('#channelUnarchiveChannel').should('be.visible').click();
     return cy.get('#unarchiveChannelModalDeleteButton').should('be.visible').click();
 });
 
 Cypress.Commands.add('uiLeaveChannel', (isPrivate = false) => {
-    cy.get('#channelHeaderDropdownIcon').click();
+    cy.get('#channelHeaderTitle').click();
 
     if (isPrivate) {
         cy.get('#channelLeaveChannel').click();

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

@@ -32,7 +32,6 @@ Cypress.Commands.add('uiGetChannelFileButton', () => {
 Cypress.Commands.add('uiGetChannelMenu', (options = {exist: true}) => {
     if (options.exist) {
         return cy.get('#channelHeaderDropdownMenu').
-            find('.dropdown-menu').
             should('be.visible');
     }