diff --git a/webapp/channels/src/components/announcement_bar/index.ts b/webapp/channels/src/components/announcement_bar/index.ts index c62d95c57f..d21ae3dfe9 100644 --- a/webapp/channels/src/components/announcement_bar/index.ts +++ b/webapp/channels/src/components/announcement_bar/index.ts @@ -45,7 +45,6 @@ function mapStateToProps(state: GlobalState) { }; } -// function mapDispatchToProps(dispatch: Dispatch) { const dismissFirstError = dismissError.bind(null, 0); return { diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..4295d195db --- /dev/null +++ b/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap @@ -0,0 +1,57 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NotificationPermissionBar should render the NotificationPermissionNeverGrantedBar when permission is never granted yet 1`] = ` +
+
+
+ + + We need your permission to show notifications in the browser. + + +
+ + × + +
+
+`; + +exports[`NotificationPermissionBar should render the NotificationUnsupportedBar if notifications are not supported 1`] = ` +
+
+
+ + + Your browser does not support browser notifications. + + +
+ + × + +
+
+`; diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.test.tsx b/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.test.tsx index d534ad0194..2f914ca5da 100644 --- a/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.test.tsx +++ b/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.test.tsx @@ -1,19 +1,13 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {screen, waitFor} from '@testing-library/react'; import React from 'react'; -import {renderWithContext, userEvent} from 'tests/react_testing_utils'; -import {requestNotificationPermission, isNotificationAPISupported} from 'utils/notifications'; +import {renderWithContext, userEvent, screen, waitFor} from 'tests/react_testing_utils'; +import * as utilsNotifications from 'utils/notifications'; import NotificationPermissionBar from './index'; -jest.mock('utils/notifications', () => ({ - requestNotificationPermission: jest.fn(), - isNotificationAPISupported: jest.fn(), -})); - describe('NotificationPermissionBar', () => { const initialState = { entities: { @@ -27,52 +21,71 @@ describe('NotificationPermissionBar', () => { }, }; - beforeEach(() => { - (isNotificationAPISupported as jest.Mock).mockReturnValue(true); - (window as any).Notification = {permission: 'default'}; - }); - afterEach(() => { - jest.clearAllMocks(); - delete (window as any).Notification; + jest.restoreAllMocks(); }); - test('should render the notification bar when conditions are met', () => { - renderWithContext(, initialState); + test('should not render anything if user is not logged in', () => { + const {container} = renderWithContext(); - expect(screen.getByText('We need your permission to show desktop notifications.')).toBeInTheDocument(); + expect(container).toBeEmptyDOMElement(); + }); + + test('should render the NotificationUnsupportedBar if notifications are not supported', () => { + jest.spyOn(utilsNotifications, 'isNotificationAPISupported').mockReturnValue(false); + + const {container} = renderWithContext(, initialState); + + expect(container).toMatchSnapshot(); + + expect(screen.queryByText('Your browser does not support browser notifications.')).toBeInTheDocument(); + expect(screen.queryByText('Update your browser')).toBeInTheDocument(); + }); + + test('should render the NotificationPermissionNeverGrantedBar when permission is never granted yet', () => { + jest.spyOn(utilsNotifications, 'isNotificationAPISupported').mockReturnValue(true); + jest.spyOn(utilsNotifications, 'getNotificationPermission').mockReturnValue(utilsNotifications.NotificationPermissionNeverGranted); + + const {container} = renderWithContext(, initialState); + + expect(container).toMatchSnapshot(); + + expect(screen.getByText('We need your permission to show notifications in the browser.')).toBeInTheDocument(); expect(screen.getByText('Enable notifications')).toBeInTheDocument(); }); - test('should not render the notification bar if user is not logged in', () => { - renderWithContext(); - - expect(screen.queryByText('We need your permission to show desktop notifications.')).not.toBeInTheDocument(); - expect(screen.queryByText('Enable notifications')).not.toBeInTheDocument(); - }); - - test('should not render the notification bar if Notifications are not supported', () => { - delete (window as any).Notification; - (isNotificationAPISupported as jest.Mock).mockReturnValue(false); + test('should call requestNotificationPermission and hide the bar when the button is clicked in NotificationPermissionNeverGrantedBar', async () => { + jest.spyOn(utilsNotifications, 'isNotificationAPISupported').mockReturnValue(true); + jest.spyOn(utilsNotifications, 'getNotificationPermission').mockReturnValue(utilsNotifications.NotificationPermissionNeverGranted); + jest.spyOn(utilsNotifications, 'requestNotificationPermission').mockResolvedValue(utilsNotifications.NotificationPermissionGranted); renderWithContext(, initialState); - expect(screen.queryByText('We need your permission to show desktop notifications.')).not.toBeInTheDocument(); - expect(screen.queryByText('Enable notifications')).not.toBeInTheDocument(); - }); - - test('should call requestNotificationPermission and hide the bar when the button is clicked', async () => { - (requestNotificationPermission as jest.Mock).mockResolvedValue('granted'); - - renderWithContext(, initialState); - - expect(screen.getByText('We need your permission to show desktop notifications.')).toBeInTheDocument(); + expect(screen.getByText('We need your permission to show notifications in the browser.')).toBeInTheDocument(); await waitFor(async () => { userEvent.click(screen.getByText('Enable notifications')); }); - expect(requestNotificationPermission).toHaveBeenCalled(); - expect(screen.queryByText('We need your permission to show desktop notifications.')).not.toBeInTheDocument(); + expect(utilsNotifications.requestNotificationPermission).toHaveBeenCalled(); + expect(screen.queryByText('We need your permission to show browser notifications.')).not.toBeInTheDocument(); + }); + + test('should not render anything if permission is denied', () => { + jest.spyOn(utilsNotifications, 'isNotificationAPISupported').mockReturnValue(true); + jest.spyOn(utilsNotifications, 'getNotificationPermission').mockReturnValue('denied'); + + const {container} = renderWithContext(, initialState); + + expect(container).toBeEmptyDOMElement(); + }); + + test('should not render anything if permission is granted', () => { + jest.spyOn(utilsNotifications, 'isNotificationAPISupported').mockReturnValue(true); + jest.spyOn(utilsNotifications, 'getNotificationPermission').mockReturnValue('granted'); + + const {container} = renderWithContext(, initialState); + + expect(container).toBeEmptyDOMElement(); }); }); diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.tsx b/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.tsx index e4e0c130fd..a94c4fd4d2 100644 --- a/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.tsx +++ b/webapp/channels/src/components/announcement_bar/notification_permission_bar/index.tsx @@ -1,57 +1,42 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useCallback, useState} from 'react'; -import {FormattedMessage} from 'react-intl'; +import React from 'react'; import {useSelector} from 'react-redux'; import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users'; -import AnnouncementBar from 'components/announcement_bar/default_announcement_bar'; +import NotificationPermissionNeverGrantedBar from 'components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar'; +import NotificationPermissionUnsupportedBar from 'components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar'; -import {AnnouncementBarTypes} from 'utils/constants'; -import {requestNotificationPermission, isNotificationAPISupported} from 'utils/notifications'; +import { + isNotificationAPISupported, + NotificationPermissionDenied, + NotificationPermissionNeverGranted, + getNotificationPermission, +} from 'utils/notifications'; export default function NotificationPermissionBar() { const isLoggedIn = Boolean(useSelector(getCurrentUserId)); - const [show, setShow] = useState(isNotificationAPISupported() ? Notification.permission === 'default' : false); - - const handleClick = useCallback(async () => { - await requestNotificationPermission(); - setShow(false); - }, []); - - const handleClose = useCallback(() => { - // If the user closes the bar, don't show the notification bar any more for the rest of the session, but - // show it again on app refresh. - setShow(false); - }, []); - - if (!show || !isLoggedIn || !isNotificationAPISupported()) { + if (!isLoggedIn) { return null; } - return ( - - } - ctaText={ - - } - showCTA={true} - showLinkAsButton={true} - onButtonClick={handleClick} - /> - ); + // When browser does not support notification API, we show the notification bar to update browser + if (!isNotificationAPISupported()) { + return ; + } + + // When user has not granted permission, we show the notification bar to request permission + if (getNotificationPermission() === NotificationPermissionNeverGranted) { + return ; + } + + // When user has denied permission, we don't show since user explicitly denied permission + if (getNotificationPermission() === NotificationPermissionDenied) { + return null; + } + + return null; } diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx b/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx new file mode 100644 index 0000000000..913882e06b --- /dev/null +++ b/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx @@ -0,0 +1,59 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback, useState} from 'react'; +import {FormattedMessage} from 'react-intl'; + +import AnnouncementBar from 'components/announcement_bar/default_announcement_bar'; + +import {AnnouncementBarTypes} from 'utils/constants'; +import {requestNotificationPermission} from 'utils/notifications'; + +export default function NotificationPermissionNeverGrantedBar() { + const [show, setShow] = useState(true); + + const handleClick = useCallback(async () => { + try { + await requestNotificationPermission(); + } catch (error) { + // eslint-disable-next-line no-console + console.error('Error requesting notification permission', error); + } finally { + // Dismiss the bar after user makes a choice + setShow(false); + } + }, []); + + const handleClose = useCallback(() => { + // If the user closes the bar, don't show the notification bar any more for the rest of the session, but + // show it again on app refresh. + setShow(false); + }, []); + + if (!show) { + return null; + } + + return ( + + } + ctaText={ + + } + showCTA={true} + showLinkAsButton={true} + onButtonClick={handleClick} + /> + ); +} diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx b/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx new file mode 100644 index 0000000000..0caefa8395 --- /dev/null +++ b/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx @@ -0,0 +1,50 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {useCallback, useState} from 'react'; +import {FormattedMessage} from 'react-intl'; + +import AnnouncementBar from 'components/announcement_bar/default_announcement_bar'; + +import {AnnouncementBarTypes} from 'utils/constants'; + +export default function UnsupportedNotificationAnnouncementBar() { + const [show, setShow] = useState(true); + + const handleClick = useCallback(async () => { + window.open('https://mattermost.com/pl/pc-web-requirements', '_blank', 'noopener,noreferrer'); + }, []); + + const handleClose = useCallback(() => { + // If the user closes the bar, don't show the notification bar any more for the rest of the session, but + // show it again on app refresh. + setShow(false); + }, []); + + if (!show) { + return null; + } + + return ( + + } + ctaText={ + + } + showCTA={true} + showLinkAsButton={true} + onButtonClick={handleClick} + /> + ); +} diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap index e726c2436f..4158c8a1ee 100644 --- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap +++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap @@ -559,7 +559,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1 uppercase={true} >
{ renderWithContext(); const primaryButton = screen.getByText(props.primaryButton!.text); const secondaryButton = screen.getByText(props.secondaryButton!.text); + const tertiaryButton = screen.getByText(props.tertiaryButton!.text); const linkButton = screen.getByText(props.linkButton!.text); const closeButton = screen.getByLabelText('Dismiss notice'); expect(primaryButton).toBeInTheDocument(); expect(secondaryButton).toBeInTheDocument(); + expect(tertiaryButton).toBeInTheDocument(); expect(linkButton).toBeInTheDocument(); expect(closeButton).toBeInTheDocument(); expect(screen.queryByText(props.text as string)).toBeInTheDocument(); @@ -52,6 +58,8 @@ describe('PluginAction', () => { expect(props.primaryButton?.onClick).toHaveBeenCalledTimes(1); fireEvent.click(secondaryButton); expect(props.secondaryButton?.onClick).toHaveBeenCalledTimes(1); + fireEvent.click(tertiaryButton); + expect(props.tertiaryButton?.onClick).toHaveBeenCalledTimes(1); fireEvent.click(linkButton); expect(props.linkButton?.onClick).toHaveBeenCalledTimes(1); fireEvent.click(closeButton); @@ -62,6 +70,7 @@ describe('PluginAction', () => { const props = getBaseProps(); props.primaryButton = undefined; props.secondaryButton = undefined; + props.tertiaryButton = undefined; props.linkButton = undefined; props.isDismissable = false; renderWithContext(); diff --git a/webapp/channels/src/components/section_notice/index.tsx b/webapp/channels/src/components/section_notice/index.tsx index 3ca58e905a..cb04c3085a 100644 --- a/webapp/channels/src/components/section_notice/index.tsx +++ b/webapp/channels/src/components/section_notice/index.tsx @@ -17,6 +17,7 @@ type Props = { text?: string; primaryButton?: SectionNoticeButtonProp; secondaryButton?: SectionNoticeButtonProp; + tertiaryButton?: SectionNoticeButtonProp; linkButton?: SectionNoticeButtonProp; type?: 'info' | 'success' | 'danger' | 'welcome' | 'warning' | 'hint'; isDismissable?: boolean; @@ -37,6 +38,7 @@ const SectionNotice = ({ text, primaryButton, secondaryButton, + tertiaryButton, linkButton, type = 'info', isDismissable, @@ -45,7 +47,7 @@ const SectionNotice = ({ const intl = useIntl(); const icon = iconByType[type]; const showDismiss = Boolean(isDismissable && onDismissClick); - const hasButtons = Boolean(primaryButton || secondaryButton || linkButton); + const hasButtons = Boolean(primaryButton || secondaryButton || tertiaryButton || linkButton); return (
@@ -64,9 +66,15 @@ const SectionNotice = ({ {secondaryButton && } + {tertiaryButton && ( + + )} {linkButton && { className={`section-max form-horizontal ${this.props.containerStyle}`} > {title} + {this.props.extraContentBeforeSettingList}
Desktop and mobile notifications +