From 814502f7bb68815edc90673881fa4d284a6482ef Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Tue, 7 Nov 2017 10:41:12 -0500
Subject: [PATCH] FEATURE: add a Dismiss link to user menu that dismisses all
 notifications

---
 .../discourse/widgets/user-menu.js.es6        | 73 ++++++++++++++++---
 .../widgets/user-notifications.js.es6         |  3 +
 .../stylesheets/common/base/menu-panel.scss   |  7 ++
 config/locales/client.en.yml                  |  1 +
 .../javascripts/widgets/user-menu-test.js.es6 |  1 +
 5 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/user-menu.js.es6 b/app/assets/javascripts/discourse/widgets/user-menu.js.es6
index 9142695573a..ac99495c9ce 100644
--- a/app/assets/javascripts/discourse/widgets/user-menu.js.es6
+++ b/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();
   }
 });
diff --git a/app/assets/javascripts/discourse/widgets/user-notifications.js.es6 b/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
index c7570479cc9..260bc36146d 100644
--- a/app/assets/javascripts/discourse/widgets/user-notifications.js.es6
+++ b/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();
     });
   },
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 99397a8da38..ae2c954406a 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/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 {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index fa1a8b1edbb..6e2a7c6d1dd 100644
--- a/config/locales/client.en.yml
+++ b/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."
diff --git a/test/javascripts/widgets/user-menu-test.js.es6 b/test/javascripts/widgets/user-menu-test.js.es6
index c208d91b4b5..8b26410e0fa 100644
--- a/test/javascripts/widgets/user-menu-test.js.es6
+++ b/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);
   }
 });