From c61d47e6f4d44e44217892e8b09b28305b5fec00 Mon Sep 17 00:00:00 2001
From: Natalie Tay <natalie.tay@discourse.org>
Date: Wed, 17 Nov 2021 09:44:30 +0800
Subject: [PATCH] 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
---
 .../discourse/app/widgets/user-menu.js        | 23 +++++-
 .../dismiss-notification-modal-test.js        | 79 +++++++++++++++++++
 config/locales/client.en.yml                  |  6 ++
 3 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js

diff --git a/app/assets/javascripts/discourse/app/widgets/user-menu.js b/app/assets/javascripts/discourse/app/widgets/user-menu.js
index fb1de662335..e324dc867c3 100644
--- a/app/assets/javascripts/discourse/app/widgets/user-menu.js
+++ b/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 }) {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js b/app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js
new file mode 100644
index 00000000000..d18dd6f482e
--- /dev/null
+++ b/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"));
+  });
+});
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index c47acbdbc52..2a35962d3e0 100644
--- a/config/locales/client.en.yml
+++ b/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"