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: "%{username} %{description}"
reaction_2: "%{username}, %{username2} %{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"