FIX: Dismiss notifications on middle click (#9098)

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
+        });
+      }
     }
   }
 );

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);
+  }
+});