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/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 === '>') {