DEV: Add a tab for watching notifications to the experimental user menu (#18240)

This commit adds a new tab to the experimental user menu for the `posted` and `watching_first_post` notification types.

Internal topic: t/72835.

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

@@ -116,6 +116,35 @@ const CORE_TOP_TABS = [
     }
   },
 
+  class extends UserMenuTab {
+    get id() {
+      return "watching";
+    }
+
+    get icon() {
+      return "discourse-bell-exclamation";
+    }
+
+    get panelComponent() {
+      return "user-menu/watching-notifications-list";
+    }
+
+    get count() {
+      return (
+        this.getUnreadCountForType("posted") +
+        this.getUnreadCountForType("watching_first_post")
+      );
+    }
+
+    get notificationTypes() {
+      return ["posted", "watching_first_post"];
+    }
+
+    get linkWhenActive() {
+      return `${this.currentUser.path}/notifications`;
+    }
+  },
+
   class extends UserMenuTab {
     get id() {
       return "messages";

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

@@ -0,0 +1,11 @@
+import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list";
+
+export default class UserMenuWatchingNotificationsList extends UserMenuNotificationsList {
+  get dismissTypes() {
+    return this.filterByTypes;
+  }
+
+  dismissWarningModal() {
+    return null;
+  }
+}

app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js

@@ -161,12 +161,13 @@ acceptance("User menu", function (needs) {
       "user-menu-button-replies": "1",
       "user-menu-button-mentions": "2",
       "user-menu-button-likes": "3",
-      "user-menu-button-messages": "4",
+      "user-menu-button-watching": "4",
-      "user-menu-button-bookmarks": "5",
+      "user-menu-button-messages": "5",
-      "user-menu-button-custom-tab-1": "6",
+      "user-menu-button-bookmarks": "6",
-      "user-menu-button-custom-tab-2": "7",
+      "user-menu-button-custom-tab-1": "7",
-      "user-menu-button-review-queue": "8",
+      "user-menu-button-custom-tab-2": "8",
-      "user-menu-button-other": "9",
+      "user-menu-button-review-queue": "9",
+      "user-menu-button-other": "10",
     };
 
     await visit("/");
@@ -193,7 +194,7 @@ acceptance("User menu", function (needs) {
     );
     assert.strictEqual(
       query(".tabs-list.bottom-tabs .btn").dataset.tabNumber,
-      "10",
+      "11",
       "bottom tab has the correct data-tab-number"
     );
 

app/assets/javascripts/discourse/tests/integration/components/site-header-test.js

@@ -163,6 +163,7 @@ module("Integration | Component | site-header", function (hooks) {
     await triggerKeyEvent(document, "keydown", "ArrowDown");
     await triggerKeyEvent(document, "keydown", "ArrowDown");
     await triggerKeyEvent(document, "keydown", "ArrowDown");
+    await triggerKeyEvent(document, "keydown", "ArrowDown");
 
     focusedTab = document.activeElement;
     assert.strictEqual(

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

@@ -48,12 +48,13 @@ module("Integration | Component | user-menu", function (hooks) {
   test("the menu has a group of tabs at the top", async function (assert) {
     await render(template);
     const tabs = queryAll(".top-tabs.tabs-list .btn");
-    assert.strictEqual(tabs.length, 7);
+    assert.strictEqual(tabs.length, 8);
     [
       "all-notifications",
       "replies",
       "mentions",
       "likes",
+      "watching",
       "messages",
       "bookmarks",
     ].forEach((tab, index) => {
@@ -72,7 +73,7 @@ module("Integration | Component | user-menu", function (hooks) {
     assert.strictEqual(tabs.length, 1);
     const profileTab = tabs[0];
     assert.strictEqual(profileTab.id, "user-menu-button-profile");
-    assert.strictEqual(profileTab.dataset.tabNumber, "7");
+    assert.strictEqual(profileTab.dataset.tabNumber, "8");
     assert.strictEqual(profileTab.getAttribute("tabindex"), "-1");
   });
 
@@ -82,11 +83,11 @@ module("Integration | Component | user-menu", function (hooks) {
     assert.ok(!exists("#user-menu-button-likes"));
 
     const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs
-    assert.strictEqual(tabs.length, 7);
+    assert.strictEqual(tabs.length, 8);
 
     assert.deepEqual(
       tabs.map((t) => t.dataset.tabNumber),
-      ["0", "1", "2", "3", "4", "5", "6"],
+      ["0", "1", "2", "3", "4", "5", "6", "7"],
       "data-tab-number of the tabs has no gaps when the likes tab is hidden"
     );
   });
@@ -95,14 +96,14 @@ module("Integration | Component | user-menu", function (hooks) {
     this.currentUser.set("can_review", true);
     await render(template);
     const tab = query("#user-menu-button-review-queue");
-    assert.strictEqual(tab.dataset.tabNumber, "6");
+    assert.strictEqual(tab.dataset.tabNumber, "7");
 
     const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs
-    assert.strictEqual(tabs.length, 9);
+    assert.strictEqual(tabs.length, 10);
 
     assert.deepEqual(
       tabs.map((t) => t.dataset.tabNumber),
-      ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+      ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
       "data-tab-number of the tabs has no gaps when the reviewables tab is show"
     );
   });
@@ -117,11 +118,11 @@ module("Integration | Component | user-menu", function (hooks) {
     assert.ok(!exists("#user-menu-button-messages"));
 
     const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs
-    assert.strictEqual(tabs.length, 7);
+    assert.strictEqual(tabs.length, 8);
 
     assert.deepEqual(
       tabs.map((t) => t.dataset.tabNumber),
-      ["0", "1", "2", "3", "4", "5", "6"],
+      ["0", "1", "2", "3", "4", "5", "6", "7"],
       "data-tab-number of the tabs has no gaps when the messages tab is hidden"
     );
   });