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/archived_channel/archive_channel_header_spec.ts

@@ -48,55 +48,41 @@ describe('Archive channel header spec', () => {
         // * The dropdown menu of the channel header should be visible;
         cy.get('#channelLeaveChannel').should('be.visible');
 
-        // * Rename menu option should be visible;
-        cy.get('#channelRename').should('be.visible');
-
-        // * Edit header menu option should be visible;
-        cy.get('#channelEditHeader').should('be.visible');
-
-        // * Edit purpose menu option should be visible;
-        cy.get('#channelEditPurpose').should('be.visible');
-
-        // * Convert channel to private menu option should be visible;
-        cy.get('#channelConvertToPrivate').should('be.visible');
+        // * Channel Settings submenu should be visible;
+        cy.get('#channelSettings').should('be.visible');
 
         // * Archive channel menu option should be visible;
         cy.get('#channelArchiveChannel').should('be.visible');
 
-        // * Add members menu option should be visible;
-        cy.get('#channelInviteMembers').should('be.visible');
+        // * Members menu option should be visible;
+        cy.get('#channelMembers').should('be.visible');
 
         // * Notification preferences option should be visible;
         cy.get('#channelNotificationPreferences').should('be.visible');
 
-        // # Close the channel dropdown menu
-        cy.get('#channelHeaderTitle').click();
+        // # Close the channel dropdown menu using keyboard escape
+        cy.get('body').type('{esc}{esc}');
 
         // # Archive the channel
         cy.uiArchiveChannel();
 
-        // * Rename menu option should not be visible;
-        cy.get('#channelRename').should('not.exist');
-
-        // * Edit header menu option should not be visible;
-        cy.get('#channelEditHeader').should('not.exist');
-
-        // * Edit purpose menu option should not be visible;
-        cy.get('#channelEditPurpose').should('not.exist');
-
-        // * Convert channel to private menu option should not be visible;
-        cy.get('#channelConvertToPrivate').should('not.exist');
+        // # click on channel drop-down menu
+        cy.get('#channelHeaderTitle').click();
 
         // * Archive channel menu option should not be visible;
         cy.get('#channelArchiveChannel').should('not.exist');
 
-        // * Add members menu option should not be visible;
-        cy.get('#channelInviteMembers').should('not.exist');
+        // * Channel Settings submenu should be visible;
+        cy.get('#channelSettings').should('not.exist');
+
+        // * Members menu option should be visible;
+        // as it now displays in RHS
+        cy.get('#channelMembers').should('be.visible');
 
         // * Notification preferences option should not be visible;
         cy.get('#channelNotificationPreferences').should('not.exist');
 
-        // # Close the channel dropdown menu
-        cy.get('#channelHeaderTitle').click();
+        // # Close the channel dropdown menu using keyboard escape
+        cy.get('body').type('{esc}{esc}');
     });
 });

e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_member_spec.ts

@@ -28,14 +28,11 @@ describe('Archive channel members spec', () => {
         // # click on channel drop-down menu
         cy.get('#channelHeaderTitle').click();
 
-        // * View members menu option should not be visible;
-        cy.get('#channelViewMembers').should('not.exist');
-
-        // * Manage members menu option should be visible;
-        cy.get('#channelManageMembers').should('be.visible');
+        // * Members menu option should be visible;
+        cy.get('#channelMembers').should('be.visible');
 
         // # Close the channel dropdown menu
-        cy.get('#channelHeaderTitle').click();
+        cy.get('body').type('{esc}{esc}');
 
         // # Archive the channel
         cy.uiArchiveChannel();
@@ -43,11 +40,8 @@ describe('Archive channel members spec', () => {
         // # click on channel drop-down menu
         cy.get('#channelHeaderTitle').click();
 
-        // * Manage members menu option should not be visible;
-        cy.get('#channelManageMembers').should('not.exist');
-
         // # click on view members menu option;
-        cy.get('#channelViewMembers button').should('be.visible').click();
+        cy.get('#channelMembers').should('be.visible').click();
 
         // * Ensure there are no options to change channel roles or membership
         cy.uiGetRHS().findByText('Manage').should('not.exist');