FEATURE: add a Dismiss link to user menu that dismisses all notifications

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

@@ -1,6 +1,7 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
 import { formatUsername } from 'discourse/lib/utilities';
+import { ajax } from 'discourse/lib/ajax';
 
 let extraGlyphs;
 
@@ -87,6 +88,46 @@ createWidget('user-menu-links', {
   }
 });
 
+createWidget('user-menu-dismiss-link', {
+  tagName: 'div.dismiss-link',
+  buildKey: () => 'user-menu-dismiss-link',
+
+  defaultState() {
+    return { showDismiss: false };
+  },
+
+  html() {
+    if (this.state.showDismiss) {
+      return h('ul.menu-links',
+        h('li',
+          this.attach('link', {
+            action: 'dismissNotifications',
+            className: 'dismiss',
+            icon: 'check',
+            label: 'user.dismiss'
+          })
+        )
+      );
+    } else {
+      return '';
+    }
+  },
+
+  showDismissLink() {
+    this.state.showDismiss = true;
+    this.scheduleRerender();
+  },
+
+  dismissNotifications() {
+    ajax('/notifications/mark-read', { method: 'PUT' }).then(() => {
+      userNotifications.notificationsChanged();
+    });
+  }
+});
+
+let userNotifications = null,
+  dismissLink = null;
+
 export default createWidget('user-menu', {
   tagName: 'div.user-menu',
 
@@ -96,16 +137,26 @@ export default createWidget('user-menu', {
 
   panelContents() {
     const path = this.currentUser.get('path');
+    userNotifications = this.attach('user-notifications', { path });
+    dismissLink = this.attach('user-menu-dismiss-link');
 
-    return [this.attach('user-menu-links', { path }),
-            this.attach('user-notifications', { path }),
-            h('div.logout-link', [
-              h('ul.menu-links',
-                h('li', this.attach('link', { action: 'logout',
-                                                       className: 'logout',
-                                                       icon: 'sign-out',
-                                                       label: 'user.log_out' })))
-              ])];
+    return [
+      this.attach('user-menu-links', { path }),
+      userNotifications,
+      h('div.logout-link', [
+        h('ul.menu-links',
+          h('li',
+            this.attach('link', {
+              action: 'logout',
+              className: 'logout',
+              icon: 'sign-out',
+              label: 'user.log_out'
+            })
+          )
+        )
+      ]),
+      dismissLink
+    ];
   },
 
   html() {
@@ -117,5 +168,9 @@ export default createWidget('user-menu', {
 
   clickOutside() {
     this.sendWidgetAction('toggleUserMenu');
+  },
+
+  notificationsLoaded() {
+    dismissLink.showDismissLink();
   }
 });

app/assets/javascripts/discourse/widgets/user-notifications.js.es6

@@ -50,6 +50,9 @@ export default createWidget('user-notifications', {
     }).finally(() => {
       state.loading = false;
       state.loaded = true;
+      if (state.notifications.get('length') > 0) {
+        this.sendWidgetAction('notificationsLoaded');
+      }
       this.scheduleRerender();
     });
   },

app/assets/stylesheets/common/base/menu-panel.scss

@@ -257,6 +257,13 @@
     /* as a big ol' click target, don't let text inside be selected */
     @include unselectable;
   }
+
+  .logout-link, .dismiss-link {
+    display: inline-block;
+  }
+  .dismiss-link {
+    float: right;
+  }
 }
 
 .notifications .logout {

config/locales/client.en.yml

@@ -590,6 +590,7 @@ en:
         enable: "Enable Notifications"
         currently_disabled: ""
         each_browser_note: "Note: You have to change this setting on every browser you use."
+      dismiss: 'Dismiss'
       dismiss_notifications: "Dismiss All"
       dismiss_notifications_tooltip: "Mark all unread notifications as read"
       first_notification: "Your first notification! Select it to begin."

test/javascripts/widgets/user-menu-test.js.es6

@@ -11,6 +11,7 @@ widgetTest('basics', {
     assert.ok(this.$('.user-bookmarks-link').length);
     assert.ok(this.$('.user-preferences-link').length);
     assert.ok(this.$('.notifications').length);
+    assert.ok(this.$('.dismiss-link').length);
   }
 });