Mm 62677 - modal focus management - find channels modal (#29957)

* MM-62312 - modal focus management; revamp quick switch channel modal!

* get quick switch test working

* configure the generic modal to accept refs to focus within and onhide to the origin element

* apply pr feedback, get modal element get autofocus, use id instead of ref

* update more direct channels modal to use generic modal

* fix unit tests and snapshots

* fix unit tests

* fix modal margin top to fit in smaller screens

* fix e2e test

* remove unnecesary onexited extra call

* fix e2e tests

* set correct label

* fix snapshots

* create helper function for sending custom focus event

* migrate quick switch modal to use new approach to focus

* migrate more direct channels modal to new approach

* fix snapshots

* fix types

* fix modal closing behavior

* fix snapshots

* fix cypress tests

* remove only

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Pablo Vélez
2025-02-20 13:22:05 -05:00
коммит произвёл GitHub
родитель fd356b62b4
Коммит 9e47f2ef0c
35 изменённых файлов: 450 добавлений и 495 удалений

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

@@ -64,7 +64,7 @@ describe('Archive channel header spec', () => {
cy.get('#channelArchiveChannel').should('be.visible');
// * Add members menu option should be visible;
cy.get('#channelAddMembers').should('be.visible');
cy.get('#channelInviteMembers').should('be.visible');
// * Notification preferences option should be visible;
cy.get('#channelNotificationPreferences').should('be.visible');
@@ -91,7 +91,7 @@ describe('Archive channel header spec', () => {
cy.get('#channelArchiveChannel').should('not.exist');
// * Add members menu option should not be visible;
cy.get('#channelAddMembers').should('not.exist');
cy.get('#channelInviteMembers').should('not.exist');
// * Notification preferences option should not be visible;
cy.get('#channelNotificationPreferences').should('not.exist');

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

@@ -55,7 +55,7 @@ describe('Managing bots in Teams and Channels', () => {
await client.addToTeam(team.id, bot.user_id);
// # Add bot to channel in team
cy.uiAddUsersToCurrentChannel([bot.username]);
cy.uiInviteUsersToCurrentChannel([bot.username]);
// * Verify system message in-channel
cy.uiWaitUntilMessagePostedIncludes(`@${bot.username} added to the channel by you.`);

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

@@ -51,8 +51,8 @@ describe('Leave and Archive channel actions display as destructive', () => {
// * Mute Channel menu option should be visible
cy.get('#channelToggleMuteChannel').should('be.visible');
// * Add Members menu option should be visible
cy.get('#channelAddMembers').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');

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

@@ -142,7 +142,9 @@ describe('Verify Guest User Identification in different screens', () => {
});
// # Close Dialog
cy.get('#quickSwitchModalLabel > .close').click();
cy.get('#quickSwitchModal').within(() => {
cy.get('button.close[aria-label="Close"]').click();
});
});
it('MM-T1377 Verify Guest Badge in DM Search dialog', () => {

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

@@ -168,8 +168,8 @@ describe('Team Permissions', () => {
// * Verify dropdown opens
cy.get('#channelHeaderDropdownMenu .Menu__content.dropdown-menu').should('be.visible');
// # Click on `Add Members`
cy.get('#channelAddMembers').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
// # Click on `Invite Members`
cy.get('#channelInviteMembers').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
// # Search and select otherUser
cy.get('#selectItems input').typeWithForce(otherUser.username).wait(TIMEOUTS.HALF_SEC);

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

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

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

@@ -40,6 +40,15 @@ declare namespace Cypress {
*/
uiAddUsersToCurrentChannel(usernameList: string[]);
/**
* Invite users to the current channel.
* @param {string[]} usernameList - list of userids to be invited to the channel
*
* @example
* cy.uiInviteUsersToCurrentChannel(['user1', 'user2']);
*/
uiInviteUsersToCurrentChannel(usernameList: string[]);
/**
* Archive the current channel.
*

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

@@ -54,6 +54,19 @@ Cypress.Commands.add('uiAddUsersToCurrentChannel', (usernameList) => {
}
});
Cypress.Commands.add('uiInviteUsersToCurrentChannel', (usernameList) => {
if (usernameList.length) {
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelInviteMembers').click();
cy.get('#addUsersToChannelModal').should('be.visible');
usernameList.forEach((username) => {
cy.get('#selectItems input').typeWithForce(`@${username}{enter}`);
});
cy.get('#saveItems').click();
cy.get('#addUsersToChannelModal').should('not.exist');
}
});
Cypress.Commands.add('uiArchiveChannel', () => {
cy.get('#channelHeaderDropdownIcon').click();
cy.get('#channelArchiveChannel').click();