diff --git 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 index c95695a866..f7da2c6c78 100644 --- 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'); }); }); }); diff --git 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 index b54a9d8121..c34cb4022d 100644 --- 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(); -} diff --git 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 index a4986b7ad0..12d9e3a4d3 100644 --- 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'); diff --git 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 index 22c60ee93d..11395b4528 100644 --- 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(); } diff --git a/webapp/channels/src/components/alert_banner.tsx b/webapp/channels/src/components/alert_banner.tsx index 3e2dde3827..82a0e47483 100644 --- a/webapp/channels/src/components/alert_banner.tsx +++ b/webapp/channels/src/components/alert_banner.tsx @@ -25,6 +25,7 @@ export type AlertBannerProps = { id?: string; mode: ModeType; title?: React.ReactNode; + customIcon?: React.ReactNode; message?: React.ReactNode; children?: React.ReactNode; className?: string; @@ -41,6 +42,7 @@ const AlertBanner = ({ id, mode, title, + customIcon, message, className, variant = 'sys', @@ -57,6 +59,9 @@ const AlertBanner = ({ const [tooltipId] = useState(`alert_banner_close_btn_tooltip_${Math.random()}`); const bannerIcon = useCallback(() => { + if (customIcon) { + return customIcon; + } if (mode === 'danger' || mode === 'warning') { return ( ); - }, [mode]); + }, [mode, customIcon]); return (
- - - - - channel_display_name - - - -