FEATURE: Async load of category and chat hashtags (#25526)

This commit includes several changes to make hashtags work when "lazy
load categories" is enabled. The previous hashtag implementation use the
category colors CSS variables, but these are not defined when the site
setting is enabled because categories are no longer preloaded.

This commit implements two fundamental changes:

1. load colors together with the other hashtag information

2. load cooked hashtag data asynchronously

The first change is implemented by adding "colors" to the HashtagItem
model. It is a list because two colors are returned for subcategories:
the color of the parent category and subcategory.

The second change is implemented on the server-side in a new route
/hashtags/by-ids and on the client side by loading previously unseen
hashtags, generating the CSS on the fly and injecting it into the page.

There have been minimal changes outside of these two fundamental ones,
but a refactoring will be coming soon to reuse as much of the code
and maybe favor use of `style` rather than injecting CSS into the page,
which can lead to page rerenders and indefinite grow of the styles.
This commit is contained in:
Bianca Nenciu
2024-02-12 12:07:14 +02:00
committed by GitHub
parent 6b596151ff
commit 1403217ca4
22 changed files with 420 additions and 67 deletions

View File

@ -50,6 +50,49 @@ RSpec.describe Chat::ChannelHashtagDataSource do
end
end
describe "#find_by_ids" do
it "finds a channel by ID" do
result = described_class.find_by_ids(guardian, [channel1.id]).first
expect(result.to_h).to eq(
{
relative_url: channel1.relative_url,
text: "Zany Things",
description: "Just weird stuff",
colors: [channel1.chatable.color],
icon: "comment",
id: channel1.id,
type: "channel",
ref: nil,
slug: "random",
},
)
end
it "does not return a channel that a user does not have permission to view" do
result = described_class.find_by_ids(Guardian.new, [channel2.id]).first
expect(result).to eq(nil)
result = described_class.find_by_ids(guardian, [channel2.id]).first
expect(result).to eq(nil)
GroupUser.create(user: user, group: group)
result = described_class.find_by_ids(Guardian.new(user), [channel2.id]).first
expect(result.to_h).to eq(
{
relative_url: channel2.relative_url,
text: "Secret Stuff",
description: nil,
colors: [channel2.chatable.color],
icon: "comment",
id: channel2.id,
type: "channel",
ref: nil,
slug: "secret",
},
)
end
end
describe "#lookup" do
it "finds a channel by a slug" do
result = described_class.lookup(guardian, ["random"]).first
@ -58,6 +101,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
relative_url: channel1.relative_url,
text: "Zany Things",
description: "Just weird stuff",
colors: [channel1.chatable.color],
icon: "comment",
id: channel1.id,
type: "channel",
@ -78,6 +122,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
relative_url: channel2.relative_url,
text: "Secret Stuff",
description: nil,
colors: [channel2.chatable.color],
icon: "comment",
id: channel2.id,
type: "channel",
@ -137,6 +182,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
relative_url: channel1.relative_url,
text: "Zany Things",
description: "Just weird stuff",
colors: [channel1.chatable.color],
icon: "comment",
id: channel1.id,
type: "channel",
@ -153,6 +199,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
relative_url: channel1.relative_url,
text: "Zany Things",
description: "Just weird stuff",
colors: [channel1.chatable.color],
icon: "comment",
id: channel1.id,
type: "channel",
@ -172,6 +219,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
relative_url: channel2.relative_url,
text: "Secret Stuff",
description: nil,
colors: [channel2.chatable.color],
icon: "comment",
id: channel2.id,
type: "channel",