From ab0db73e62a91dbc493f006814a2dbd2535d2a10 Mon Sep 17 00:00:00 2001
From: aryanshridhar <aryanshridhar7@gmail.com>
Date: Thu, 24 Jun 2021 12:56:39 +0530
Subject: [PATCH] topic_sidebar: Add support to copy topic link to clipboard.

This commits adds the support to copy a topic link
to the clipboard by introducing a new "Copy link to topic"
topic sidebar action which is placed below the
"Mark all messages as read" action.

Basically, this does the same job as right clicking upon the
topic name and selecting "Copy link".

Closes #18946
---
 static/js/stream_popover.js                | 23 ++++++++++++++++++++++
 static/templates/topic_sidebar_actions.hbs |  7 +++++++
 2 files changed, 30 insertions(+)

diff --git a/static/js/stream_popover.js b/static/js/stream_popover.js
index fdfbcf7441..e9f686de07 100644
--- a/static/js/stream_popover.js
+++ b/static/js/stream_popover.js
@@ -1,3 +1,4 @@
+import ClipboardJS from "clipboard";
 import $ from "jquery";
 import _ from "lodash";
 
@@ -188,6 +189,25 @@ function update_spectrum(popover, update_func) {
     popover_root.css("top", top + "px");
 }
 
+// Builds the `Copy link to topic` topic action.
+function build_topic_link_clipboard(url) {
+    if (!url) {
+        return;
+    }
+
+    const copy_event = new ClipboardJS(".sidebar-popover-copy-link-to-topic", {
+        text() {
+            return url;
+        },
+    });
+
+    // Hide the topic popover once the url is successfully
+    // copied to clipboard.
+    copy_event.on("success", () => {
+        hide_topic_popover();
+    });
+}
+
 function build_stream_popover(opts) {
     const elt = opts.elt;
     const stream_id = opts.stream_id;
@@ -391,12 +411,15 @@ export function register_click_handlers() {
         const stream_li = $(elt).closest(".narrow-filter").expectOne();
         const stream_id = elem_to_stream_id(stream_li);
         const topic_name = $(elt).closest("li").expectOne().attr("data-topic-name");
+        const url = $(elt).closest("li").find(".topic-name").expectOne().prop("href");
 
         build_topic_popover({
             elt,
             stream_id,
             topic_name,
         });
+
+        build_topic_link_clipboard(url);
     });
 
     $("#global_filters").on("click", ".all-messages-sidebar-menu-icon", build_all_messages_popover);
diff --git a/static/templates/topic_sidebar_actions.hbs b/static/templates/topic_sidebar_actions.hbs
index c438d3cf6b..32c3117822 100644
--- a/static/templates/topic_sidebar_actions.hbs
+++ b/static/templates/topic_sidebar_actions.hbs
@@ -40,6 +40,13 @@
         </a>
     </li>
 
+    <li>
+        <a tabindex="0" class="sidebar-popover-copy-link-to-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+            <i class="fa fa-link" aria-hidden="true"></i>
+            {{t "Copy link to topic"}}
+        </a>
+    </li>
+
     {{#if can_move_topic}}
     <hr />