stream settings: Allow modifying of email address.

This allows the user to modify the stream email address
by adding or removing tags before copying.

Fixes part of #19519.

frontend_tests/node_tests/stream_edit.js

@@ -0,0 +1,30 @@
+"use strict";
+
+const {strict: assert} = require("assert");
+
+const {get_stream_email_address} = require("../../static/js/stream_edit");
+const {run_test} = require("../zjsunit/test");
+
+run_test("get_stream_email_address", () => {
+    let address = "announce.747b04693224b5d2f0d409b66ccd3866@zulipdev.com";
+    let flags = ["show-sender", "include-footer"];
+
+    let new_address = get_stream_email_address(flags, address);
+    assert.equal(
+        new_address,
+        "announce.747b04693224b5d2f0d409b66ccd3866.show-sender.include-footer@zulipdev.com",
+    );
+
+    address = "announce.747b04693224b5d2f0d409b66ccd3866.include-quotes@zulipdev.com";
+
+    new_address = get_stream_email_address(flags, address);
+    assert.equal(
+        new_address,
+        "announce.747b04693224b5d2f0d409b66ccd3866.show-sender.include-footer@zulipdev.com",
+    );
+
+    flags = [];
+
+    new_address = get_stream_email_address(flags, address);
+    assert.equal(new_address, "announce.747b04693224b5d2f0d409b66ccd3866@zulipdev.com");
+});

static/js/stream_edit.js

@@ -466,6 +466,18 @@ export function archive_stream(stream_id, $alert_element, $stream_row) {
     });
 }
 
+export function get_stream_email_address(flags, address) {
+    const clean_address = address
+        .replace(".show-sender", "")
+        .replace(".include-footer", "")
+        .replace(".include-quotes", "")
+        .replace(".prefer-html", "");
+
+    const flag_string = flags.map((flag) => "." + flag).join("");
+
+    return clean_address.replace("@", flag_string + "@");
+}
+
 export function initialize() {
     $("#main_div").on("click", ".stream_sub_unsub_button", (e) => {
         e.preventDefault();
@@ -600,10 +612,32 @@ export function initialize() {
 
         const stream_id = get_stream_id(e.target);
         const stream = sub_store.get(stream_id);
-        const address = stream.email_address;
+        let address = stream.email_address;
 
         const copy_email_address = render_copy_email_address_modal({
             email_address: address,
+            tags: [
+                {
+                    name: "show-sender",
+                    description: $t({
+                        defaultMessage: "The sender's email address",
+                    }),
+                },
+                {
+                    name: "include-footer",
+                    description: $t({defaultMessage: "Email footers (e.g., signature)"}),
+                },
+                {
+                    name: "include-quotes",
+                    description: $t({defaultMessage: "Quoted original email (in replies)"}),
+                },
+                {
+                    name: "prefer-html",
+                    description: $t({
+                        defaultMessage: "Use html encoding (not recommended)",
+                    }),
+                },
+            ],
         });
 
         dialog_widget.launch({
@@ -611,15 +645,31 @@ export function initialize() {
             html_body: copy_email_address,
             id: "copy_email_address_modal",
             html_submit_button: $t_html({defaultMessage: "Copy address"}),
+            help_link: "/help/message-a-stream-by-email#configuration-options",
             on_click: () => {},
             close_on_submit: true,
         });
+        $("#show-sender").prop("checked", true);
 
         new ClipboardJS("#copy_email_address_modal .dialog_submit_button", {
             text() {
                 return address;
             },
         });
+
+        $("#copy_email_address_modal .tag-checkbox").on("change", () => {
+            const $checked_checkboxes = $(".copy-email-modal").find("input:checked");
+
+            const flags = [];
+
+            $($checked_checkboxes).each(function () {
+                flags.push($(this).attr("id"));
+            });
+
+            address = get_stream_email_address(flags, address);
+
+            $(".email-address").text(address);
+        });
     });
 
     $("#manage_streams_container").on(

static/styles/modal.css

@@ -297,4 +297,12 @@
     .inline {
         display: inline;
     }
+
+    .question-which-parts {
+        padding-bottom: 10px;
+    }
+
+    .stream-email-header {
+        font-size: 18px;
+    }
 }

static/templates/stream_settings/copy_email_address_modal.hbs

@@ -1,3 +1,26 @@
-<div class="stream-email">
+<div class="copy-email-modal">
-    <div class="email-address">{{email_address}}</div>
+    <div class="new-style">
+        <p class="question-which-parts">
+            {{t "Which parts of the email should be included in the Zulip message sent to this stream?"}}
+        </p>
+        {{#each tags}}
+            {{#if (eq this.name "prefer-html") }}
+            <hr />
+            {{/if}}
+            <div class="input-group" id="{{this.name}}-input-group">
+                <label class="checkbox">
+                    <input class="tag-checkbox" id="{{ this.name }}" type="checkbox"/>
+                    <span></span>
+                </label>
+                <label class="inline" for="{{this.name}}">{{{this.description}}}</label>
+            </div>
+        {{/each}}
+        <hr />
+        <p class="stream-email-header">
+            {{t "Stream email address:"}}
+        </p>
+        <div class="stream-email">
+            <div class="email-address">{{email_address}}</div>
+        </div>
+    </div>
 </div>