support: Replace common.copy_data_attribute_value with clipboard.js.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

corporate/tests/test_support_views.py

@@ -729,8 +729,10 @@ class TestSupportEndpoint(ZulipTestCase):
                 [
                     f"<b>Admins</b>: {self.example_email('iago')}\n",
                     f"<b>Owners</b>: {self.example_email('desdemona')}\n",
-                    'class="copy-button" data-copytext="{}">'.format(self.example_email("iago")),
-                    'class="copy-button" data-copytext="{}">'.format(
+                    'class="copy-button" data-clipboard-text="{}">'.format(
+                        self.example_email("iago")
+                    ),
+                    'class="copy-button" data-clipboard-text="{}">'.format(
                         self.example_email("desdemona")
                     ),
                 ],

templates/corporate/support/realm_details.html

@@ -8,7 +8,7 @@
     {% set owner_emails_string = get_realm_owner_emails_as_string(realm) %}
     <b>Owners</b>: {{ owner_emails_string }}
     {% if owner_emails_string %}
-    <a title="Copy emails" class="copy-button" data-copytext="{{ owner_emails_string }}">
+    <a title="Copy emails" class="copy-button" data-clipboard-text="{{ owner_emails_string }}">
         <i class="fa fa-copy"></i>
     </a>
     {% endif %}
@@ -16,7 +16,7 @@
     {% set admin_emails_string = get_realm_admin_emails_as_string(realm) %}
     <b>Admins</b>: {{ admin_emails_string }}
     {% if admin_emails_string %}
-    <a title="Copy emails" class="copy-button" data-copytext="{{ admin_emails_string }}">
+    <a title="Copy emails" class="copy-button" data-clipboard-text="{{ admin_emails_string }}">
         <i class="fa fa-copy"></i>
     </a>
     {% endif %}
@@ -24,7 +24,7 @@
     {% set first_human_user = realm.get_first_human_user() %}
     {% if first_human_user %}
     <b>First human user</b>: {{ first_human_user.delivery_email  }}
-    <a title="Copy emails" class="copy-button" data-copytext="{{ first_human_user.delivery_email }}">
+    <a title="Copy emails" class="copy-button" data-clipboard-text="{{ first_human_user.delivery_email }}">
         <i class="fa fa-copy"></i>
     </a>
     {% else %}

templates/corporate/support/remote_realm_details.html

@@ -21,7 +21,7 @@
         {% set billing_emails_string = get_remote_realm_billing_user_emails(remote_realm) %}
         <b>Billing users</b>: {{ billing_emails_string }}
         {% if billing_emails_string %}
-        <a title="Copy emails" class="copy-button" data-copytext="{{ billing_emails_string }}">
+        <a title="Copy emails" class="copy-button" data-clipboard-text="{{ billing_emails_string }}">
             <i class="fa fa-copy"></i>
         </a>
         {% endif %}

templates/corporate/support/remote_server_support.html

@@ -50,14 +50,14 @@
                         <p class="support-section-header">Has a discount 💸</p>
                     {% endif %}
                     <b>Contact email</b>: {{ remote_server.contact_email }}
-                    <a title="Copy email" class="copy-button" data-copytext="{{ remote_server.contact_email }}">
+                    <a title="Copy email" class="copy-button" data-clipboard-text="{{ remote_server.contact_email }}">
                         <i class="fa fa-copy"></i>
                     </a>
                     <br />
                     {% set billing_emails_string = get_remote_server_billing_user_emails(remote_server) %}
                     <b>Billing users</b>: {{ billing_emails_string }}
                     {% if billing_emails_string %}
-                    <a title="Copy emails" class="copy-button" data-copytext="{{ billing_emails_string }}">
+                    <a title="Copy emails" class="copy-button" data-clipboard-text="{{ billing_emails_string }}">
                         <i class="fa fa-copy"></i>
                     </a>
                     {% endif %}

templates/corporate/support/support.html

@@ -100,7 +100,7 @@
                 <b>Email</b>: {{ email }}<br />
                 {% endif %}
                 <b>Link</b>: {{ confirmation.url }}
-                <a title="Copy link" class="copy-button" data-copytext="{{ confirmation.url }}">
+                <a title="Copy link" class="copy-button" data-clipboard-text="{{ confirmation.url }}">
                     <i class="fa fa-copy"></i>
                 </a><br />
                 <b>Expires in</b>: {{ confirmation.expires_in }}<br />

web/src/support/support.ts

@@ -1,7 +1,6 @@
+import ClipboardJS from "clipboard";
 import $ from "jquery";
 
-import * as common from "../common";
-
 $(() => {
     $("body").on("click", ".scrub-realm-button", function (e) {
         e.preventDefault();
@@ -43,7 +42,5 @@ $(() => {
         }
     });
 
-    $("a.copy-button").on("click", function () {
-        common.copy_data_attribute_value($(this), "copytext");
-    });
+    new ClipboardJS("a.copy-button");
 });

web/tests/support.test.js

@@ -6,7 +6,7 @@ const path = require("path");
 
 const {JSDOM} = require("jsdom");
 
-const {zrequire} = require("./lib/namespace");
+const {mock_cjs, zrequire} = require("./lib/namespace");
 const {run_test} = require("./lib/test");
 const $ = require("./lib/zjquery");
 
@@ -17,6 +17,8 @@ const template = fs.readFileSync(
 const dom = new JSDOM(template, {pretendToBeVisual: true});
 const document = dom.window.document;
 
+mock_cjs("clipboard", class Clipboard {});
+
 zrequire("../src/support/support");
 
 run_test("scrub_realm", () => {