copy_link: Add onSuccess listener to copy clipboard.

Previously, we showed a `Copied!` alert on copying link to a message irrespective of the fact that the link was copied or not. Hence add an event listener that shows the `Copied!` tooltip only if the action was successful. Fixes #19019.
zulip · Jul 2, 2021 · 782fca7 · 782fca7
1 parent b1474dd
commit 782fca7
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/frontend_tests/node_tests/popovers.js b/frontend_tests/node_tests/popovers.js
@@ -100,7 +100,9 @@ function test_ui(label, f) {
         page_params.is_admin = false;
         page_params.realm_email_address_visibility = 3;
         page_params.custom_profile_fields = [];
-        override(popovers, "clipboard_enable", noop);
+        override(popovers, "clipboard_enable", () => ({
+            on: noop,
+        }));
         popovers.clear_for_testing();
         popovers.register_click_handlers();
         f({override, mock_template});

diff --git a/static/js/popovers.js b/static/js/popovers.js
@@ -1174,11 +1174,10 @@ export function register_click_handlers() {
         e.preventDefault();
     });
 
-    clipboard_enable(".copy_link");
-
-    $("body").on("click", ".copy_link", function (e) {
+    clipboard_enable(".copy_link").on("success", (e) => {
         hide_actions_popover();
-        const message_id = $(this).attr("data-message-id");
+        // e.trigger returns the DOM element triggering the copy action
+        const message_id = e.trigger.getAttribute("data-message-id");
         const row = $(`[zid='${CSS.escape(message_id)}']`);
         row.find(".alert-msg")
             .text($t({defaultMessage: "Copied!"}))
@@ -1191,9 +1190,6 @@ export function register_click_handlers() {
             // We unfocus this so keyboard shortcuts, etc., will work again.
             $(":focus").trigger("blur");
         }, 0);
-
-        e.stopPropagation();
-        e.preventDefault();
     });
 
     clipboard_enable(".copy_mention_syntax");

diff --git a/static/templates/actions_popover_content.hbs b/static/templates/actions_popover_content.hbs
@@ -97,7 +97,7 @@
     {{/if}}
 
     <li>
-        <a href="#" class="copy_link" data-message-id="{{message_id}}" data-clipboard-text="{{ conversation_time_uri }}">
+        <a class="copy_link" data-message-id="{{message_id}}" data-clipboard-text="{{ conversation_time_uri }}">
             <i class="fa fa-link" aria-hidden="true"></i> {{t "Copy link to message" }}
         </a>
     </li>