settings_bots: Confirmation modal for "Deactivate" bot.

In settings, clicking on deactivate bot button will lead to open
confirmation modal, and displaying all status update notifications
inside this confirmation modal.

This commit is a follow-up of zulip#21490.

frontend_tests/puppeteer_tests/user-deactivation.ts

@@ -99,13 +99,26 @@ async function test_bot_deactivation_and_reactivation(page: Page): Promise<void>
     const default_bot_user_row = await user_row(page, "Zulip Default Bot");
 
     await page.click(default_bot_user_row + " .deactivate");
+    await common.wait_for_micromodal_to_open(page);
+
+    assert.strictEqual(
+        await common.get_text_from_selector(page, ".dialog_heading"),
+        "Deactivate Zulip Default Bot",
+        "Unexpected title for deactivate bot modal",
+    );
+    assert.strictEqual(
+        await common.get_text_from_selector(page, "#dialog_widget_modal .dialog_submit_button"),
+        "Confirm",
+        "Deactivate button has incorrect text.",
+    );
+    await page.click("#dialog_widget_modal .dialog_submit_button");
+    await common.wait_for_micromodal_to_close(page);
+
     await page.waitForSelector(default_bot_user_row + ".deactivated_user", {visible: true});
     await page.waitForSelector(default_bot_user_row + " .fa-user-plus");
-    await page.waitForSelector("#bot-field-status", {hidden: true});
 
     await page.click(default_bot_user_row + " .reactivate");
     await test_reactivation_confirmation_modal(page, "Zulip Default Bot");
-
     await page.waitForSelector(default_bot_user_row + ":not(.deactivated_user)", {visible: true});
     await page.waitForSelector(default_bot_user_row + " .fa-user-times");
 }

static/js/settings_users.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 
+import render_settings_deactivation_bot_modal from "../templates/confirm_dialog/confirm_deactivate_bot.hbs";
 import render_settings_deactivation_user_modal from "../templates/confirm_dialog/confirm_deactivate_user.hbs";
 import render_settings_reactivation_user_modal from "../templates/confirm_dialog/confirm_reactivate_user.hbs";
 import render_admin_bot_form from "../templates/settings/admin_bot_form.hbs";
@@ -26,7 +27,6 @@ import * as settings_panel_menu from "./settings_panel_menu";
 import * as settings_ui from "./settings_ui";
 import * as timerender from "./timerender";
 import * as ui from "./ui";
-import * as ui_report from "./ui_report";
 import * as user_pill from "./user_pill";
 
 const section = {
@@ -462,7 +462,24 @@ function handle_deactivation($tbody) {
     });
 }
 
-function handle_bot_deactivation($tbody, $status_field) {
+function confirm_bot_deactivation(bot_id, handle_confirm, loading_spinner) {
+    const bot = people.get_by_user_id(bot_id);
+    const opts = {
+        username: bot.full_name,
+        email: settings_data.email_for_user_settings(bot),
+    };
+    const html_body = render_settings_deactivation_bot_modal(opts);
+
+    confirm_dialog.launch({
+        html_heading: $t_html({defaultMessage: "Deactivate {name}"}, {name: bot.full_name}),
+        help_link: "/help/deactivate-or-reactivate-a-bot",
+        html_body,
+        on_click: handle_confirm,
+        loading_spinner,
+    });
+}
+
+function handle_bot_deactivation($tbody) {
     $tbody.on("click", ".deactivate", (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -470,14 +487,13 @@ function handle_bot_deactivation($tbody, $status_field) {
         const $button_elem = $(e.target);
         const $row = $button_elem.closest(".user_row");
         const bot_id = Number.parseInt($row.attr("data-user-id"), 10);
-        const url = "/json/bots/" + encodeURIComponent(bot_id);
 
-        const opts = {
-            error_continuation(xhr) {
-                ui_report.generic_row_button_error(xhr, $button_elem);
-            },
-        };
-        settings_ui.do_settings_change(channel.del, url, {}, $status_field, opts);
+        function handle_confirm() {
+            const url = "/json/bots/" + encodeURIComponent(bot_id);
+            dialog_widget.submit_api_request(channel.del, url);
+        }
+
+        confirm_bot_deactivation(bot_id, handle_confirm, true);
     });
 }
 
@@ -695,7 +711,7 @@ section.bots.handle_events = () => {
     const $tbody = $("#admin_bots_table").expectOne();
     const $status_field = $("#bot-field-status").expectOne();
 
-    handle_bot_deactivation($tbody, $status_field);
+    handle_bot_deactivation($tbody);
     handle_reactivation($tbody);
     handle_bot_form($tbody, $status_field);
 };

static/templates/confirm_dialog/confirm_deactivate_bot.hbs

@@ -0,0 +1,7 @@
+<p>
+    {{#tr}}
+        When you deactivate <z-user></z-user>.
+        {{#*inline "z-user"}}<strong>{{username}}</strong>{{#if email}} &lt;{{email}}&gt;{{/if}}{{/inline}}
+    {{/tr}}
+</p>
+<p>{{t "They will not send messages or take any other actions." }}</p>