forked from mattermost/mattermost
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MM-60484 & MM-60485] Add disabled notification banners and section n…
…otices for web (mattermost#28372)
- Loading branch information
1 parent
2d2c039
commit 857fd87
Showing
29 changed files
with
652 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
...components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`NotificationPermissionBar should render the NotificationPermissionNeverGrantedBar when permission is never granted yet 1`] = ` | ||
| <div> | ||
| <div | ||
| class="_StyledDiv-BRlth ksRYxX announcement-bar" | ||
| > | ||
| <div | ||
| class="announcement-bar__text" | ||
| > | ||
| <i | ||
| class="icon icon-alert-circle-outline" | ||
| /> | ||
| <span> | ||
| We need your permission to show notifications in the browser. | ||
| </span> | ||
| <button> | ||
| Enable notifications | ||
| </button> | ||
| </div> | ||
| <a | ||
| class="announcement-bar__close" | ||
| href="#" | ||
| > | ||
| × | ||
| </a> | ||
| </div> | ||
| </div> | ||
| `; | ||
|
|
||
| exports[`NotificationPermissionBar should render the NotificationUnsupportedBar if notifications are not supported 1`] = ` | ||
| <div> | ||
| <div | ||
| class="_StyledDiv-BRlth ksRYxX announcement-bar" | ||
| > | ||
| <div | ||
| class="announcement-bar__text" | ||
| > | ||
| <i | ||
| class="icon icon-alert-circle-outline" | ||
| /> | ||
| <span> | ||
| Your browser does not support browser notifications. | ||
| </span> | ||
| <button> | ||
| Update your browser | ||
| </button> | ||
| </div> | ||
| <a | ||
| class="announcement-bar__close" | ||
| href="#" | ||
| > | ||
| × | ||
| </a> | ||
| </div> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 23 additions & 38 deletions
61
webapp/channels/src/components/announcement_bar/notification_permission_bar/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| if (!isLoggedIn) { | ||
| return null; | ||
| } | ||
|
|
||
| const handleClick = useCallback(async () => { | ||
| await requestNotificationPermission(); | ||
| setShow(false); | ||
| }, []); | ||
| // When browser does not support notification API, we show the notification bar to update browser | ||
| if (!isNotificationAPISupported()) { | ||
| return <NotificationPermissionUnsupportedBar/>; | ||
| } | ||
|
|
||
| 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); | ||
| }, []); | ||
| // When user has not granted permission, we show the notification bar to request permission | ||
| if (getNotificationPermission() === NotificationPermissionNeverGranted) { | ||
| return <NotificationPermissionNeverGrantedBar/>; | ||
| } | ||
|
|
||
| if (!show || !isLoggedIn || !isNotificationAPISupported()) { | ||
| // When user has denied permission, we don't show since user explicitly denied permission | ||
| if (getNotificationPermission() === NotificationPermissionDenied) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <AnnouncementBar | ||
| showCloseButton={true} | ||
| handleClose={handleClose} | ||
| type={AnnouncementBarTypes.ANNOUNCEMENT} | ||
| message={ | ||
| <FormattedMessage | ||
| id='announcement_bar.notification.needs_permission' | ||
| defaultMessage='We need your permission to show desktop notifications.' | ||
| /> | ||
| } | ||
| ctaText={ | ||
| <FormattedMessage | ||
| id='announcement_bar.notification.enable_notifications' | ||
| defaultMessage='Enable notifications' | ||
| /> | ||
| } | ||
| showCTA={true} | ||
| showLinkAsButton={true} | ||
| onButtonClick={handleClick} | ||
| /> | ||
| ); | ||
| return null; | ||
| } |
59 changes: 59 additions & 0 deletions
59
...nnouncement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <AnnouncementBar | ||
| showCloseButton={true} | ||
| handleClose={handleClose} | ||
| type={AnnouncementBarTypes.ANNOUNCEMENT} | ||
| message={ | ||
| <FormattedMessage | ||
| id='announcementBar.notification.permissionNeverGrantedBar.message' | ||
| defaultMessage='We need your permission to show notifications in the browser.' | ||
| /> | ||
| } | ||
| ctaText={ | ||
| <FormattedMessage | ||
| id='announcementBar.notification.permissionNeverGrantedBar.cta' | ||
| defaultMessage='Enable notifications' | ||
| /> | ||
| } | ||
| showCTA={true} | ||
| showLinkAsButton={true} | ||
| onButtonClick={handleClick} | ||
| /> | ||
| ); | ||
| } |
50 changes: 50 additions & 0 deletions
50
.../announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <AnnouncementBar | ||
| showCloseButton={true} | ||
| type={AnnouncementBarTypes.ANNOUNCEMENT} | ||
| handleClose={handleClose} | ||
| message={ | ||
| <FormattedMessage | ||
| id='announcementBar.notification.unsupportedBar.message' | ||
| defaultMessage='Your browser does not support browser notifications.' | ||
| /> | ||
| } | ||
| ctaText={ | ||
| <FormattedMessage | ||
| id='announcementBar.notification.unsupportedBar.cta' | ||
| defaultMessage='Update your browser' | ||
| /> | ||
| } | ||
| showCTA={true} | ||
| showLinkAsButton={true} | ||
| onButtonClick={handleClick} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.