diff --git a/app/assets/javascripts/discourse/app/controllers/dismiss-notification-confirmation.js b/app/assets/javascripts/discourse/app/controllers/dismiss-notification-confirmation.js new file mode 100644 index 00000000000..ff13e85c861 --- /dev/null +++ b/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(); + }, + }, +}); diff --git a/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs b/app/assets/javascripts/discourse/app/templates/modal/dismiss-notification-confirmation.hbs new file mode 100644 index 00000000000..ea948b48bcc --- /dev/null +++ b/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}} + +
diff --git a/app/assets/javascripts/discourse/app/widgets/user-menu.js b/app/assets/javascripts/discourse/app/widgets/user-menu.js index e324dc867c3..47d3f4496d2 100644 --- a/app/assets/javascripts/discourse/app/widgets/user-menu.js +++ b/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(); } 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 index d18dd6f482e..656cba95ae1 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/dismiss-notification-modal-test.js +++ b/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")); }); }); diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 3b275eab944..65dd71c2dc9 100644 --- a/config/locales/client.en.yml +++ b/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: