Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: correctly handles navigating to a message (#19614) 

Recent changes surfaced the various issues with this codepath:
- we were not correctly reseting `messageLookup` leading to us trying to scroll to a non existing message in the view
- we were calling markAsRead which would scroll to the bottom, even if we had a target message
- we were not debouncing fetchMessages, which could cause multiple reload of the messages when loading it with a targetMessageId: first fetch from last read and then immediately fetch from targetMessageId
- other naming inconsistencies
- not handling drawer

This commit also adds tests for classic scenarios related to this use case.
This commit is contained in:
Joffrey JAFFEUX 2022-12-23 19:48:14 +01:00 committed by GitHub
parent d633467c60
commit 03d32f26bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 186 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
View File

@ -7,7 +7,7 @@ import {
LIST_VIEW,
} from "discourse/plugins/chat/discourse/services/chat";
import { equal } from "@ember/object/computed";
import { cancel, next, throttle } from "@ember/runloop";
import { cancel, next, schedule, throttle } from "@ember/runloop";
import { inject as service } from "@ember/service";
export default Component.extend({
@ -224,10 +224,18 @@ export default Component.extend({
return this.chatChannelsManager
.find(route.params.channelId)
.then((channel) => {
this.chat.set("messageId", route.queryParams.messageId);
this.chat.setActiveChannel(channel);
this.set("view", CHAT_VIEW);
this.appEvents.trigger("chat:float-toggled", false);
if (route.queryParams.messageId) {
schedule("afterRender", () => {
this.appEvents.trigger(
"chat-live-pane:highlight-message",
route.queryParams.messageId
);
});
}
});
}
},

34
plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
View File

@ -5,6 +5,7 @@ import Component from "@ember/component";
import discourseComputed, {
afterRender,
bind,
debounce,
observes,
} from "discourse-common/utils/decorators";
import discourseDebounce from "discourse-common/lib/debounce";
@ -171,7 +172,6 @@ export default Component.extend({
this._super(...arguments);
this.currentUserTimezone = this.currentUser?.user_option.timezone;
this.set("targetMessageId", this.chat.messageId);
if (
this.chatChannel?.id &&
@ -227,6 +227,7 @@ export default Component.extend({
}
},
@debounce(100)
fetchMessages(channel, options = {}) {
this.set("loading", true);
@ -256,8 +257,9 @@ export default Component.extend({
}
this.setMessageProps(messages, fetchingFromLastRead);
if (this.targetMessageId) {
this.highlightOrFetchMessage(this.targetMessageId);
if (options.fetchFromLastMessage) {
this.set("stickyScroll", true);
this._stickScrollToBottom();
}
this._focusComposer();
@ -268,7 +270,6 @@ export default Component.extend({
return;
}
this.chat.set("messageId", null);
this.set("loading", false);
});
});
@ -407,18 +408,19 @@ export default Component.extend({
setMessageProps(messages, fetchingFromLastRead) {
this._unloadedReplyIds = [];
this.messageLookup = {};
const meta = messages.resultSetMeta;
this.setProperties({
messages: this._prepareMessages(messages),
details: {
chat_channel_id: this.chatChannel.id,
chatable_type: this.chatChannel.chatable_type,
can_delete_self: messages.resultSetMeta.can_delete_self,
can_delete_others: messages.resultSetMeta.can_delete_others,
can_flag: messages.resultSetMeta.can_flag,
user_silenced: messages.resultSetMeta.user_silenced,
can_moderate: messages.resultSetMeta.can_moderate,
channel_message_bus_last_id:
messages.resultSetMeta.channel_message_bus_last_id,
can_delete_self: meta.can_delete_self,
can_delete_others: meta.can_delete_others,
can_flag: meta.can_flag,
user_silenced: meta.user_silenced,
can_moderate: meta.can_moderate,
channel_message_bus_last_id: meta.channel_message_bus_last_id,
},
registeredChatChannelId: this.chatChannel.id,
});
@ -434,6 +436,7 @@ export default Component.extend({
position: "top",
autoExpand: true,
});
this.set("targetMessageId", null);
} else if (fetchingFromLastRead) {
this._markLastReadMessage();
@ -566,7 +569,7 @@ export default Component.extend({
this.messages.findIndex((m) => m.id === lastReadId) || 0;
let newestUnreadMessage = this.messages[indexOfLastReadMessage + 1];
if (newestUnreadMessage) {
if (newestUnreadMessage && !this.targetMessageId) {
newestUnreadMessage.set("newestMessage", true);
next(() => this.scrollToMessage(newestUnreadMessage.id));
@ -1522,13 +1525,6 @@ export default Component.extend({
_fetchAndScrollToLatest() {
return this.fetchMessages(this.chatChannel, {
fetchFromLastMessage: true,
}).then(() => {
if (this._selfDeleted) {
return;
}
this.set("stickyScroll", true);
this._stickScrollToBottom();
});
},

25
plugins/chat/assets/javascripts/discourse/routes/chat-channel.js
View File

@ -1,6 +1,8 @@
import DiscourseRoute from "discourse/routes/discourse";
import { inject as service } from "@ember/service";
import slugifyChannel from "discourse/plugins/chat/discourse/lib/slugify-channel";
import { action } from "@ember/object";
import { schedule } from "@ember/runloop";
export default class ChatChannelRoute extends DiscourseRoute {
@service chat;
@ -14,19 +16,24 @@ export default class ChatChannelRoute extends DiscourseRoute {
afterModel(model) {
this.chat.setActiveChannel(model);
const queryParams = this.paramsFor(this.routeName);
const { channelTitle, messageId } = this.paramsFor(this.routeName);
const slug = slugifyChannel(model);
if (queryParams?.channelTitle !== slug) {
this.router.replaceWith("chat.channel.index", model.id, slug);
if (channelTitle !== slug) {
this.router.replaceWith("chat.channel.index", model.id, slug, {
queryParams: { messageId },
});
}
}
setupController(controller) {
super.setupController(...arguments);
if (controller.messageId) {
this.chat.set("messageId", controller.messageId);
this.controller.set("messageId", null);
@action
didTransition() {
const { channelId, messageId } = this.paramsFor(this.routeName);
if (channelId && messageId) {
schedule("afterRender", () => {
this.chat.openChannelAtMessage(channelId, messageId);
this.controller.set("messageId", null); // clear the query param
});
}
return true;
}
}

3
plugins/chat/assets/javascripts/discourse/services/chat.js
View File

@ -38,11 +38,10 @@ export default class Chat extends Service {
activeChannel = null;
cook = null;
messageId = null;
presenceChannel = null;
sidebarActive = false;
isNetworkUnreliable = false;
@and("currentUser.has_chat_enabled", "siteSettings.chat_enabled") userCanChat;
@computed("currentUser.staff", "currentUser.groups.[]")

140
plugins/chat/spec/system/navigating_to_message_spec.rb Normal file
View File

@ -0,0 +1,140 @@
# frozen_string_literal: true
RSpec.describe "Navigating to message", type: :system, js: true do
fab!(:current_user) { Fabricate(:user) }
fab!(:channel_1) { Fabricate(:category_channel) }
fab!(:first_message) { Fabricate(:chat_message, chat_channel: channel_1) }
let(:chat_page) { PageObjects::Pages::Chat.new }
let(:chat_drawer_page) { PageObjects::Pages::ChatDrawer.new }
let(:link) { "My favorite message" }
before do
chat_system_bootstrap
channel_1.add(current_user)
75.times { Fabricate(:chat_message, chat_channel: channel_1) }
sign_in(current_user)
end
context "when in full page mode" do
before { chat_page.prefers_full_page }
context "when clicking a link containing a message id" do
fab!(:topic_1) { Fabricate(:topic) }
before do
Fabricate(
:post,
topic: topic_1,
raw:
"<a href=\"/chat/channel/#{channel_1.id}/-?messageId=#{first_message.id}\">#{link}</a>",
)
end
it "highlights the correct message" do
visit("/t/-/#{topic_1.id}")
click_link(link)
expect(page).to have_css(
".chat-message-container.highlighted[data-id='#{first_message.id}']",
)
end
end
context "when clicking a link to a message from the current channel" do
before do
Fabricate(:chat_message, chat_channel: channel_1, message: "[#{link}](/chat/channel/#{channel_1.id}/-?messageId=#{first_message.id})")
end
it "highglights the correct message" do
chat_page.visit_channel(channel_1)
click_link(link)
expect(page).to have_css(".chat-message-container.highlighted[data-id='#{first_message.id}']")
end
it "highlights the correct message after using the bottom arrow" do
chat_page.visit_channel(channel_1)
click_link(link)
click_link(I18n.t("js.chat.scroll_to_bottom"))
click_link(link)
expect(page).to have_css(".chat-message-container.highlighted[data-id='#{first_message.id}']")
end
end
context "when clicking a link to a message from another channel" do
fab!(:channel_2) { Fabricate(:category_channel) }
before do
Fabricate(:chat_message, chat_channel: channel_2, message: "[#{link}](/chat/channel/#{channel_1.id}/-?messageId=#{first_message.id})")
channel_2.add(current_user)
end
it "highglights the correct message" do
chat_page.visit_channel(channel_2)
click_link(link)
expect(page).to have_css(".chat-message-container.highlighted[data-id='#{first_message.id}']")
end
end
context "when navigating directly to a message link" do
it "highglights the correct message" do
visit("/chat/channel/#{channel_1.id}/-?messageId=#{first_message.id}")
expect(page).to have_css(".chat-message-container.highlighted[data-id='#{first_message.id}']")
end
end
end
context "when in drawer" do
context "when clicking a link containing a message id" do
fab!(:topic_1) { Fabricate(:topic) }
before do
Fabricate(
:post,
topic: topic_1,
raw:
"<a href=\"/chat/channel/#{channel_1.id}/-?messageId=#{first_message.id}\">#{link}</a>",
)
end
it "highlights correct message" do
visit("/t/-/#{topic_1.id}")
click_link(link)
expect(page).to have_css(
".chat-drawer.is-expanded .chat-message-container.highlighted[data-id='#{first_message.id}']",
)
end
end
context "when clicking a link to a message from the current channel" do
before do
Fabricate(:chat_message, chat_channel: channel_1, message: "[#{link}](/chat/channel/#{channel_1.id}/-?messageId=#{first_message.id})")
end
it "highglights the correct message" do
visit("/")
chat_page.open_from_header
chat_drawer_page.open_channel(channel_1)
click_link(link)
expect(page).to have_css(".chat-message-container.highlighted[data-id='#{first_message.id}']")
end
it "highlights the correct message after using the bottom arrow" do
visit("/")
chat_page.open_from_header
chat_drawer_page.open_channel(channel_1)
click_link(link)
click_link(I18n.t("js.chat.scroll_to_bottom"))
click_link(link)
expect(page).to have_css(".chat-message-container.highlighted[data-id='#{first_message.id}']")
end
end
end
end

27
plugins/chat/spec/system/navigation_spec.rb
View File

@ -126,33 +126,6 @@ RSpec.describe "Navigation", type: :system, js: true do
end
end
context "when opening full page with a link containing a message id" do
it "highlights correct message" do
visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}?messageId=#{message.id}")
expect(page).to have_css(
".full-page-chat .chat-message-container.highlighted[data-id='#{message.id}']",
)
end
end
context "when opening drawer with a link containing a message id" do
it "highlights correct message" do
Fabricate(
:post,
topic: topic,
raw:
"<a href=\"/chat/channel/#{category_channel.id}/#{category_channel.slug}?messageId=#{message.id}\">foo</a>",
)
visit("/t/-/#{topic.id}")
find("a", text: "foo").click
expect(page).to have_css(
".chat-drawer.is-expanded .chat-message-container.highlighted[data-id='#{message.id}']",
)
end
end
context "when sidebar is configured as the navigation menu" do
before { SiteSetting.navigation_menu = "sidebar" }

4
plugins/chat/spec/system/page_objects/chat/chat.rb
View File

@ -3,6 +3,10 @@
module PageObjects
module Pages
class Chat < PageObjects::Pages::Base
def prefers_full_page
page.execute_script("window.localStorage.setItem('discourse_chat_preferred_mode', '\"FULL_PAGE_CHAT\"');")
end
def open_from_header
find(".chat-header-icon").click
end