From 6b80f010f5871a77cbaaa0659ba899192d6a471a Mon Sep 17 00:00:00 2001
From: Ganesh Pawar <pawarg256@gmail.com>
Date: Sat, 3 Sep 2022 22:15:02 +0530
Subject: [PATCH] delete attachments: Add confirmation dialog.

Fixes #22814
---
 static/js/attachments_ui.js                   | 30 ++++++++++++-------
 .../confirm_delete_attachment.hbs             |  3 ++
 2 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 static/templates/confirm_dialog/confirm_delete_attachment.hbs

diff --git a/static/js/attachments_ui.js b/static/js/attachments_ui.js
index a88150012a..42d52a09b5 100644
--- a/static/js/attachments_ui.js
+++ b/static/js/attachments_ui.js
@@ -1,9 +1,11 @@
 import $ from "jquery";
 
+import render_confirm_delete_attachment from "../templates/confirm_dialog/confirm_delete_attachment.hbs";
 import render_settings_upload_space_stats from "../templates/settings/upload_space_stats.hbs";
 import render_uploaded_files_list from "../templates/settings/uploaded_files_list.hbs";
 
 import * as channel from "./channel";
+import * as dialog_widget from "./dialog_widget";
 import {$t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import * as loading from "./loading";
@@ -49,16 +51,18 @@ function set_upload_space_stats() {
     $("#attachment-stats-holder").html(rendered_upload_stats_html);
 }
 
-function delete_attachments(attachment) {
-    const $status = $("#delete-upload-status");
-    channel.del({
-        url: "/json/attachments/" + attachment,
-        error(xhr) {
-            ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $status);
-        },
-        success() {
-            ui_report.success($t_html({defaultMessage: "Attachment deleted"}), $status);
-        },
+function delete_attachments(attachment, file_name) {
+    const html_body = render_confirm_delete_attachment({file_name});
+
+    dialog_widget.launch({
+        html_heading: $t_html({defaultMessage: "Delete file?"}),
+        html_body,
+        html_submit_button: $t_html({defaultMessage: "Delete"}),
+        id: "confirm_delete_file_modal",
+        focus_submit_on_open: true,
+        on_click: () =>
+            dialog_widget.submit_api_request(channel.del, "/json/attachments/" + attachment),
+        loading_spinner: true,
     });
 }
 
@@ -146,7 +150,11 @@ export function set_up_attachments() {
     loading.make_indicator($("#attachments_loading_indicator"), {text: "Loading..."});
 
     $("#uploaded_files_table").on("click", ".remove-attachment", (e) => {
-        delete_attachments($(e.target).closest(".uploaded_file_row").attr("data-attachment-id"));
+        const file_name = $(e.target).closest(".uploaded_file_row").attr("id");
+        delete_attachments(
+            $(e.target).closest(".uploaded_file_row").attr("data-attachment-id"),
+            file_name,
+        );
     });
 
     channel.get({
diff --git a/static/templates/confirm_dialog/confirm_delete_attachment.hbs b/static/templates/confirm_dialog/confirm_delete_attachment.hbs
new file mode 100644
index 0000000000..17f93ee4a6
--- /dev/null
+++ b/static/templates/confirm_dialog/confirm_delete_attachment.hbs
@@ -0,0 +1,3 @@
+{{#tr}}
+    <p><strong>{file_name}</strong> will be removed from the messages where it was shared. This action cannot be undone.</p>
+{{/tr}}