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

e2e-tests/cypress/tests/support/ui_commands.ts

@@ -462,13 +462,15 @@ function getCurrentChannelId(): ChainableT<string> {
 Cypress.Commands.add('getCurrentChannelId', getCurrentChannelId);
 
 function updateChannelHeader(text: string) {
-    cy.get('#channelHeaderDropdownIcon').
+    cy.get('#channelHeaderTitle').
         should('be.visible').
         click();
-    cy.get('.Menu__content').
-        should('be.visible').
-        find('#channelEditHeader').
-        click();
+    cy.get('#channelHeaderDropdownMenu').
+        should('be.visible');
+
+    // * Channel Settings menu option should be visible
+    cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
+    cy.findByText('Edit Channel Header').click();
     cy.get('#edit_textbox').
         clear().
         type(text).
@@ -478,6 +480,24 @@ function updateChannelHeader(text: string) {
 
 Cypress.Commands.add('updateChannelHeader', updateChannelHeader);
 
+function updateDMGMChannelHeader(text: string) {
+    cy.get('#channelHeaderTitle').
+        should('be.visible').
+        click();
+    cy.get('#channelHeaderDropdownMenu').
+        should('be.visible');
+
+    // * Channel Settings menu option should be visible
+    cy.findByText('Edit Header').click();
+    cy.get('#edit_textbox').
+        clear().
+        type(text).
+        type('{enter}').
+        wait(TIMEOUTS.HALF_SEC);
+}
+
+Cypress.Commands.add('updateDMGMChannelHeader', updateDMGMChannelHeader);
+
 function checkRunLDAPSync(): ChainableT<any> {
     return cy.apiGetLDAPSync().then((response) => {
         const jobs = response.body;
@@ -787,6 +807,12 @@ declare global {
              */
             updateChannelHeader(text: string): ChainableT<void>;
 
+            /**
+             * Update DM or GM channel header
+             * @param {String} text - Text to set the header to
+             */
+            updateDMGMChannelHeader(text: string): ChainableT<void>;
+
             /**
              * Navigate to system console-PluginManagement from profile settings
              */