From 1eaa1fee2dc829119590e7fe4a66b4e05a2145a6 Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Wed, 12 Oct 2022 17:58:17 +0300 Subject: [PATCH] DEV: Merge mentions and watching tabs into the replies tab in the user menu (#18544) This commit merges the mentions and "watching" tabs into the replies tab of the user menu. This change is kind of experimental, so we may change it back either fully or partially. Internal topic: t/76474. --- .../user-menu/mentions-notifications-list.js | 11 -- .../app/components/user-menu/menu.js | 68 ++-------- .../user-menu/watching-notifications-list.js | 11 -- .../tests/acceptance/user-menu-test.js | 29 ++--- .../components/site-header-test.js | 2 - .../components/user-menu/menu-test.js | 122 +++++++----------- 6 files changed, 72 insertions(+), 171 deletions(-) delete mode 100644 app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js delete mode 100644 app/assets/javascripts/discourse/app/components/user-menu/watching-notifications-list.js diff --git a/app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js deleted file mode 100644 index 8cbfabb93ac..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-menu/mentions-notifications-list.js +++ /dev/null @@ -1,11 +0,0 @@ -import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list"; - -export default class UserMenuMentionsNotificationsList extends UserMenuNotificationsList { - get dismissTypes() { - return this.filterByTypes; - } - - dismissWarningModal() { - return null; - } -} 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 ff21b008a0e..b29188b2918 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/menu.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu.js @@ -46,13 +46,22 @@ const CORE_TOP_TABS = [ get count() { return ( + this.getUnreadCountForType("mentioned") + + this.getUnreadCountForType("posted") + + this.getUnreadCountForType("quoted") + this.getUnreadCountForType("replied") + - this.getUnreadCountForType("quoted") + this.getUnreadCountForType("watching_first_post") ); } get notificationTypes() { - return ["replied", "quoted"]; + return [ + "mentioned", + "posted", + "quoted", + "replied", + "watching_first_post", + ]; } get linkWhenActive() { @@ -60,32 +69,6 @@ const CORE_TOP_TABS = [ } }, - class extends UserMenuTab { - get id() { - return "mentions"; - } - - get icon() { - return "at"; - } - - get panelComponent() { - return "user-menu/mentions-notifications-list"; - } - - get count() { - return this.getUnreadCountForType("mentioned"); - } - - get notificationTypes() { - return ["mentioned"]; - } - - get linkWhenActive() { - return `${this.currentUser.path}/notifications/mentions`; - } - }, - class extends UserMenuTab { get id() { return "likes"; @@ -119,35 +102,6 @@ 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 deleted file mode 100644 index ed2244d8d3d..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-menu/watching-notifications-list.js +++ /dev/null @@ -1,11 +0,0 @@ -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 b9bf541d090..741fe6b08ef 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js @@ -62,15 +62,15 @@ acceptance("User menu", function (needs) { ); }); - test("mentions notifications panel has a11y attributes", async function (assert) { + test("replies notifications panel has a11y attributes", async function (assert) { await visit("/"); await click(".d-header-icons .current-user"); - await click("#user-menu-button-mentions"); - const panel = query("#quick-access-mentions"); + await click("#user-menu-button-replies"); + const panel = query("#quick-access-replies"); assert.strictEqual(panel.getAttribute("tabindex"), "-1"); assert.strictEqual( panel.querySelector("ul").getAttribute("aria-labelledby"), - "user-menu-button-mentions" + "user-menu-button-replies" ); }); @@ -185,9 +185,7 @@ acceptance("User menu", function (needs) { "user-menu-button-replies": I18n.t("user_menu.tabs.replies_with_unread", { count: 2, }), - "user-menu-button-mentions": I18n.t("user_menu.tabs.mentions"), "user-menu-button-likes": I18n.t("user_menu.tabs.likes"), - "user-menu-button-watching": I18n.t("user_menu.tabs.watching"), "user-menu-button-messages": I18n.t("user_menu.tabs.messages"), "user-menu-button-bookmarks": I18n.t("user_menu.tabs.bookmarks"), "user-menu-button-tiny-tab-1": "Custom title: 73", @@ -266,15 +264,13 @@ acceptance("User menu", function (needs) { const expectedTabOrder = { "user-menu-button-all-notifications": "0", "user-menu-button-replies": "1", - "user-menu-button-mentions": "2", - "user-menu-button-likes": "3", - "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-notifications": "10", + "user-menu-button-likes": "2", + "user-menu-button-messages": "3", + "user-menu-button-bookmarks": "4", + "user-menu-button-custom-tab-1": "5", + "user-menu-button-custom-tab-2": "6", + "user-menu-button-review-queue": "7", + "user-menu-button-other-notifications": "8", }; await visit("/"); @@ -301,7 +297,7 @@ acceptance("User menu", function (needs) { ); assert.strictEqual( query(".tabs-list.bottom-tabs .btn").dataset.tabNumber, - "11", + "9", "bottom tab has the correct data-tab-number" ); @@ -713,7 +709,6 @@ acceptance("User menu", function (needs) { ["#user-menu-button-custom-tab-1", "/u/eviltrout/preferences/account"], ["#user-menu-button-replies", "/u/eviltrout/notifications/responses"], ["#user-menu-button-messages", "/u/eviltrout/messages"], - ["#user-menu-button-mentions", "/u/eviltrout/notifications/mentions"], ["#user-menu-button-bookmarks", "/u/eviltrout/activity/bookmarks"], ["#user-menu-button-likes", "/u/eviltrout/notifications/likes-received"], ["#user-menu-button-custom-tab-2", null], 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 07f7d52da42..620227d0613 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 @@ -162,8 +162,6 @@ 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"); - 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 58b348297bb..6b32f8099ad 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 @@ -38,23 +38,17 @@ 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, 8); - [ - "all-notifications", - "replies", - "mentions", - "likes", - "watching", - "messages", - "bookmarks", - ].forEach((tab, index) => { - assert.strictEqual(tabs[index].id, `user-menu-button-${tab}`); - assert.strictEqual(tabs[index].dataset.tabNumber, index.toString()); - assert.strictEqual( - tabs[index].getAttribute("aria-controls"), - `quick-access-${tab}` - ); - }); + assert.strictEqual(tabs.length, 6); + ["all-notifications", "replies", "likes", "messages", "bookmarks"].forEach( + (tab, index) => { + assert.strictEqual(tabs[index].id, `user-menu-button-${tab}`); + assert.strictEqual(tabs[index].dataset.tabNumber, index.toString()); + assert.strictEqual( + tabs[index].getAttribute("aria-controls"), + `quick-access-${tab}` + ); + } + ); }); test("the menu has a group of tabs at the bottom", async function (assert) { @@ -63,7 +57,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, "8"); + assert.strictEqual(profileTab.dataset.tabNumber, "6"); assert.strictEqual(profileTab.getAttribute("tabindex"), "-1"); }); @@ -73,11 +67,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, 8); + assert.strictEqual(tabs.length, 6); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3", "4", "5", "6", "7"], + ["0", "1", "2", "3", "4", "5"], "data-tab-number of the tabs has no gaps when the likes tab is hidden" ); }); @@ -87,14 +81,14 @@ module("Integration | Component | user-menu", function (hooks) { this.currentUser.set("reviewable_count", 1); await render(template); const tab = query("#user-menu-button-review-queue"); - assert.strictEqual(tab.dataset.tabNumber, "7"); + assert.strictEqual(tab.dataset.tabNumber, "5"); const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs - assert.strictEqual(tabs.length, 10); + assert.strictEqual(tabs.length, 8); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], + ["0", "1", "2", "3", "4", "5", "6", "7"], "data-tab-number of the tabs has no gaps when the reviewables tab is show" ); }); @@ -117,11 +111,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, 8); + assert.strictEqual(tabs.length, 6); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3", "4", "5", "6", "7"], + ["0", "1", "2", "3", "4", "5"], "data-tab-number of the tabs has no gaps when the messages tab is hidden" ); }); @@ -160,32 +154,7 @@ module("Integration | Component | user-menu", function (hooks) { pretender.get("/notifications", (request) => { queryParams = request.queryParams; let data; - if (queryParams.filter_by_types === "mentioned") { - data = [ - { - id: 6, - user_id: 1, - notification_type: NOTIFICATION_TYPES.mentioned, - read: true, - high_priority: false, - created_at: "2021-11-25T19:31:13.241Z", - post_number: 6, - topic_id: 10, - fancy_title: "Greetings!", - slug: "greetings", - data: { - topic_title: "Greetings!", - original_post_id: 20, - original_post_type: 1, - original_username: "discobot", - revision_number: null, - display_username: "discobot", - }, - }, - ]; - } else if ( - queryParams.filter_by_types === "liked,liked_consolidated,reaction" - ) { + if (queryParams.filter_by_types === "liked,liked_consolidated,reaction") { data = [ { id: 60, @@ -248,8 +217,32 @@ module("Integration | Component | user-menu", function (hooks) { }, }, ]; - } else if (queryParams.filter_by_types === "replied,quoted") { - data = []; + } else if ( + queryParams.filter_by_types === + "mentioned,posted,quoted,replied,watching_first_post" + ) { + data = [ + { + id: 6, + user_id: 1, + notification_type: NOTIFICATION_TYPES.mentioned, + read: true, + high_priority: false, + created_at: "2021-11-25T19:31:13.241Z", + post_number: 6, + topic_id: 10, + fancy_title: "Greetings!", + slug: "greetings", + data: { + topic_title: "Greetings!", + original_post_id: 20, + original_post_type: 1, + original_username: "discobot", + revision_number: null, + display_username: "discobot", + }, + }, + ]; } else { throw new Error( `unexpected notification type ${queryParams.filter_by_types}` @@ -263,23 +256,6 @@ module("Integration | Component | user-menu", function (hooks) { ]; }); - await click("#user-menu-button-mentions"); - assert.ok(exists("#quick-access-mentions.quick-access-panel")); - assert.strictEqual( - queryParams.filter_by_types, - "mentioned", - "request params has filter_by_types set to `mentioned`" - ); - assert.strictEqual(queryParams.silent, "true"); - let activeTabs = queryAll(".top-tabs .btn.active"); - assert.strictEqual(activeTabs.length, 1); - assert.strictEqual( - activeTabs[0].id, - "user-menu-button-mentions", - "active tab is now the mentions tab" - ); - assert.strictEqual(queryAll("#quick-access-mentions ul li").length, 1); - await click("#user-menu-button-likes"); assert.ok(exists("#quick-access-likes.quick-access-panel")); assert.strictEqual( @@ -288,7 +264,7 @@ module("Integration | Component | user-menu", function (hooks) { "request params has filter_by_types set to `liked`, `liked_consolidated` and `reaction`" ); assert.strictEqual(queryParams.silent, "true"); - activeTabs = queryAll(".top-tabs .btn.active"); + let activeTabs = queryAll(".top-tabs .btn.active"); assert.strictEqual(activeTabs.length, 1); assert.strictEqual( activeTabs[0].id, @@ -301,8 +277,8 @@ module("Integration | Component | user-menu", function (hooks) { assert.ok(exists("#quick-access-replies.quick-access-panel")); assert.strictEqual( queryParams.filter_by_types, - "replied,quoted", - "request params has filter_by_types set to `replied` and `quoted`" + "mentioned,posted,quoted,replied,watching_first_post", + "request params has filter_by_types set to `mentioned`, `posted`, `quoted`, `replied` and `watching_first_post`" ); assert.strictEqual(queryParams.silent, "true"); activeTabs = queryAll(".top-tabs .btn.active");