From 2328dc0d4ee56a73a06200281b576f7636e5329c Mon Sep 17 00:00:00 2001
From: Yogesh Sirsat <yogeshsirsat56@gmail.com>
Date: Mon, 29 Aug 2022 22:13:14 +0530
Subject: [PATCH] custom_profile_fields: Confirmation modal for delete profile
 field.

---
 .../puppeteer_tests/custom-profile.ts         | 12 ++++++
 static/js/settings_profile_fields.js          | 41 +++++++++++++++----
 .../confirm_delete_profile_field.hbs          | 12 ++++++
 3 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 static/templates/confirm_dialog/confirm_delete_profile_field.hbs

diff --git a/frontend_tests/puppeteer_tests/custom-profile.ts b/frontend_tests/puppeteer_tests/custom-profile.ts
index dca073048b..2cd4d29701 100644
--- a/frontend_tests/puppeteer_tests/custom-profile.ts
+++ b/frontend_tests/puppeteer_tests/custom-profile.ts
@@ -63,6 +63,18 @@ async function test_edit_profile_field(page: Page): Promise<void> {
 
 async function test_delete_custom_profile_field(page: Page): Promise<void> {
     await page.click(`${profile_field_row} button.delete`);
+    await common.wait_for_micromodal_to_open(page);
+    assert.strictEqual(
+        await common.get_text_from_selector(page, ".dialog_heading"),
+        "Delete custom profile field?",
+    );
+    assert.strictEqual(
+        await common.get_text_from_selector(page, "#dialog_widget_modal .dialog_submit_button"),
+        "Confirm",
+    );
+    await page.click("#dialog_widget_modal .dialog_submit_button");
+    await common.wait_for_micromodal_to_close(page);
+
     await page.waitForSelector("#admin-profile-field-status img", {visible: true});
     assert.strictEqual(
         await common.get_text_from_selector(page, "div#admin-profile-field-status"),
diff --git a/static/js/settings_profile_fields.js b/static/js/settings_profile_fields.js
index e10195d331..8acbf59459 100644
--- a/static/js/settings_profile_fields.js
+++ b/static/js/settings_profile_fields.js
@@ -1,6 +1,7 @@
 import $ from "jquery";
 import {Sortable} from "sortablejs";
 
+import render_confirm_delete_profile_field from "../templates/confirm_dialog/confirm_delete_profile_field.hbs";
 import render_confirm_delete_profile_field_option from "../templates/confirm_dialog/confirm_delete_profile_field_option.hbs";
 import render_add_new_custom_profile_field_form from "../templates/settings/add_new_custom_profile_field_form.hbs";
 import render_admin_profile_field_list from "../templates/settings/admin_profile_field_list.hbs";
@@ -72,13 +73,39 @@ function delete_profile_field(e) {
     e.preventDefault();
     e.stopPropagation();
 
-    settings_ui.do_settings_change(
-        channel.del,
-        "/json/realm/profile_fields/" + encodeURIComponent($(this).attr("data-profile-field-id")),
-        {},
-        $("#admin-profile-field-status").expectOne(),
-    );
-    update_profile_fields_table_element();
+    const profile_field_id = Number.parseInt($(e.currentTarget).attr("data-profile-field-id"), 10);
+    const profile_field = get_profile_field(profile_field_id);
+    const active_user_ids = people.get_active_user_ids();
+    let users_using_deleting_profile_field = 0;
+
+    for (const user_id of active_user_ids) {
+        const user_profile_data = people.get_custom_profile_data(user_id, profile_field_id);
+        if (user_profile_data) {
+            users_using_deleting_profile_field += 1;
+        }
+    }
+
+    const html_body = render_confirm_delete_profile_field({
+        profile_field_name: profile_field.name,
+        count: users_using_deleting_profile_field,
+    });
+
+    function request_delete() {
+        const url = "/json/realm/profile_fields/" + profile_field_id;
+        const opts = {
+            success_continuation() {
+                display_success_status();
+                update_profile_fields_table_element();
+            },
+        };
+        dialog_widget.submit_api_request(channel.del, url, {}, opts);
+    }
+
+    confirm_dialog.launch({
+        html_body,
+        html_heading: $t_html({defaultMessage: "Delete custom profile field?"}),
+        on_click: request_delete,
+    });
 }
 
 function read_select_field_data_from_form($profile_field_form, old_field_data) {
diff --git a/static/templates/confirm_dialog/confirm_delete_profile_field.hbs b/static/templates/confirm_dialog/confirm_delete_profile_field.hbs
new file mode 100644
index 0000000000..034155a0be
--- /dev/null
+++ b/static/templates/confirm_dialog/confirm_delete_profile_field.hbs
@@ -0,0 +1,12 @@
+{{#if (eq count 1)}}
+    {{#tr}}
+        This will delete the <z-profile-field-name></z-profile-field-name> profile field for 1 user.
+        {{#*inline "z-profile-field-name"}}<strong>{{profile_field_name}}</strong>{{/inline}}
+    {{/tr}}
+{{else}}
+    {{#tr}}
+        This will delete the <z-profile-field-name></z-profile-field-name> profile field for <z-count></z-count> users.
+        {{#*inline "z-count"}}{{count}}{{/inline}}
+        {{#*inline "z-profile-field-name"}}<strong>{{profile_field_name}}</strong>{{/inline}}
+    {{/tr}}
+{{/if}}