settings: Add "Copied" tooltip in bots/streams copy feedback.

This provides a bit nicer feedback to the user that the copy worked.

Fixes #26181

web/src/settings_bots.js

@@ -20,6 +20,7 @@ import {page_params} from "./page_params";
 import * as people from "./people";
 import * as settings_config from "./settings_config";
 import * as settings_users from "./settings_users";
+import {show_copied_confirmation} from "./tippyjs";
 import * as ui_report from "./ui_report";
 import * as user_profile from "./user_profile";
 
@@ -610,7 +611,7 @@ export function set_up() {
         user_profile.show_user_profile(bot, "user-profile-streams-tab");
     });
 
-    new ClipboardJS("#copy_zuliprc", {
+    const clipboard = new ClipboardJS("#copy_zuliprc", {
         text(trigger) {
             const $bot_info = $(trigger).closest(".bot-information-box").find(".bot_info");
             const bot_id = Number.parseInt($bot_info.attr("data-user-id"), 10);
@@ -620,6 +621,11 @@ export function set_up() {
         },
     });
 
+    // Show a tippy tooltip when the bot zuliprc is copied
+    clipboard.on("success", (e) => {
+        show_copied_confirmation(e.trigger);
+    });
+
     $("#bots_lists_navbar .active-bots-tab").on("click", (e) => {
         e.preventDefault();
         e.stopPropagation();

web/src/stream_edit.js

@@ -32,6 +32,7 @@ import * as stream_settings_data from "./stream_settings_data";
 import * as stream_settings_ui from "./stream_settings_ui";
 import * as stream_ui_updates from "./stream_ui_updates";
 import * as sub_store from "./sub_store";
+import {show_copied_confirmation} from "./tippyjs";
 import * as ui_report from "./ui_report";
 import * as user_groups from "./user_groups";
 import {user_settings} from "./user_settings";
@@ -514,16 +515,21 @@ export function initialize() {
             html_submit_button: $t_html({defaultMessage: "Copy address"}),
             help_link: "/help/message-a-stream-by-email#configuration-options",
             on_click() {},
-            close_on_submit: true,
+            close_on_submit: false,
         });
         $("#show-sender").prop("checked", true);
 
-        new ClipboardJS("#copy_email_address_modal .dialog_submit_button", {
+        const clipboard = new ClipboardJS("#copy_email_address_modal .dialog_submit_button", {
             text() {
                 return address;
             },
         });
 
+        // Show a tippy tooltip when the stream email address copied
+        clipboard.on("success", (e) => {
+            show_copied_confirmation(e.trigger);
+        });
+
         $("#copy_email_address_modal .tag-checkbox").on("change", () => {
             const $checked_checkboxes = $(".copy-email-modal").find("input:checked");
 

web/tests/settings_bots.test.js

@@ -19,8 +19,13 @@ const bot_data_params = {
     ],
 };
 
-function ClipboardJS(sel) {
+class ClipboardJS {
-    assert.equal(sel, "#copy_zuliprc");
+    constructor(sel) {
+        assert.equal(sel, "#copy_zuliprc");
+    }
+    on() {
+        // do nothing.
+    }
 }
 mock_cjs("clipboard", ClipboardJS);