move_topic_to_stream: Migrate modal to dialog_widget.

static/js/message_edit.js

@@ -24,7 +24,6 @@ import * as markdown from "./markdown";
 import * as message_lists from "./message_lists";
 import * as message_store from "./message_store";
 import * as message_viewport from "./message_viewport";
-import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as resize from "./resize";
 import * as rows from "./rows";
@@ -219,18 +218,6 @@ export function show_topic_edit_spinner(row) {
     $(".topic_edit_spinner").show();
 }
 
-export function hide_topic_move_spinner() {
-    const spinner = $("#move_topic_modal .topic_move_spinner");
-    loading.destroy_indicator(spinner);
-    $("#move_topic_modal .modal-footer").show();
-}
-
-export function show_topic_move_spinner() {
-    const spinner = $("#move_topic_modal .topic_move_spinner");
-    loading.make_indicator(spinner);
-    $("#move_topic_modal .modal-footer").hide();
-}
-
 export function end_if_focused_on_inline_topic_edit() {
     const focused_elem = $(".topic_edit_form").find(":focus");
     if (focused_elem.length === 1) {
@@ -1073,11 +1060,10 @@ export function move_topic_containing_message_to_stream(
         currently_topic_editing_messages = currently_topic_editing_messages.filter(
             (id) => id !== message_id,
         );
-        hide_topic_move_spinner();
+        dialog_widget.hide_dialog_spinner();
-        overlays.close_modal("#move_topic_modal");
+        dialog_widget.close_modal();
     }
     if (currently_topic_editing_messages.includes(message_id)) {
-        hide_topic_move_spinner();
         $("#topic_stream_edit_form_error .error-msg").text(
             $t({defaultMessage: "A Topic Move already in progress."}),
         );

static/js/stream_popover.js

@@ -13,13 +13,13 @@ import * as browser_history from "./browser_history";
 import * as channel from "./channel";
 import * as compose_actions from "./compose_actions";
 import * as confirm_dialog from "./confirm_dialog";
+import * as dialog_widget from "./dialog_widget";
 import {DropdownListWidget} from "./dropdown_list_widget";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
 import * as message_edit from "./message_edit";
 import * as muted_topics from "./muted_topics";
 import * as muted_topics_ui from "./muted_topics_ui";
-import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as popovers from "./popovers";
 import * as resize from "./resize";
@@ -364,29 +364,99 @@ function build_move_topic_to_stream_popover(e, current_stream_id, topic_name) {
         notify_old_thread: message_edit.notify_old_thread_default,
     };
 
-    const streams_list = stream_data.subscribed_subs().map((stream) => ({
-        name: stream.name,
-        value: stream.stream_id.toString(),
-    }));
-    const opts = {
-        widget_name: "select_stream",
-        data: streams_list,
-        default_text: $t({defaultMessage: "No streams"}),
-        include_current_item: false,
-        value: current_stream_id,
-    };
-
     hide_topic_popover();
 
-    $("#move-a-topic-modal-holder").html(render_move_topic_to_stream(args));
+    function move_topic() {
+        function show_error_msg(msg) {
+            $("#topic_stream_edit_form_error .error-msg").text(msg);
+            $("#topic_stream_edit_form_error").show();
+        }
 
-    stream_widget = new DropdownListWidget(opts);
+        const params = Object.fromEntries(
-    stream_header_colorblock = $("#move_topic_modal .topic_stream_edit_header").find(
+            $("#move_topic_form")
-        ".stream_header_colorblock",
+                .serializeArray()
-    );
+                .map(({name, value}) => [name, value]),
+        );
 
-    stream_bar.decorate(current_stream_name, stream_header_colorblock, false);
+        const {old_topic_name} = params;
-    overlays.open_modal("#move_topic_modal");
+        const select_stream_id = stream_widget.value();
+
+        let {
+            current_stream_id,
+            new_topic_name,
+            send_notification_to_new_thread,
+            send_notification_to_old_thread,
+        } = params;
+        new_topic_name = new_topic_name.trim();
+        send_notification_to_new_thread = send_notification_to_new_thread === "on";
+        send_notification_to_old_thread = send_notification_to_old_thread === "on";
+        current_stream_id = Number.parseInt(current_stream_id, 10);
+
+        if (
+            current_stream_id === Number.parseInt(select_stream_id, 10) &&
+            new_topic_name.toLowerCase() === old_topic_name.toLowerCase()
+        ) {
+            dialog_widget.hide_dialog_spinner();
+            show_error_msg("Please select a different stream or change topic name.");
+            return;
+        }
+
+        dialog_widget.show_dialog_spinner();
+        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,
+                        select_stream_id,
+                        new_topic_name,
+                        send_notification_to_new_thread,
+                        send_notification_to_old_thread,
+                    );
+                }
+            },
+            (xhr) => {
+                dialog_widget.hide_dialog_spinner();
+                show_error_msg(xhr.responseJSON.msg);
+            },
+        );
+    }
+
+    function move_topic_post_render() {
+        stream_header_colorblock = $("#dialog_widget_modal .topic_stream_edit_header").find(
+            ".stream_header_colorblock",
+        );
+        stream_bar.decorate(current_stream_name, stream_header_colorblock, false);
+        const streams_list = stream_data.subscribed_subs().map((stream) => ({
+            name: stream.name,
+            value: stream.stream_id.toString(),
+        }));
+        const opts = {
+            widget_name: "select_stream",
+            data: streams_list,
+            default_text: $t({defaultMessage: "No streams"}),
+            include_current_item: false,
+            value: current_stream_id,
+        };
+        stream_widget = new DropdownListWidget(opts);
+    }
+
+    dialog_widget.launch({
+        html_heading: $t_html({defaultMessage: "Move topic"}),
+        html_body: render_move_topic_to_stream(args),
+        html_submit_button: $t_html({defaultMessage: "Confirm"}),
+        id: "move_topic_modal",
+        on_click: move_topic,
+        loading_spinner: true,
+        post_render: move_topic_post_render,
+    });
 }
 
 export function register_click_handlers() {
@@ -703,68 +773,4 @@ export function register_topic_handlers() {
     $("body").on("click", "#topic_stream_edit_form_error .send-status-close", () => {
         $("#topic_stream_edit_form_error").hide();
     });
-
-    $("body").on("click", "#do_move_topic_button", (e) => {
-        e.preventDefault();
-
-        function show_error_msg(msg) {
-            $("#topic_stream_edit_form_error .error-msg").text(msg);
-            $("#topic_stream_edit_form_error").show();
-        }
-
-        const params = Object.fromEntries(
-            $("#move_topic_form")
-                .serializeArray()
-                .map(({name, value}) => [name, value]),
-        );
-
-        const {old_topic_name} = params;
-        const select_stream_id = stream_widget.value();
-
-        let {
-            current_stream_id,
-            new_topic_name,
-            send_notification_to_new_thread,
-            send_notification_to_old_thread,
-        } = params;
-        new_topic_name = new_topic_name.trim();
-        send_notification_to_new_thread = send_notification_to_new_thread === "on";
-        send_notification_to_old_thread = send_notification_to_old_thread === "on";
-        current_stream_id = Number.parseInt(current_stream_id, 10);
-
-        if (
-            current_stream_id === Number.parseInt(select_stream_id, 10) &&
-            new_topic_name.toLowerCase() === old_topic_name.toLowerCase()
-        ) {
-            show_error_msg("Please select a different stream or change topic name.");
-            return;
-        }
-
-        message_edit.show_topic_move_spinner();
-        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,
-                        select_stream_id,
-                        new_topic_name,
-                        send_notification_to_new_thread,
-                        send_notification_to_old_thread,
-                    );
-                }
-            },
-            (xhr) => {
-                message_edit.hide_topic_move_spinner();
-                show_error_msg(xhr.responseJSON.msg);
-            },
-        );
-    });
 }

