FEATURE: dismiss first notification on click anywhere (#9525)

FEATURE: dismiss first notification on click anywhere

Quicker jumpstart for those already familiar with the platform:

Allow dismissal of first notification mask from any click.
On the dismissal click, we also need to send a "yes I saw it" confirmation
by grabbing a batch of notifications. This prevents the dialog from appearing
again on refresh, or other browsers and ensures we only see it once.

app/assets/javascripts/discourse/app/components/site-header.js

@@ -205,6 +205,29 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
     this.dispatch("search-autocomplete:after-complete", "search-term");
 
     this.appEvents.on("dom:clean", this, "_cleanDom");
+
+    // Allow first notification to be dismissed on a click anywhere
+    if (
+      !this.get("currentUser.read_first_notification") &&
+      !this.get("currentUser.enforcedSecondFactor")
+    ) {
+      this._dismissFirstNotification = e => {
+        if (
+          !e.target.closest("#current-user") &&
+          !e.target.closest(".ring-backdrop") &&
+          !this.currentUser.get("read_first_notification") &&
+          !this.currentUser.get("enforcedSecondFactor")
+        ) {
+          this.eventDispatched(
+            "header:dismiss-first-notification-mask",
+            "header"
+          );
+        }
+      };
+      document.addEventListener("click", this._dismissFirstNotification, {
+        once: true
+      });
+    }
   },
 
   _cleanDom() {
@@ -225,6 +248,8 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
 
     cancel(this._scheduledRemoveAnimate);
     window.cancelAnimationFrame(this._scheduledMovingAnimation);
+
+    document.removeEventListener("click", this._dismissFirstNotification);
   },
 
   buildArgs() {

app/assets/javascripts/discourse/app/widgets/header.js

@@ -532,6 +532,24 @@ export default createWidget("header", {
     }
   },
 
+  headerDismissFirstNotificationMask() {
+    // Dismiss notifications
+    this.store
+      .findStale(
+        "notification",
+        {
+          recent: true,
+          silent: this.currentUser.enforcedSecondFactor,
+          limit: 5
+        },
+        { cacheKey: "recent-notifications" }
+      )
+      .refresh();
+    // Update UI
+    this.state.ringBackdrop = false;
+    this.scheduleRerender();
+  },
+
   headerKeyboardTrigger(msg) {
     switch (msg.type) {
       case "search":