[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>
2023-11-14 00:50:35 +05:30
--- a/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.js
@@ -211,7 +211,7 @@ describe('Channel Info RHS', () => {
                cy.uiGetRHS().findByText('Notification Preferences').should('be.visible').click();

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

                // * Ensures the modal is there
-                cy.get('.settings-modal').should('be.visible');
+                cy.get('.channel-notifications-settings-modal').should('be.visible');
            });
        });
    });
--- a/e2e-tests/cypress/tests/integration/channels/collapsed_reply_threads/channel_notifications_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/collapsed_reply_threads/channel_notifications_spec.js
@@ -52,11 +52,46 @@ describe('CRT Desktop notifications', () => {
        // # Visit channel
        cy.visit(testChannelUrl);

+        cy.uiOpenChannelMenu('Notification Preferences');
+        cy.get('[data-testid="muteChannel"]').click().then(() => {
+            cy.get('.AlertBanner--app').should('be.visible');
+        });
+        cy.get('.channel-notifications-settings-modal__save-btn').should('be.visible').click();
+
        // Setup notification spy
        spyNotificationAs('notifySpy', 'granted');

        // # Set users notification settings
-        setCRTDesktopNotification('ALL');
+        cy.uiOpenChannelMenu('Notification Preferences');
+
+        // # click on Mute Channel to Unmute Channel
+        cy.get('[data-testid="muteChannel"]').click();
+
+        // # Click "Desktop Notifications"
+        cy.findByText('Desktop Notifications').should('be.visible');
+
+        cy.get('.channel-notifications-settings-modal__body').scrollTo('center').get('#desktopNotification-all').should('be.visible').click();
+        cy.get('.channel-notifications-settings-modal__body').get('#desktopNotification-all').should('be.checked');
+
+        cy.get('#desktopNotification-mention').should('be.visible').click().then(() => {
+            cy.get('[data-testid="desktopReplyThreads"]').should('be.checked');
+            cy.get('[data-testid="desktopReplyThreads"]').should('be.visible').click();
+            cy.get('[data-testid="desktopReplyThreads"]').should('not.be.checked');
+        });
+        cy.get('.channel-notifications-settings-modal__body').scrollTo('center').get('#desktopNotification-mention').should('be.checked');
+
+        cy.get('.channel-notifications-settings-modal__body').scrollTo('center').get('#desktopNotification-none').should('be.visible').click();
+        cy.get('.channel-notifications-settings-modal__body').get('#desktopNotification-none').should('be.checked');
+
+        // # click on Save button
+        cy.get('.channel-notifications-settings-modal__save-btn').should('be.visible').click();
+
+        // # Set users notification settings
+        cy.uiOpenChannelMenu('Notification Preferences');
+        cy.get('.channel-notifications-settings-modal__body').scrollTo('center').get('#desktopNotification-none').should('be.checked');
+        cy.get('.channel-notifications-settings-modal__body').get('#desktopNotification-all').scrollIntoView().should('be.visible').click();
+
+        cy.get('.channel-notifications-settings-modal__save-btn').should('be.visible').click();

        // # Post a root message as other user
        cy.postMessageAs({sender, message: 'This is a not followed root message', channelId: testChannelId, rootId: ''}).then(({id: postId}) => {
@@ -99,14 +134,41 @@ describe('CRT Desktop notifications', () => {
        });
    });

-    it('MM-T4417_2 Trigger notifications only on mention replies when channel setting is unchecked', () => {
+    it('MM-T4417_2 Click on sameMobileSettingsDesktop and check if additional settings still appears', () => {
+        cy.visit(testChannelUrl);
+        cy.uiOpenChannelMenu('Notification Preferences');
+        cy.get('.channel-notifications-settings-modal__body').scrollTo('center').get('#desktopNotification-mention').should('be.visible').click().then(() => {
+            cy.get('[data-testid="desktopReplyThreads"]').should('be.visible').click();
+        });
+        cy.get('.channel-notifications-settings-modal__body').scrollTo('center').get('[data-testid="desktopReplyThreads"]').should('be.visible').click();
+        cy.get('.channel-notifications-settings-modal__body').get('[data-testid="sameMobileSettingsDesktop"]').scrollIntoView().click().should('be.checked').then(() => {
+            cy.findByText('Notify me about…').should('not.be.visible');
+        });
+
+        // check the box to see if the additional settings appears
+        cy.get('.channel-notifications-settings-modal__body').get('[data-testid="sameMobileSettingsDesktop"]').scrollIntoView().click();
+        cy.get('.mm-modal-generic-section-item__title').should('be.visible').and('contain', 'Notify me about');
+
+        cy.get('#MobileNotification-all').should('be.visible').click();
+        cy.get('#MobileNotification-mention').should('be.visible').click().then(() => {
+            cy.get('[data-testid="mobileReplyThreads"]').should('be.visible').click();
+        });
+        cy.get('#MobileNotification-none').should('be.visible').click();
+
+        cy.get('[data-testid="autoFollowThreads"]').should('be.visible').click();
+
+        // # click on Save button
+        cy.get('.channel-notifications-settings-modal__save-btn').should('be.visible').click();
+    });
+
+    it('MM-T4417_3 Trigger notifications only on mention replies when channel setting is unchecked', () => {
        cy.visit(testChannelUrl);

        // Setup notification spy
        spyNotificationAs('notifySpy', 'granted');
-
-        // # Set users notification settings
-        setCRTDesktopNotification('MENTION');
+        cy.uiOpenChannelMenu('Notification Preferences');
+        cy.get('.channel-notifications-settings-modal__body').scrollTo('center').get('#desktopNotification-mention').should('be.visible').click();
+        cy.get('.channel-notifications-settings-modal__save-btn').should('be.visible').click();

        // # Post a root message as other user
        cy.postMessageAs({sender, message: 'This is a not followed root message', channelId: testChannelId, rootId: ''}).then(({id: postId}) => {
@@ -232,32 +294,3 @@ describe('CRT Desktop notifications', () => {
        });
    });
 });
-
-function setCRTDesktopNotification(type) {
-    if (['ALL', 'MENTION'].indexOf(type) === -1) {
-        throw new Error(`${type} is invalid`);
-    }
-
-    // # Open settings modal
-    cy.uiOpenChannelMenu('Notification Preferences');
-
-    // # Click "Desktop Notifications"
-    cy.get('#desktopTitle').
-        scrollIntoView().
-        should('be.visible').
-        and('contain', 'Desktop notifications').click();
-
-    // # Select mentions category for messages.
-    cy.get('#channelNotificationMentions').scrollIntoView().check();
-
-    if (type === 'ALL') {
-        // # Check notify for all replies.
-        cy.get('#desktopThreadsNotificationAllActivity').scrollIntoView().check().should('be.checked');
-    } else if (type === 'MENTION') {
-        // # Check notify only for mentions.
-        cy.get('#desktopThreadsNotificationAllActivity').scrollIntoView().uncheck().should('not.be.checked');
-    }
-
-    // # Click "Save" and close the modal
-    cy.uiSaveAndClose();
-}
--- a/e2e-tests/cypress/tests/integration/channels/notifications/desktop_notifications_2_spec.js
+++ b/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');
--- a/e2e-tests/cypress/tests/integration/channels/notifications/ignore_channel_mentions_spec.js
+++ b/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();
 }