From 12ebdf0ff0f742d5363527908a4a2721e41b00f2 Mon Sep 17 00:00:00 2001 From: Osama Sayegh Date: Tue, 13 Sep 2022 17:12:27 +0300 Subject: [PATCH] DEV: Convert experimental user menu tabs to links when they're active (#18158) This PR restores a small feature which was present in the old menu and allowed users to click on the active tab in the menu to navigate to some page that showed the same items in the menu but with more details. For example, if you switch to the PMs tab and then click on it again, currently nothing happens. However, with this change, clicking on the tab again will take you to your messages page at `/my/messages`. Note: plugins that register custom tabs in the menu can provide a `linkWhenActive` property for their tab if they wish to mimic core's tabs, but it's optional; if they don't provide one, the tab will do nothing if the user clicks on it again. Internal topic: t/73349. --- .../app/components/user-menu/menu-tab.hbs | 15 ++++ .../app/components/user-menu/menu-tab.js | 27 ++++++ .../app/components/user-menu/menu.hbs | 10 +-- .../app/components/user-menu/menu.js | 39 ++++++++- .../app/components/user-menu/tab-button.hbs | 15 ---- .../app/components/user-menu/tab-button.js | 3 - .../tests/acceptance/user-menu-test.js | 83 +++++++++++++++++++ 7 files changed, 168 insertions(+), 24 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/menu-tab.hbs create mode 100644 app/assets/javascripts/discourse/app/components/user-menu/menu-tab.js delete mode 100644 app/assets/javascripts/discourse/app/components/user-menu/tab-button.hbs delete mode 100644 app/assets/javascripts/discourse/app/components/user-menu/tab-button.js diff --git a/app/assets/javascripts/discourse/app/components/user-menu/menu-tab.hbs b/app/assets/javascripts/discourse/app/components/user-menu/menu-tab.hbs new file mode 100644 index 00000000000..8e1e2c04eb2 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu-tab.hbs @@ -0,0 +1,15 @@ + diff --git a/app/assets/javascripts/discourse/app/components/user-menu/menu-tab.js b/app/assets/javascripts/discourse/app/components/user-menu/menu-tab.js new file mode 100644 index 00000000000..0e01a83dd88 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu-tab.js @@ -0,0 +1,27 @@ +import Component from "@glimmer/component"; + +export default class UserMenuTab extends Component { + get isActive() { + return this.args.tab.id === this.args.currentTabId; + } + + get classNames() { + const list = ["btn", "btn-flat", "btn-icon", "no-text", "user-menu-tab"]; + if (this.isActive) { + list.push("active"); + } + return list.join(" "); + } + + get id() { + return `user-menu-button-${this.args.tab.id}`; + } + + get tabIndex() { + return this.isActive ? "0" : "-1"; + } + + get ariaControls() { + return `quick-access-${this.args.tab.id}`; + } +} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs b/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs index 3f9bd5e972b..2bd85ea2fc9 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs @@ -11,23 +11,23 @@
{{#each this.topTabs as |tab|}} - {{#if tab.count}} {{tab.count}} {{/if}} - + {{/each}}
{{#each this.bottomTabs as |tab|}} - {{/each}}
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 dc33355f0dc..5096a044085 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/menu.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu.js @@ -4,6 +4,8 @@ import { action } from "@ember/object"; import { NO_REMINDER_ICON } from "discourse/models/bookmark"; import UserMenuTab, { CUSTOM_TABS_CLASSES } from "discourse/lib/user-menu/tab"; import { inject as service } from "@ember/service"; +import getUrl from "discourse-common/lib/get-url"; +import DiscourseURL from "discourse/lib/url"; const DEFAULT_TAB_ID = "all-notifications"; const DEFAULT_PANEL_COMPONENT = "user-menu/notifications-list"; @@ -23,6 +25,10 @@ const CORE_TOP_TABS = [ get panelComponent() { return DEFAULT_PANEL_COMPONENT; } + + get linkWhenActive() { + return `${this.currentUser.path}/notifications`; + } }, class extends UserMenuTab { @@ -45,6 +51,10 @@ const CORE_TOP_TABS = [ get notificationTypes() { return ["replied"]; } + + get linkWhenActive() { + return `${this.currentUser.path}/notifications/responses`; + } }, class extends UserMenuTab { @@ -67,6 +77,10 @@ const CORE_TOP_TABS = [ get notificationTypes() { return ["mentioned"]; } + + get linkWhenActive() { + return `${this.currentUser.path}/notifications/mentions`; + } }, class extends UserMenuTab { @@ -96,6 +110,10 @@ const CORE_TOP_TABS = [ get notificationTypes() { return ["liked", "liked_consolidated", "reaction"]; } + + get linkWhenActive() { + return `${this.currentUser.path}/notifications/likes-received`; + } }, class extends UserMenuTab { @@ -120,9 +138,14 @@ const CORE_TOP_TABS = [ this.siteSettings.enable_personal_messages || this.currentUser.staff ); } + get notificationTypes() { return ["private_message"]; } + + get linkWhenActive() { + return `${this.currentUser.path}/messages`; + } }, class extends UserMenuTab { @@ -145,6 +168,10 @@ const CORE_TOP_TABS = [ get notificationTypes() { return ["bookmark_reminder"]; } + + get linkWhenActive() { + return `${this.currentUser.path}/activity/bookmarks`; + } }, class extends UserMenuTab { @@ -167,6 +194,10 @@ const CORE_TOP_TABS = [ get count() { return this.currentUser.get("reviewable_count"); } + + get linkWhenActive() { + return getUrl("/review"); + } }, ]; @@ -183,6 +214,10 @@ const CORE_BOTTOM_TABS = [ get panelComponent() { return "user-menu/profile-tab-content"; } + + get linkWhenActive() { + return `${this.currentUser.path}/summary`; + } }, ]; @@ -300,11 +335,13 @@ export default class UserMenu extends Component { } @action - changeTab(tab) { + handleTabClick(tab) { if (this.currentTabId !== tab.id) { this.currentTabId = tab.id; this.currentPanelComponent = tab.panelComponent; this.currentNotificationTypes = tab.notificationTypes; + } else if (tab.linkWhenActive) { + DiscourseURL.routeTo(tab.linkWhenActive); } } diff --git a/app/assets/javascripts/discourse/app/components/user-menu/tab-button.hbs b/app/assets/javascripts/discourse/app/components/user-menu/tab-button.hbs deleted file mode 100644 index 81d91194400..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-menu/tab-button.hbs +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/app/assets/javascripts/discourse/app/components/user-menu/tab-button.js b/app/assets/javascripts/discourse/app/components/user-menu/tab-button.js deleted file mode 100644 index 742bb3c18ef..00000000000 --- a/app/assets/javascripts/discourse/app/components/user-menu/tab-button.js +++ /dev/null @@ -1,3 +0,0 @@ -import templateOnly from "@ember/component/template-only"; - -export default templateOnly(); 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 e13541f1e1c..32d728549ab 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js @@ -551,6 +551,89 @@ acceptance("User menu", function (needs) { "logout button has the right icon" ); }); + + test("the active tab can be clicked again to navigate to a page", async function (assert) { + withPluginApi("0.1", (api) => { + api.registerUserMenuTab((UserMenuTab) => { + return class extends UserMenuTab { + get id() { + return "custom-tab-1"; + } + + get icon() { + return "wrench"; + } + + get panelComponent() { + return "d-button"; + } + + get linkWhenActive() { + return "/u/eviltrout/preferences"; + } + }; + }); + + api.registerUserMenuTab((UserMenuTab) => { + return class extends UserMenuTab { + get id() { + return "custom-tab-2"; + } + + get icon() { + return "plus"; + } + + get panelComponent() { + return "d-button"; + } + }; + }); + }); + await visit("/"); + await click(".d-header-icons .current-user"); + await click("#user-menu-button-all-notifications"); + assert.strictEqual( + currentURL(), + "/u/eviltrout/notifications", + "clicking on active tab navigates to the page it links to" + ); + assert.notOk(exists(".user-menu"), "user menu is closed after navigating"); + + const tabs = [ + ["#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], + ["#user-menu-button-review-queue", "/review"], + ["#user-menu-button-profile", "/u/eviltrout/summary"], + ]; + for (const [id, expectedLink] of tabs) { + await click(".d-header-icons .current-user"); + await click(id); + await click(id); + if (expectedLink) { + assert.strictEqual( + currentURL(), + expectedLink, + `clicking on the ${id} tab navigates to ${expectedLink}` + ); + assert.notOk( + exists(".user-menu"), + "user menu is closed after navigating" + ); + } else { + assert.ok( + exists(".user-menu"), + "user menu remains open if tab doesn't link to anywhere" + ); + } + await click("#site-logo"); + } + }); }); acceptance("User menu - Dismiss button", function (needs) {