diff --git a/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js index d8e9cfd0c25..2e2ad287efc 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js @@ -1,13 +1,6 @@ import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list"; export default class UserMenuLikesNotificationsList extends UserMenuNotificationsList { - get filterByTypes() { - // TODO(osama): reaction is a type used by the reactions plugin, but it's - // added here temporarily unitl we add a plugin API for extending - // filterByTypes in lists - return ["liked", "liked_consolidated", "reaction"]; - } - get dismissTypes() { return this.filterByTypes; } 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 index 2a7a4396e87..8cbfabb93ac 100644 --- 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 @@ -1,10 +1,6 @@ import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list"; export default class UserMenuMentionsNotificationsList extends UserMenuNotificationsList { - get filterByTypes() { - return ["mentioned"]; - } - get dismissTypes() { return this.filterByTypes; } 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 ac8795a3a92..3f9bd5e972b 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs @@ -6,7 +6,7 @@ class="quick-access-panel" tabindex="-1" aria-labelledby={{concat "user-menu-button-" this.currentTabId}}> - {{component this.currentPanelComponent closeUserMenu=@closeUserMenu}} + {{component this.currentPanelComponent closeUserMenu=@closeUserMenu filterByTypes=this.currentNotificationTypes}}
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 caeaea7d2fc..dc33355f0dc 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/menu.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/menu.js @@ -41,6 +41,10 @@ const CORE_TOP_TABS = [ get count() { return this.getUnreadCountForType("replied"); } + + get notificationTypes() { + return ["replied"]; + } }, class extends UserMenuTab { @@ -59,6 +63,10 @@ const CORE_TOP_TABS = [ get count() { return this.getUnreadCountForType("mentioned"); } + + get notificationTypes() { + return ["mentioned"]; + } }, class extends UserMenuTab { @@ -81,6 +89,13 @@ const CORE_TOP_TABS = [ get count() { return this.getUnreadCountForType("liked"); } + + // TODO(osama): reaction is a type used by the reactions plugin, but it's + // added here temporarily unitl we add a plugin API for extending + // filterByTypes in lists + get notificationTypes() { + return ["liked", "liked_consolidated", "reaction"]; + } }, class extends UserMenuTab { @@ -105,6 +120,9 @@ const CORE_TOP_TABS = [ this.siteSettings.enable_personal_messages || this.currentUser.staff ); } + get notificationTypes() { + return ["private_message"]; + } }, class extends UserMenuTab { @@ -123,6 +141,10 @@ const CORE_TOP_TABS = [ get count() { return this.getUnreadCountForType("bookmark_reminder"); } + + get notificationTypes() { + return ["bookmark_reminder"]; + } }, class extends UserMenuTab { @@ -164,6 +186,35 @@ const CORE_BOTTOM_TABS = [ }, ]; +const CORE_OTHER_NOTIFICATIONS_TAB = class extends UserMenuTab { + constructor(currentUser, siteSettings, site, otherNotificationTypes) { + super(...arguments); + this.otherNotificationTypes = otherNotificationTypes; + } + + get id() { + return "other"; + } + + get icon() { + return "discourse-other-tab"; + } + + get panelComponent() { + return "user-menu/other-notifications-list"; + } + + get count() { + return this.otherNotificationTypes.reduce((sum, notificationType) => { + return sum + this.getUnreadCountForType(notificationType); + }, 0); + } + + get notificationTypes() { + return this.otherNotificationTypes; + } +}; + export default class UserMenu extends Component { @service currentUser; @service siteSettings; @@ -172,6 +223,7 @@ export default class UserMenu extends Component { @tracked currentTabId = DEFAULT_TAB_ID; @tracked currentPanelComponent = DEFAULT_PANEL_COMPONENT; + @tracked currentNotificationTypes; constructor() { super(...arguments); @@ -196,7 +248,6 @@ export default class UserMenu extends Component { CUSTOM_TABS_CLASSES.forEach((tabClass) => { const tab = new tabClass(this.currentUser, this.siteSettings, this.site); if (tab.shouldDisplay) { - // ensure the review queue tab is always last if (reviewQueueTabIndex === -1) { tabs.push(tab); } else { @@ -206,6 +257,15 @@ export default class UserMenu extends Component { } }); + tabs.push( + new CORE_OTHER_NOTIFICATIONS_TAB( + this.currentUser, + this.siteSettings, + this.site, + this.#notificationTypesForTheOtherTab(tabs) + ) + ); + return tabs.map((tab, index) => { tab.position = index; return tab; @@ -229,14 +289,14 @@ export default class UserMenu extends Component { }); } - get _coreBottomTabs() { - return [ - { - id: "preferences", - icon: "user-cog", - href: `${this.currentUser.path}/preferences`, - }, - ]; + #notificationTypesForTheOtherTab(tabs) { + const usedNotificationTypes = tabs + .filter((tab) => tab.notificationTypes) + .map((tab) => tab.notificationTypes) + .flat(); + return Object.keys(this.site.notification_types).filter( + (notificationType) => !usedNotificationTypes.includes(notificationType) + ); } @action @@ -244,6 +304,7 @@ export default class UserMenu extends Component { if (this.currentTabId !== tab.id) { this.currentTabId = tab.id; this.currentPanelComponent = tab.panelComponent; + this.currentNotificationTypes = tab.notificationTypes; } } diff --git a/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js index 2a56650c0c7..a585b5a06fc 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/notifications-list.js @@ -15,7 +15,7 @@ export default class UserMenuNotificationsList extends UserMenuItemsList { @service store; get filterByTypes() { - return null; + return this.args.filterByTypes; } get dismissTypes() { diff --git a/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list.js new file mode 100644 index 00000000000..6b064e7f3cd --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/user-menu/other-notifications-list.js @@ -0,0 +1,16 @@ +import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list"; +import { inject as service } from "@ember/service"; + +export default class UserMenuOtherNotificationsList extends UserMenuNotificationsList { + @service currentUser; + @service siteSettings; + @service site; + + get dismissTypes() { + return this.filterByTypes; + } + + dismissWarningModal() { + return null; + } +} diff --git a/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js b/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js index b7d878be33f..8d4134c8703 100644 --- a/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js +++ b/app/assets/javascripts/discourse/app/components/user-menu/replies-notifications-list.js @@ -1,10 +1,6 @@ import UserMenuNotificationsList from "discourse/components/user-menu/notifications-list"; export default class UserMenuRepliesNotificationsList extends UserMenuNotificationsList { - get filterByTypes() { - return ["replied"]; - } - get dismissTypes() { return this.filterByTypes; } diff --git a/app/assets/javascripts/discourse/app/lib/user-menu/tab.js b/app/assets/javascripts/discourse/app/lib/user-menu/tab.js index f33db82fb66..9e8aaa099f8 100644 --- a/app/assets/javascripts/discourse/app/lib/user-menu/tab.js +++ b/app/assets/javascripts/discourse/app/lib/user-menu/tab.js @@ -43,6 +43,11 @@ export default class UserMenuTab { throw new Error("not implemented"); } + /** + * @returns {Array} Notification types displayed in tab. Those notifications will be removed from "other" tab. + */ + get notificationTypes() {} + getUnreadCountForType(type) { const key = `grouped_unread_notifications.${this.site.notification_types[type]}`; // we're retrieving the value with get() so that Ember tracks the property 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 fca2e21d099..b1f2d88f2d8 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js @@ -135,6 +135,7 @@ acceptance("User menu", function (needs) { "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", }; await visit("/"); @@ -161,7 +162,7 @@ acceptance("User menu", function (needs) { ); assert.strictEqual( query(".tabs-list.bottom-tabs .btn").dataset.tabNumber, - "9", + "10", "bottom tab has the correct data-tab-number" ); @@ -528,6 +529,8 @@ acceptance("User menu - Dismiss button", function (needs) { grouped_unread_notifications: { [NOTIFICATION_TYPES.bookmark_reminder]: 103, [NOTIFICATION_TYPES.private_message]: 89, + [NOTIFICATION_TYPES.votes_released]: 1, + [NOTIFICATION_TYPES.code_review_commit_approved]: 3, }, }); @@ -713,4 +716,27 @@ acceptance("User menu - Dismiss button", function (needs) { "mark-read request is sent without a confirmation modal" ); }); + + test("doesn't show confirmation modal for the other notifications list", async function (assert) { + await visit("/"); + await click(".d-header-icons .current-user"); + + await click("#user-menu-button-other"); + let repliesBadgeNotification = query( + "#user-menu-button-other .badge-notification" + ); + assert.strictEqual( + repliesBadgeNotification.textContent.trim(), + "4", + "badge shows the right count" + ); + + await click(".user-menu .notifications-dismiss"); + + assert.ok(!exists("#user-menu-button-other .badge-notification")); + assert.ok( + markRead, + "mark-read request is sent without a confirmation modal" + ); + }); }); 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 620227d0613..9939f2a422b 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,6 +162,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 f472a6d174f..f85c2853471 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,7 +48,7 @@ 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, 6); + assert.strictEqual(tabs.length, 7); [ "all-notifications", "replies", @@ -72,7 +72,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, "6"); + assert.strictEqual(profileTab.dataset.tabNumber, "7"); assert.strictEqual(profileTab.getAttribute("tabindex"), "-1"); }); @@ -82,11 +82,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, 6); + assert.strictEqual(tabs.length, 7); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3", "4", "5"], + ["0", "1", "2", "3", "4", "5", "6"], "data-tab-number of the tabs has no gaps when the likes tab is hidden" ); }); @@ -98,11 +98,11 @@ module("Integration | Component | user-menu", function (hooks) { assert.strictEqual(tab.dataset.tabNumber, "6"); const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs - assert.strictEqual(tabs.length, 8); + assert.strictEqual(tabs.length, 9); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3", "4", "5", "6", "7"], + ["0", "1", "2", "3", "4", "5", "6", "7", "8"], "data-tab-number of the tabs has no gaps when the reviewables tab is show" ); }); @@ -117,11 +117,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, 6); + assert.strictEqual(tabs.length, 7); assert.deepEqual( tabs.map((t) => t.dataset.tabNumber), - ["0", "1", "2", "3", "4", "5"], + ["0", "1", "2", "3", "4", "5", "6"], "data-tab-number of the tabs has no gaps when the messages tab is hidden" ); }); diff --git a/lib/svg_sprite.rb b/lib/svg_sprite.rb index de84ef0d6f0..84ad20aca4b 100644 --- a/lib/svg_sprite.rb +++ b/lib/svg_sprite.rb @@ -65,6 +65,7 @@ module SvgSprite "discourse-compress", "discourse-emojis", "discourse-expand", + "discourse-other-tab", "download", "ellipsis-h", "ellipsis-v", diff --git a/vendor/assets/svg-icons/discourse-additional.svg b/vendor/assets/svg-icons/discourse-additional.svg index d531ea76e34..38ec0f46099 100644 --- a/vendor/assets/svg-icons/discourse-additional.svg +++ b/vendor/assets/svg-icons/discourse-additional.svg @@ -40,4 +40,17 @@ Additional SVG icons + + + + + + + + + + + + +