message_edit: Use a modal to move message instead of edit UI.

Previously, we allow moving message (both topic and streams) in
the message edit UI and we opened message edit UI when clicked
on "Move message" option in message three-dot menu. Now, we open
the "Move topic" modal (that is opened when using "Move topic"
from topic sidebar) on clicking "Move message" option in
message three-dot menu.

We remove the hotkey "e" from "Move message" option for now since
both edit and move UIs are different now. We will instead add
new hotkey in further commits.

We pass stream_id as undefined when stream is not changed. This is
required for case when only topic editing is allowed. It worked
previously because we show "Move topic" option in left sidebar
only when stream editing is allowed.

static/js/message_edit.js

@@ -978,6 +978,7 @@ export function move_topic_containing_message_to_stream(
     new_topic_name,
     send_notification_to_new_thread,
     send_notification_to_old_thread,
+    propagate_mode,
 ) {
     function reset_modal_ui() {
         currently_topic_editing_messages = currently_topic_editing_messages.filter(
@@ -997,7 +998,7 @@ export function move_topic_containing_message_to_stream(
 
     const request = {
         stream_id: new_stream_id,
-        propagate_mode: "change_all",
+        propagate_mode,
         topic: new_topic_name,
         send_notification_to_old_thread,
         send_notification_to_new_thread,

static/js/popovers.js

@@ -1333,18 +1333,26 @@ export function register_click_handlers() {
         e.stopPropagation();
         e.preventDefault();
     });
-    $("body").on(
+    $("body").on("click", ".popover_edit_message, .popover_view_source", (e) => {
-        "click",
+        const message_id = $(e.currentTarget).data("message-id");
-        ".popover_edit_message, .popover_move_message, .popover_view_source",
+        const $row = message_lists.current.get_row(message_id);
-        (e) => {
+        hide_actions_popover();
-            const message_id = $(e.currentTarget).data("message-id");
+        message_edit.start($row);
-            const $row = message_lists.current.get_row(message_id);
+        e.stopPropagation();
-            hide_actions_popover();
+        e.preventDefault();
-            message_edit.start($row);
+    });
-            e.stopPropagation();
+    $("body").on("click", ".popover_move_message", (e) => {
-            e.preventDefault();
+        const message_id = $(e.currentTarget).data("message-id");
-        },
+        const message = message_lists.current.get(message_id);
-    );
+        hide_actions_popover();
+        stream_popover.build_move_topic_to_stream_popover(
+            message.stream_id,
+            message.topic,
+            message,
+        );
+        e.stopPropagation();
+        e.preventDefault();
+    });
     $("body").on("click", ".rehide_muted_user_message", (e) => {
         const message_id = $(e.currentTarget).data("message-id");
         const $row = message_lists.current.get_row(message_id);

static/js/stream_popover.js

@@ -389,16 +389,20 @@ function build_drafts_popover(e) {
     e.stopPropagation();
 }
 
-function build_move_topic_to_stream_popover(current_stream_id, topic_name) {
+export function build_move_topic_to_stream_popover(current_stream_id, topic_name, message) {
     const current_stream_name = stream_data.maybe_get_stream_name(current_stream_id);
     const args = {
         topic_name,
         current_stream_id,
         notify_new_thread: message_edit.notify_new_thread_default,
         notify_old_thread: message_edit.notify_old_thread_default,
+        from_message_actions_popover: message !== undefined,
     };
 
-    hide_topic_popover();
+    let modal_heading = $t_html({defaultMessage: "Move topic"});
+    if (message !== undefined) {
+        modal_heading = $t_html({defaultMessage: "Move messages"});
+    }
 
     function get_params_from_form() {
         return Object.fromEntries(
@@ -423,7 +427,7 @@ function build_move_topic_to_stream_popover(current_stream_id, topic_name) {
         const params = get_params_from_form();
 
         const {old_topic_name} = params;
-        const select_stream_id = stream_widget.value();
+        let select_stream_id = stream_widget.value();
 
         let {
             current_stream_id,
@@ -436,17 +440,40 @@ function build_move_topic_to_stream_popover(current_stream_id, topic_name) {
         send_notification_to_old_thread = send_notification_to_old_thread === "on";
         current_stream_id = Number.parseInt(current_stream_id, 10);
 
+        if (old_topic_name.trim() === new_topic_name.trim()) {
+            // We use `undefined` to tell the server that
+            // there has been no change in the topic name.
+            new_topic_name = undefined;
+        }
+
+        let propagate_mode = "change_all";
+        if (message !== undefined) {
+            if (select_stream_id === current_stream_id) {
+                // We use `undefined` to tell the server that
+                // there has been no change in stream. This is
+                // important for cases when changing stream is
+                // not allowed.
+                select_stream_id = undefined;
+            }
+            // We already have the message_id here which means that modal is opened using
+            // message popover.
+            propagate_mode = $("#move_topic_modal select.message_edit_topic_propagate").val();
+            message_edit.move_topic_containing_message_to_stream(
+                message.id,
+                select_stream_id,
+                new_topic_name,
+                send_notification_to_new_thread,
+                send_notification_to_old_thread,
+                propagate_mode,
+            );
+            return;
+        }
+
         dialog_widget.show_dialog_spinner();
         message_edit.with_first_message_id(
             current_stream_id,
             old_topic_name,
             (message_id) => {
-                if (old_topic_name.trim() === new_topic_name.trim()) {
-                    // We use `undefined` to tell the server that
-                    // there has been no change in the topic name.
-                    new_topic_name = undefined;
-                }
-
                 if (old_topic_name && select_stream_id) {
                     message_edit.move_topic_containing_message_to_stream(
                         message_id,
@@ -454,6 +481,7 @@ function build_move_topic_to_stream_popover(current_stream_id, topic_name) {
                         new_topic_name,
                         send_notification_to_new_thread,
                         send_notification_to_old_thread,
+                        propagate_mode,
                     );
                 }
             },
@@ -514,7 +542,7 @@ function build_move_topic_to_stream_popover(current_stream_id, topic_name) {
     }
 
     dialog_widget.launch({
-        html_heading: $t_html({defaultMessage: "Move topic"}),
+        html_heading: modal_heading,
         html_body: render_move_topic_to_stream(args),
         html_submit_button: $t_html({defaultMessage: "Confirm"}),
         id: "move_topic_modal",
@@ -801,6 +829,7 @@ export function register_topic_handlers() {
         const $topic_row = $(e.currentTarget);
         const stream_id = Number.parseInt($topic_row.attr("data-stream-id"), 10);
         const topic_name = $topic_row.attr("data-topic-name");
+        hide_topic_popover();
         build_move_topic_to_stream_popover(stream_id, topic_name);
         e.stopPropagation();
         e.preventDefault();

static/templates/actions_popover_content.hbs

@@ -23,7 +23,6 @@
     <li>
         <a class="popover_move_message" data-message-id="{{message_id}}" tabindex="0">
             <i class="fa fa-arrows" aria-hidden="true"></i> {{move_message_menu_item}}
-            <span class="hotkey-hint">(e)</span>
         </a>
     </li>
     {{/if}}

static/templates/move_topic_to_stream.hbs

@@ -1,4 +1,6 @@
+{{#unless from_message_actions_popover}}
 <p>{{#tr}}Move all messages in <strong>{topic_name}</strong>{{/tr}} to:</p>
+{{/unless}}
 <form class="new-style" id="move_topic_form">
     <p>{{t "Select a stream below or change topic name." }}</p>
     <div class="topic_stream_edit_header">
@@ -12,6 +14,13 @@
         <input name="new_topic_name" type="text" class="inline_topic_edit" autocomplete="off" value="{{topic_name}}" />
         <input name="old_topic_name" type="hidden" class="inline_topic_edit" value="{{topic_name}}" />
         <input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
+        {{#if from_message_actions_popover}}
+        <select class="message_edit_topic_propagate">
+            <option value="change_one"> {{t "Move only this message" }}</option>
+            <option selected="selected" value="change_later"> {{t "Move this and all following messages in this topic" }}</option>
+            <option value="change_all"> {{t "Move all messages in this topic" }}</option>
+        </select>
+        {{/if}}
         <div class="topic_move_breadcrumb_messages">
             <label class="checkbox">
                 <input class="send_notification_to_new_thread" name="send_notification_to_new_thread" type="checkbox" {{#if notify_new_thread}}checked="checked"{{/if}} />