stream_pill: Use stream id instead of stream name.

web/src/add_subscribers_pill.ts

@@ -85,11 +85,7 @@ function generate_pill_html(item: CombinedPill): string {
         return user_pill.generate_pill_html(item);
     }
     assert(item.type === "stream");
-    return render_input_pill({
-        ...item,
-        has_stream: true,
-        display_value: get_display_value_from_item(item),
-    });
+    return stream_pill.generate_pill_html(item);
 }
 
 export function create({

web/src/invite_stream_picker_pill.ts

@@ -1,5 +1,3 @@
-import render_input_pill from "../templates/input_pill.hbs";
-
 import * as input_pill from "./input_pill";
 import {set_up_stream} from "./pill_typeahead";
 import * as stream_data from "./stream_data";
@@ -52,12 +50,7 @@ export function create($stream_pill_container: JQuery): stream_pill.StreamPillWi
         $container: $stream_pill_container,
         create_item_from_text: create_item_from_stream_name,
         get_text_from_item: stream_pill.get_stream_name_from_item,
-        generate_pill_html: (item) =>
-            render_input_pill({
-                ...item,
-                has_stream: true,
-                display_value: stream_pill.get_display_value_from_item(item),
-            }),
+        generate_pill_html: stream_pill.generate_pill_html,
         get_display_value_from_item: stream_pill.get_display_value_from_item,
     });
     add_default_stream_pills(pill_widget);

web/src/stream_pill.ts

@@ -1,5 +1,7 @@
 import assert from "minimalistic-assert";
 
+import render_input_pill from "../templates/input_pill.hbs";
+
 import {$t} from "./i18n";
 import type {InputPillContainer} from "./input_pill";
 import * as peer_data from "./peer_data";
@@ -9,7 +11,7 @@ import type {CombinedPill, CombinedPillContainer} from "./typeahead_helper";
 
 export type StreamPill = {
     type: "stream";
-    stream: StreamSubscription;
+    stream_id: number;
     show_subscriber_count: boolean;
 };
 
@@ -50,30 +52,28 @@ export function create_item_from_stream_name(
         return undefined;
     }
 
-    if (
-        current_items.some(
-            (item) => item.type === "stream" && item.stream.stream_id === sub.stream_id,
-        )
-    ) {
+    if (current_items.some((item) => item.type === "stream" && item.stream_id === sub.stream_id)) {
         return undefined;
     }
 
     return {
         type: "stream",
         show_subscriber_count,
-        stream: sub,
+        stream_id: sub.stream_id,
     };
 }
 
 export function get_stream_name_from_item(item: StreamPill): string {
-    return item.stream.name;
+    const stream = stream_data.get_sub_by_id(item.stream_id);
+    assert(stream !== undefined);
+    return stream.name;
 }
 
 export function get_user_ids(pill_widget: StreamPillWidget | CombinedPillContainer): number[] {
     let user_ids = pill_widget
         .items()
         .flatMap((item) =>
-            item.type === "stream" ? peer_data.get_subscribers(item.stream.stream_id) : [],
+            item.type === "stream" ? peer_data.get_subscribers(item.stream_id) : [],
         );
     user_ids = [...new Set(user_ids)];
     user_ids.sort((a, b) => a - b);
@@ -81,7 +81,7 @@ export function get_user_ids(pill_widget: StreamPillWidget | CombinedPillContain
 }
 
 export function get_display_value_from_item(item: StreamPill): string {
-    const stream = stream_data.get_sub_by_id(item.stream.stream_id);
+    const stream = stream_data.get_sub_by_id(item.stream_id);
     assert(stream !== undefined);
     if (item.show_subscriber_count) {
         return format_stream_name_and_subscriber_count(stream);
@@ -89,6 +89,16 @@ export function get_display_value_from_item(item: StreamPill): string {
     return stream.name;
 }
 
+export function generate_pill_html(item: StreamPill): string {
+    const stream = stream_data.get_sub_by_id(item.stream_id);
+    assert(stream !== undefined);
+    return render_input_pill({
+        has_stream: true,
+        stream,
+        display_value: get_display_value_from_item(item),
+    });
+}
+
 export function append_stream(
     stream: StreamSubscription,
     pill_widget: StreamPillWidget | CombinedPillContainer,
@@ -97,14 +107,14 @@ export function append_stream(
     pill_widget.appendValidatedData({
         type: "stream",
         show_subscriber_count,
-        stream,
+        stream_id: stream.stream_id,
     });
     pill_widget.clear_text();
 }
 
 export function get_stream_ids(pill_widget: StreamPillWidget | CombinedPillContainer): number[] {
     const items = pill_widget.items();
-    return items.flatMap((item) => (item.type === "stream" ? item.stream.stream_id : []));
+    return items.flatMap((item) => (item.type === "stream" ? item.stream_id : []));
 }
 
 export function filter_taken_streams(

web/tests/stream_pill.test.js

@@ -33,12 +33,12 @@ peer_data.set_subscribers(sweden.stream_id, [1, 2, 3, 4, 5]);
 
 const denmark_pill = {
     type: "stream",
-    stream: denmark,
+    stream_id: denmark.stream_id,
     show_subscriber_count: true,
 };
 const sweden_pill = {
     type: "stream",
-    stream: sweden,
+    stream_id: sweden.stream_id,
     show_subscriber_count: true,
 };
 
@@ -114,3 +114,18 @@ run_test("get_stream_ids", () => {
     const stream_ids = stream_pill.get_stream_ids(widget);
     assert.deepEqual(stream_ids, [101, 102]);
 });
+
+run_test("generate_pill_html", () => {
+    assert.deepEqual(
+        stream_pill.generate_pill_html(denmark_pill),
+        "<div class='pill ' tabindex=0>\n" +
+            '    <span class="pill-label">\n' +
+            '        <span class="pill-value">\n' +
+            '<i class="zulip-icon zulip-icon-hashtag stream-privacy-type-icon" aria-hidden="true"></i>            translated: Denmark: 3 users\n' +
+            "        </span></span>\n" +
+            '    <div class="exit">\n' +
+            '        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n' +
+            "    </div>\n" +
+            "</div>\n",
+    );
+});