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>

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"', () => {

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

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) {