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/accessibility/accessibility_modals_dialogs_1_spec.ts

@@ -71,7 +71,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
         cy.visit(`/${testTeam.name}/channels/off-topic`);
 
         // # Open Channel Members Dialog
-        cy.get('#channelHeaderDropdownIcon').click();
+        cy.get('#channelHeaderTitle').click();
         cy.findByText('Manage Members').click().wait(TIMEOUTS.FIVE_SEC);
 
         // * Verify the accessibility support in Manage Members Dialog
@@ -118,7 +118,7 @@ function verifyMainMenuModal(menuItem: string, modalName?: string) {
 }
 
 function verifyChannelMenuModal(menuItem: string, modalName?: string) {
-    cy.get('#channelHeaderDropdownIcon').click();
+    cy.get('#channelHeaderTitle').click();
     verifyModal(menuItem, modalName);
 }
 

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts

@@ -149,8 +149,8 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
         cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
 
         // # Open Add Members Dialog
-        cy.get('#channelHeaderDropdownIcon').click();
-        cy.findByText('Add Members').click();
+        cy.uiOpenChannelMenu('Members');
+        cy.uiGetButton('Add').click();
 
         // * Verify the accessibility support in Add people Dialog
         cy.findAllByRole('dialog').eq(0).within(() => {

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts

@@ -59,8 +59,8 @@ describe('Verify Guest User Identification in different screens', () => {
 
     it('MM-T1370 Verify Guest Badge in Channel Members dropdown and dialog', () => {
         // # Open Channel Members RHS
-        cy.get('#channelHeaderDropdownIcon').click();
-        cy.get('#channelManageMembers').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get('#channelHeaderTitle').click();
+        cy.get('#channelMembers').click().wait(TIMEOUTS.HALF_SEC);
         cy.uiGetRHS().findByTestId(`memberline-${guestUser.id}`).within(($el) => {
             cy.wrap($el).get('.Tag').should('be.visible').should('have.text', 'GUEST');
         });

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

e2e-tests/cypress/tests/integration/channels/enterprise/system_console/about/edition_and_license_spec.js

@@ -125,7 +125,7 @@ function verifyRenamePrivateChannel(teamName, privateChannelName, testUsers) {
         cy.visit(`/${teamName}/channels/${privateChannelName}`);
 
         // * Click the dropdown menu and verify if the rename option is visible or not
-        cy.get('#channelHeaderDropdownIcon', {timeout: TIMEOUTS.TWO_MIN}).should('be.visible').click();
+        cy.get('#channelHeaderTitle', {timeout: TIMEOUTS.TWO_MIN}).should('be.visible').click();
         cy.get('#channelRename').should(canRename ? 'be.visible' : 'not.exist');
     }
 }