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/integration/channels/enterprise/permissions/team_permissions_spec.ts

@@ -118,16 +118,10 @@ describe('Team Permissions', () => {
         cy.uiOpenChannelMenu().wait(TIMEOUTS.HALF_SEC);
 
         // * Verify dropdown opens
-        cy.get('#channelHeaderDropdownMenu .Menu__content.dropdown-menu').should('be.visible');
-
-        // * Verify `Add Members` menu item is not present
-        cy.get('#channelAddMembers').should('not.exist');
-
-        // * Verify `Manage Members` menu item is not present
-        cy.get('#channelManageMembers').should('not.exist');
+        cy.get('#channelHeaderDropdownMenu').should('be.visible');
 
         // * Verify `View Members` menu item is visible
-        cy.get('#channelViewMembers').should('be.visible');
+        cy.get('#channelMembers').should('be.visible');
 
         // # Close channel header menu
         cy.get('body').type('{esc}');
@@ -166,10 +160,11 @@ describe('Team Permissions', () => {
             cy.uiOpenChannelMenu().wait(TIMEOUTS.HALF_SEC);
 
             // * Verify dropdown opens
-            cy.get('#channelHeaderDropdownMenu .Menu__content.dropdown-menu').should('be.visible');
+            cy.get('#channelHeaderDropdownMenu').should('be.visible');
 
-            // # Click on `Invite Members`
-            cy.get('#channelInviteMembers').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
+            // # Click on `Members`
+            cy.get('#channelMembers').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
+            cy.uiGetButton('Add').click();
 
             // # Search and select otherUser
             cy.get('#selectItems input').typeWithForce(otherUser.username).wait(TIMEOUTS.HALF_SEC);
@@ -182,10 +177,11 @@ describe('Team Permissions', () => {
             cy.uiOpenChannelMenu().wait(TIMEOUTS.HALF_SEC);
 
             // * Verify dropdown opens
-            cy.get('#channelHeaderDropdownMenu .Menu__content.dropdown-menu').should('be.visible');
+            cy.get('#channelHeaderDropdownMenu').should('be.visible');
 
-            // # Click on `Manage Members`
-            cy.get('#channelManageMembers').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
+            // # Click on `Members`
+            cy.get('#channelMembers').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
+            cy.uiGetButton('Manage').click();
 
             // # Click on `Member`
             cy.uiGetRHS().findByTestId(`memberline-${otherUser.id}`).within(() => {
@@ -210,7 +206,8 @@ describe('Team Permissions', () => {
             cy.uiOpenChannelMenu().wait(TIMEOUTS.HALF_SEC);
 
             // * Verify dropdown opens
-            cy.get('#channelHeaderDropdownMenu .Menu__content.dropdown-menu').should('be.visible');
+            cy.get('#channelHeaderDropdownMenu').should('be.visible');
+            cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
 
             // * Verify `Edit Channel Header` menu item is visible
             cy.get('#channelEditHeader').should('be.visible');