Mm 62677 modal focus second part (#30099)

* 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 * MM-62677 - migrate modals, invite modal work * user settings modal * fix snapshots * finish user settings migration * migrate confirm modal to use generic modal * notification preferences migration * implement focus back to trigger to channel notifications modal * fix test snapshots * initial self code review * fix CI errors, translation and some types * add modal location param and adjust test * fix cypress test text * fix cypress test text * fix e2e test for invitation modal * fix e2e test selector * adjust modal height * temp * fix e2e tests * fix snapshot * fix e2e tests * fix snapshots * fix snapshots * fix snapshots * fix e2e tests * update snapshots * fix snapshots * fix linter * Implement PR feedback * fix e2e tests * adjust styling for channel notifications modal * more fixes to e2e tests --------- Co-authored-by: Mattermost Build <build@mattermost.com>
2025-03-10 23:20:59 +01:00
--- a/e2e-tests/cypress/tests/integration/channels/bot_accounts/in_teams_and_channels_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/bot_accounts/in_teams_and_channels_spec.ts
@@ -73,7 +73,7 @@ describe('Managing bots in Teams and Channels', () => {
            cy.postMessage(`/invite @${bot.username} `);

            // * Verify system message in-channel
-            cy.uiWaitUntilMessagePostedIncludes(`@${bot.username} is not a member of the team.`);
+            cy.uiWaitUntilMessagePostedIncludes(`You can add @${bot.username} to this channel once they are members of`);
        });
    });

--- a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts
@@ -239,7 +239,7 @@ describe('Channel Info RHS', () => {
                cy.uiGetRHS().findByText('Notification Preferences').should('be.visible').click();

                // * Ensures the modal is there
-                cy.get('.channel-notifications-settings-modal').should('be.visible');
+                cy.get('.ChannelNotificationModal').should('be.visible');
            });
            it('should be able to view files and come back', () => {
                // # Go to test channel
@@ -401,7 +401,7 @@ describe('Channel Info RHS', () => {
                cy.uiGetRHS().findByText('Notification Preferences').should('be.visible').click();

                // * Ensures the modal is there
-                cy.get('.channel-notifications-settings-modal').should('be.visible');
+                cy.get('.ChannelNotificationModal').should('be.visible');
            });
        });
    });
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts
@@ -206,7 +206,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
        cy.get('#invitePeople').should('be.visible').click();

        // * Verify accessibility support in Invite People Dialog
