[MM-40384]: Channel notification settings modal UX revamp (#24984)

* Move notification preferences modal to new UI

* fix lint issue

* fix i18n

* fix unit test

* fix type issue and lint errors

* fix test case

* move common components to widget modals dir

* fix css issue

* feedback changes

* fix lint and i18n issues

* more feedback changes

* fix issue with mobile notification ui

* fix test

* clean up

* remove name

* fix test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/notifications/desktop_notifications_2_spec.js

@@ -53,9 +53,9 @@ describe('Desktop notifications', () => {
 
         // # Set channel notifications to show on mention only
         cy.uiOpenChannelMenu('Notification Preferences');
-        cy.findByText('Desktop notifications').click();
-        cy.findByRole('radio', {name: 'Only for mentions'}).click();
-        cy.uiSaveAndClose();
+        cy.findByText('Desktop Notifications').should('be.visible');
+        cy.findByRole('radio', {name: 'Mentions, direct messages, and keywords only'}).click().should('be.checked');
+        cy.uiSave();
 
         // # Visit off-topic
         cy.uiClickSidebarItem('off-topic');

e2e-tests/cypress/tests/integration/channels/notifications/ignore_channel_mentions_spec.js

@@ -109,26 +109,15 @@ function addNumberOfUsersToChannel(num = 1) {
 }
 
 function setIgnoreMentions(toSet) {
-    let stringToSet = 'Off';
-    if (toSet) {
-        stringToSet = 'On';
-    }
-
     // # Open channel menu and click Notification Preferences
     cy.uiOpenChannelMenu('Notification Preferences');
 
-    // # Click on the edit button for ignore channel mentions
-    cy.get('#ignoreChannelMentionsEdit').should('exist').click();
+    // # find mute or ignore section
+    cy.findByText('Mute or ignore').should('be.visible');
 
-    // # Click on selected option
-    cy.get(`#ignoreChannelMentions${stringToSet}`).should('exist').click();
+    // # find Ignore mentions checkbox, set value accordingly
+    cy.findByRole('checkbox', {name: 'Ignore mentions for @channel, @here and @all'}).click().should(toSet ? 'be.checked' : 'not.be.checked');
 
     // # Click on save to save the configuration
-    cy.get('#saveSetting').should('exist').click();
-
-    // * Assert that the option selected is reflected
-    cy.get('#ignoreChannelMentionsDesc').should('contain', stringToSet);
-
-    // # Click on the X button to close the modal
-    cy.get('#channelNotificationModalLabel').siblings('.close').click();
+    cy.uiSave();
 }