settings: Show desktop notifications warning when permissions needed.

Display a warning banner in the desktop notifications settings
when browser permissions are not granted.
Hide "Send test notification" button unless permissions are granted.

Fixes: #33222.

web/src/settings_notifications.ts

@@ -5,6 +5,7 @@ import {z} from "zod";
 import render_confirm_disable_all_notifications from "../templates/confirm_dialog/confirm_disable_all_notifications.hbs";
 import render_stream_specific_notification_row from "../templates/settings/stream_specific_notification_row.hbs";
 
+import * as banners from "./banners.ts";
 import * as blueslip from "./blueslip.ts";
 import * as channel from "./channel.ts";
 import * as confirm_dialog from "./confirm_dialog.ts";
@@ -33,6 +34,22 @@ import * as util from "./util.ts";
 
 export let user_settings_panel: SettingsPanel | undefined;
 
+const DESKTOP_NOTIFICATIONS_BANNER: banners.Banner = {
+    intent: "warning",
+    label: $t({
+        defaultMessage: "Zulip needs your permission to enable desktop notifications.",
+    }),
+    buttons: [
+        {
+            label: $t({defaultMessage: "Enable notifications"}),
+            custom_classes: "request-desktop-notifications",
+            attention: "primary",
+        },
+    ],
+    close_button: true,
+    custom_classes: "desktop-setting-notifications",
+};
+
 function rerender_ui(): void {
     const $unmatched_streams_table = $("#stream-specific-notify-table");
     if ($unmatched_streams_table.length === 0) {
@@ -68,6 +85,18 @@ function rerender_ui(): void {
     } else {
         $unmatched_streams_table.css("display", "table-row-group");
     }
+    update_notification_banner();
+}
+
+function update_notification_banner(): void {
+    const permission = Notification.permission;
+    if (permission === "granted") {
+        banners.close($(".desktop-notification-settings-banners .desktop-setting-notifications"));
+        $(".send_test_notification").show();
+    } else {
+        banners.append(DESKTOP_NOTIFICATIONS_BANNER, $(".desktop-notification-settings-banners"));
+        $(".send_test_notification").hide();
+    }
 }
 
 function change_notification_setting(
@@ -336,6 +365,26 @@ export function set_up(settings_panel: SettingsPanel): void {
         );
     });
 
+    $("#settings_content").on("click", ".request-desktop-notifications", (e) => {
+        e.preventDefault();
+        void Notification.requestPermission().then((permission) => {
+            if (permission === "granted") {
+                update_notification_banner();
+            } else if (permission === "denied") {
+                window.open(
+                    "/help/desktop-notifications#check-platform-settings",
+                    "_blank",
+                    "noopener noreferrer",
+                );
+            }
+        });
+    });
+
+    $("#settings_content").on("click", ".banner-close-button", (e) => {
+        e.preventDefault();
+        $(".banner-wrapper").remove();
+    });
+
     set_enable_marketing_emails_visibility();
     rerender_ui();
 }

web/templates/settings/notification_settings.hbs

@@ -107,6 +107,8 @@
             {{> settings_save_discard_widget section_name="desktop-message-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
+        <div class="desktop-notification-settings-banners"></div>
+
         {{#unless for_realm_settings}}
         <p><a class="send_test_notification">{{t "Send a test notification" }}</a></p>
         {{/unless}}