DEV: Close user menu after clicking view-all notifications (#25966)

We needed to call closeUserMenu after navigating to the show all notifications url.

app/assets/javascripts/discourse/app/components/user-menu/items-list.hbs

@@ -10,13 +10,14 @@
   </ul>
   <div class="panel-body-bottom">
     {{#if this.showAllHref}}
-      <a
-        class="btn btn-default btn-icon no-text show-all"
-        href={{this.showAllHref}}
-        title={{this.showAllTitle}}
+      <DButton
+        class="show-all"
+        @action={{this.showAll}}
+        @translatedAriaLabel={{this.showAllTitle}}
+        @translatedTitle={{this.showAllTitle}}
       >
         {{d-icon "chevron-down" aria-label=this.showAllTitle}}
-      </a>
+      </DButton>
     {{/if}}
     {{#if this.showDismiss}}
       <button

app/assets/javascripts/discourse/app/components/user-menu/items-list.js

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import DiscourseURL from "discourse/lib/url";
 
 export default class UserMenuItemsList extends Component {
   @service session;
@@ -86,4 +87,10 @@ export default class UserMenuItemsList extends Component {
       `dismissButtonClick must be implemented in ${this.constructor.name}.`
     );
   }
+
+  @action
+  showAll() {
+    DiscourseURL.routeTo(this.showAllHref);
+    this.args.closeUserMenu();
+  }
 }

app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js

@@ -27,17 +27,13 @@ module(
       assert.ok(items[1].classList.contains("bookmark"));
     });
 
-    test("show all link", async function (assert) {
+    test("show all button for bookmark notifications", async function (assert) {
       await render(template);
       const link = query(".panel-body-bottom .show-all");
-      assert.ok(
-        link.href.endsWith("/u/eviltrout/activity/bookmarks"),
-        "links to the bookmarks page"
-      );
       assert.strictEqual(
         link.title,
         I18n.t("user_menu.view_all_bookmarks"),
-        "has a title"
+        "has the correct title"
       );
     });
 

app/assets/javascripts/discourse/tests/integration/components/user-menu/messages-list-test.js

@@ -253,17 +253,13 @@ module("Integration | Component | user-menu | messages-list", function (hooks) {
     );
   });
 
-  test("show all link", async function (assert) {
+  test("show all button for message notifications", async function (assert) {
     await render(template);
     const link = query(".panel-body-bottom .show-all");
-    assert.ok(
-      link.href.endsWith("/u/eviltrout/messages"),
-      "links to the user's messages page"
-    );
     assert.strictEqual(
       link.title,
       I18n.t("user_menu.view_all_messages"),
-      "has a title"
+      "has the correct title"
     );
   });
 

app/assets/javascripts/discourse/tests/integration/components/user-menu/notifications-list-test.js

@@ -65,17 +65,13 @@ module(
       assert.strictEqual(queryParams.silent, undefined);
     });
 
-    test("displays a show all button that takes to the notifications page of the current user", async function (assert) {
+    test("show all button for all notifications page", async function (assert) {
       await render(template);
       const showAllBtn = query(".panel-body-bottom .btn.show-all");
-      assert.ok(
-        showAllBtn.href.endsWith("/u/eviltrout/notifications"),
-        "it takes you to the notifications page"
-      );
       assert.strictEqual(
-        showAllBtn.getAttribute("title"),
+        showAllBtn.title,
         I18n.t("user_menu.view_all_notifications"),
-        "title attribute is present"
+        "has the correct title"
       );
     });
 

app/assets/javascripts/discourse/tests/integration/components/user-menu/reviewables-list-test.js

@@ -12,14 +12,13 @@ module(
 
     const template = hbs`<UserMenu::ReviewablesList/>`;
 
-    test("has a 'show all' link", async function (assert) {
+    test("show all button for reviewable notifications", async function (assert) {
       await render(template);
-      const showAll = query(".panel-body-bottom a.show-all");
-      assert.ok(showAll.href.endsWith("/review"), "links to the /review page");
+      const showAll = query(".panel-body-bottom .show-all");
       assert.strictEqual(
         showAll.title,
         I18n.t("user_menu.reviewable.view_all"),
-        "the 'show all' link has a title"
+        "has the correct title"
       );
     });