message edit: Add frontend support for stream-change events.

This is part of #6427, adding support for live-updating the Zulip UI
to move messages to a new topic.

As noted in the comments, there is still a bug to be fixed here
involving guest users, but the overall implementation is pretty well
tested manually (which is how we test most message-edit UI work since
there's so much complexity involved).

Co-Authored-By: Wbert Adrián Castro Vera <wbertc@gmail.com>

static/js/message_events.js

@@ -107,6 +107,7 @@ exports.update_messages = function update_messages(events) {
     let changed_narrow = false;
     let changed_compose = false;
     let message_content_edited = false;
+    let stream_changed = false;
 
     for (const event of events) {
         const msg = message_store.get(event.message_id);
@@ -137,12 +138,14 @@ exports.update_messages = function update_messages(events) {
 
         const new_topic = util.get_edit_event_topic(event);
 
-        if (new_topic !== undefined) {
+        const {new_stream_id} = event;
-            // A topic edit may affect multiple messages, listed in
-            // event.message_ids. event.message_id is still the first message
-            // where the user initiated the edit.
-            topic_edited = true;
 
+        // A topic edit may affect multiple messages, listed in
+        // event.message_ids. event.message_id is still the first message
+        // where the user initiated the edit.
+        topic_edited = new_topic !== undefined;
+        stream_changed = new_stream_id !== undefined;
+        if (topic_edited || stream_changed) {
             const going_forward_change = ['change_later', 'change_all'].includes(event.propagate_mode);
 
             const stream_name = stream_data.get_sub_by_id(event.stream_id).name;
@@ -161,18 +164,52 @@ exports.update_messages = function update_messages(events) {
 
             const current_filter = narrow_state.filter();
             if (going_forward_change) {
+                // This logic is a bit awkward.  What we're trying to
+                // accomplish is two things:
+                //
+                // * If we're currently narrowed to a topic that was just moved,
+                //   renarrow to the new location.
+                // * We determine whether enough of the topic was moved to justify
+                //   renarrowing by checking if the currently selected message is moved.
+                //
+                // Corner cases around only moving some messages in a topic
+                // need to be thought about carefully when making changes.
+                //
+                // Code further down takes care of the actual rerendering of
+                // messages within a narrow.
                 const current_id = current_msg_list.selected_id();
                 const selection_changed_topic = event.message_ids.includes(current_id);
                 if (selection_changed_topic) {
-                    if (current_filter && stream_name) {
+                    if (current_filter && current_filter.has_topic(stream_name, orig_topic)) {
-                        if (current_filter.has_topic(stream_name, orig_topic)) {
+                        let new_filter = current_filter;
-                            const new_filter = current_filter.filter_with_new_params({
+                        if (new_filter && stream_changed) {
+                            // TODO: This logic doesn't handle the
+                            // case where we're a guest user and the
+                            // message moves to a stream we cannot
+                            // access, which would cause the
+                            // stream_data lookup here to fail.
+                            //
+                            // The fix is likely somewhat involved, so punting for now.
+                            const new_stream_name = stream_data.get_sub_by_id(new_stream_id).name;
+                            new_filter = new_filter.filter_with_new_params({
+                                operator: 'stream',
+                                operand: new_stream_name,
+                            });
+                            changed_narrow = true;
+                        }
+
+                        if (new_filter && topic_edited) {
+                            new_filter = new_filter.filter_with_new_params({
                                 operator: 'topic',
                                 operand: new_topic,
                             });
+                            changed_narrow = true;
+                        }
+
+                        if (changed_narrow) {
                             const operators = new_filter.operators();
                             const opts = {
-                                trigger: 'topic change',
+                                trigger: 'stream/topic change',
                                 then_select_id: current_id,
                             };
                             narrow.activate(operators, opts);
@@ -196,14 +233,22 @@ exports.update_messages = function update_messages(events) {
                 });
 
                 // Update the unread counts; again, this must be called
-                // before we call set_message_topic.
+                // before we modify the topic field on the message.
                 unread.update_unread_topics(msg, event);
 
-                msg.topic = new_topic;
+                // Now edit the attributes of our message object.
-                msg.topic_links = event.topic_links;
+                if (topic_edited) {
+                    msg.topic = new_topic;
+                    msg.topic_links = event.topic_links;
+                }
+                if (stream_changed) {
+                    const new_stream_name = stream_data.get_sub_by_id(new_stream_id).name;
+                    msg.stream_id = event.new_stream_id;
+                    msg.stream = new_stream_name;
+                    msg.display_recipient = new_stream_name;
+                }
 
-                // Add the recent topics entry for the new topics; must
+                // Add the recent topics entry for the new stream/topics.
-                // be called after we call set_message_topic.
                 topic_data.add_message({
                     stream_id: msg.stream_id,
                     topic_name: msg.topic,
@@ -260,7 +305,7 @@ exports.update_messages = function update_messages(events) {
     // If a topic was edited, we re-render the whole view to get any
     // propagated edits to be updated (since the topic edits can have
     // changed the correct grouping of messages).
-    if (topic_edited) {
+    if (topic_edited || stream_changed) {
         home_msg_list.update_muting_and_rerender();
         // However, we don't need to rerender message_list.narrowed if
         // we just changed the narrow earlier in this function.
@@ -286,5 +331,4 @@ exports.update_messages = function update_messages(events) {
     pm_list.update_private_messages();
 };
 
-
 window.message_events = exports;

static/js/unread.js

@@ -393,8 +393,9 @@ exports.get_unread_messages = function (messages) {
 
 exports.update_unread_topics = function (msg, event) {
     const new_topic = util.get_edit_event_topic(event);
+    const {new_stream_id} = event;
 
-    if (new_topic === undefined) {
+    if (new_topic === undefined && new_stream_id === undefined) {
         return;
     }
 
@@ -407,8 +408,8 @@ exports.update_unread_topics = function (msg, event) {
     );
 
     exports.unread_topic_counter.add(
-        msg.stream_id,
+        new_stream_id || msg.stream_id,
-        new_topic,
+        new_topic || msg.topic,
         msg.id
     );
 };