Improve some user menu code and make the logout button optional

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

@@ -1,7 +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';
+import hbs from 'discourse/widgets/hbs-compiler';
 
 let extraGlyphs;
 
@@ -90,65 +90,78 @@ createWidget('user-menu-links', {
 
 createWidget('user-menu-dismiss-link', {
   tagName: 'div.dismiss-link',
-  buildKey: () => 'user-menu-dismiss-link',
 
-  html() {
+  template: hbs`
-    if (userNotifications.state.notifications.filterBy("read", false).length > 0) {
+    <ul class='menu-links'>
-      return h('ul.menu-links',
+      <li>
-        h('li',
+        {{attach
-          this.attach('link', {
+          widget="link"
-            action: 'dismissNotifications',
+          attrs=(hash
-            className: 'dismiss',
+            action="dismissNotifications"
-            icon: 'check',
+            className="dismiss"
-            label: 'user.dismiss',
+            icon="check"
-            title: 'user.dismiss_notifications_tooltip'
+            label="user.dismiss"
-          })
+            title="user.dismiss_notifications_tooltip")}}
-        )
+      </li>
-      );
+    </ul>
-    } else {
+  `,
-      return '';
-    }
-  },
-
-  dismissNotifications() {
-    ajax('/notifications/mark-read', { method: 'PUT' }).then(() => {
-      userNotifications.notificationsChanged();
-    });
-  }
 });
 
-let userNotifications = null,
-  dismissLink = null;
-
 export default createWidget('user-menu', {
   tagName: 'div.user-menu',
+  buildKey: () => 'user-menu',
 
   settings: {
-    maxWidth: 300
+    maxWidth: 300,
+    showLogoutButton: true
+  },
+
+  defaultState() {
+    return {
+      hasUnread: false,
+      markUnread: null
+    };
   },
 
   panelContents() {
     const path = this.currentUser.get('path');
-    userNotifications = this.attach('user-notifications', { path });
-    dismissLink = this.attach('user-menu-dismiss-link');
 
-    return [
+    let result = [
       this.attach('user-menu-links', { path }),
-      userNotifications,
+      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'
-            })
-          )
-        )
-      ]),
-      dismissLink
     ];
+
+    if (this.settings.showLogoutButton) {
+      result.push(
+        h('div.logout-link', [
+          h('ul.menu-links',
+            h('li',
+              this.attach('link', {
+                action: 'logout',
+                className: 'logout',
+                icon: 'sign-out',
+                label: 'user.log_out'
+              })
+            )
+          )
+        ]),
+      );
+    }
+
+    if (this.state.hasUnread) {
+      result.push(this.attach('user-menu-dismiss-link'));
+    }
+
+    return result;
+  },
+
+  dismissNotifications() {
+    return this.state.markRead();
+  },
+
+  notificationsLoaded({ notifications, markRead }) {
+    this.state.hasUnread = notifications.filterBy("read", false).length > 0;
+    this.state.markRead = markRead;
   },
 
   html() {

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

@@ -2,6 +2,7 @@ import { createWidget } from 'discourse/widgets/widget';
 import { headerHeight } from 'discourse/components/site-header';
 import { h } from 'virtual-dom';
 import DiscourseURL from 'discourse/lib/url';
+import { ajax } from 'discourse/lib/ajax';
 
 export default createWidget('user-notifications', {
   tagName: 'div.notifications',
@@ -11,8 +12,10 @@ export default createWidget('user-notifications', {
     return { notifications: [], loading: false, loaded: false };
   },
 
-  notificationsChanged() {
+  markRead() {
-    this.refreshNotifications(this.state);
+    ajax('/notifications/mark-read', { method: 'PUT' }).then(() => {
+      this.refreshNotifications(this.state);
+    });
   },
 
   refreshNotifications(state) {
@@ -51,6 +54,10 @@ export default createWidget('user-notifications', {
     }).finally(() => {
       state.loading = false;
       state.loaded = true;
+      this.sendWidgetAction('notificationsLoaded', {
+        notifications: state.notifications,
+        markRead: () => this.markRead()
+      });
       this.scheduleRerender();
     });
   },