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

DEV: Merge mentions and watching tabs into the replies tab in the user menu (#18544)

Browse Source 
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.
This commit is contained in:
Osama Sayegh 2022-10-12 17:58:17 +03:00 committed by GitHub
parent 76c86a4269
commit 1eaa1fee2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

@ -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],

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

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

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

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