From 0c9aec24fdd23231b52a511f77af35bf2d8b0beb Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Tue, 1 Aug 2023 11:24:52 -0500
Subject: [PATCH] alerts: Show Copied! Tippy alerts in message area.

This commit properly displays Tippy Copied! alerts in two cases:

1) On the clipboard icon when copying message source.
2) On the hover controls when copying the link to a message.

Fixes #21036.
---
 web/src/message_edit.js  | 17 ++++++++++-------
 web/src/popover_menus.js | 15 ++++-----------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/web/src/message_edit.js b/web/src/message_edit.js
index b2df13d345..3e3c33032f 100644
--- a/web/src/message_edit.js
+++ b/web/src/message_edit.js
@@ -33,6 +33,7 @@ import * as resize from "./resize";
 import * as rows from "./rows";
 import * as settings_data from "./settings_data";
 import * as timerender from "./timerender";
+import {show_copied_confirmation} from "./tippyjs";
 import * as ui_report from "./ui_report";
 import * as upload from "./upload";
 import * as util from "./util";
@@ -399,13 +400,15 @@ function create_copy_to_clipboard_handler($row, source, message_id) {
     });
 
     clipboard.on("success", () => {
-        end_message_row_edit($row);
-        $row.find(".alert-msg").text($t({defaultMessage: "Copied!"}));
-        $row.find(".alert-msg").css("display", "block");
-        $row.find(".alert-msg").delay(1000).fadeOut(300);
-        if ($(".tooltip").is(":visible")) {
-            $(".tooltip").hide();
-        }
+        // Hide the Tippy and source box after a 600ms delay
+        const tippy_timeout_in_ms = 600;
+        show_copied_confirmation(
+            $row.find(".copy_message")[0],
+            () => {
+                end_message_row_edit($row);
+            },
+            tippy_timeout_in_ms,
+        );
     });
 }
 
diff --git a/web/src/popover_menus.js b/web/src/popover_menus.js
index 274a9e6415..fa897b00e3 100644
--- a/web/src/popover_menus.js
+++ b/web/src/popover_menus.js
@@ -31,7 +31,7 @@ import * as drafts from "./drafts";
 import * as emoji_picker from "./emoji_picker";
 import * as flatpickr from "./flatpickr";
 import * as giphy from "./giphy";
-import {$t, $t_html} from "./i18n";
+import {$t_html} from "./i18n";
 import * as message_edit from "./message_edit";
 import * as message_edit_history from "./message_edit_history";
 import * as message_lists from "./message_lists";
@@ -48,6 +48,7 @@ import * as starred_messages from "./starred_messages";
 import * as starred_messages_ui from "./starred_messages_ui";
 import * as stream_popover from "./stream_popover";
 import * as timerender from "./timerender";
+import {show_copied_confirmation} from "./tippyjs";
 import {parse_html} from "./ui_util";
 import * as unread_ops from "./unread_ops";
 import {user_settings} from "./user_settings";
@@ -784,16 +785,8 @@ export function initialize() {
                 instance.hide();
             });
 
-            new ClipboardJS($popper.find(".copy_link")[0]).on("success", (e) => {
-                // e.trigger returns the DOM element triggering the copy action
-                const message_id = e.trigger.dataset.messageId;
-                const $row = $(`[zid='${CSS.escape(message_id)}']`);
-                $row.find(".alert-msg")
-                    .text($t({defaultMessage: "Copied!"}))
-                    .css("display", "block")
-                    .delay(1000)
-                    .fadeOut(300);
-
+            new ClipboardJS($popper.find(".copy_link")[0]).on("success", () => {
+                show_copied_confirmation($(instance.reference).closest(".message_controls")[0]);
                 setTimeout(() => {
                     // The Clipboard library works by focusing to a hidden textarea.
                     // We unfocus this so keyboard shortcuts, etc., will work again.