message_edit_history: Migrate modal to dialog_widget.

frontend_tests/node_tests/message_events.js

@@ -4,6 +4,7 @@ const {strict: assert} = require("assert");
 
 const {mock_esm, zrequire} = require("../zjsunit/namespace");
 const {run_test} = require("../zjsunit/test");
+const $ = require("../zjsunit/zjquery");
 const {page_params} = require("../zjsunit/zpage_params");
 
 const condense = mock_esm("../../static/js/condense");
@@ -116,6 +117,10 @@ run_test("update_messages", () => {
     page_params.realm_allow_edit_history = false;
     message_list.narrowed = "stub-to-ignore";
 
+    const message_edit_history_modal = $.create("#message-edit-history");
+    const modal = $.create("micromodal").addClass("modal--open");
+    message_edit_history_modal.set_parents_result(".micromodal", modal);
+
     // TEST THIS:
     message_events.update_messages(events);
 

static/js/message_edit_history.js

@@ -5,9 +5,9 @@ import render_message_edit_history from "../templates/message_edit_history.hbs";
 import render_message_history_modal from "../templates/message_history_modal.hbs";
 
 import * as channel from "./channel";
+import * as dialog_widget from "./dialog_widget";
 import {$t_html} from "./i18n";
 import * as message_lists from "./message_lists";
-import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as popovers from "./popovers";
@@ -72,7 +72,7 @@ export function fetch_and_render_message_history(message) {
             ui_report.error(
                 $t_html({defaultMessage: "Error fetching message edit history"}),
                 xhr,
-                $("#message-history-error"),
+                $("#dialog_error"),
             );
         },
     });
@@ -80,10 +80,20 @@ export function fetch_and_render_message_history(message) {
 
 export function show_history(message) {
     const rendered_message_history = render_message_history_modal();
-    $("#message_feed_container").append(rendered_message_history);
 
+    dialog_widget.launch({
+        html_heading: $t_html({defaultMessage: "Message edit history"}),
+        html_body: rendered_message_history,
+        html_submit_button: $t_html({defaultMessage: "Close"}),
+        id: "message-edit-history",
+        on_click: () => {},
+        close_on_submit: true,
+        focus_submit_on_open: true,
+        single_footer_button: true,
+        post_render: () => {
             fetch_and_render_message_history(message);
-    overlays.open_modal("#message-edit-history", {autoremove: true});
+        },
+    });
 }
 
 export function initialize() {

static/js/message_events.js

@@ -404,7 +404,7 @@ export function update_messages(events) {
 
         // Rerender "Message edit history" if it was open to the edited message.
         if (
-            $("#message-edit-history").hasClass("in") &&
+            $("#message-edit-history").parents(".micromodal").hasClass("modal--open") &&
             msg.id === Number.parseInt($("#message-history").attr("data-message-id"), 10)
         ) {
             message_edit_history.fetch_and_render_message_history(msg);

static/templates/message_history_modal.hbs

@@ -1,14 +1 @@
-<div class="modal hide modal-bg new-style" id="message-edit-history" tabindex="-1" role="dialog"
-  aria-labelledby="message-history-label" aria-hidden="true">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
-        <h3 id="message-history-label">{{t "Message edit history" }}</h3>
-    </div>
-    <div class="modal-body">
-        <div id="message-history-error"></div>
 <div class="controls" id="message-history"></div>
-    </div>
-    <div class="modal-footer">
-        <button class="button small rounded" id="message-history-cancel" data-dismiss="modal">{{t "Close" }}</button>
-    </div>
-</div>