topics: Change topic links of left sidebar 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 part of zulip#21505.

Author: roanster007

web/shared/src/internal_url.ts

@@ -50,20 +50,36 @@ export function encode_stream_id(
     return encodeHashComponent(slug);
 }
 
+export function maybe_encode_with_operator(
+    channel_topic_url: string,
+    message_id: number | undefined,
+): string {
+    if (message_id === undefined) {
+        return channel_topic_url;
+    }
+
+    return channel_topic_url + `/with/${message_id}`;
+}
+
 export function by_stream_url(
     stream_id: number,
     maybe_get_stream_name: MaybeGetStreamName,
 ): string {
     return `#narrow/channel/${encode_stream_id(stream_id, maybe_get_stream_name)}`;
 }
 
+// The message_id parameter is used to obtain topic permalinks,
+// by using it in a `with` operator.
 export function by_stream_topic_url(
     stream_id: number,
     topic: string,
     maybe_get_stream_name: MaybeGetStreamName,
+    message_id?: number,
 ): string {
-    return `#narrow/channel/${encode_stream_id(
+    const channel_topic_url = `#narrow/channel/${encode_stream_id(
         stream_id,
         maybe_get_stream_name,
     )}/topic/${encodeHashComponent(topic)}`;
+
+    return maybe_encode_with_operator(channel_topic_url, message_id);
 }

web/src/filter.ts

@@ -1046,6 +1046,17 @@ export class Filter {
         return this._terms.length === 1 && this.has_operand("in", "home");
     }
 
+    is_in_channel_topic_narrow(): boolean {
+        if (
+            this.terms().length === 2 &&
+            this.has_operator("channel") &&
+            this.has_operator("topic")
+        ) {
+            return true;
+        }
+        return false;
+    }
+
     is_keyword_search(): boolean {
         return this.has_operator("search");
     }

web/src/hash_util.ts

@@ -7,6 +7,7 @@ import * as people from "./people.ts";
 import * as settings_data from "./settings_data.ts";
 import type {NarrowTerm} from "./state_data.ts";
 import * as stream_data from "./stream_data.ts";
+import {get_latest_message_id_in_topic} from "./stream_topic_history.ts";
 import * as sub_store from "./sub_store.ts";
 import type {StreamSubscription} from "./sub_store.ts";
 import * as user_groups from "./user_groups.ts";
@@ -84,6 +85,21 @@ 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);
 }
 
+// We use the topic permalinks if we have access to the last message id of the
+// topic in the cache, by encoding it at the end of the traditional channel-topic
+// url using a `with` operator.
+// Else, we fallback to using the traditional channel-topic urls.
+export function by_channel_topic_permalink(stream_id: number, topic: string): string {
+    const latest_msg_in_topic = get_latest_message_id_in_topic(stream_id, topic);
+
+    return internal_url.by_stream_topic_url(
+        stream_id,
+        topic,
+        sub_store.maybe_get_stream_name,
+        latest_msg_in_topic,
+    );
+}
+
 // Encodes a term list into the
 // corresponding hash: the # component
 // of the narrow URL

web/src/inbox_ui.ts

@@ -449,7 +449,7 @@ function format_topic(
         is_empty_string_topic: 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_channel_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/recent_view_ui.ts

@@ -659,7 +659,7 @@ function format_conversation(conversation_data: ConversationData): ConversationC
         const topic = last_msg.topic;
         const topic_display_name = util.get_final_topic_display_name(topic);
         const is_empty_string_topic = topic === "";
-        const topic_url = hash_util.by_stream_topic_url(stream_id, topic);
+        const topic_url = hash_util.by_channel_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_list.ts

@@ -910,7 +910,7 @@ export function set_event_handlers({
             const topic_list_info = topic_list_data.get_list_info(stream_id, false, "");
             const topic_item = topic_list_info.items[0];
             if (topic_item !== undefined) {
-                const destination_url = hash_util.by_stream_topic_url(
+                const destination_url = hash_util.by_channel_topic_permalink(
                     stream_id,
                     topic_item.topic_name,
                 );

web/src/stream_topic_history.ts

@@ -372,6 +372,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/topic_popover.ts

@@ -7,13 +7,13 @@ import render_delete_topic_modal from "../templates/confirm_dialog/confirm_delet
 import render_left_sidebar_topic_actions_popover from "../templates/popovers/left_sidebar/left_sidebar_topic_actions_popover.hbs";
 
 import * as confirm_dialog from "./confirm_dialog.ts";
+import * as hash_util from "./hash_util.ts";
 import {$t_html} from "./i18n.ts";
 import * as message_edit from "./message_edit.ts";
 import * as message_summary from "./message_summary.ts";
 import * as popover_menus from "./popover_menus.ts";
 import * as popover_menus_data from "./popover_menus_data.ts";
 import * as starred_messages_ui from "./starred_messages_ui.ts";
-import {realm} from "./state_data.ts";
 import * as stream_popover from "./stream_popover.ts";
 import * as ui_util from "./ui_util.ts";
 import * as unread_ops from "./unread_ops.ts";
@@ -27,20 +27,18 @@ function get_conversation(instance: tippy.Instance): {
 } {
     let stream_id;
     let topic_name;
-    let url;
 
     if (!instance.reference.classList.contains("topic-sidebar-menu-icon")) {
         const $elt = $(instance.reference);
         stream_id = Number.parseInt($elt.attr("data-stream-id")!, 10);
         topic_name = $elt.attr("data-topic-name")!;
-        url = new URL($elt.attr("data-topic-url")!, realm.realm_url).href;
     } else {
         const $elt = $(instance.reference).closest(".topic-sidebar-menu-icon").expectOne();
         const $stream_li = $elt.closest(".narrow-filter").expectOne();
         topic_name = $elt.closest("li").expectOne().attr("data-topic-name")!;
-        url = util.the($elt.closest("li").find<HTMLAnchorElement>("a.sidebar-topic-name")).href;
         stream_id = stream_popover.elem_to_stream_id($stream_li);
     }
+    const url = hash_util.by_channel_topic_permalink(stream_id, topic_name);
 
     return {stream_id, topic_name, url};
 }

web/src/ui_init.js

@@ -667,10 +667,18 @@ 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,
+            );
+
+            assert(latest_msg_id !== undefined);
+
             message_view.show(
                 [
                     {operator: "channel", operand: sub.stream_id.toString()},
                     {operator: "topic", operand: topic},
+                    {operator: "with", operand: latest_msg_id},
                 ],
                 {trigger: "sidebar"},
             );

web/tests/filter.test.cjs

@@ -338,6 +338,7 @@ test("basics", () => {
     assert.ok(!filter.is_personal_filter());
     assert.ok(filter.is_conversation_view());
     assert.ok(!filter.is_conversation_view_with_near());
+    assert.ok(!filter.is_in_channel_topic_narrow());
 
     terms = [
         {operator: "dm", operand: "[email protected]"},
@@ -364,6 +365,7 @@ test("basics", () => {
     assert.ok(!filter.is_personal_filter());
     assert.ok(filter.is_conversation_view());
     assert.ok(!filter.is_conversation_view_with_near());
+    assert.ok(!filter.is_in_channel_topic_narrow());
 
     terms = [
         {operator: "dm", operand: "[email protected],[email protected]"},
@@ -450,6 +452,7 @@ test("basics", () => {
     assert.ok(!filter.is_personal_filter());
     assert.ok(filter.is_conversation_view());
     assert.ok(!filter.is_conversation_view_with_near());
+    assert.ok(filter.is_in_channel_topic_narrow());
 
     terms = [
         {operator: "channel", operand: foo_stream_id.toString()},

web/tests/internal_url.test.cjs

@@ -47,6 +47,13 @@ run_test("test by_stream_url", () => {
 
 run_test("test by_stream_topic_url", () => {
     const maybe_get_stream_name = () => "a test stream";
-    const result = internal_url.by_stream_topic_url(123, "test topic", maybe_get_stream_name);
+    // Test stream_topic_url is a traditional topic link when the
+    // message_id to be encoded is undefined.
+    let result = internal_url.by_stream_topic_url(123, "test topic", maybe_get_stream_name);
     assert.equal(result, "#narrow/channel/123-a-test-stream/topic/test.20topic");
+
+    // Test stream_topic_url is a topic permaling when the
+    // message_id to be encoded is not undefined.
+    result = internal_url.by_stream_topic_url(123, "test topic", maybe_get_stream_name, 12);
+    assert.equal(result, "#narrow/channel/123-a-test-stream/topic/test.20topic/with/12");
 });

web/tests/recent_view.test.cjs

@@ -14,6 +14,7 @@ initialize_user_settings({user_settings});
 
 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;
@@ -99,6 +100,7 @@ mock_esm("../src/compose_closed_ui", {
 mock_esm("../src/hash_util", {
     by_stream_url: test_url,
     by_stream_topic_url: test_url,
+    by_channel_topic_permalink: test_permalink,
     by_conversation_and_time_url: test_url,
 });
 mock_esm("../src/message_list_data", {
@@ -425,7 +427,7 @@ function generate_topic_data(topic_info_array) {
             topic_display_name: util.get_final_topic_display_name(topic),
             is_empty_string_topic: 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.cjs

@@ -358,6 +358,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 */