stream settings: Add copy email address modal.

This moves the stream email address to a modal
and adds a copy button.

Fixes part of #19519.

static/js/stream_edit.js

@@ -1,8 +1,10 @@
+import ClipboardJS from "clipboard";
 import $ from "jquery";
 
 import render_settings_deactivation_stream_modal from "../templates/confirm_dialog/confirm_deactivate_stream.hbs";
 import render_stream_privacy from "../templates/stream_privacy.hbs";
 import render_change_stream_info_modal from "../templates/stream_settings/change_stream_info_modal.hbs";
+import render_copy_email_address_modal from "../templates/stream_settings/copy_email_address_modal.hbs";
 import render_stream_description from "../templates/stream_settings/stream_description.hbs";
 import render_stream_settings from "../templates/stream_settings/stream_settings.hbs";
 import render_stream_types from "../templates/stream_settings/stream_types.hbs";
@@ -592,6 +594,34 @@ export function initialize() {
         settings_ui.do_settings_change(channel.patch, url, data, $status_element);
     }
 
+    $("#manage_streams_container").on("click", ".copy_email_button", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const stream_id = get_stream_id(e.target);
+        const stream = sub_store.get(stream_id);
+        const address = stream.email_address;
+
+        const copy_email_address = render_copy_email_address_modal({
+            email_address: address,
+        });
+
+        dialog_widget.launch({
+            html_heading: $t_html({defaultMessage: "Generate stream email address"}),
+            html_body: copy_email_address,
+            id: "copy_email_address_modal",
+            html_submit_button: $t_html({defaultMessage: "Copy address"}),
+            on_click: () => {},
+            close_on_submit: true,
+        });
+
+        new ClipboardJS("#copy_email_address_modal .dialog_submit_button", {
+            text() {
+                return address;
+            },
+        });
+    });
+
     $("#manage_streams_container").on(
         "click",
         ".close-modal-btn, .close-change-stream-info-modal",

static/js/stream_ui_updates.js

@@ -117,14 +117,11 @@ export function update_regular_sub_settings(sub) {
     }
     const $settings = $(`.subscription_settings[data-stream-id='${CSS.escape(sub.stream_id)}']`);
     if (sub.subscribed) {
-        if ($settings.find(".email-address").val().length === 0) {
-            // Rerender stream email address, if not.
-            $settings.find(".email-address").text(sub.email_address);
-            $settings.find(".stream-email-box").show();
-        }
         $settings.find(".personal_settings").addClass("in");
+        $settings.find(".copy_email_button").prop("disabled", false);
     } else {
         $settings.find(".personal_settings").removeClass("in");
+        $settings.find(".copy_email_button").prop("disabled", true);
     }
 }
 

static/styles/modal.css

@@ -290,3 +290,11 @@
     display: flex;
     justify-content: center;
 }
+
+#copy_email_address_modal {
+    width: 800px;
+
+    .inline {
+        display: inline;
+    }
+}

static/styles/subscriptions.css

@@ -22,11 +22,8 @@
 
 .stream-email {
     font-family: "Source Code Pro", monospace;
-    padding: 5px;
-    /* We need a smaller font because this is fixed-width and we really
-       want it to fit without line-wrapping. 82.5% copies our code block
-       font size. */
-    font-size: 82.5%;
+    padding: 10px;
+    font-size: 0.85rem;
     background-color: hsl(0, 0%, 98%);
     border: 1px solid hsl(0, 0%, 87%);
     border-radius: 4px;
@@ -938,6 +935,10 @@ h4.user_group_setting_subsection_title {
         }
     }
 
+    .copy_email_button {
+        padding: 10px 15px;
+    }
+
     .loading_indicator_text {
         font-weight: 400;
         line-height: 20px;

static/templates/stream_settings/copy_email_address_modal.hbs

@@ -0,0 +1,3 @@
+<div class="stream-email">
+    <div class="email-address">{{email_address}}</div>
+</div>

static/templates/stream_settings/stream_settings.hbs

@@ -69,9 +69,14 @@
                     {{t "Email address" }}
                     {{> ../help_link_widget link="/help/message-a-stream-by-email" }}
                 </h3>
-                <div class="stream-email">
-                    <span class="email-address">{{sub.email_address}}</span>
-                </div>
+                <p>
+                    {{t "You can use email to send messages to Zulip streams."}}
+                </p>
+                <p>
+                    <button class="button rounded copy_email_button" type="button" name="button">
+                        <span class="copy_button">{{#tr}}Generate email address{{/tr}}</span>
+                    </button>
+                </p>
             </div>
         </div>