Refine dismiss notification confirmation (#15017)

app/assets/javascripts/discourse/app/controllers/dismiss-notification-confirmation.js

@@ -0,0 +1,11 @@
+import Controller from "@ember/controller";
+import ModalFunctionality from "discourse/mixins/modal-functionality";
+
+export default Controller.extend(ModalFunctionality, {
+  actions: {
+    dismiss() {
+      this.send("closeModal");
+      this.dismissNotifications();
+    },
+  },
+});

app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs

@@ -0,0 +1,15 @@
+{{#d-modal-body headerClass="hidden" class="dismiss-notification-confirmation"}}
+  {{i18n "notifications.dismiss_confirmation.body" count=count}}
+{{/d-modal-body}}
+
+<div class="modal-footer">
+  {{d-button
+    icon="check"
+    class="btn-primary"
+    action=(action "dismiss")
+    label="notifications.dismiss_confirmation.dismiss"}}
+  {{d-button
+    action=(route-action "closeModal")
+    label="notifications.dismiss_confirmation.cancel"
+    class="btn-default"}}
+</div>

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

@@ -1,8 +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";
+import showModal from "discourse/lib/show-modal";
 
 const UserMenuAction = {
   QUICK_ACCESS: "quickAccess",
@@ -256,18 +255,10 @@ export default createWidget("user-menu", {
     );
 
     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();
-          }
-        }
-      );
+      return showModal("dismiss-notification-confirmation").setProperties({
+        count: unreadHighPriorityNotifications,
+        dismissNotifications: () => this.state.markRead(),
+      });
     } else {
       return this.state.markRead();
     }

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

@@ -5,6 +5,7 @@ import {
   query,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
+import I18n from "I18n";
 import { test } from "qunit";
 import pretender from "../helpers/create-pretender";
 
@@ -19,7 +20,7 @@ acceptance("Dismiss notification confirmation", function (needs) {
     await visit("/");
     await click(".current-user");
     await click(".notifications-dismiss");
-    assert.notOk(exists(".bootbox.modal"));
+    assert.notOk(exists(".dismiss-notification-confirmation"));
   });
 
   test("shows confirmation modal", async function (assert) {
@@ -29,13 +30,12 @@ acceptance("Dismiss notification confirmation", function (needs) {
     await visit("/");
     await click(".current-user");
     await click(".notifications-dismiss");
-    assert.ok(exists(".bootbox.modal"));
+    assert.ok(exists(".dismiss-notification-confirmation"));
 
     assert.strictEqual(
-      query(".bootbox.modal .modal-body").innerText,
-      "You have 2 important notifications, are you sure you would like to dismiss?"
+      query(".dismiss-notification-confirmation-modal .modal-body").innerText,
+      I18n.t("notifications.dismiss_confirmation.body", { count: 2 })
     );
-    await click(".bootbox.modal .btn-default");
   });
 
   test("marks unread when confirm and closes modal", async function (assert) {
@@ -47,19 +47,19 @@ acceptance("Dismiss notification confirmation", function (needs) {
     await click(".notifications-dismiss");
 
     assert.strictEqual(
-      query(".bootbox.modal .btn-primary span").innerText,
-      "Confirm"
+      query(".dismiss-notification-confirmation-modal .btn-primary").innerText,
+      I18n.t("notifications.dismiss_confirmation.dismiss")
     );
     pretender.put("/notifications/mark-read", () => {
       return [200, { "Content-Type": "application/json" }, { success: true }];
     });
 
-    await click(".bootbox.modal .btn-primary");
+    await click(".dismiss-notification-confirmation-modal .btn-primary");
 
-    assert.notOk(exists(".bootbox.modal"));
+    assert.notOk(exists(".dismiss-notification-confirmation"));
   });
 
-  test("marks unread when cancel and closes modal", async function (assert) {
+  test("does marks unread when cancel and closes modal", async function (assert) {
     updateCurrentUser({
       unread_high_priority_notifications: 2,
     });
@@ -68,12 +68,12 @@ acceptance("Dismiss notification confirmation", function (needs) {
     await click(".notifications-dismiss");
 
     assert.strictEqual(
-      query(".bootbox.modal .btn-default span").innerText,
-      "Cancel"
+      query(".dismiss-notification-confirmation-modal .btn-default").innerText,
+      I18n.t("notifications.dismiss_confirmation.cancel")
     );
 
-    await click(".bootbox.modal .btn-default");
+    await click(".dismiss-notification-confirmation-modal .btn-default");
 
-    assert.notOk(exists(".bootbox.modal"));
+    assert.notOk(exists(".dismiss-notification-confirmation"));
   });
 });

config/locales/client.en.yml

@@ -2287,9 +2287,9 @@ en:
       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"
+          one: "Are you sure? You have %{count} important notification."
+          other: "Are you sure? You have %{count} important notifications."
+        dismiss: "Dismiss"
         cancel: "Cancel"
 
       group_message_summary: