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/messaging/direct_message_spec.js

@@ -170,14 +170,14 @@ describe('Direct Message', () => {
         // # Visit the DM channel
         cy.visit(`/${testTeam.name}/messages/@${otherUser.username}`);
 
-        // # Open channel menu and click Mute Conversation
-        cy.uiOpenChannelMenu('Mute Conversation');
+        // # Open channel menu and click Mute
+        cy.uiOpenChannelMenu('Mute');
 
         // * Assert that channel appears as muted on the LHS
         cy.uiGetLhsSection('DIRECT MESSAGES').find('.muted').first().should('contain', otherUser.username);
 
-        // # Open channel menu and click Unmute Conversation
-        cy.uiOpenChannelMenu('Unmute Conversation');
+        // # Open channel menu and click Unmute
+        cy.uiOpenChannelMenu('Unmute');
 
         // * Assert that channel does not appear as muted on the LHS
         cy.uiGetLhsSection('DIRECT MESSAGES').find('.muted').should('not.exist');

e2e-tests/cypress/tests/integration/channels/messaging/focus_move_spec.js

@@ -142,7 +142,8 @@ function verifyFocusInAddChannelMemberModal() {
     cy.get('#channelLeaveChannel').should('be.visible');
 
     // # Click 'Add Members'
-    cy.get('#channelInviteMembers').click();
+    cy.get('#channelMembers').click();
+    cy.uiGetButton('Add').click();
 
     // * Assert that modal appears
     cy.get('#addUsersToChannelModal').should('be.visible');

e2e-tests/cypress/tests/integration/channels/messaging/header_spec.js

@@ -30,16 +30,16 @@ describe('Header', () => {
 
     it('MM-T88 An ellipsis indicates the channel header is too long - public or private channel Quote icon displays at beginning of channel header', () => {
         // * Verify with short channel header
-        updateAndVerifyChannelHeader('>', 'newheader');
+        updateAndVerifyChannelHeader(false, '>', 'newheader');
 
         // * Verify with long channel header
-        updateAndVerifyChannelHeader('>', 'newheader'.repeat(20));
+        updateAndVerifyChannelHeader(false, '>', 'newheader'.repeat(20));
     });
 
     it('MM-T881_1 - Header: Markdown quote', () => {
         // # Update channel header text
         const header = 'This is a quote in the header';
-        updateAndVerifyChannelHeader('>', header);
+        updateAndVerifyChannelHeader(false, '>', header);
     });
 
     it('MM-T89 An ellipsis indicates the channel header is too long - DM', () => {
@@ -56,7 +56,7 @@ describe('Header', () => {
         // # Update DM channel header
         const header = `quote ${'newheader'.repeat(15)}`;
 
-        updateAndVerifyChannelHeader('>', header);
+        updateAndVerifyChannelHeader(true, '>', header);
 
         // # Hover on channel header
         cy.get('#channelHeaderDescription .header-description__text').trigger('mouseenter');
@@ -70,9 +70,13 @@ describe('Header', () => {
     });
 });
 
-function updateAndVerifyChannelHeader(prefix, header) {
+function updateAndVerifyChannelHeader(isDM, prefix, header) {
     // # Update channel header
-    cy.updateChannelHeader(prefix + header);
+    if (isDM) {
+        cy.updateDMGMChannelHeader(prefix + header);
+    } else {
+        cy.updateChannelHeader(prefix + header);
+    }
 
     // * Should render blockquote if it starts with ">"
     if (prefix === '>') {