static/styles/popovers.css

@@ -662,10 +662,12 @@ ul {
 }
 
 #move_topic_modal {
-    /* Ensure that the dropdown can overflow the modal. */
+    form {
-    overflow: visible;
+        margin: 0;
+    }
 
-    .modal-body {
+    /* Ensure that the dropdown can overflow the modal. */
+    .modal__content {
         overflow: visible;
     }
 
@@ -675,8 +677,9 @@ ul {
         border-radius: 1px 4px 4px 1px !important;
     }
 
+    .dropdown-list-widget,
     .stream_header_colorblock {
-        margin-bottom: 20px;
+        margin-bottom: 10px;
     }
 
     #topic_stream_edit_form_error {

static/templates/move_topic_to_stream.hbs

@@ -1,47 +1,32 @@
-<div id="move_topic_modal" class="modal modal-bg hide fade new-style" tabindex="-1" role="dialog" aria-labelledby="move_topic_modal_label" aria-hidden="true">
+<p>{{#tr}}Move all messages in <strong>{topic_name}</strong>{{/tr}} to:</p>
-    <div class="modal-header">
+<form class="new-style" id="move_topic_form">
-        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
+    <div id="topic_stream_edit_form_error" class="alert">
-        <h3 id="move_topic_modal_label">{{t "Move topic" }} </h3>
+        <span class="send-status-close">&times;</span>
+        <span class="error-msg"></span>
     </div>
-    <div class="modal-body">
+    <p>{{t "Select a stream below or change topic name." }}</p>
-        <p>{{#tr}}Move all messages in <strong>{topic_name}</strong> to:{{/tr}}</p>
+    <div class="topic_stream_edit_header">
-        <form id="move_topic_form">
+        <div class="stream_header_colorblock"></div>
-            <div id="topic_stream_edit_form_error" class="alert">
+        <div class="move-topic-dropdown">
-                <span class="send-status-close">&times;</span>
+            {{> settings/dropdown_list_widget
-                <span class="error-msg"></span>
+              widget_name="select_stream"
-            </div>
+              list_placeholder=(t 'Filter streams')}}
-            <p>{{t "Select a stream below or change topic name." }}</p>
+        </div>
-            <div class="topic_stream_edit_header">
+        <i class="fa fa-angle-right" aria-hidden="true"></i>
-                <div class="stream_header_colorblock"></div>
+        <input name="new_topic_name" type="text" class="inline_topic_edit" value="{{topic_name}}" />
-                <div class="move-topic-dropdown">
+        <input name="old_topic_name" type="hidden" class="inline_topic_edit" value="{{topic_name}}" />
-                    {{> settings/dropdown_list_widget
+        <input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
-                      widget_name="select_stream"
+        <div class="topic_move_breadcrumb_messages">
-                      list_placeholder=(t 'Filter streams')}}
+            <label class="checkbox">
-                </div>
+                <input class="send_notification_to_new_thread" name="send_notification_to_new_thread" type="checkbox" {{#if notify_new_thread}}checked="checked"{{/if}} />
-                <i class="fa fa-angle-right" aria-hidden="true"></i>
+                <span></span>
-                <input name="new_topic_name" type="text" class="inline_topic_edit" value="{{topic_name}}" />
+                {{t "Send notification to new topic" }}
-                <input name="old_topic_name" type="hidden" class="inline_topic_edit" value="{{topic_name}}" />
+            </label>
-                <input name="current_stream_id" type="hidden" value="{{current_stream_id}}" />
+            <label class="checkbox">
-                <div class="topic_move_breadcrumb_messages new-style">
+                <input class="send_notification_to_old_thread" name="send_notification_to_old_thread" type="checkbox" {{#if notify_old_thread}}checked="checked"{{/if}} />
-                    <label class="checkbox">
+                <span></span>
-                        <input class="send_notification_to_new_thread" name="send_notification_to_new_thread" type="checkbox" {{#if notify_new_thread}}checked="checked"{{/if}} />
+                {{t "Send notification to old topic" }}
-                        <span></span>
+            </label>
-                        {{t "Send notification to new topic" }}
+        </div>
-                    </label>
-                    <label class="checkbox">
-                        <input class="send_notification_to_old_thread" name="send_notification_to_old_thread" type="checkbox" {{#if notify_old_thread}}checked="checked"{{/if}} />
-                        <span></span>
-                        {{t "Send notification to old topic" }}
-                    </label>
-                </div>
-            </div>
-        </form>
-        <div class="topic_move_spinner"></div>
     </div>
-    <div class="modal-footer">
+</form>
-        <button class="button" data-dismiss="modal">{{t "Cancel" }}</button>
-        <button class="button btn-danger rounded" id="do_move_topic_button">
-            {{t "Confirm" }}
-        </button>
-    </div>
-</div>