diff --git a/app/assets/javascripts/discourse/app/components/user-menu/menu.js b/app/assets/javascripts/discourse/app/components/user-menu/menu.js index 5096a044085..9f882c094dc 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/menu.js +++ b/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"; diff --git a/app/assets/javascripts/discourse/app/components/user-menu/watching-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/watching-notifications-list.js new file mode 100644 index 00000000000..ed2244d8d3d --- /dev/null +++ b/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; + } +} diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js index 32d728549ab..f95512912da 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js +++ b/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-bookmarks": "5", - "user-menu-button-custom-tab-1": "6", - "user-menu-button-custom-tab-2": "7", - "user-menu-button-review-queue": "8", - "user-menu-button-other": "9", + "user-menu-button-watching": "4", + "user-menu-button-messages": "5", + "user-menu-button-bookmarks": "6", + "user-menu-button-custom-tab-1": "7", + "user-menu-button-custom-tab-2": "8", + "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" ); diff --git a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js b/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js index 9939f2a422b..07f7d52da42 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js +++ b/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( diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js index f85c2853471..aad9b144938 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js +++ b/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" ); });