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.

plugins/chat/spec/system/navigating_to_message_spec.rb

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

plugins/chat/spec/system/navigation_spec.rb

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

plugins/chat/spec/system/page_objects/chat/chat.rb

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