diff --git a/app/assets/javascripts/discourse/widgets/default-notification-item.js b/app/assets/javascripts/discourse/widgets/default-notification-item.js index 49d70e086e3..da741f45aa9 100644 --- a/app/assets/javascripts/discourse/widgets/default-notification-item.js +++ b/app/assets/javascripts/discourse/widgets/default-notification-item.js @@ -13,6 +13,7 @@ import { import { setTransientHeader } from "discourse/lib/ajax"; import { userPath } from "discourse/lib/url"; import { iconNode } from "discourse-common/lib/icon-library"; +import { ajax } from "discourse/lib/ajax"; export const DefaultNotificationItem = createWidget( "default-notification-item", @@ -154,6 +155,17 @@ export const DefaultNotificationItem = createWidget( ); } }); + }, + + mouseUp(event) { + // dismiss notification on middle click + if (event.which === 2 && !this.attrs.read) { + this.attrs.set("read", true); + ajax("/notifications/mark-read", { + method: "PUT", + data: this.attrs.id + }); + } } } ); diff --git a/test/javascripts/widgets/default-notification-item-test.js.es6 b/test/javascripts/widgets/default-notification-item-test.js.es6 new file mode 100644 index 00000000000..b7014072435 --- /dev/null +++ b/test/javascripts/widgets/default-notification-item-test.js.es6 @@ -0,0 +1,53 @@ +import EmberObject from "@ember/object"; +import pretender from "helpers/create-pretender"; +import { moduleForWidget, widgetTest } from "helpers/widget-test"; + +moduleForWidget("default-notification-item"); + +widgetTest("sets notification as read on middle click", { + template: '{{mount-widget widget="default-notification-item" args=args}}', + beforeEach() { + this.set( + "args", + EmberObject.create({ + id: 3, + user_id: 1, + notification_type: 6, + read: false, + created_at: "2020-01-01T12:00:00.000Z", + post_number: 1, + topic_id: 10, + fancy_title: "Greetings!", + slug: "greetings", + data: { + topic_title: "Greetings!", + original_post_id: 14, + original_post_type: 1, + original_username: "discobot", + revision_number: null, + display_username: "discobot" + } + }) + ); + }, + async test(assert) { + let requests = 0; + pretender.put("/notifications/mark-read", () => { + ++requests; + return [200, { "Content-Type": "application/json" }, { success: true }]; + }); + + assert.equal(find("li.read").length, 0); + + await $(document).trigger( + $.Event("mouseup", { + target: find("li")[0], + button: 1, + which: 2 + }) + ); + + assert.equal(find("li.read").length, 1); + assert.equal(requests, 1); + } +});