topics: Change topic links to use new permalinks.

This commit updates the topic links obtained from clicking
the topics in the left sidebar, recent view and inbox, and
those obtained from "Copy link to topic" to use the new
topic permalinks.

Fixes zulip#21505

web/src/hash_util.ts

@@ -7,6 +7,7 @@ import * as people from "./people";
 import * as settings_data from "./settings_data";
 import type {NarrowTerm} from "./state_data";
 import * as stream_data from "./stream_data";
+import {get_latest_message_id_in_topic} from "./stream_topic_history";
 import * as sub_store from "./sub_store";
 import type {StreamSubscription} from "./sub_store";
 import * as user_groups from "./user_groups";
@@ -84,6 +85,17 @@ export function by_stream_topic_url(stream_id: number, topic: string): string {
     return internal_url.by_stream_topic_url(stream_id, topic, sub_store.maybe_get_stream_name);
 }
 
+export function by_stream_topic_permalink(stream_id: number, topic: string): string {
+    const stream_topic_url = internal_url.by_stream_topic_url(
+        stream_id,
+        topic,
+        sub_store.maybe_get_stream_name,
+    );
+    const latest_msg_in_topic = get_latest_message_id_in_topic(stream_id, topic);
+    const topic_permalink = stream_topic_url + `/with/${latest_msg_in_topic}`;
+    return topic_permalink || stream_topic_url;
+}
+
 // Encodes a term list into the
 // corresponding hash: the # component
 // of the narrow URL

web/src/inbox_ui.ts

@@ -438,7 +438,7 @@ function format_topic(
         topic_name: topic,
         unread_count: topic_unread_count,
         conversation_key: get_topic_key(stream_id, topic),
-        topic_url: hash_util.by_stream_topic_url(stream_id, topic),
+        topic_url: hash_util.by_stream_topic_permalink(stream_id, topic),
         is_hidden: filter_should_hide_stream_row({stream_id, topic}),
         is_collapsed: collapsed_containers.has(STREAM_HEADER_PREFIX + stream_id),
         mention_in_unread: unread.topic_has_any_unread_mentions(stream_id, topic),

web/src/popover_menus_data.ts

@@ -20,6 +20,7 @@ import * as settings_data from "./settings_data";
 import * as starred_messages from "./starred_messages";
 import {current_user, realm} from "./state_data";
 import * as stream_data from "./stream_data";
+import {get_latest_message_id_in_topic} from "./stream_topic_history";
 import * as sub_store from "./sub_store";
 import {num_unread_for_topic} from "./unread";
 import {user_settings} from "./user_settings";
@@ -245,6 +246,8 @@ export function get_topic_popover_content_context({
     const visibility_policy = user_topics.get_topic_visibility_policy(sub.stream_id, topic_name);
     const all_visibility_policies = user_topics.all_visibility_policies;
     const is_spectator = page_params.is_spectator;
+    const latest_msg_id = get_latest_message_id_in_topic(stream_id, topic_name);
+    url += `/with/${latest_msg_id}`;
     return {
         stream_name: sub.name,
         stream_id: sub.stream_id,

web/src/recent_view_ui.ts

@@ -606,7 +606,7 @@ function format_conversation(conversation_data: ConversationData): ConversationC
         const is_web_public = stream_info.is_web_public;
         // Topic info
         const topic = last_msg.topic;
-        const topic_url = hash_util.by_stream_topic_url(stream_id, topic);
+        const topic_url = hash_util.by_stream_topic_permalink(stream_id, topic);
 
         // We hide the row according to filters or if it's muted.
         // We only supply the data to the topic rows and let jquery

web/src/stream_topic_history.ts

@@ -368,6 +368,14 @@ export function get_max_message_id(stream_id: number): number {
     return history.get_max_message_id();
 }
 
+export function get_latest_message_id_in_topic(
+    stream_id: number,
+    topic_name: string,
+): number | undefined {
+    const history = stream_dict.get(stream_id);
+    return history?.topics.get(topic_name)?.message_id;
+}
+
 export function reset(): void {
     // This is only used by tests.
     stream_dict.clear();

web/src/ui_init.js

@@ -658,10 +658,15 @@ export function initialize_everything(state_data) {
     topic_list.initialize({
         on_topic_click(stream_id, topic) {
             const sub = sub_store.get(stream_id);
+            const latest_msg_id = stream_topic_history.get_latest_message_id_in_topic(
+                stream_id,
+                topic,
+            );
             message_view.show(
                 [
                     {operator: "channel", operand: sub.stream_id.toString()},
                     {operator: "topic", operand: topic},
+                    {operator: "with", operand: latest_msg_id, negated: false},
                 ],
                 {trigger: "sidebar"},
             );

web/tests/recent_view.test.js

@@ -9,6 +9,7 @@ const {page_params} = require("./lib/zpage_params");
 
 window.scrollTo = noop;
 const test_url = () => "https://www.example.com";
+const test_permalink = () => "https://www.example.com/with/12";
 
 // We assign this in our test() wrapper.
 let messages;
@@ -94,6 +95,7 @@ mock_esm("../src/compose_closed_ui", {
 mock_esm("../src/hash_util", {
     by_stream_url: test_url,
     by_stream_topic_url: test_url,
+    by_stream_topic_permalink: test_permalink,
     by_conversation_and_time_url: test_url,
 });
 mock_esm("../src/message_list_data", {
@@ -407,7 +409,7 @@ function generate_topic_data(topic_info_array) {
             stream_url: "https://www.example.com",
             topic,
             conversation_key: get_topic_key(stream_id, topic),
-            topic_url: "https://www.example.com",
+            topic_url: "https://www.example.com/with/12",
             unread_count,
             mention_in_unread: false,
             visibility_policy,

web/tests/stream_topic_history.test.js

@@ -352,6 +352,14 @@ test("server_history_end_to_end", () => {
     const history = stream_topic_history.get_recent_topic_names(stream_id);
     assert.deepEqual(history, ["topic3", "topic2", "topic1"]);
 
+    for (const topic of topics) {
+        const last_msg_id_in_topic = stream_topic_history.get_latest_message_id_in_topic(
+            stream_id,
+            topic.name,
+        );
+        assert.deepEqual(last_msg_id_in_topic, topic.max_id);
+    }
+
     // Try getting server history for a second time.
 
     /* istanbul ignore next */