compose: Use stream id instead of stream name for composebox opts.

2025-11-15 19:31:58 +00:00 · 2023-06-26 16:40:25 -07:00
parent 41b900c2c0
commit c3fe96af52
30 changed files with 196 additions and 168 deletions
--- a/web/src/compose_actions.js
+++ b/web/src/compose_actions.js
@@ -119,7 +119,10 @@ export function complete_starting_tasks(msg_type, opts) {

    maybe_scroll_up_selected_message();
    compose_fade.start_compose(msg_type);
-    stream_bar.decorate(opts.stream, $("#stream_message_recipient_topic .message_header_stream"));
+    stream_bar.decorate(
+        opts.stream_id,
+        $("#stream_message_recipient_topic .message_header_stream"),
+    );
    $(document).trigger(new $.Event("compose_started.zulip", opts));
    compose_recipient.update_placeholder_text();
    compose_recipient.update_narrow_to_recipient_visibility();
@@ -153,7 +156,7 @@ export function maybe_scroll_up_selected_message() {
 function fill_in_opts_from_current_narrowed_view(msg_type, opts) {
    return {
        message_type: msg_type,
-        stream: "",
+        stream_id: "",
        topic: "",
        private_message_recipient: "",
        trigger: "unknown",
@@ -171,7 +174,7 @@ function same_recipient_as_before(msg_type, opts) {
    return (
        compose_state.get_message_type() === msg_type &&
        ((msg_type === "stream" &&
-            opts.stream === compose_state.stream_name() &&
+            opts.stream_id === compose_state.stream_id() &&
            opts.topic === compose_state.topic()) ||
            (msg_type === "private" &&
                opts.private_message_recipient === compose_state.private_message_recipient()))
@@ -216,7 +219,7 @@ export function start(msg_type, opts) {
        (opts.trigger === "new topic button" ||
            (opts.trigger === "compose_hotkey" && msg_type === "stream"))
    ) {
-        opts.stream = subbed_streams[0].name;
+        opts.stream_id = subbed_streams[0].stream_id;
    }

    if (compose_state.composing() && !same_recipient_as_before(msg_type, opts)) {
@@ -227,12 +230,12 @@ export function start(msg_type, opts) {
    const $stream_header_colorblock = $(
        "#compose_select_recipient_widget_wrapper .stream_header_colorblock",
    );
-    stream_bar.decorate(opts.stream, $stream_header_colorblock);
+    stream_bar.decorate(opts.stream_id, $stream_header_colorblock);

    if (msg_type === "private") {
        compose_state.set_compose_recipient_id(compose_recipient.DIRECT_MESSAGE_ID);
-    } else if (opts.stream) {
-        compose_state.set_stream_name(opts.stream);
+    } else if (opts.stream_id) {
+        compose_state.set_stream_id(opts.stream_id);
    } else {
        // Open stream selection dropdown if no stream is selected.
        compose_recipient.open_compose_recipient_dropdown();
@@ -361,11 +364,11 @@ export function respond_to_message(opts) {
        msg_type = message.type;
    }

-    let stream = "";
+    let stream_id = "";
    let topic = "";
    let pm_recipient = "";
    if (msg_type === "stream") {
-        stream = message.stream;
+        stream_id = message.stream_id;
        topic = message.topic;
    } else {
        pm_recipient = message.reply_to;
@@ -380,7 +383,7 @@ export function respond_to_message(opts) {
    }

    start(msg_type, {
-        stream,
+        stream_id,
        topic,
        private_message_recipient: pm_recipient,
        trigger: opts.trigger,
--- a/web/src/compose_recipient.js
+++ b/web/src/compose_recipient.js
@@ -153,7 +153,7 @@ function switch_message_type(message_type) {

    const opts = {
        message_type,
-        stream: compose_state.stream_name(),
+        stream_id: compose_state.stream_id(),
        topic: compose_state.topic(),
        private_message_recipient: compose_state.private_message_recipient(),
    };
@@ -162,8 +162,8 @@ function switch_message_type(message_type) {
    compose_ui.set_focus(message_type, opts);
 }

-function update_recipient_label(stream_name) {
-    const stream = stream_data.get_sub_by_name(stream_name);
+function update_recipient_label(stream_id) {
+    const stream = stream_data.get_sub_by_id(stream_id);
    if (stream === undefined) {
        $("#compose_select_recipient_widget .dropdown_widget_value").text(
            $t({defaultMessage: "Select a stream"}),
@@ -182,7 +182,7 @@ export function update_compose_for_message_type(message_type, opts) {
        $("#stream_toggle").addClass("active");
        $("#private_message_toggle").removeClass("active");
        $("#compose-recipient").removeClass("compose-recipient-direct-selected");
-        update_recipient_label(opts.stream);
+        update_recipient_label(opts.stream_id);
    } else {
        $("#compose-direct-recipient").show();
        $("#stream_message_recipient_topic").hide();
@@ -220,9 +220,9 @@ export function on_compose_select_recipient_update() {
        const $stream_header_colorblock = $(
            "#compose_select_recipient_widget_wrapper .stream_header_colorblock",
        );
-        const stream_name = compose_state.stream_name();
-        update_recipient_label(stream_name);
-        stream_bar.decorate(stream_name, $stream_header_colorblock);
+        const stream_id = compose_state.stream_id();
+        update_recipient_label(stream_id);
+        stream_bar.decorate(stream_id, $stream_header_colorblock);
    }

    check_posting_policy_for_compose_box();
@@ -351,7 +351,7 @@ export function update_placeholder_text() {

    const opts = {
        message_type: compose_state.get_message_type(),
-        stream: compose_state.stream_name(),
+        stream_id: compose_state.stream_id(),
        topic: compose_state.topic(),
        // TODO: to remove a circular import, direct message recipient needs
        // to be calculated in compose_state instead of compose_pm_pill.
--- a/web/src/compose_state.js
+++ b/web/src/compose_state.js
@@ -1,9 +1,7 @@
 import $ from "jquery";

-import * as blueslip from "./blueslip";
 import * as compose_pm_pill from "./compose_pm_pill";
 import * as compose_recipient from "./compose_recipient";
-import * as stream_data from "./stream_data";
 import * as sub_store from "./sub_store";

 let message_type = false; // 'stream', 'private', or false-y
@@ -88,20 +86,7 @@ export function stream_name() {
    return "";
 }

-export function set_stream_name(stream_name) {
-    if (!stream_name) {
-        compose_recipient.set_selected_recipient_id("");
-        return;
-    }
-
-    // If we fail to select a stream that the caller expects
-    // us to do successfully, we should throw an error.
-    const stream_id = stream_data.get_stream_id(stream_name);
-    if (stream_id === undefined) {
-        blueslip.error("Unable to select stream: " + stream_name);
-        compose_recipient.set_selected_recipient_id("");
-        return;
-    }
+export function set_stream_id(stream_id) {
    compose_recipient.set_selected_recipient_id(stream_id);
 }

--- a/web/src/compose_ui.js
+++ b/web/src/compose_ui.js
@@ -11,6 +11,7 @@ import * as loading from "./loading";
 import * as people from "./people";
 import * as popover_menus from "./popover_menus";
 import * as rtl from "./rtl";
+import * as stream_data from "./stream_data";
 import * as user_status from "./user_status";

 export let compose_spinner_visible = false;
@@ -35,10 +36,10 @@ export function autosize_textarea($textarea) {

 function get_focus_area(msg_type, opts) {
    // Set focus to "Topic" when narrowed to a stream+topic and "New topic" button clicked.
-    if (msg_type === "stream" && opts.stream && !opts.topic) {
+    if (msg_type === "stream" && opts.stream_id && !opts.topic) {
        return "#stream_message_recipient_topic";
    } else if (
-        (msg_type === "stream" && opts.stream) ||
+        (msg_type === "stream" && opts.stream_id) ||
        (msg_type === "private" && opts.private_message_recipient)
    ) {
        if (opts.trigger === "new topic button") {
@@ -224,13 +225,16 @@ export function compute_placeholder_text(opts) {
    // because the caller is expected to insert this into the
    // placeholder field in a way that does HTML escaping.
    if (opts.message_type === "stream") {
-        if (opts.topic) {
+        const stream = stream_data.get_sub_by_id(opts.stream_id);
+        const stream_name = stream ? stream.name : "";
+
+        if (stream_name && opts.topic) {
            return $t(
                {defaultMessage: "Message #{stream_name} > {topic_name}"},
-                {stream_name: opts.stream, topic_name: opts.topic},
+                {stream_name, topic_name: opts.topic},
            );
-        } else if (opts.stream) {
-            return $t({defaultMessage: "Message #{stream_name}"}, {stream_name: opts.stream});
+        } else if (stream_name) {
+            return $t({defaultMessage: "Message #{stream_name}"}, {stream_name});
        }
    }

--- a/web/src/composebox_typeahead.js
+++ b/web/src/composebox_typeahead.js
@@ -436,7 +436,7 @@ export function get_pm_people(query) {
    const opts = {
        want_broadcast: false,
        filter_pills: true,
-        stream: compose_state.stream_name(),
+        stream_id: compose_state.stream_id(),
        topic: compose_state.topic(),
    };
    return get_person_suggestions(query, opts);
@@ -509,7 +509,7 @@ export function get_person_suggestions(query, opts) {
    return typeahead_helper.sort_recipients({
        users: filtered_persons,
        query,
-        current_stream: opts.stream,
+        current_stream_id: opts.stream_id,
        current_topic: opts.topic,
        groups: filtered_groups,
        max_num_items,
@@ -520,14 +520,14 @@ export function get_stream_topic_data(hacky_this) {
    const opts = {};
    const $message_row = hacky_this.$element.closest(".message_row");
    if ($message_row.length === 1) {
-        // we are editing a message so we try to use it's keys.
+        // we are editing a message so we try to use its keys.
        const msg = message_store.get(rows.id($message_row));
        if (msg.type === "stream") {
-            opts.stream = msg.stream;
+            opts.stream_id = msg.stream_id;
            opts.topic = msg.topic;
        }
    } else {
-        opts.stream = compose_state.stream_name();
+        opts.stream_id = compose_state.stream_id();
        opts.topic = compose_state.topic();
    }
    return opts;
--- a/web/src/drafts.js
+++ b/web/src/drafts.js
@@ -360,9 +360,14 @@ export function format_draft(draft) {
                    draft_model.editDraft(id, draft);
                }
            }
+        } else {
+            const sub = stream_data.get_sub(stream_name);
+            if (sub !== undefined) {
+                draft.stream_id = sub.stream_id;
+            }
        }
        const draft_topic = draft.topic || compose.empty_topic_placeholder();
-        const draft_stream_color = stream_data.get_color(stream_name);
+        const draft_stream_color = stream_data.get_color(draft.stream_id);

        formatted = {
            draft_id: draft.id,
--- a/web/src/message_list_view.js
+++ b/web/src/message_list_view.js
@@ -187,7 +187,7 @@ function populate_group_from_message_container(group, message_container) {
    group.is_private = message_container.msg.is_private;

    if (group.is_stream) {
-        const color = stream_data.get_color(message_container.msg.stream);
+        const color = stream_data.get_color(message_container.msg.stream_id);
        group.recipient_bar_color = stream_color.get_recipient_bar_color(color);
        group.stream_privacy_icon_color = stream_color.get_stream_privacy_icon_color(color);
        group.invite_only = stream_data.is_invite_only_by_stream_name(message_container.msg.stream);
@@ -409,7 +409,7 @@ export class MessageListView {
        message_container.small_avatar_url = people.small_avatar_url(message_container.msg);
        if (message_container.msg.stream) {
            message_container.background_color = stream_data.get_color(
-                message_container.msg.stream,
+                message_container.msg.stream_id,
            );
        }

--- a/web/src/narrow_state.js
+++ b/web/src/narrow_state.js
@@ -93,7 +93,7 @@ export function set_compose_defaults() {
        // So we look up the resolved stream and return that if appropriate.
        const sub = stream_sub();
        if (sub !== undefined) {
-            opts.stream = sub.name;
+            opts.stream_id = sub.stream_id;
        }
    }

--- a/web/src/pill_typeahead.js
+++ b/web/src/pill_typeahead.js
@@ -112,7 +112,7 @@ export function set_up($input, pills, opts) {
            return typeahead_helper.sort_recipients({
                users,
                query,
-                current_stream: "",
+                current_stream_id: "",
                current_topic: undefined,
                groups,
                max_num_items: undefined,
--- a/web/src/scheduled_messages_overlay_ui.js
+++ b/web/src/scheduled_messages_overlay_ui.js
@@ -70,7 +70,7 @@ function format(scheduled_messages) {
            msg_render_context.stream_name = sub_store.maybe_get_stream_name(
                msg_render_context.stream_id,
            );
-            const color = stream_data.get_color(msg_render_context.stream_name);
+            const color = stream_data.get_color(msg_render_context.stream_id);
            msg_render_context.recipient_bar_color = stream_color.get_recipient_bar_color(color);
            msg_render_context.stream_privacy_icon_color =
                stream_color.get_stream_privacy_icon_color(color);
--- a/web/src/stream_bar.js
+++ b/web/src/stream_bar.js
@@ -4,10 +4,10 @@ import * as stream_data from "./stream_data";
 // color look like the stream being used.
 // (In particular, if there's a color associated with it,
 //  have that color be reflected here too.)
-export function decorate(stream_name, $element) {
-    if (stream_name === undefined) {
+export function decorate(stream_id, $element) {
+    if (stream_id === undefined) {
        return;
    }
-    const color = stream_data.get_color(stream_name);
+    const color = stream_data.get_color(stream_id);
    $element.css("background-color", color);
 }
--- a/web/src/stream_color.js
+++ b/web/src/stream_color.js
@@ -11,18 +11,16 @@ import * as row from "./rows";
 import * as settings_data from "./settings_data";
 import * as stream_data from "./stream_data";
 import * as stream_settings_ui from "./stream_settings_ui";
-import * as sub_store from "./sub_store";

 extend([lchPlugin, mixPlugin]);

 export function update_stream_recipient_color($stream_header) {
    if ($stream_header.length) {
        const stream_id = Number.parseInt($($stream_header).attr("data-stream-id"), 10);
-        const stream_name = sub_store.maybe_get_stream_name(stream_id);
-        if (!stream_name) {
+        if (!stream_id) {
            return;
        }
-        const stream_color = stream_data.get_color(stream_name);
+        const stream_color = stream_data.get_color(stream_id);
        const recipient_bar_color = get_recipient_bar_color(stream_color);
        $stream_header
            .find(".message-header-contents")
--- a/web/src/stream_data.js
+++ b/web/src/stream_data.js
@@ -453,8 +453,8 @@ export function canonicalized_name(stream_name) {
    return stream_name.toString().toLowerCase();
 }

-export function get_color(stream_name) {
-    const sub = get_sub(stream_name);
+export function get_color(stream_id) {
+    const sub = get_sub_by_id(stream_id);
    if (sub === undefined) {
        return DEFAULT_COLOR;
    }
--- a/web/src/stream_edit.js
+++ b/web/src/stream_edit.js
@@ -135,7 +135,7 @@ function show_subscription_settings(sub) {
    const $edit_container = stream_settings_containers.get_edit_container(sub);

    const $colorpicker = $edit_container.find(".colorpicker");
-    const color = stream_data.get_color(sub.name);
+    const color = stream_data.get_color(sub.stream_id);
    stream_color.set_colorpicker_color($colorpicker, color);
    stream_ui_updates.update_add_subscriptions_elements(sub);

--- a/web/src/stream_popover.js
+++ b/web/src/stream_popover.js
@@ -334,11 +334,9 @@ export function build_move_topic_to_stream_popover(
    }

    function render_selected_stream() {
-        const stream_name = sub_store.maybe_get_stream_name(
-            Number.parseInt(stream_widget_value, 10),
-        );
-        stream_bar.decorate(stream_name, $stream_header_colorblock);
-        const stream = stream_data.get_sub_by_name(stream_name);
+        const stream_id = Number.parseInt(stream_widget_value, 10);
+        stream_bar.decorate(stream_id, $stream_header_colorblock);
+        const stream = stream_data.get_sub_by_id(stream_id);
        if (stream === undefined) {
            $("#move_topic_to_stream_widget .dropdown_widget_value").text(
                $t({defaultMessage: "Select a stream"}),
--- a/web/src/stream_settings_ui.js
+++ b/web/src/stream_settings_ui.js
@@ -13,6 +13,7 @@ import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
 import * as channel from "./channel";
 import * as components from "./components";
+import * as compose_recipient from "./compose_recipient";
 import * as compose_state from "./compose_state";
 import * as confirm_dialog from "./confirm_dialog";
 import * as dropdown_widget from "./dropdown_widget";
@@ -167,8 +168,6 @@ export function is_subscribed_stream_tab_active() {
 }

 export function update_stream_name(sub, new_name) {
-    const old_name = sub.name;
-
    // Rename the stream internally.
    stream_data.rename_sub(sub, new_name);
    const stream_id = sub.stream_id;
@@ -186,9 +185,9 @@ export function update_stream_name(sub, new_name) {
    // Update the message feed.
    message_live_update.update_stream_name(stream_id, new_name);

-    // Update compose_state if needed
-    if (compose_state.stream_name() === old_name) {
-        compose_state.set_stream_name(new_name);
+    // Update compose UI if needed
+    if (compose_state.stream_id() === stream_id) {
+        compose_recipient.on_compose_select_recipient_update();
    }

    // Update navbar if needed
--- a/web/src/typeahead_helper.js
+++ b/web/src/typeahead_helper.js
@@ -233,26 +233,29 @@ export function compare_people_for_relevance(
    return tertiary_compare(person_a, person_b);
 }

-export function sort_people_for_relevance(objs, current_stream_name, current_topic) {
+export function sort_people_for_relevance(objs, current_stream_id, current_topic) {
    // If sorting for recipientbox typeahead and not viewing a stream / topic, then current_stream = ""
-    let current_stream = false;
-    if (current_stream_name) {
-        current_stream = stream_data.get_sub(current_stream_name);
+    let current_stream = null;
+    if (current_stream_id) {
+        current_stream = stream_data.get_sub_by_id(current_stream_id);
    }
    if (!current_stream) {
        objs.sort((person_a, person_b) =>
            compare_people_for_relevance(person_a, person_b, compare_by_pms),
        );
    } else {
-        const stream_id = current_stream.stream_id;
-
        objs.sort((person_a, person_b) =>
            compare_people_for_relevance(
                person_a,
                person_b,
                (user_a, user_b) =>
-                    recent_senders.compare_by_recency(user_a, user_b, stream_id, current_topic),
-                current_stream.stream_id,
+                    recent_senders.compare_by_recency(
+                        user_a,
+                        user_b,
+                        current_stream_id,
+                        current_topic,
+                    ),
+                current_stream_id,
            ),
        );
    }
@@ -348,13 +351,13 @@ export function sort_languages(matches, query) {
 export function sort_recipients({
    users,
    query,
-    current_stream,
+    current_stream_id,
    current_topic,
    groups = [],
    max_num_items = 20,
 }) {
    function sort_relevance(items) {
-        return sort_people_for_relevance(items, current_stream, current_topic);
+        return sort_people_for_relevance(items, current_stream_id, current_topic);
    }

    const users_name_results = typeahead.triage(query, users, (p) => p.full_name);
--- a/web/tests/compose.test.js
+++ b/web/tests/compose.test.js
@@ -9,7 +9,6 @@ const {mock_banners} = require("./lib/compose_banner");
 const {$t} = require("./lib/i18n");
 const {mock_esm, set_global, zrequire} = require("./lib/namespace");
 const {run_test} = require("./lib/test");
-const blueslip = require("./lib/zblueslip");
 const $ = require("./lib/zjquery");
 const {page_params, user_settings} = require("./lib/zpage_params");

@@ -318,7 +317,7 @@ test_ui("enter_with_preview_open", ({override, override_rewire}) => {

    // Test sending a message with content.
    compose_state.set_message_type("stream");
-    compose_state.set_stream_name("social");
+    compose_state.set_stream_id(social.stream_id);

    $("#compose-textarea").val("message me");
    $("#compose-textarea").hide();
@@ -727,7 +726,7 @@ test_ui("create_message_object", ({override, override_rewire}) => {
    mock_banners();
    override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);

-    compose_state.set_stream_name("social");
+    compose_state.set_stream_id(social.stream_id);
    $("#stream_message_recipient_topic").val("lunch");
    $("#compose-textarea").val("burrito");

--- a/web/tests/compose_actions.test.js
+++ b/web/tests/compose_actions.test.js
@@ -127,7 +127,7 @@ test("start", ({override, override_rewire, mock_template}) => {

    // Start stream message
    compose_defaults = {
-        stream: "",
+        stream_id: "",
        topic: "topic1",
    };

@@ -177,7 +177,7 @@ test("start", ({override, override_rewire, mock_template}) => {
    };
    stream_data.add_sub(social);

-    compose_state.set_stream_name("");
+    compose_state.set_stream_id("");
    // More than 1 subscription, do not autofill
    opts = {};
    start("stream", opts);
@@ -270,12 +270,6 @@ test("respond_to_message", ({override, override_rewire, mock_template}) => {
    assert.equal(compose_state.private_message_recipient(), "alice@example.com");

    // Test stream
-    msg = {
-        type: "stream",
-        stream: "Denmark",
-        topic: "python",
-    };
-
    const denmark = {
        subscribed: true,
        color: "blue",
@@ -283,6 +277,14 @@ test("respond_to_message", ({override, override_rewire, mock_template}) => {
        stream_id: 1,
    };
    stream_data.add_sub(denmark);
+
+    msg = {
+        type: "stream",
+        stream: denmark.name,
+        stream_id: denmark.stream_id,
+        topic: "python",
+    };
+
    opts = {};

    respond_to_message(opts);
@@ -310,7 +312,8 @@ test("reply_with_mention", ({override, override_rewire, mock_template}) => {

    const msg = {
        type: "stream",
-        stream: "Denmark",
+        stream: denmark.name,
+        stream_id: denmark.stream_id,
        topic: "python",
        sender_full_name: "Bob Roberts",
        sender_id: 40,
--- a/web/tests/compose_fade.test.js
+++ b/web/tests/compose_fade.test.js
@@ -71,7 +71,7 @@ run_test("set_focused_recipient", ({override_rewire}) => {
    assert.equal(compose_fade_helper.would_receive_message(bob.user_id), true);

    stream_data.add_sub(sub);
-    compose_state.set_stream_name("social");
+    compose_state.set_stream_id(sub.stream_id);
    peer_data.set_subscribers(sub.stream_id, [me.user_id, alice.user_id]);
    compose_fade.set_focused_recipient("stream");

--- a/web/tests/compose_state.test.js
+++ b/web/tests/compose_state.test.js
@@ -41,7 +41,7 @@ run_test("has_full_recipient", ({override, override_rewire}) => {
    override(compose_pm_pill, "get_emails", () => emails);

    compose_state.set_message_type("stream");
-    compose_state.set_stream_name("");
+    compose_state.set_stream_id("");
    compose_state.topic("");
    assert.equal(compose_state.has_full_recipient(), false);

@@ -49,7 +49,7 @@ run_test("has_full_recipient", ({override, override_rewire}) => {
    assert.equal(compose_state.has_full_recipient(), false);

    stream_data.add_sub({name: "bar", stream_id: 99});
-    compose_state.set_stream_name("bar");
+    compose_state.set_stream_id(99);
    assert.equal(compose_state.has_full_recipient(), true);

    compose_state.set_message_type("private");
--- a/web/tests/compose_ui.test.js
+++ b/web/tests/compose_ui.test.js
@@ -20,6 +20,7 @@ mock_esm("../src/message_lists", {
 });

 const compose_ui = zrequire("compose_ui");
+const stream_data = zrequire("stream_data");
 const people = zrequire("people");
 const user_status = zrequire("user_status");
 const hash_util = mock_esm("../src/hash_util");
@@ -184,7 +185,7 @@ run_test("replace_syntax", ({override}) => {
 run_test("compute_placeholder_text", () => {
    let opts = {
        message_type: "stream",
-        stream: "",
+        stream_id: "",
        topic: "",
        private_message_recipient: "",
    };
@@ -195,7 +196,13 @@ run_test("compute_placeholder_text", () => {
        $t({defaultMessage: "Compose your message here"}),
    );

-    opts.stream = "all";
+    const stream_all = {
+        subscribed: true,
+        name: "all",
+        stream_id: 2,
+    };
+    stream_data.add_sub(stream_all);
+    opts.stream_id = stream_all.stream_id;
    assert.equal(compose_ui.compute_placeholder_text(opts), $t({defaultMessage: "Message #all"}));

    opts.topic = "Test";
@@ -207,7 +214,7 @@ run_test("compute_placeholder_text", () => {
    // direct message narrows
    opts = {
        message_type: "private",
-        stream: "",
+        stream_id: "",
        topic: "",
        private_message_recipient: "",
    };
@@ -748,10 +755,20 @@ run_test("get_focus_area", () => {
        "#compose-textarea",
    );
    assert.equal(get_focus_area("stream", {}), "#compose_select_recipient_widget_wrapper");
-    assert.equal(get_focus_area("stream", {stream: "fun"}), "#stream_message_recipient_topic");
-    assert.equal(get_focus_area("stream", {stream: "fun", topic: "more"}), "#compose-textarea");
    assert.equal(
-        get_focus_area("stream", {stream: "fun", topic: "more", trigger: "new topic button"}),
+        get_focus_area("stream", {stream_name: "fun", stream_id: 4}),
+        "#stream_message_recipient_topic",
+    );
+    assert.equal(
+        get_focus_area("stream", {stream_name: "fun", stream_id: 4, topic: "more"}),
+        "#compose-textarea",
+    );
+    assert.equal(
+        get_focus_area("stream", {
+            stream_id: 4,
+            topic: "more",
+            trigger: "new topic button",
+        }),
        "#stream_message_recipient_topic",
    );
 });
--- a/web/tests/compose_validate.test.js
+++ b/web/tests/compose_validate.test.js
@@ -42,6 +42,13 @@ const bob = {
    full_name: "Bob",
 };

+const social_sub = {
+    stream_id: 101,
+    name: "social",
+    subscribed: true,
+};
+stream_data.add_sub(social_sub);
+
 people.add_active_user(me);
 people.initialize_current_user(me.user_id);

@@ -77,16 +84,17 @@ function stub_message_row($textarea) {

 test_ui("validate_stream_message_address_info", ({mock_template}) => {
    mock_banners();
-    const sub = {
+
+    const party_sub = {
        stream_id: 101,
-        name: "social",
+        name: "party",
        subscribed: true,
    };
-    stream_data.add_sub(sub);
+    stream_data.add_sub(party_sub);
    assert.ok(compose_validate.validate_stream_message_address_info("social"));

-    sub.subscribed = false;
-    stream_data.add_sub(sub);
+    party_sub.subscribed = false;
+    stream_data.add_sub(party_sub);
    $("#compose_banners .user_not_subscribed").length = 0;
    let user_not_subscribed_rendered = false;
    mock_template("compose_banner/compose_banner.hbs", true, (data, html) => {
@@ -105,9 +113,9 @@ test_ui("validate_stream_message_address_info", ({mock_template}) => {
    };
    assert.ok(compose_validate.validate_stream_message_address_info("social"));

-    sub.name = "Frontend";
-    sub.stream_id = 102;
-    stream_data.add_sub(sub);
+    party_sub.name = "Frontend";
+    party_sub.stream_id = 102;
+    stream_data.add_sub(party_sub);
    channel.post = (payload) => {
        assert.equal(payload.data.stream, "Frontend");
        payload.data.subscribed = false;
@@ -262,7 +270,7 @@ test_ui("validate", ({override_rewire, mock_template}) => {

    // test validating stream messages
    compose_state.set_message_type("stream");
-    compose_state.set_stream_name("");
+    compose_state.set_stream_id("");
    let empty_stream_error_rendered = false;
    mock_template("compose_banner/compose_banner.hbs", false, (data) => {
        assert.equal(data.classname, compose_banner.CLASSNAMES.missing_stream);
@@ -277,7 +285,7 @@ test_ui("validate", ({override_rewire, mock_template}) => {
        name: "Denmark",
    };
    stream_data.add_sub(denmark);
-    compose_state.set_stream_name("Denmark");
+    compose_state.set_stream_id(denmark.stream_id);
    page_params.realm_mandatory_topics = true;
    compose_state.topic("");
    let missing_topic_error_rendered = false;
@@ -379,13 +387,15 @@ test_ui("validate_stream_message", ({override_rewire, mock_template}) => {
    override_rewire(compose_recipient, "on_compose_select_recipient_update", () => {});
    page_params.user_id = me.user_id;
    page_params.realm_mandatory_topics = false;
-    const sub = {
+
+    const special_sub = {
        stream_id: 101,
-        name: "social",
+        name: "special",
        subscribed: true,
    };
-    stream_data.add_sub(sub);
-    compose_state.set_stream_name("social");
+    stream_data.add_sub(special_sub);
+
+    compose_state.set_stream_id(special_sub.stream_id);
    assert.ok(compose_validate.validate());
    assert.ok(!$("#compose-all-everyone").visible());

@@ -433,16 +443,16 @@ test_ui(
        mock_banners();
        override_rewire(compose_recipient, "on_compose_select_recipient_update", () => {});
        page_params.is_admin = false;
-        const sub = {
+        const sub_stream_102 = {
            stream_id: 102,
            name: "stream102",
            subscribed: true,
            stream_post_policy: stream_data.stream_post_policy_values.admins.code,
        };

-        stream_data.add_sub(sub);
+        stream_data.add_sub(sub_stream_102);
        compose_state.topic("topic102");
-        compose_state.set_stream_name("stream102");
+        compose_state.set_stream_id(sub_stream_102.stream_id);

        let banner_rendered = false;
        mock_template("compose_banner/compose_banner.hbs", false, (data) => {
@@ -459,13 +469,13 @@ test_ui(
        assert.ok(banner_rendered);

        // Reset error message.
-        compose_state.set_stream_name("social");
+        compose_state.set_stream_id(social_sub.stream_id);

        page_params.is_admin = false;
        page_params.is_guest = true;

        compose_state.topic("topic102");
-        compose_state.set_stream_name("stream102");
+        compose_state.set_stream_id(sub_stream_102.stream_id);
        banner_rendered = false;
        assert.ok(!compose_validate.validate());
        assert.ok(banner_rendered);
@@ -491,7 +501,7 @@ test_ui(

        stream_data.add_sub(sub);
        compose_state.topic("topic104");
-        compose_state.set_stream_name("stream104");
+        compose_state.set_stream_id(sub.stream_id);
        let banner_rendered = false;
        mock_template("compose_banner/compose_banner.hbs", false, (data) => {
            assert.equal(data.classname, compose_banner.CLASSNAMES.no_post_permissions);
@@ -506,7 +516,7 @@ test_ui(
        assert.ok(!compose_validate.validate());
        assert.ok(banner_rendered);
        // Reset error message.
-        compose_state.set_stream_name("social");
+        compose_state.set_stream_id(social_sub.stream_id);

        page_params.is_guest = true;
        assert.ok(!compose_validate.validate());
@@ -530,7 +540,7 @@ test_ui(

        stream_data.add_sub(sub);
        compose_state.topic("topic103");
-        compose_state.set_stream_name("stream103");
+        compose_state.set_stream_id(sub.stream_id);
        let banner_rendered = false;
        mock_template("compose_banner/compose_banner.hbs", false, (data) => {
            assert.equal(data.classname, compose_banner.CLASSNAMES.no_post_permissions);
@@ -692,7 +702,7 @@ test_ui("warn_if_mentioning_unsubscribed_user", ({override, override_rewire, moc
    override_rewire(compose_recipient, "on_compose_select_recipient_update", () => {});
    const $textarea = $("<textarea>").attr("id", "compose-textarea");
    stub_message_row($textarea);
-    compose_state.set_stream_name("");
+    compose_state.set_stream_id("");
    override(settings_data, "user_can_subscribe_other_users", () => true);

    let mentioned_details = {
@@ -737,7 +747,7 @@ test_ui("warn_if_mentioning_unsubscribed_user", ({override, override_rewire, moc
        name: "random",
    };
    stream_data.add_sub(sub);
-    compose_state.set_stream_name("random");
+    compose_state.set_stream_id(sub.stream_id);

    // Test with invalid stream in compose box. It should return noop.
    new_banner_rendered = false;
@@ -804,8 +814,7 @@ test_ui("test warn_if_topic_resolved", ({override, override_rewire, mock_templat
    stream_data.add_sub(sub);

    compose_state.set_message_type("stream");
-    blueslip.expect("error", "Unable to select stream: Do not exist");
-    compose_state.set_stream_name("Do not exist");
+    compose_state.set_stream_id("");
    compose_state.topic(resolved_topic.resolve_name("hello"));
    compose_state.message_content("content");

@@ -813,7 +822,7 @@ test_ui("test warn_if_topic_resolved", ({override, override_rewire, mock_templat
    compose_validate.warn_if_topic_resolved(true);
    assert.ok(!error_shown);

-    compose_state.set_stream_name("random");
+    compose_state.set_stream_id(sub.stream_id);

    // Show the warning now as stream also exists
    error_shown = false;
--- a/web/tests/composebox_typeahead.test.js
+++ b/web/tests/composebox_typeahead.test.js
@@ -744,7 +744,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
            return sweden_topics_to_show;
        });

-        compose_state.set_stream_name("Sweden");
+        compose_state.set_stream_id(sweden_stream.stream_id);
        let actual_value = options.source();
        // Topics should be sorted alphabetically, not by addition order.
        let expected_value = sweden_topics_to_show;
@@ -800,8 +800,8 @@ test("initialize", ({override, override_rewire, mock_template}) => {

        topic_typeahead_called = true;

-        // Unset the stream name.
-        compose_state.set_stream_name("");
+        // Unset the stream.
+        compose_state.set_stream_id("");
    };

    let pm_recipient_typeahead_called = false;
@@ -881,7 +881,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
            return typeahead_helper.sort_recipients({
                users: people,
                query,
-                current_stream: compose_state.stream_name(),
+                current_stream_id: compose_state.stream_id(),
                current_topic: compose_state.topic(),
            });
        }
@@ -1139,7 +1139,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
    assert.equal($("#private_message_recipient").val(), "othello@zulip.com");

    // the UI of selecting a stream is tested in puppeteer tests.
-    compose_state.set_stream_name("Sweden");
+    compose_state.set_stream_id(sweden_stream.stream_id);

    let event = {
        type: "keydown",
@@ -1199,7 +1199,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
    $("form#send_message_form").trigger(event);

    // the UI of selecting a stream is tested in puppeteer tests.
-    compose_state.set_stream_name("Sweden");
+    compose_state.set_stream_id(sweden_stream.stream_id);
    // handle_keyup()
    event = {
        type: "keydown",
@@ -1800,12 +1800,12 @@ test("direct message recipients sorted according to stream / topic being viewed"
    override_rewire(compose_recipient, "on_compose_select_recipient_update", () => {});

    // When viewing no stream, sorting is alphabetical
-    compose_state.set_stream_name("");
+    compose_state.set_stream_id("");
    results = ct.get_pm_people("li");
    assert.deepEqual(results, [ali, alice, cordelia]);

    // When viewing denmark stream, subscriber cordelia is placed higher
-    compose_state.set_stream_name("Denmark");
+    compose_state.set_stream_id(denmark_stream.stream_id);
    results = ct.get_pm_people("li");
    assert.deepEqual(results, [cordelia, ali, alice]);

--- a/web/tests/dispatch_subs.test.js
+++ b/web/tests/dispatch_subs.test.js
@@ -275,7 +275,7 @@ test("stream delete (stream is selected in compose)", ({override, override_rewir
    }

    stream_data.subscribe_myself(event.streams[0]);
-    compose_state.set_stream_name(event.streams[0].name);
+    compose_state.set_stream_id(event.streams[0].stream_id);

    override(settings_streams, "update_default_streams_table", noop);

--- a/web/tests/drafts.test.js
+++ b/web/tests/drafts.test.js
@@ -81,6 +81,7 @@ const draft_2 = {
 };
 const short_msg = {
    stream: "stream",
+    stream_id: 30,
    topic: "topic",
    type: "stream",
    content: "a",
@@ -159,11 +160,6 @@ test("snapshot_message", ({override_rewire}) => {
    override_rewire(compose_recipient, "on_compose_select_recipient_update", () => {});
    mock_banners();

-    override_rewire(stream_data, "get_sub", (stream_name) => {
-        assert.equal(stream_name, "stream");
-        return {stream_id: 30};
-    });
-
    $(".narrow_to_compose_recipients").toggleClass = noop;

    mock_stream_header_colorblock();
@@ -176,7 +172,7 @@ test("snapshot_message", ({override_rewire}) => {
        if (curr_draft.type === "private") {
            compose_state.set_compose_recipient_id(compose_recipient.DIRECT_MESSAGE_ID);
        } else {
-            compose_state.set_stream_name(curr_draft.stream);
+            compose_state.set_stream_id(curr_draft.stream_id);
        }
        compose_state.topic(curr_draft.topic);
        compose_state.private_message_recipient(curr_draft.private_message_recipient);
@@ -187,7 +183,7 @@ test("snapshot_message", ({override_rewire}) => {
        name: draft_1.stream,
    };
    stream_data.add_sub(stream);
-    compose_state.set_stream_name("stream");
+    compose_state.set_stream_id(stream.stream_id);

    curr_draft = draft_1;
    set_compose_state();
--- a/web/tests/narrow.test.js
+++ b/web/tests/narrow.test.js
@@ -662,7 +662,7 @@ run_test("narrow_to_compose_target errors", ({override_rewire, disallow_rewire})

    // No-op when empty stream.
    compose_state.set_message_type("stream");
-    compose_state.set_stream_name("");
+    compose_state.set_stream_id("");
    narrow.to_compose_target();
 });

@@ -677,7 +677,7 @@ run_test("narrow_to_compose_target streams", ({override_rewire}) => {

    compose_state.set_message_type("stream");
    stream_data.add_sub({name: "ROME", stream_id: 99});
-    compose_state.set_stream_name("ROME");
+    compose_state.set_stream_id(99);

    // Test with existing topic
    compose_state.topic("one");
--- a/web/tests/narrow_state.test.js
+++ b/web/tests/narrow_state.test.js
@@ -176,13 +176,13 @@ test("set_compose_defaults", () => {

    // First try with a stream that doesn't exist.
    let stream_and_topic = narrow_state.set_compose_defaults();
-    assert.equal(stream_and_topic.stream, undefined);
+    assert.equal(stream_and_topic.stream_id, undefined);
    assert.equal(stream_and_topic.topic, "Bar");

    const test_stream = {name: "Foo", stream_id: 72};
    stream_data.add_sub(test_stream);
    stream_and_topic = narrow_state.set_compose_defaults();
-    assert.equal(stream_and_topic.stream, "Foo");
+    assert.equal(stream_and_topic.stream_id, 72);
    assert.equal(stream_and_topic.topic, "Bar");

    set_filter([["dm", "foo@bar.com"]]);
@@ -217,7 +217,7 @@ test("set_compose_defaults", () => {
    set_filter([["stream", "rome"]]);

    const stream_test = narrow_state.set_compose_defaults();
-    assert.equal(stream_test.stream, "ROME");
+    assert.equal(stream_test.stream_id, 99);
 });

 test("update_email", () => {
--- a/web/tests/stream_data.test.js
+++ b/web/tests/stream_data.test.js
@@ -136,8 +136,8 @@ test("basics", () => {
    assert.ok(stream_data.is_invite_only_by_stream_name("social"));
    assert.ok(!stream_data.is_invite_only_by_stream_name("unknown"));

-    assert.equal(stream_data.get_color("social"), "red");
-    assert.equal(stream_data.get_color("unknown"), "#c2c2c2");
+    assert.equal(stream_data.get_color(social.stream_id), "red");
+    assert.equal(stream_data.get_color(""), "#c2c2c2");

    assert.equal(stream_data.get_name("denMARK"), "Denmark");
    assert.equal(stream_data.get_name("unknown Stream"), "unknown Stream");
--- a/web/tests/typeahead_helper.test.js
+++ b/web/tests/typeahead_helper.test.js
@@ -95,10 +95,20 @@ for (const person of matches) {
    people.add_active_user(person);
 }

-stream_data.create_streams([
-    {name: "Dev", color: "blue", stream_id: 1},
-    {name: "Linux", color: "red", stream_id: 2},
-]);
+const dev_sub = {
+    name: "Dev",
+    color: "blue",
+    stream_id: 1,
+};
+
+const linux_sub = {
+    name: "Linux",
+    color: "red",
+    stream_id: 2,
+};
+stream_data.create_streams([dev_sub, linux_sub]);
+stream_data.add_sub(dev_sub);
+stream_data.add_sub(linux_sub);

 function test(label, f) {
    run_test(label, (helpers) => {
@@ -312,11 +322,11 @@ test("sort_languages", () => {
    assert.deepEqual(test_langs, ["js", "java"]);
 });

-function get_typeahead_result(query, current_stream, current_topic) {
+function get_typeahead_result(query, current_stream_id, current_topic) {
    const result = th.sort_recipients({
        users: people.get_realm_users(),
        query,
-        current_stream,
+        current_stream_id,
        current_topic,
    });
    return result.map((person) => person.email);
@@ -378,8 +388,8 @@ test("sort_recipients", () => {
        id: (next_id += 1),
    });

-    // Typeahead for stream message [query, stream-name, topic-name]
-    assert.deepEqual(get_typeahead_result("b", "Dev", "Dev topic"), [
+    // Typeahead for stream message [query, stream-id, topic-name]
+    assert.deepEqual(get_typeahead_result("b", dev_sub.stream_id, "Dev topic"), [
        subscriber_email_3,
        subscriber_email_2,
        subscriber_email_1,
@@ -403,7 +413,7 @@ test("sort_recipients", () => {
    });

    // No match
-    assert.deepEqual(get_typeahead_result("h", "Linux", "Linux topic"), [
+    assert.deepEqual(get_typeahead_result("h", linux_sub.stream_id, "Linux topic"), [
        "zman@test.net",
        "b_user_3@zulip.net",
        "a_user@zulip.org",
@@ -427,7 +437,7 @@ test("sort_recipients all mention", () => {
    const results = th.sort_recipients({
        users: test_objs,
        query: "a",
-        current_stream: "Linux",
+        current_stream_id: linux_sub.stream_id,
        current_topic: "Linux topic",
    });

@@ -454,10 +464,9 @@ test("sort_recipients pm counts", () => {
    ]);

    // Now prioritize stream membership over pm counts.
-    const linux_sub = stream_data.get_sub("Linux");
    peer_data.add_subscriber(linux_sub.stream_id, b_user_3.user_id);

-    assert.deepEqual(get_typeahead_result("b", "Linux", "Linux topic"), [
+    assert.deepEqual(get_typeahead_result("b", linux_sub.stream_id, "Linux topic"), [
        "b_user_3@zulip.net",
        "b_user_1@zulip.net",
        "b_user_2@zulip.net",
@@ -489,7 +498,7 @@ test("sort_recipients dup bots", () => {
    const recipients = th.sort_recipients({
        users: dup_objects,
        query: "b",
-        current_stream: "",
+        current_stream_id: "",
        current_topic: "",
    });
    const recipients_email = recipients.map((person) => person.email);
@@ -516,7 +525,7 @@ test("sort_recipients dup alls", () => {
    const recipients = th.sort_recipients({
        users: test_objs,
        query: "a",
-        current_stream: "Linux",
+        current_stream_id: linux_sub.stream_id,
        current_topic: "Linux topic",
    });

@@ -546,7 +555,7 @@ test("sort_recipients subscribers", () => {
    const recipients = th.sort_recipients({
        users: small_matches,
        query: "b",
-        current_stream: "Dev",
+        current_stream_id: dev_sub.stream_id,
        current_topic: "Dev topic",
    });
    const recipients_email = recipients.map((person) => person.email);
@@ -561,7 +570,7 @@ test("sort_recipients pm partners", () => {
    const recipients = th.sort_recipients({
        users: small_matches,
        query: "b",
-        current_stream: "Linux",
+        current_stream_id: linux_sub.stream_id,
        current_topic: "Linux topic",
    });
    const recipients_email = recipients.map((person) => person.email);