DEV: Convert d-navigation-item to glimmer (#22155)

app/assets/javascripts/discourse/app/components/d-navigation-item.hbs

@@ -1,3 +1,10 @@
-<LinkTo @route={{this.route}}>
-  {{yield}}
-</LinkTo>
+<li
+  aria-current={{this.ariaCurrent}}
+  title={{@title}}
+  class={{@class}}
+  ...attributes
+>
+  <LinkTo @route={{@route}}>
+    {{yield}}
+  </LinkTo>
+</li>

app/assets/javascripts/discourse/app/components/d-navigation-item.js

@@ -1,41 +1,29 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
+import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
 
-export default Component.extend({
-  tagName: "li",
+export default class DNavigationItem extends Component {
+  @service router;
 
-  route: null,
-
-  router: service(),
-
-  attributeBindings: ["ariaCurrent:aria-current", "title"],
-
-  ariaCurrent: computed(
-    "router.currentRouteName",
-    "router.currentRoute.parent.name",
-    "route",
-    "ariaCurrentContext",
-    function () {
-      let ariaCurrentValue = "page";
-
-      // when there are multiple levels of navigation
-      // we want the active parent to get `aria-current="page"`
-      // and the active child to get `aria-current="location"`
-      if (this.ariaCurrentContext === "subNav") {
-        ariaCurrentValue = "location";
-      } else if (this.ariaCurrentContext === "parentNav") {
-        if (
-          this.router.currentRouteName !== this.route && // not the current route
-          this.router.currentRoute.parent.name.includes(this.route) // but is the current parent route
-        ) {
-          return "page";
-        }
-      }
-
-      return this.router.currentRouteName === this.route
-        ? ariaCurrentValue
-        : null;
+  get ariaCurrent() {
+    // when there are multiple levels of navigation
+    // we want the active parent to get `aria-current="page"`
+    // and the active child to get `aria-current="location"`
+    if (
+      this.args.ariaCurrentContext === "parentNav" &&
+      this.router.currentRouteName !== this.args.route && // not the current route
+      this.router.currentRoute.parent.name.includes(this.args.route) // but is the current parent route
+    ) {
+      return "page";
     }
-  ),
-});
+
+    if (this.router.currentRouteName !== this.args.route) {
+      return null;
+    }
+
+    if (this.args.ariaCurrentContext === "subNav") {
+      return "location";
+    } else {
+      return "page";
+    }
+  }
+}

app/assets/javascripts/discourse/app/components/user-nav.hbs

@@ -4,15 +4,15 @@
     @ariaLabel="User primary"
   >
     {{#unless @user.profile_hidden}}
-      <DNavigationItem @route="user.summary" @class="user-nav__summary">
+      <DNavigationItem @route="user.summary" class="user-nav__summary">
         {{d-icon "user"}}
         <span>{{i18n "user.summary.title"}}</span>
       </DNavigationItem>
 
       <DNavigationItem
         @route="userActivity"
-        @class="user-nav__activity"
         @ariaCurrentContext="parentNav"
+        class="user-nav__activity"
       >
         {{d-icon "stream"}}
         <span>{{i18n "user.activity_stream"}}</span>
@@ -23,8 +23,8 @@
     {{#if @showNotificationsTab}}
       <DNavigationItem
         @route="userNotifications"
-        @class="user-nav__notifications"
         @ariaCurrentContext="parentNav"
+        class="user-nav__notifications"
       >
         {{d-icon "bell" class="glyph"}}
         <span>{{i18n "user.notifications"}}</span>
@@ -34,8 +34,8 @@
     {{#if @showPrivateMessages}}
       <DNavigationItem
         @route="userPrivateMessages"
-        @class="user-nav__personal-messages"
         @ariaCurrentContext="parentNav"
+        class="user-nav__personal-messages"
       >
         {{d-icon "envelope"}}
         <span>{{i18n "user.private_messages"}}</span>
@@ -45,8 +45,8 @@
     {{#if @canInviteToForum}}
       <DNavigationItem
         @route="userInvited"
-        @class="user-nav__invites"
         @ariaCurrentContext="parentNav"
+        class="user-nav__invites"
       >
         {{d-icon "user-plus"}}
         <span>{{i18n "user.invited.title"}}</span>
@@ -54,7 +54,7 @@
     {{/if}}
 
     {{#if @showBadges}}
-      <DNavigationItem @route="user.badges" @class="user-nav__badges">
+      <DNavigationItem @route="user.badges" class="user-nav__badges">
         {{d-icon "certificate"}}
         <span>{{i18n "badges.title"}}</span>
       </DNavigationItem>
@@ -69,8 +69,8 @@
     {{#if @user.can_edit}}
       <DNavigationItem
         @route="preferences"
-        @class="user-nav__preferences"
         @ariaCurrentContext="parentNav"
+        class="user-nav__preferences"
       >
         {{d-icon "cog"}}
         <span>{{i18n "user.preferences"}}</span>

app/assets/javascripts/discourse/app/templates/preferences.hbs

@@ -4,8 +4,8 @@
   <HorizontalOverflowNav @ariaLabel="User secondary - preferences">
     <DNavigationItem
       @route="preferences.account"
-      @class="user-nav__preferences-account"
       @ariaCurrentContext="subNav"
+      class="user-nav__preferences-account"
     >
       {{d-icon "user"}}
       <span>{{i18n "user.preferences_nav.account"}}</span>
@@ -13,8 +13,8 @@
 
     <DNavigationItem
       @route="preferences.security"
-      @class="user-nav__preferences-security"
       @ariaCurrentContext="subNav"
+      class="user-nav__preferences-security"
     >
       {{d-icon "lock"}}
       <span>{{i18n "user.preferences_nav.security"}}</span>
@@ -22,8 +22,8 @@
 
     <DNavigationItem
       @route="preferences.profile"
-      @class="user-nav__preferences-profile"
       @ariaCurrentContext="subNav"
+      class="user-nav__preferences-profile"
     >
       {{d-icon "user"}}
       <span>{{i18n "user.preferences_nav.profile"}}</span>
@@ -31,8 +31,8 @@
 
     <DNavigationItem
       @route="preferences.emails"
-      @class="user-nav__preferences-emails"
       @ariaCurrentContext="subNav"
+      class="user-nav__preferences-emails"
     >
       {{d-icon "envelope"}}
       <span>{{i18n "user.preferences_nav.emails"}}</span>
@@ -40,8 +40,8 @@
 
     <DNavigationItem
       @route="preferences.notifications"
-      @class="user-nav__preferences-notifications"
       @ariaCurrentContext="subNav"
+      class="user-nav__preferences-notifications"
     >
       {{d-icon "bell"}}
       <span>{{i18n "user.preferences_nav.notifications"}}</span>
@@ -50,8 +50,8 @@
     {{#if this.model.can_change_tracking_preferences}}
       <DNavigationItem
         @route="preferences.tracking"
-        @class="user-nav__preferences-tracking"
         @ariaCurrentContext="subNav"
+        class="user-nav__preferences-tracking"
       >
         {{d-icon "plus"}}
         <span>{{i18n "user.preferences_nav.tracking"}}</span>
@@ -60,8 +60,8 @@
 
     <DNavigationItem
       @route="preferences.users"
-      @class="user-nav__preferences-users"
       @ariaCurrentContext="subNav"
+      class="user-nav__preferences-users"
     >
       {{d-icon "users"}}
       <span>{{i18n "user.preferences_nav.users"}}</span>
@@ -69,8 +69,8 @@
 
     <DNavigationItem
       @route="preferences.interface"
-      @class="user-nav__preferences-interface"
       @ariaCurrentContext="subNav"
+      class="user-nav__preferences-interface"
     >
       {{d-icon "desktop"}}
       <span>{{i18n "user.preferences_nav.interface"}}</span>
@@ -79,8 +79,8 @@
     {{#if (not (eq this.siteSettings.navigation_menu "legacy"))}}
       <DNavigationItem
         @route="preferences.navigation-menu"
-        @class="user-nav__preferences-navigation-menu"
         @ariaCurrentContext="subNav"
+        class="user-nav__preferences-navigation-menu"
       >
         {{d-icon "bars"}}
         <span>{{i18n "user.preferences_nav.navigation_menu"}}</span>

app/assets/javascripts/discourse/app/templates/user-private-messages-group.hbs

@@ -2,9 +2,8 @@
 
   <DNavigationItem
     @route="userPrivateMessages.group.index"
-    @class="user-nav__messages-group-latest"
-    @model={{this.group.name}}
     @ariaCurrentContext="subNav"
+    class="user-nav__messages-group-latest"
   >
     {{d-icon "envelope"}}
     <span>{{i18n "categories.latest"}}</span>
@@ -13,9 +12,8 @@
   {{#if this.viewingSelf}}
     <DNavigationItem
       @route="userPrivateMessages.group.new"
-      @model={{this.group.name}}
-      @class="user-nav__messages-group-new"
       @ariaCurrentContext="subNav"
+      class="user-nav__messages-group-new"
     >
       {{d-icon "exclamation-circle"}}
       <span>{{this.newLinkText}}</span>
@@ -23,9 +21,8 @@
 
     <DNavigationItem
       @route="userPrivateMessages.group.unread"
-      @model={{this.group.name}}
-      @class="user-nav__messages-group-unread"
       @ariaCurrentContext="subNav"
+      class="user-nav__messages-group-unread"
     >
       {{d-icon "plus-circle"}}
       <span>{{this.unreadLinkText}}</span>
@@ -33,9 +30,8 @@
 
     <DNavigationItem
       @route="userPrivateMessages.group.archive"
-      @class="user-nav__messages-group-archive"
-      @model={{this.group.name}}
       @ariaCurrentContext="subNav"
+      class="user-nav__messages-group-archive"
     >
       {{d-icon "archive"}}
       <span>{{i18n "user.messages.archive"}}</span>

app/assets/javascripts/discourse/app/templates/user-private-messages-user.hbs

@@ -7,9 +7,8 @@
 <UserNav::MessagesSecondaryNav>
   <DNavigationItem
     @route="userPrivateMessages.user.index"
-    @class="user-nav__messages-latest"
-    @model={{this.model}}
     @ariaCurrentContext="subNav"
+    class="user-nav__messages-latest"
   >
     {{d-icon "envelope"}}
     <span>{{i18n "categories.latest"}}</span>
@@ -17,9 +16,8 @@
 
   <DNavigationItem
     @route="userPrivateMessages.user.sent"
-    @class="user-nav__messages-sent"
-    @model={{this.model}}
     @ariaCurrentContext="subNav"
+    class="user-nav__messages-sent"
   >
     {{d-icon "reply"}}
     <span>{{i18n "user.messages.sent"}}</span>
@@ -28,9 +26,8 @@
   {{#if this.viewingSelf}}
     <DNavigationItem
       @route="userPrivateMessages.user.new"
-      @class="user-nav__messages-new"
-      @model={{this.model}}
       @ariaCurrentContext="subNav"
+      class="user-nav__messages-new"
     >
       {{d-icon "exclamation-circle"}}
       <span>{{this.newLinkText}}</span>
@@ -38,9 +35,8 @@
 
     <DNavigationItem
       @route="userPrivateMessages.user.unread"
-      @class="user-nav__messages-unread"
-      @model={{this.model}}
       @ariaCurrentContext="subNav"
+      class="user-nav__messages-unread"
     >
       {{d-icon "plus-circle"}}
       <span>{{this.unreadLinkText}}</span>
@@ -50,9 +46,8 @@
 
   <DNavigationItem
     @route="userPrivateMessages.user.archive"
-    @class="user-nav__messages-archive"
-    @model={{this.model}}
     @ariaCurrentContext="subNav"
+    class="user-nav__messages-archive"
   >
     {{d-icon "archive"}}
     <span>{{i18n "user.messages.archive"}}</span>

app/assets/javascripts/discourse/app/templates/user/activity.hbs

@@ -4,8 +4,8 @@
   <HorizontalOverflowNav @ariaLabel="User secondary - activity">
     <DNavigationItem
       @route="userActivity.index"
-      @class="user-nav__activity-all"
       @ariaCurrentContext="subNav"
+      class="user-nav__activity-all"
     >
       {{d-icon "stream"}}
       <span>{{i18n "user.filters.all"}}</span>
@@ -13,16 +13,16 @@
 
     <DNavigationItem
       @route="userActivity.topics"
-      @class="user-nav__activity-topics"
       @ariaCurrentContext="subNav"
+      class="user-nav__activity-topics"
     >
       {{d-icon "list-ul"}}
       <span>{{i18n "user_action_groups.4"}}</span>
     </DNavigationItem>
     <DNavigationItem
       @route="userActivity.replies"
-      @class="user-nav__activity-replies"
       @ariaCurrentContext="subNav"
+      class="user-nav__activity-replies"
     >
       {{d-icon "reply"}}
       <span>{{i18n "user_action_groups.5"}}</span>
@@ -31,9 +31,9 @@
     {{#if this.user.showRead}}
       <DNavigationItem
         @route="userActivity.read"
-        @class="user-nav__activity-read"
-        @title={{i18n "user.read_help"}}
         @ariaCurrentContext="subNav"
+        class="user-nav__activity-read"
+        title={{i18n "user.read_help"}}
       >
         {{d-icon "history"}}
         <span>{{i18n "user.read"}}</span>
@@ -43,8 +43,8 @@
     {{#if this.user.showDrafts}}
       <DNavigationItem
         @route="userActivity.drafts"
-        @class="user-nav__activity-drafts"
         @ariaCurrentContext="subNav"
+        class="user-nav__activity-drafts"
       >
         {{d-icon "pencil-alt"}}
         <span>{{this.draftLabel}}</span>
@@ -54,8 +54,8 @@
     {{#if (gt this.model.pending_posts_count 0)}}
       <DNavigationItem
         @route="userActivity.pending"
-        @class="user-nav__activity-pending"
         @ariaCurrentContext="subNav"
+        class="user-nav__activity-pending"
       >
         {{d-icon "clock"}}
         <span>{{this.pendingLabel}}</span>
@@ -64,8 +64,8 @@
 
     <DNavigationItem
       @route="userActivity.likesGiven"
-      @class="user-nav__activity-likes"
       @ariaCurrentContext="subNav"
+      class="user-nav__activity-likes"
     >
       {{d-icon "heart"}}
       <span>{{i18n "user_action_groups.1"}}</span>
@@ -74,8 +74,8 @@
     {{#if this.user.showBookmarks}}
       <DNavigationItem
         @route="userActivity.bookmarks"
-        @class="user-nav__activity-bookmarks"
         @ariaCurrentContext="subNav"
+        class="user-nav__activity-bookmarks"
       >
         {{d-icon "bookmark"}}
         <span>{{i18n "user_action_groups.3"}}</span>

app/assets/javascripts/discourse/app/templates/user/notifications.hbs

@@ -4,8 +4,8 @@
   <HorizontalOverflowNav @ariaLabel="User secondary - notifications">
     <DNavigationItem
       @route="userNotifications.index"
-      @class="user-nav__notifications-all"
       @ariaCurrentContext="subNav"
+      class="user-nav__notifications-all"
     >
       {{d-icon "bell"}}
       <span>{{i18n "user.filters.all"}}</span>
@@ -13,8 +13,8 @@
 
     <DNavigationItem
       @route="userNotifications.responses"
-      @class="user-nav__notifications-responses"
       @ariaCurrentContext="subNav"
+      class="user-nav__notifications-responses"
     >
       {{d-icon "reply"}}
       <span>{{i18n "user_action_groups.6"}}</span>
@@ -22,8 +22,8 @@
 
     <DNavigationItem
       @route="userNotifications.likesReceived"
-      @class="user-nav__notifications-likes"
       @ariaCurrentContext="subNav"
+      class="user-nav__notifications-likes"
     >
       {{d-icon "heart"}}
       <span>{{i18n "user_action_groups.2"}}</span>
@@ -32,8 +32,8 @@
     {{#if this.siteSettings.enable_mentions}}
       <DNavigationItem
         @route="userNotifications.mentions"
-        @class="user-nav__notifications-mentions"
         @ariaCurrentContext="subNav"
+        class="user-nav__notifications-mentions"
       >
         {{d-icon "at"}}
         <span>{{i18n "user_action_groups.7"}}</span>
@@ -42,8 +42,8 @@
 
     <DNavigationItem
       @route="userNotifications.edits"
-      @class="user-nav__notifications-edits"
       @ariaCurrentContext="subNav"
+      class="user-nav__notifications-edits"
     >
       {{d-icon "pencil-alt"}}
       <span>{{i18n "user_action_groups.11"}}</span>