IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

PERF: defer loading channels (#26155)

Browse Source 
Prior to this change we would pre-load all the user channels which making initial page load slower. This change will make them be loaded right after initial load. In the past this was not possible as the channels would have to be loaded on each page transition. However since about a year, we made the channels to be cached on the frontend and no other request will be needed.

I have decided for now to not show a loading state in the sidebar as I think it would be noise, but we can reconsider this later.

Note given we don't have the channels loaded at first certain things where harder to accomplish. The biggest UX change of this commit is that we removed all the complex logic of computing the best channel to display when you load /chat. We will now store the id of the last channel you visited and will use this id to decide which channel to show.
This commit is contained in:
Joffrey JAFFEUX
2024-03-18 08:35:07 +01:00
committed by GitHub
parent 0bccdc4dbc
commit bbb8595107
28 changed files with 391 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
View File

@@ -15,49 +15,54 @@ acceptance("Chat | Hashtag CSS Generator", function (needs) {
needs.settings({ chat_enabled: true });
needs.user({
has_chat_enabled: true,
chat_channels: {
public_channels: [
{
id: 44,
chatable_id: 1,
chatable_type: "Category",
meta: { message_bus_last_ids: {} },
current_user_membership: { following: true },
chatable: category1,
},
{
id: 74,
chatable_id: 2,
chatable_type: "Category",
meta: { message_bus_last_ids: {} },
current_user_membership: { following: true },
chatable: category2,
},
{
id: 88,
chatable_id: 4,
chatable_type: "Category",
meta: { message_bus_last_ids: {} },
current_user_membership: { following: true },
chatable: category3,
},
],
direct_message_channels: [],
meta: { message_bus_last_ids: {} },
tracking: {
channel_tracking: {
44: { unread_count: 0, mention_count: 0 },
74: { unread_count: 0, mention_count: 0 },
88: { unread_count: 0, mention_count: 0 },
},
thread_tracking: {},
},
},
});
needs.site({
categories: [category1, category2, category3],
});
needs.pretender((server, helper) => {
server.get("/chat/api/me/channels", () =>
helper.response({
public_channels: [
{
id: 44,
chatable_id: 1,
chatable_type: "Category",
meta: { message_bus_last_ids: {} },
current_user_membership: { following: true },
chatable: category1,
},
{
id: 74,
chatable_id: 2,
chatable_type: "Category",
meta: { message_bus_last_ids: {} },
current_user_membership: { following: true },
chatable: category2,
},
{
id: 88,
chatable_id: 4,
chatable_type: "Category",
meta: { message_bus_last_ids: {} },
current_user_membership: { following: true },
chatable: category3,
},
],
direct_message_channels: [],
meta: { message_bus_last_ids: {} },
tracking: {
channel_tracking: {
44: { unread_count: 0, mention_count: 0 },
74: { unread_count: 0, mention_count: 0 },
88: { unread_count: 0, mention_count: 0 },
},
thread_tracking: {},
},
})
);
});
test("hashtag CSS classes are generated", async function (assert) {
await visit("/");
const cssTag = document.querySelector("style#hashtag-css-generator");
@@ -66,10 +71,7 @@ acceptance("Chat | Hashtag CSS Generator", function (needs) {
".hashtag-category-badge { background-color: var(--primary-medium); }\n" +
".hashtag-color--category-1 { background-color: #ff0000; }\n" +
".hashtag-color--category-2 { background-color: #333; }\n" +
".hashtag-color--category-4 { background-color: #2B81AF; }\n" +
".d-icon.hashtag-color--channel-44 { color: #ff0000 }\n" +
".d-icon.hashtag-color--channel-74 { color: #333 }\n" +
".d-icon.hashtag-color--channel-88 { color: #2B81AF }"
".hashtag-color--category-4 { background-color: #2B81AF; }"
);
});
});

107
plugins/chat/test/javascripts/acceptance/mentions-test.js
View File

@@ -1,107 +0,0 @@
import { fillIn, visit } from "@ember/test-helpers";
import { test } from "qunit";
import pretender, { response } from "discourse/tests/helpers/create-pretender";
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
acceptance("Chat | Mentions", function (needs) {
const channelId = 1;
const actingUser = {
id: 1,
username: "acting_user",
};
const channel = {
id: channelId,
chatable_id: 1,
chatable_type: "Category",
meta: { message_bus_last_ids: {}, can_delete_self: true },
current_user_membership: { following: true },
allow_channel_wide_mentions: false,
chatable: { id: 1 },
title: "Some title",
};
needs.settings({ chat_enabled: true });
needs.user({
...actingUser,
has_chat_enabled: true,
chat_channels: {
public_channels: [channel],
direct_message_channels: [],
meta: { message_bus_last_ids: {} },
tracking: {},
},
});
needs.hooks.beforeEach(function () {
pretender.post(`/chat/drafts`, () => response({}));
pretender.get(`/chat/api/channels/${channelId}/messages`, () =>
response({
messages: [],
meta: {
can_load_more_future: false,
},
})
);
pretender.get("/chat/api/mentions/groups.json", () =>
response({
unreachable: [],
over_members_limit: [],
invalid: ["and"],
})
);
});
test("shows warning when mention limit exceeded", async function (assert) {
this.siteSettings.max_mentions_per_chat_message = 2;
await visit(`/chat/c/-/${channelId}`);
await fillIn(".chat-composer__input", `Hey @user1 @user2 @user3`);
assert.dom(".chat-mention-warnings").exists();
});
test("shows warning for @here mentions when channel-wide mentions are disabled", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await fillIn(".chat-composer__input", `Hey @here`);
assert.dom(".chat-mention-warnings").exists();
});
test("shows warning for @all mention when channel-wide mentions are disabled", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await fillIn(".chat-composer__input", `Hey @all`);
assert.dom(".chat-mention-warnings").exists();
});
test("ignores duplicates when counting mentions", async function (assert) {
this.siteSettings.max_mentions_per_chat_message = 2;
await visit(`/chat/c/-/${channelId}`);
const mention = `@user1`;
await fillIn(
".chat-composer__input",
`Hey ${mention} ${mention} ${mention}`
);
assert.dom(".chat-mention-warnings").doesNotExist();
});
test("doesn't consider code-blocks when counting mentions", async function (assert) {
this.siteSettings.max_mentions_per_chat_message = 2;
await visit(`/chat/c/-/${channelId}`);
// since @bar is inside a code-block it shouldn't be considered a mention
const message = `Hey @user1 @user2
\`\`\`
def foo
@bar = true
end
\`\`\`
`;
await fillIn(".chat-composer__input", message);
assert.dom(".chat-mention-warnings").doesNotExist();
});
});

