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>
Этот коммит содержится в:
Scott Bishel
2025-03-19 07:06:04 -05:00
коммит произвёл GitHub
родитель 8eadf849bb
Коммит fd717cfa64
133 изменённых файлов: 4279 добавлений и 6211 удалений

Просмотреть файл

@@ -101,7 +101,7 @@ describe('Channels', () => {
cy.get('#channelHeaderTitle').should('contain', testChannel.display_name).click();
// * Verify that the menu is opened
cy.get('.Menu__content').should('be.visible').within(() => {
cy.get('#channelHeaderDropdownMenu').should('be.visible').within(() => {
// # Archive the channel
cy.findByText('Archive Channel').should('be.visible').click();
});

Просмотреть файл

@@ -30,9 +30,10 @@ describe('Channel Settings - Channel Header', () => {
cy.visit(`/${testTeam.name}/channels/${channel.name}`);
// # Click on the channel name in the channel header to open the channel menu options
cy.get(`[aria-label="${channel.name.split('-').join(' ')} channel menu"]`).click();
cy.get(`[aria-label="${channel.display_name.split('-').join(' ').toLowerCase()} channel menu"]`).click();
// # Select the "Edit Channel Header" option from the dropdown
cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
cy.findByText('Edit Channel Header').click();
// # Type something in the header edit box

Просмотреть файл

@@ -205,15 +205,12 @@ describe('Channel members RHS', () => {
// # Go to test channel
cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
cy.uiOpenChannelMenu('Manage Members');
cy.uiOpenChannelMenu('Members');
// * RHS Container should be open in edit mode
cy.get('#rhsContainer').then((rhsContainer) => {
cy.wrap(rhsContainer).findByText('Members').should('be.visible');
cy.wrap(rhsContainer).findByText(testChannel.display_name).should('be.visible');
// Done button should be visible
cy.wrap(rhsContainer).findByText('Done').should('be.visible');
});
});
@@ -267,7 +264,7 @@ describe('Channel members RHS', () => {
// # Go to test channel
cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
cy.uiOpenChannelMenu('View Members');
cy.uiOpenChannelMenu('Members');
// * RHS Container should be open in edit mode
ensureChannelMembersRHSExists(testChannel);

Просмотреть файл

@@ -38,7 +38,8 @@ describe('Channel Settings', () => {
cy.visit(`/${testTeam.name}/channels/${channel.name}`);
// # Go to channel dropdown > Rename channel
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
cy.findByText('Rename Channel').click();
// # Try to enter existing URL and save
@@ -63,7 +64,7 @@ describe('Channel Settings', () => {
cy.visit(`/${testTeam.name}/channels/off-topic`);
// # Go to channel dropdown > Mute channel
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
cy.get('#channelHeaderDropdownMenu').should('exist').
findByText('Mute Channel').should('be.visible').click();
@@ -79,7 +80,7 @@ describe('Channel Settings', () => {
get('a').should('have.class', 'muted');
// # Click Unmute channel while menu is open
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
cy.get('#channelHeaderDropdownMenu').should('exist').
findByText('Unmute Channel').should('be.visible').click();

Просмотреть файл

@@ -52,7 +52,7 @@ describe('Close direct messages', () => {
it('Through channel header dropdown menu', () => {
createAndVisitDMChannel([testUser.id, otherUser.id]).then((channel) => {
// # Open channel header dropdown menu and click on Close Direct Message
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
cy.findByText('Close Direct Message').click();
verifyChannelWasProperlyClosed(channel.name);
@@ -104,7 +104,7 @@ describe('Close group messages', () => {
it('Through channel header dropdown menu', () => {
createAndVisitGMChannel([otherUser1, otherUser2]).then((channel) => {
// # Open channel header dropdown menu and click on Close Direct Message
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
cy.findByText('Close Group Message').click();
verifyChannelWasProperlyClosed(channel.name);

Просмотреть файл

@@ -41,14 +41,20 @@ describe('Channels', () => {
cy.visit(`/${testTeam.name}/channels/${channel.name}`);
// # Click the channel header dropdown
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
// open ChannelSettings submenu
cy.findByRole('menuitem', {name: 'Channel Settings'}).trigger('mouseover');
// * Channel convert to private should be visible and confirm
cy.get('#channelConvertToPrivate').should('be.visible').click();
cy.findByTestId('convertChannelConfirm').should('be.visible').click();
// # Click the channel header dropdown
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
// open ChannelSettings submenu
cy.findByRole('menuitem', {name: 'Channel Settings'}).trigger('mouseover');
// * Channel convert to private should no longer be visible
cy.get('#channelConvertToPrivate').should('not.exist');
@@ -66,7 +72,10 @@ describe('Channels', () => {
cy.visit(`/${testTeam.name}/channels/${channel.name}`);
// # Click the channel header dropdown
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
// open ChannelSettings submenu
cy.findByRole('menuitem', {name: 'Channel Settings'}).trigger('mouseover');
// * Channel convert to private should no longer be visible
cy.get('#channelConvertToPrivate').should('not.exist');
@@ -91,7 +100,10 @@ describe('Channels', () => {
cy.visit(`/${testTeam.name}/channels/${channel.name}`);
// # Click the channel header dropdown
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
// open ChannelSettings submenu
cy.findByRole('menuitem', {name: 'Channel Settings'}).trigger('mouseover');
// * Channel convert to private should not be visible
cy.get('#channelConvertToPrivate').should('not.exist');
@@ -109,14 +121,20 @@ describe('Channels', () => {
cy.visit(`/${testTeam.name}/channels/${channel.name}`);
// # Click the channel header dropdown
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
// open ChannelSettings submenu
cy.findByRole('menuitem', {name: 'Channel Settings'}).trigger('mouseover');
// * Channel convert to private should be visible and confirm
cy.get('#channelConvertToPrivate').should('be.visible').click();
cy.findByTestId('convertChannelConfirm').should('be.visible').click();
// # Click the channel header dropdown
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelHeaderTitle').click();
// open ChannelSettings submenu
cy.findByRole('menuitem', {name: 'Channel Settings'}).trigger('mouseover');
// * Channel convert to private should no longer be visible
cy.get('#channelConvertToPrivate').should('not.exist');

Просмотреть файл

@@ -60,6 +60,7 @@ describe('Group Message Conversion To Private Channel', () => {
// Open the GM conversion dialog
cy.get('#channelHeaderDropdownButton').click();
cy.findByRole('menuitem', {name: 'Settings'}).trigger('mouseover');
cy.findByText('Convert to Private Channel').click();
// the dialog has a animation, so we're waiting for it to finish
@@ -102,6 +103,7 @@ describe('Group Message Conversion To Private Channel', () => {
// Open the GM
cy.visit(`/${testTeam1.name}/messages/${gm2.name}`);
cy.get('#channelHeaderDropdownButton').click();
cy.findByRole('menuitem', {name: 'Settings'}).trigger('mouseover');
cy.findByText('Convert to Private Channel').click();
cy.get('.GenericModal__button.delete.disabled').wait(2000);
@@ -141,6 +143,7 @@ describe('Group Message Conversion To Private Channel', () => {
// Open the GM
cy.visit(`/${testTeam1.name}/messages/${gm3.name}`);
cy.get('#channelHeaderDropdownButton').click();
cy.findByRole('menuitem', {name: 'Settings'}).trigger('mouseover');
cy.findByText('Convert to Private Channel').click();
cy.findByText('Unable to convert to a channel because group members are part of different teams').wait(2000);
});

Просмотреть файл

@@ -37,7 +37,7 @@ describe('Leave and Archive channel actions display as destructive', () => {
cy.findByText('View Info').should('be.visible');
// * Move to... menu option should be visible
cy.findByText('Move to...').should('be.visible').children().trigger('mouseover');
cy.findByText('Move to...').should('be.visible').trigger('mouseover');
// * Favorites Sub-menu option should be visible
cy.findByText('Favorites').should('be.visible');
@@ -45,17 +45,20 @@ describe('Leave and Archive channel actions display as destructive', () => {
// * New Category Sub-menu option should be visible
cy.findByText('New Category').should('be.visible');
// * Move to... close menu option
cy.findByText('Move to...').should('be.visible').trigger('mouseout');
// * Notification Preferences menu option should be visible
cy.get('#channelNotificationPreferences').should('be.visible');
// * Mute Channel menu option should be visible
cy.get('#channelToggleMuteChannel').should('be.visible');
// * Invite Members menu option should be visible
cy.get('#channelInviteMembers').should('be.visible');
// * Manage Members menu option should be visible
cy.get('#channelManageMembers').should('be.visible');
cy.get('#channelMembers').should('be.visible');
// * Channel Settings menu option should be visible
cy.findByText('Channel Settings').should('be.visible').trigger('mouseover');
// * Edit Channel Header menu option should be visible
cy.get('#channelEditHeader').should('be.visible');
@@ -66,11 +69,14 @@ describe('Leave and Archive channel actions display as destructive', () => {
// * Rename Channel menu option should be visible
cy.get('#channelRename').should('be.visible');
// * Archive Channel menu option should be visible and have a background-color (destructive)
cy.get('#channelArchiveChannel').should('be.visible').children().focus().should('have.css', 'background-color', 'rgb(210, 75, 78)');
// * Channel Settings close menu option
cy.findByText('Channel Settings').should('be.visible').trigger('mouseout');
// * Leave Channel menu option should be visible and hav a background-color (destructive)
cy.get('#channelLeaveChannel').should('be.visible').children().focus().should('have.css', 'background-color', 'rgb(210, 75, 78)');
// * Archive Channel menu option should be visible and have a background-color (destructive)
cy.get('#channelArchiveChannel').should('be.visible').focus().should('have.css', 'background-color', 'rgb(210, 75, 78)');
// // * Leave Channel menu option should be visible and hav a background-color (destructive)
cy.get('#channelLeaveChannel').should('be.visible').focus().should('have.css', 'background-color', 'rgb(210, 75, 78)');
});
it('MM-T4943_2 Leave channel actions display as destructive in the Edit Channel Menu ', () => {