FEATURE: Show a confirmation modal when "Dismiss all" would dismiss an important notification (#14935)

* Show a confirmation when dismiss all will dismiss an important notification

app/assets/javascripts/discourse/app/widgets/user-menu.js

@@ -1,5 +1,7 @@
 import { later } from "@ember/runloop";
+import bootbox from "bootbox";
 import { createWidget } from "discourse/widgets/widget";
+import I18n from "I18n";
 import { h } from "virtual-dom";
 
 const UserMenuAction = {
@@ -249,7 +251,26 @@ export default createWidget("user-menu", {
   },
 
   dismissNotifications() {
-    return this.state.markRead();
+    const unreadHighPriorityNotifications = this.currentUser.get(
+      "unread_high_priority_notifications"
+    );
+
+    if (unreadHighPriorityNotifications > 0) {
+      return bootbox.confirm(
+        I18n.t("notifications.dismiss_confirmation.body", {
+          count: unreadHighPriorityNotifications,
+        }),
+        I18n.t("notifications.dismiss_confirmation.cancel"),
+        I18n.t("notifications.dismiss_confirmation.confirm"),
+        (result) => {
+          if (result) {
+            this.state.markRead();
+          }
+        }
+      );
+    } else {
+      return this.state.markRead();
+    }
   },
 
   itemsLoaded({ hasUnread, markRead }) {

app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js

@@ -0,0 +1,79 @@
+import { click, visit } from "@ember/test-helpers";
+import {
+  acceptance,
+  exists,
+  query,
+  updateCurrentUser,
+} from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+import pretender from "../helpers/create-pretender";
+
+acceptance("Dismiss notification confirmation", function (needs) {
+  needs.user();
+
+  test("does not show modal when no high priority notifications", async function (assert) {
+    pretender.put("/notifications/mark-read", () => {
+      return [200, { "Content-Type": "application/json" }, { success: true }];
+    });
+
+    await visit("/");
+    await click(".current-user");
+    await click(".notifications-dismiss");
+    assert.notOk(exists(".bootbox.modal"));
+  });
+
+  test("shows confirmation modal", async function (assert) {
+    updateCurrentUser({
+      unread_high_priority_notifications: 2,
+    });
+    await visit("/");
+    await click(".current-user");
+    await click(".notifications-dismiss");
+    assert.ok(exists(".bootbox.modal"));
+
+    assert.strictEqual(
+      query(".bootbox.modal .modal-body").innerText,
+      "You have 2 important notifications, are you sure you would like to dismiss?"
+    );
+    await click(".bootbox.modal .btn-default");
+  });
+
+  test("marks unread when confirm and closes modal", async function (assert) {
+    updateCurrentUser({
+      unread_high_priority_notifications: 2,
+    });
+    await visit("/");
+    await click(".current-user");
+    await click(".notifications-dismiss");
+
+    assert.strictEqual(
+      query(".bootbox.modal .btn-primary span").innerText,
+      "Confirm"
+    );
+    pretender.put("/notifications/mark-read", () => {
+      return [200, { "Content-Type": "application/json" }, { success: true }];
+    });
+
+    await click(".bootbox.modal .btn-primary");
+
+    assert.notOk(exists(".bootbox.modal"));
+  });
+
+  test("marks unread when cancel and closes modal", async function (assert) {
+    updateCurrentUser({
+      unread_high_priority_notifications: 2,
+    });
+    await visit("/");
+    await click(".current-user");
+    await click(".notifications-dismiss");
+
+    assert.strictEqual(
+      query(".bootbox.modal .btn-default span").innerText,
+      "Cancel"
+    );
+
+    await click(".bootbox.modal .btn-default");
+
+    assert.notOk(exists(".bootbox.modal"));
+  });
+});

config/locales/client.en.yml

@@ -2285,6 +2285,12 @@ en:
       reaction: "<span>%{username}</span> %{description}"
       reaction_2: "<span>%{username}, %{username2}</span> %{description}"
       votes_released: "%{description} - completed"
+      dismiss_confirmation:
+        body:
+          one: "You have %{count} important notification, are you sure you would like to dismiss?"
+          other: "You have %{count} important notifications, are you sure you would like to dismiss?"
+        confirm: "Confirm"
+        cancel: "Cancel"
 
       group_message_summary:
         one: "%{count} message in your %{group_name} inbox"