github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 20:03:15 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

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

Internal topic: t/72835.
This commit is contained in:
Osama Sayegh 2022-09-13 20:52:02 +03:00 committed by GitHub
parent 6c1b6a98ff
commit 19909a74b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 59 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/javascripts/discourse/app/components/user-menu/menu.js
View File

@ -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";

11
app/assets/javascripts/discourse/app/components/user-menu/watching-notifications-list.js Normal file
View File

@ -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;
}
}

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

@ -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"
);

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

@ -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(

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

@ -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"
);
});