-        cy.get('.InvitationModal').should('have.attr', 'aria-modal', 'true').and('have.attr', 'aria-labelledby', 'invitation_modal_title').and('have.attr', 'role', 'dialog');
+        cy.findByTestId('invitationModal').should('have.attr', 'aria-modal', 'true').and('have.attr', 'aria-labelledby', 'invitation_modal_title').and('have.attr', 'role', 'dialog');
        cy.get('#invitation_modal_title').should('be.visible').and('contain.text', 'Invite people to');

        // # Press tab
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_guest_access_ui_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_guest_access_ui_spec.ts
@@ -82,8 +82,8 @@ describe('Guest Account - Verify Guest Access UI', () => {

        // * Verify the confirmation message displayed
        cy.get('#confirmModal').should('be.visible').within(() => {
-            cy.get('#confirmModalLabel').should('be.visible').and('have.text', 'Save and Disable Guest Access?');
-            cy.get('.modal-body').should('be.visible').and('have.text', 'Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?');
+            cy.get('#genericModalLabel').should('be.visible').and('have.text', 'Save and Disable Guest Access?');
+            cy.get('.ConfirmModal__body').should('be.visible').and('have.text', 'Disabling guest access will revoke all current Guest Account sessions. Guests will no longer be able to login and new guests cannot be invited into Mattermost. Guest users will be marked as inactive in user lists. Enabling this feature will not reinstate previous guest accounts. Are you sure you wish to remove these users?');
            cy.get('#confirmModalButton').should('have.text', 'Save and Disable Guest Access');
        });

--- a/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_manage_guest_not_cloud_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_manage_guest_not_cloud_spec.ts
@@ -65,8 +65,8 @@ describe('Guest Account - Verify Manage Guest Users', () => {

        // * Verify the confirmation message displayed
        cy.get('#confirmModal').should('be.visible').within(() => {
-            cy.get('#confirmModalLabel').should('be.visible').and('have.text', `Deactivate ${guestUser.username}`);
-            cy.get('.modal-body').should('be.visible').and('have.text', `This action deactivates ${guestUser.username}. They will be logged out and not have access to any teams or channels on this system.\nAre you sure you want to deactivate ${guestUser.username}?`);
+            cy.get('#genericModalLabel').should('be.visible').and('have.text', `Deactivate ${guestUser.username}`);
+            cy.get('.modal-body .ConfirmModal__body').should('be.visible').and('have.text', `This action deactivates ${guestUser.username}. They will be logged out and not have access to any teams or channels on this system.\nAre you sure you want to deactivate ${guestUser.username}?`);
        });

        // * Verify the behavior when Cancel button in the confirmation message is clicked
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_manage_guest_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_manage_guest_spec.ts
@@ -106,8 +106,8 @@ describe('Guest Account - Verify Manage Guest Users', () => {

        // * Verify the confirmation message displayed
        cy.get('#confirmModal').should('be.visible').within(() => {
-            cy.get('#confirmModalLabel').should('be.visible').and('have.text', `Revoke Sessions for ${guestUser.username}`);
-            cy.get('.modal-body').should('be.visible').and('have.text', `This action revokes all sessions for ${guestUser.username}. They will be logged out from all devices. Are you sure you want to revoke all sessions for ${guestUser.username}?`);
+            cy.get('#genericModalLabel').should('be.visible').and('have.text', `Revoke Sessions for ${guestUser.username}`);
+            cy.get('.modal-body .ConfirmModal__body').should('be.visible').and('have.text', `This action revokes all sessions for ${guestUser.username}. They will be logged out from all devices. Are you sure you want to revoke all sessions for ${guestUser.username}?`);
        });

        // * Verify the behavior when Cancel button in the confirmation message is clicked
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/channel_moderation/channel_mentions_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/channel_moderation/channel_mentions_spec.ts
@@ -169,14 +169,14 @@ describe('MM-23102 - Channel Moderation - Channel Mentions', () => {

        // * Type at all and enter that no confirmation dialogue shows up
        cy.postMessage('@all ');
-        cy.get('#confirmModalLabel').should('not.exist');
+        cy.get('#genericModalLabel').should('not.exist');

        // * Type at channel and enter that no confirmation dialogue shows up
        cy.postMessage('@channel ');
-        cy.get('#confirmModalLabel').should('not.exist');
+        cy.get('#genericModalLabel').should('not.exist');

        // * Type at here and enter that no confirmation dialogue shows up
        cy.postMessage('@here ');
-        cy.get('#confirmModalLabel').should('not.exist');
+        cy.get('#genericModalLabel').should('not.exist');
    });
 });
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/user_management/user_management_admin_control_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/user_management/user_management_admin_control_spec.js
@@ -103,11 +103,11 @@ describe('User Management', () => {
    function verifyManageUserSettingModal(user, writeAccess) {
        if (writeAccess) {
            cy.get('.manageUserSettingsBtn').should('be.visible').should('have.text', 'Manage User Settings').click();
-            cy.get('#confirmModalLabel').should('be.visible').should('have.text', `Manage ${user.nickname}'s Settings`);
+            cy.get('#genericModalLabel').should('be.visible').should('have.text', `Manage ${user.nickname}'s Settings`);

            cy.get('#cancelModalButton').should('be.visible').should('have.text', 'Cancel');
            cy.get('#confirmModalButton').should('be.visible').should('have.text', 'Manage User Settings').click();
-            cy.get('h2#accountSettingsModalLabel').should('be.visible').should('have.text', `Manage ${user.nickname}'s Settings`);
+            cy.get('span#accountSettingsModalLabel').should('be.visible').should('have.text', `Manage ${user.nickname}'s Settings`);
            cy.get('.adminModeBadge').should('be.visible').should('have.text', 'Admin Mode');
        } else {
            cy.get('.manageUserSettingsBtn').should('not.exist');
--- a/e2e-tests/cypress/tests/integration/channels/messaging/permalink_click_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/messaging/permalink_click_spec.js
@@ -127,6 +127,6 @@ function joinPrivateChannel(channel) {
 function verifyPrivateChannelJoinPromptIsVisible(channel) {
    // * Verify modal is shown before joining the private channel
    cy.get('#confirmModal').should('be.visible');
-    cy.get('#confirmModalLabel').should('be.visible').and('have.text', 'Join private channel');
+    cy.get('#genericModalLabel').should('be.visible').and('have.text', 'Join private channel');
    cy.get('#confirmModalBody').should('be.visible').and('have.text', `You are about to join ${channel.name} without explicitly being added by the channel admin. Are you sure you wish to join this private channel?`);
 }
--- a/e2e-tests/cypress/tests/integration/channels/notifications/notification_preferences_do_not_save_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/notifications/notification_preferences_do_not_save_spec.js
@@ -55,7 +55,7 @@ describe('Notifications', () => {
                cy.wait(TIMEOUTS.HALF_SEC);

                // # Close the modal
-                cy.get('#accountSettingsHeader').find('button').should('be.visible').click();
+                cy.uiClose();
            } else {
                // * Ensure that 'Send email notifications' is set to 'Immediately'
                cy.get('#emailNotificationImmediately').should('be.visible').and('be.checked');
--- a/e2e-tests/cypress/tests/integration/channels/settings/display/channel_display_mode_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/settings/display/channel_display_mode_spec.js
@@ -43,7 +43,6 @@ describe('Settings > Display > Channel Display Mode', () => {
        cy.get('#channel_display_modeTitle').should('contain', 'Channel Display');
        cy.get('#channel_display_modeDesc').should('contain', 'Full width');
        cy.get('#channel_display_modeEdit').should('contain', 'Edit');
-        cy.get('#accountSettingsHeader > .close').should('be.visible');
    });

    it('should render in max setting view', () => {
@@ -59,7 +58,6 @@ describe('Settings > Display > Channel Display Mode', () => {
        cy.get('#channel_display_modeFormatB').should('be.visible');
        cy.get('#saveSetting').should('contain', 'Save');
        cy.get('#cancelSetting').should('contain', 'Cancel');
-        cy.get('#accountSettingsHeader > .close').should('be.visible');
    });

    it('MM-T296 change channel display mode setting to "Full width"', () => {
--- a/e2e-tests/cypress/tests/integration/channels/settings/display/theme/code_theme_colors_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/settings/display/theme/code_theme_colors_spec.js
@@ -38,7 +38,10 @@ describe('Settings > Display > Theme > Custom Theme Colors', () => {
            cy.get('#centerChannelStylesAccordion').click({force: true}).wait(TIMEOUTS.ONE_HUNDRED_MILLIS);

            // # Select custom code theme
-            cy.get('#codeThemeSelect').scrollIntoView().should('be.visible').select(theme.name);
+            cy.get('#codeThemeSelect').
+                scrollIntoView({offset: {top: 20, left: 0}}).
+                should('exist').
+                select(theme.name, {force: true});

            // * Verify that the setting changes in the background?
            verifyLastPostStyle(theme);
--- a/e2e-tests/cypress/tests/integration/channels/settings/display/timezone_display_mode_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/settings/display/timezone_display_mode_spec.js
@@ -196,7 +196,7 @@ function setTimezoneDisplayTo(isAutomatic, value) {
    });

    // # Close Settings modal
-    cy.get('#accountSettingsHeader > .close').should('be.visible').click();
+    cy.uiClose();
 }

 function setTimezoneDisplayToAutomatic(value) {
--- a/e2e-tests/cypress/tests/support/ui/channel_sidebar.ts
+++ b/e2e-tests/cypress/tests/support/ui/channel_sidebar.ts
@@ -16,7 +16,7 @@ function uiCreateSidebarCategory(categoryName: string = `category-${getRandomId(
    // # Click on the sidebar menu dropdown and select Create Category
    cy.uiBrowseOrCreateChannel('Create new category');

-    cy.findByRole('dialog', {name: 'Rename Category'}).should('be.visible').within(() => {
+    cy.findByRole('dialog', {name: 'Create New Category'}).should('be.visible').within(() => {
        // # Fill in the category name and click 'Create'
        cy.findByRole('textbox').should('be.visible').typeWithForce(categoryName).
            invoke('val').should('equal', categoryName);
@@ -59,7 +59,7 @@ function uiMoveChannelToCategory(channelName: string, categoryName: string, newC
    });

    if (newCategory) {
-        cy.findByRole('dialog', {name: 'Rename Category'}).should('be.visible').within(() => {
+        cy.findByRole('dialog', {name: 'Create New Category'}).should('be.visible').within(() => {
            // # Fill in the category name and click 'Create'
            cy.findByRole('textbox').should('be.visible').typeWithForce(categoryName).
                invoke('val').should('equal', categoryName);