332
plugins/chat/test/javascripts/acceptance/user-status-on-mentions-test.js
View File

@@ -1,332 +0,0 @@
import { click, triggerEvent, visit, waitFor } from "@ember/test-helpers";
import { skip, test } from "qunit";
import pretender, { response } from "discourse/tests/helpers/create-pretender";
import {
acceptance,
loggedInUser,
publishToMessageBus,
query,
simulateKeys,
} from "discourse/tests/helpers/qunit-helpers";
acceptance("Chat | User status on mentions", function (needs) {
const channelId = 1;
const messageId = 1;
const actingUser = {
id: 1,
username: "acting_user",
};
const mentionedUser1 = {
id: 1000,
username: "user1",
status: {
description: "surfing",
emoji: "surfing_man",
},
};
const mentionedUser2 = {
id: 2000,
username: "user2",
status: {
description: "vacation",
emoji: "desert_island",
},
};
const mentionedUser3 = {
id: 3000,
username: "user3",
status: {
description: "off to dentist",
emoji: "tooth",
},
};
const message = {
id: messageId,
message: `Hey @${mentionedUser1.username}`,
cooked: `<p>Hey <a class="mention" href="/u/${mentionedUser1.username}">@${mentionedUser1.username}</a></p>`,
mentioned_users: [mentionedUser1],
user: actingUser,
created_at: "2020-08-04T15:00:00.000Z",
};
const newStatus = {
description: "working remotely",
emoji: "house",
};
const channel = {
id: channelId,
chatable_id: 1,
chatable_type: "Category",
title: "A category channel",
meta: { message_bus_last_ids: {}, can_delete_self: true },
current_user_membership: { following: true },
chatable: { id: 1 },
};
needs.settings({ chat_enabled: true });
needs.user({
...actingUser,
has_chat_enabled: true,
chat_channels: {
public_channels: [channel],
direct_message_channels: [],
meta: { message_bus_last_ids: {} },
tracking: {},
},
});
needs.hooks.beforeEach(function () {
pretender.post(`/chat/1`, () => response({}));
pretender.put(`/chat/1/edit/${messageId}`, () => response({}));
pretender.post(`/chat/drafts`, () => response({}));
pretender.put(`/chat/api/channels/1/read/1`, () => response({}));
pretender.get(`/chat/api/channels/1/messages`, () =>
response({
messages: [message],
meta: {
can_load_more_future: false,
},
})
);
pretender.delete(`/chat/api/channels/1/messages/${messageId}`, () =>
response({})
);
pretender.put(`/chat/api/channels/1/messages/${messageId}/restore`, () =>
response({})
);
pretender.get("/u/search/users", () =>
response({
users: [mentionedUser2, mentionedUser3],
})
);
pretender.get("/chat/api/mentions/groups.json", () =>
response({
unreachable: [],
over_members_limit: [],
invalid: ["and"],
})
);
});
skip("just posted messages | it shows status on mentions ", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await typeWithAutocompleteAndSend(`mentioning @${mentionedUser2.username}`);
assertStatusIsRendered(
assert,
statusSelector(mentionedUser2.username),
mentionedUser2.status
);
});
skip("just posted messages | it updates status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await typeWithAutocompleteAndSend(`mentioning @${mentionedUser2.username}`);
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser2.id]: newStatus,
});
const selector = statusSelector(mentionedUser2.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
});
skip("just posted messages | it deletes status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await typeWithAutocompleteAndSend(`mentioning @${mentionedUser2.username}`);
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser2.id]: null,
});
const selector = statusSelector(mentionedUser2.username);
await waitFor(selector, { count: 0 });
assert.dom(selector).doesNotExist("status is deleted");
});
skip("edited messages | it shows status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await editMessage(
".chat-message-content",
`mentioning @${mentionedUser3.username}`
);
assertStatusIsRendered(
assert,
statusSelector(mentionedUser3.username),
mentionedUser3.status
);
});
skip("edited messages | it updates status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await editMessage(
".chat-message-content",
`mentioning @${mentionedUser3.username}`
);
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser3.id]: newStatus,
});
const selector = statusSelector(mentionedUser3.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
});
skip("edited messages | it deletes status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await editMessage(
".chat-message-content",
`mentioning @${mentionedUser3.username}`
);
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser3.id]: null,
});
const selector = statusSelector(mentionedUser3.username);
await waitFor(selector, { count: 0 });
assert.dom(selector).doesNotExist("status is deleted");
});
test("deleted messages | it shows status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await deleteMessage(".chat-message-content");
await click(".chat-message-expand");
assertStatusIsRendered(
assert,
statusSelector(mentionedUser1.username),
mentionedUser1.status
);
});
test("deleted messages | it updates status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await deleteMessage(".chat-message-content");
await click(".chat-message-expand");
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser1.id]: newStatus,
});
const selector = statusSelector(mentionedUser1.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
});
test("deleted messages | it deletes status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await deleteMessage(".chat-message-content");
await click(".chat-message-expand");
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser1.id]: null,
});
const selector = statusSelector(mentionedUser1.username);
await waitFor(selector, { count: 0 });
assert.dom(selector).doesNotExist("status is deleted");
});
test("restored messages | it shows status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await deleteMessage(".chat-message-content");
await restoreMessage(".chat-message-text.-deleted");
assertStatusIsRendered(
assert,
statusSelector(mentionedUser1.username),
mentionedUser1.status
);
});
test("restored messages | it updates status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await deleteMessage(".chat-message-content");
await restoreMessage(".chat-message-text.-deleted");
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser1.id]: newStatus,
});
const selector = statusSelector(mentionedUser1.username);
await waitFor(selector);
assertStatusIsRendered(assert, selector, newStatus);
});
test("restored messages | it deletes status on mentions", async function (assert) {
await visit(`/chat/c/-/${channelId}`);
await deleteMessage(".chat-message-content");
await restoreMessage(".chat-message-text.-deleted");
loggedInUser().appEvents.trigger("user-status:changed", {
[mentionedUser1.id]: null,
});
const selector = statusSelector(mentionedUser1.username);
await waitFor(selector, { count: 0 });
assert.dom(selector).doesNotExist("status is deleted");
});
function assertStatusIsRendered(assert, selector, status) {
assert
.dom(selector)
.exists("status is rendered")
.hasAttribute(
"src",
new RegExp(`${status.emoji}.png`),
"status emoji is updated"
);
}
async function deleteMessage(messageSelector) {
await triggerEvent(query(messageSelector), "mouseenter");
await click(".more-buttons .select-kit-header-wrapper");
await click(".select-kit-collection .select-kit-row[data-value='delete']");
await publishToMessageBus(`/chat/${channelId}`, {
type: "delete",
deleted_id: messageId,
deleted_at: "2022-01-01T08:00:00.000Z",
});
}
async function editMessage(messageSelector, text) {
await triggerEvent(query(messageSelector), "mouseenter");
await click(".more-buttons .select-kit-header-wrapper");
await click(".select-kit-collection .select-kit-row[data-value='edit']");
await typeWithAutocompleteAndSend(text);
}
async function restoreMessage(messageSelector) {
await triggerEvent(query(messageSelector), "mouseenter");
await click(".more-buttons .select-kit-header-wrapper");
await click(".select-kit-collection .select-kit-row[data-value='restore']");
await publishToMessageBus(`/chat/${channelId}`, {
type: "restore",
chat_message: message,
});
}
async function typeWithAutocompleteAndSend(text) {
await simulateKeys(query(".chat-composer__input"), text);
await click(".autocomplete.ac-user .selected");
await click(".chat-composer-button.-send");
}
function statusSelector(username) {
return `.mention[href='/u/${username}'] .user-status-message img`;
}
});

6
plugins/chat/test/javascripts/components/chat-channel-test.js
View File

@@ -51,6 +51,12 @@ module(
meta: { can_delete_self: true },
})
);
pretender.get(`/chat/api/me/channels`, () =>
response({
direct_message_channels: [],
public_channels: [],
})
);
this.channel = fabricators.channel({
id: channelId,