MM-52219 Add announcement bar to prompt users for notification permission (#26849)

* MM-52219 Add announcement bar to prompt users for notification permission

* Update i18n strings

* Only show NotificationPermissionsBar when logged in

* Update text

* Remove z-index from AnnouncementBar

---------

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

webapp/channels/src/components/announcement_bar/announcement_bar_controller.tsx

@@ -12,6 +12,7 @@ import CloudTrialAnnouncementBar from './cloud_trial_announcement_bar';
 import CloudTrialEndAnnouncementBar from './cloud_trial_ended_announcement_bar';
 import ConfigurationAnnouncementBar from './configuration_bar';
 import AnnouncementBar from './default_announcement_bar';
+import NotificationPermissionBar from './notification_permission_bar';
 import OverageUsersBanner from './overage_users_banner';
 import PaymentAnnouncementBar from './payment_announcement_bar';
 import AutoStartTrialModal from './show_start_trial_modal/show_start_trial_modal';
@@ -99,6 +100,7 @@ class AnnouncementBarController extends React.PureComponent<Props> {
         // Even if all Foo, Bar and Baz render, only Baz is visible as it's further down.
         return (
             <>
+                <NotificationPermissionBar/>
                 {adminConfiguredAnnouncementBar}
                 {errorBar}
                 <UsersLimitsAnnouncementBar

webapp/channels/src/components/announcement_bar/notification_permission_bar/index.tsx

@@ -0,0 +1,57 @@
+// 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 {useSelector} from 'react-redux';
+
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+
+import AnnouncementBar from 'components/announcement_bar/default_announcement_bar';
+
+import {AnnouncementBarTypes} from 'utils/constants';
+
+export default function NotificationPermissionBar() {
+    const isLoggedIn = Boolean(useSelector(getCurrentUserId));
+
+    const [show, setShow] = useState(Notification.permission === 'default');
+
+    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 after refresh.
+        setShow(false);
+    }, []);
+
+    const handleClick = useCallback(() => {
+        Notification.requestPermission().then(() => {
+            setShow(false);
+        });
+    }, []);
+
+    if (!show || !isLoggedIn) {
+        return null;
+    }
+
+    return (
+        <AnnouncementBar
+            showCloseButton={true}
+            handleClose={handleClose}
+            type={AnnouncementBarTypes.ANNOUNCEMENT}
+            message={
+                <FormattedMessage
+                    id='announcement_bar.notification.needs_permisson'
+                    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}
+        />
+    );
+}

webapp/channels/src/i18n/en.json

@@ -2797,6 +2797,8 @@
   "announcement_bar.error.trial_license_expiring_last_day": "This is the last day of your free trial. Purchase a license now to continue using Mattermost Professional and Enterprise features.",
   "announcement_bar.error.trial_license_expiring_last_day.short": "This is the last day of your free trial.",
   "announcement_bar.notification.email_verified": "Email verified",
+  "announcement_bar.notification.enable_notifications": "Enable notifications",
+  "announcement_bar.notification.needs_permisson": "We need your permission to show desktop notifications.",
   "announcement_bar.warn.contact_support_text": "To renew your license, contact support at support@mattermost.com.",
   "announcement_bar.warn.email_support": "[Contact support](!{email}).",
   "announcement_bar.warn.no_internet_connection": "Looks like you do not have access to the internet.",

webapp/channels/src/sass/components/_announcement-bar.scss

@@ -1,7 +1,6 @@
 @charset 'UTF-8';
 
 .announcement-bar {
-    z-index: 999;
     display: flex;
     overflow: hidden;
     width: 100vw;