settings_users: Refactor user_deactivation modal to confirm_dialog module.

The "email" span in the old modal was not used for styling, just to
support updating the field visually.

frontend_tests/puppeteer_tests/user-deactivation.ts

@@ -23,19 +23,22 @@ async function test_deactivate_user(page: Page): Promise<void> {
     await page.waitForSelector(cordelia_user_row, {visible: true});
     await page.waitForSelector(cordelia_user_row + " .fa-user-times");
     await page.click(cordelia_user_row + " .deactivate");
-    await page.waitForSelector("#deactivation_user_modal", {visible: true});
+    await page.waitForSelector("#confirm_dialog_modal", {visible: true});
 
     assert.strictEqual(
-        await common.get_text_from_selector(page, "#deactivation_user_modal_label"),
+        await common.get_text_from_selector(page, ".confirm_dialog_heading"),
         "Deactivate " + (await common.get_internal_email_from_name(page, "cordelia")),
         "Deactivate modal has wrong user.",
     );
     assert.strictEqual(
-        await common.get_text_from_selector(page, "#deactivation_user_modal .do_deactivate_button"),
+        await common.get_text_from_selector(
+            page,
+            "#confirm_dialog_modal .confirm_dialog_yes_button",
+        ),
         "Confirm",
         "Deactivate button has incorrect text.",
     );
-    await page.click("#deactivation_user_modal .do_deactivate_button");
+    await page.click("#confirm_dialog_modal .confirm_dialog_yes_button");
     await page.waitForSelector("#user-field-status", {hidden: true});
 }
 

static/js/settings_users.js

@@ -3,12 +3,14 @@ import $ from "jquery";
 import render_admin_bot_form from "../templates/settings/admin_bot_form.hbs";
 import render_admin_human_form from "../templates/settings/admin_human_form.hbs";
 import render_admin_user_list from "../templates/settings/admin_user_list.hbs";
+import render_settings_deactivation_user_modal from "../templates/settings/deactivation_user_modal.hbs";
 
 import * as blueslip from "./blueslip";
 import * as bot_data from "./bot_data";
 import * as channel from "./channel";
+import * as confirm_dialog from "./confirm_dialog";
 import {DropdownListWidget as dropdown_list_widget} from "./dropdown_list_widget";
-import {$t} from "./i18n";
+import {$t, $t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import * as loading from "./loading";
 import * as overlays from "./overlays";
@@ -487,18 +489,16 @@ function open_bot_form(person) {
 }
 
 function confirm_deactivation(row, user_id, status_field) {
-    const modal_elem = $("#deactivation_user_modal").expectOne();
-
-    function set_fields() {
     const user = people.get_by_user_id(user_id);
-        modal_elem.find(".email").text(user.email);
-        modal_elem.find(".user_name").text(user.full_name);
-    }
+    const modal_parent = $("#admin-user-list");
+    const opts = {
+        username: user.full_name,
+        email: user.email,
+    };
+    const html_body = render_settings_deactivation_user_modal(opts);
 
     function handle_confirm() {
         const row = get_user_info_row(user_id);
-
-        modal_elem.modal("hide");
         const row_deactivate_button = row.find("button.deactivate");
         row_deactivate_button.prop("disabled", true).text($t({defaultMessage: "Working…"}));
         const opts = {
@@ -513,10 +513,13 @@ function confirm_deactivation(row, user_id, status_field) {
         settings_ui.do_settings_change(channel.del, url, {}, status_field, opts);
     }
 
-    modal_elem.off("click", ".do_deactivate_button");
-    set_fields();
-    modal_elem.on("click", ".do_deactivate_button", handle_confirm);
-    overlays.open_modal("#deactivation_user_modal");
+    confirm_dialog.launch({
+        parent: modal_parent,
+        html_heading: $t_html({defaultMessage: "Deactivate {email}"}, {email: user.email}),
+        html_body,
+        html_yes_button: $t_html({defaultMessage: "Confirm"}),
+        on_click: handle_confirm,
+    });
 }
 
 function handle_deactivation(tbody, status_field) {

static/styles/settings.css

@@ -1574,8 +1574,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
     background-color: hsl(0, 0%, 100%);
 }
 
-#confirm_dialog_modal,
-#deactivation_user_modal.fade.in {
+#confirm_dialog_modal {
     top: calc(50% - 120px);
 }
 

static/templates/settings/admin_settings_modals.hbs

@@ -1,5 +1,3 @@
-{{> deactivation_user_modal }}
-
 {{> realm_domains_modal }}
 
 <div id="user-info-form-modal-container"></div>

static/templates/settings/deactivation_user_modal.hbs

@@ -1,19 +1,7 @@
-<div id="deactivation_user_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_user_modal_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="deactivation_user_modal_label">{{t "Deactivate" }} <span class="email"></span></h3>
-    </div>
-    <div class="modal-body">
-        <p>
+<p>
     {{#tr}}
         By deactivating <z-user></z-user>, they will be logged out immediately.
-                {{#*inline "z-user"}}<strong><span class="user_name"></span></strong> &lt;<span class="email"></span>&gt;{{/inline}}
+        {{#*inline "z-user"}}<strong>{{username}}</strong> &lt;{{email}}&gt;{{/inline}}
     {{/tr}}
-        </p>
-        <p>{{t "Their password will be cleared from our systems, and any bots they maintain will be disabled." }}</p>
-    </div>
-    <div class="modal-footer">
-        <button class="button rounded" data-dismiss="modal">{{t "Cancel" }}</button>
-        <button class="button rounded btn-danger do_deactivate_button">{{t "Confirm" }}</button>
-    </div>
-</div>
+</p>
+<p>{{t "Their password will be cleared from our systems, and any bots they maintain will be disabled." }}</p>