compose: Migrate compose-all-everyone to use compose_banner.

This is part several updates for #22524.

Testing note: I removed the test test_compose_all_everyone_confirm_clicked
since it heavily relies on the old way of rendering banners and is too
UI-focused (instead of logic focused) for me to feel like it's worth
testing that the banner is removed when clicking the button.

frontend_tests/node_tests/compose.js

@@ -561,7 +561,7 @@ test_ui("trigger_submit_compose_form", ({override, override_rewire}) => {
     assert.ok(compose_finish_checked);
 });
 
-test_ui("on_events", ({override, override_rewire}) => {
+test_ui("on_events", ({override}) => {
     initialize_handlers({override});
 
     override(rendered_markdown, "update_elements", () => {});
@@ -595,34 +595,6 @@ test_ui("on_events", ({override, override_rewire}) => {
         return helper;
     }
 
-    (function test_compose_all_everyone_confirm_clicked() {
-        const handler = $("#compose-all-everyone").get_on_handler(
-            "click",
-            ".compose-all-everyone-confirm",
-        );
-
-        const helper = setup_parents_and_mock_remove(
-            "compose-all-everyone",
-            "compose-all-everyone",
-            ".compose-all-everyone",
-        );
-
-        $("#compose-all-everyone").show();
-        $("#compose-send-status").show();
-
-        let compose_finish_checked = false;
-        override_rewire(compose, "finish", () => {
-            compose_finish_checked = true;
-        });
-
-        handler(helper.event);
-
-        assert.ok(helper.container_was_removed());
-        assert.ok(compose_finish_checked);
-        assert.ok(!$("#compose-all-everyone").visible());
-        assert.ok(!$("#compose-send-status").visible());
-    })();
-
     (function test_compose_not_subscribed_clicked() {
         const handler = $("#compose-send-status").get_on_handler("click", ".sub_unsub_button");
         const subscription = {

frontend_tests/node_tests/compose_validate.js

@@ -356,6 +356,7 @@ test_ui("validate_stream_message", ({override_rewire, mock_template}) => {
     // we are separating it up in different test. Though their relative position
     // of execution should not be changed.
     mock_banners();
+    $("#compose_banners .wildcard_warning").length = 0;
     page_params.user_id = me.user_id;
     page_params.realm_mandatory_topics = false;
     const sub = {
@@ -373,22 +374,19 @@ test_ui("validate_stream_message", ({override_rewire, mock_template}) => {
         assert.equal(stream_id, 101);
         return 16;
     };
-    mock_template("compose_all_everyone.hbs", false, (data) => {
-        assert.equal(data.count, 16);
-        return "compose_all_everyone_stub";
+    let wildcard_warning_rendered = false;
+    $("#compose_banner_area .wildcard_warning").length = 0;
+    mock_template("compose_banner/wildcard_warning.hbs", false, (data) => {
+        wildcard_warning_rendered = true;
+        assert.equal(data.subscriber_count, 16);
     });
-    let compose_content;
-    $("#compose-all-everyone").append = (data) => {
-        compose_content = data;
-    };
 
     override_rewire(compose_validate, "wildcard_mention_allowed", () => true);
     compose_state.message_content("Hey @**all**");
     assert.ok(!compose_validate.validate());
     assert.equal($("#compose-send-button").prop("disabled"), false);
     assert.ok(!$("#compose-send-status").visible());
-    assert.equal(compose_content, "compose_all_everyone_stub");
-    assert.ok($("#compose-all-everyone").visible());
+    assert.ok(wildcard_warning_rendered);
 
     let wildcards_not_allowed_rendered = false;
     mock_template("compose_banner/compose_banner.hbs", false, (data) => {

frontend_tests/puppeteer_tests/mention.ts

@@ -29,14 +29,9 @@ async function test_mention(page: Page): Promise<void> {
     assert.ok(stream_size > threshold);
     await page.click("#compose-send-button");
 
-    await page.waitForSelector(
-        `xpath///*[${common.has_class_x(
-            "compose-all-everyone-msg",
-        )} and contains(text(), "Are you sure you want to mention all")]`,
-    );
-    await page.click(".compose-all-everyone-confirm");
-    await page.waitForSelector(".compose-all-everyone-msg", {hidden: true});
-    await page.waitForSelector("#compose-send-status", {hidden: true});
+    await page.waitForSelector("#compose_banners .wildcard_warning", {visible: true});
+    await page.click("#compose_banners .wildcard_warning .compose_banner_action_button");
+    await page.waitForSelector(".wildcard_warning", {hidden: true});
 
     await common.check_messages_sent(page, "zhome", [["Verona > Test mention all", ["@all"]]]);
 }

static/js/compose.js

@@ -450,14 +450,16 @@ export function initialize() {
 
     upload.feature_check($("#compose .compose_upload_file"));
 
-    $("#compose-all-everyone").on("click", ".compose-all-everyone-confirm", (event) => {
+    $("#compose_banners").on(
+        "click",
+        `.${compose_error.CLASSNAMES.wildcard_warning} .compose_banner_action_button`,
+        (event) => {
             event.preventDefault();
-
-        $(event.target).parents(".compose-all-everyone").remove();
-        compose_validate.set_user_acknowledged_all_everyone_flag(true);
-        compose_validate.clear_all_everyone_warnings();
+            compose_validate.clear_wildcard_warnings();
+            compose_validate.set_user_acknowledged_wildcard_flag(true);
             finish();
-    });
+        },
+    );
 
     $("#compose-send-status").on("click", ".sub_unsub_button", (event) => {
         event.preventDefault();

static/js/compose_actions.js

@@ -109,9 +109,9 @@ function clear_box() {
 
     // TODO: Better encapsulate at-mention warnings.
     compose_validate.clear_topic_resolved_warning();
-    compose_validate.clear_all_everyone_warnings();
+    compose_validate.clear_wildcard_warnings();
     compose.clear_private_stream_alert();
-    compose_validate.set_user_acknowledged_all_everyone_flag(undefined);
+    compose_validate.set_user_acknowledged_wildcard_flag(undefined);
 
     compose.clear_preview_area();
     clear_textarea();

static/js/compose_error.ts

@@ -13,6 +13,7 @@ export const CLASSNAMES = {
     // warnings
     topic_resolved: "topic_resolved",
     recipient_not_subscribed: "recipient_not_subscribed",
+    wildcard_warning: "wildcard_warning",
     // errors
     empty_message: "empty_message",
     wildcards_not_allowed: "wildcards_not_allowed",

static/js/compose_validate.js

@@ -1,9 +1,9 @@
 import $ from "jquery";
 
 import * as resolved_topic from "../shared/js/resolved_topic";
-import render_compose_all_everyone from "../templates/compose_all_everyone.hbs";
 import render_compose_banner from "../templates/compose_banner/compose_banner.hbs";
 import render_not_subscribed_warning from "../templates/compose_banner/not_subscribed_warning.hbs";
+import render_wildcard_warning from "../templates/compose_banner/wildcard_warning.hbs";
 import render_compose_not_subscribed from "../templates/compose_not_subscribed.hbs";
 import render_compose_private_stream_alert from "../templates/compose_private_stream_alert.hbs";
 
@@ -22,7 +22,7 @@ import * as stream_data from "./stream_data";
 import {user_settings} from "./user_settings";
 import * as util from "./util";
 
-let user_acknowledged_all_everyone = false;
+let user_acknowledged_wildcard = false;
 let wildcard_mention;
 
 export let wildcard_mention_large_stream_threshold = 15;
@@ -226,32 +226,36 @@ export function warn_if_topic_resolved(topic_changed) {
     }
 }
 
-function show_all_everyone_warnings(stream_id) {
-    const stream_count = peer_data.get_subscriber_count(stream_id) || 0;
+function show_wildcard_warnings(stream_id) {
+    const subscriber_count = peer_data.get_subscriber_count(stream_id) || 0;
 
-    const all_everyone_template = render_compose_all_everyone({
-        count: stream_count,
-        mention: wildcard_mention,
+    const $compose_banner_area = $("#compose_banners");
+    const classname = compose_error.CLASSNAMES.wildcard_warning;
+    const $wildcard_template = render_wildcard_warning({
+        banner_type: compose_error.WARNING,
+        subscriber_count,
+        stream_name: compose_state.stream_name(),
+        wildcard_mention,
+        button_text: $t({defaultMessage: "Yes, send"}),
+        hide_close_button: true,
+        classname,
     });
-    const $error_area_all_everyone = $("#compose-all-everyone");
 
     // only show one error for any number of @all or @everyone mentions
-    if (!$error_area_all_everyone.is(":visible")) {
-        $error_area_all_everyone.append(all_everyone_template);
+    if ($(`#compose_banners .${classname}`).length === 0) {
+        $compose_banner_area.append($wildcard_template);
     }
 
-    $error_area_all_everyone.show();
-    user_acknowledged_all_everyone = false;
+    user_acknowledged_wildcard = false;
 }
 
-export function clear_all_everyone_warnings() {
-    $("#compose-all-everyone").hide();
-    $("#compose-all-everyone").empty();
-    $("#compose-send-status").hide();
+export function clear_wildcard_warnings() {
+    const classname = compose_error.CLASSNAMES.wildcard_warning;
+    $(`#compose_banners .${classname}`).remove();
 }
 
-export function set_user_acknowledged_all_everyone_flag(value) {
-    user_acknowledged_all_everyone = value;
+export function set_user_acknowledged_wildcard_flag(value) {
+    user_acknowledged_wildcard = value;
 }
 
 export function get_invalid_recipient_emails() {
@@ -346,11 +350,11 @@ export function set_wildcard_mention_large_stream_threshold(value) {
 }
 
 function validate_stream_message_mentions(stream_id) {
-    const stream_count = peer_data.get_subscriber_count(stream_id) || 0;
+    const subscriber_count = peer_data.get_subscriber_count(stream_id) || 0;
 
     // If the user is attempting to do a wildcard mention in a large
     // stream, check if they permission to do so.
-    if (wildcard_mention !== null && stream_count > wildcard_mention_large_stream_threshold) {
+    if (wildcard_mention !== null && subscriber_count > wildcard_mention_large_stream_threshold) {
         if (!wildcard_mention_allowed()) {
             compose_error.show_error_message(
                 $t({
@@ -362,12 +366,9 @@ function validate_stream_message_mentions(stream_id) {
             return false;
         }
 
-        if (
-            user_acknowledged_all_everyone === undefined ||
-            user_acknowledged_all_everyone === false
-        ) {
+        if (user_acknowledged_wildcard === undefined || user_acknowledged_wildcard === false) {
             // user has not seen a warning message yet if undefined
-            show_all_everyone_warnings(stream_id);
+            show_wildcard_warnings(stream_id);
 
             $("#compose-send-button").prop("disabled", false);
             compose_ui.hide_compose_spinner();
@@ -375,10 +376,10 @@ function validate_stream_message_mentions(stream_id) {
         }
     } else {
         // the message no longer contains @all or @everyone
-        clear_all_everyone_warnings();
+        clear_wildcard_warnings();
     }
     // at this point, the user has either acknowledged the warning or removed @all / @everyone
-    user_acknowledged_all_everyone = undefined;
+    user_acknowledged_wildcard = undefined;
 
     return true;
 }

static/styles/compose.css

@@ -382,7 +382,6 @@
 }
 
 .compose_private_stream_alert,
-.compose-all-everyone,
 .compose_not_subscribed {
     padding: 4px 0;
     display: flex;
@@ -404,7 +403,6 @@
     width: 10px;
 }
 
-.compose-all-everyone-controls,
 .compose_private_stream_alert_controls {
     float: right;
     position: relative;

static/templates/compose.hbs

@@ -51,7 +51,6 @@
             <span class="compose-send-status-close">&times;</span>
             <span id="compose-error-msg"></span>
         </div>
-        <div id="compose-all-everyone" class="alert home-error-bar"></div>
         <div id="compose_not_subscribed" class="alert home-error-bar"></div>
         <div id="compose_private_stream_alert" class="alert home-error-bar"></div>
         <div id="out-of-view-notification" class="notification-alert"></div>

static/templates/compose_all_everyone.hbs

@@ -1,14 +0,0 @@
-<div class="compose-all-everyone">
-    <span class="compose-all-everyone-msg">
-        {{#tr}}
-        Are you sure you want to mention all <strong>{count}</strong> people in this stream?
-        <br />
-        This will send email and mobile push notifications to most of those <strong>{count}</strong> users.
-        <br />
-        If you don't want to do that, please edit your message to remove the <strong>@{mention}</strong> mention.
-        {{/tr}}
-    </span>
-    <span class="compose-all-everyone-controls">
-        <button type="button" class="btn btn-warning compose-all-everyone-confirm">{{t "Yes, send" }}</button>
-    </span>
-</div>

static/templates/compose_banner/compose_banner.hbs

@@ -11,5 +11,9 @@
     {{#if button_text}}
     <button class="compose_banner_action_button" >{{button_text}}</button>
     {{/if}}
+    {{#if hide_close_button}}
+    {{!-- hide_close_button is null by default, and false if explicitly set as false. --}}
+    {{else}}
     <a role="button" class="zulip-icon zulip-icon-close compose_banner_close_button"></a>
+    {{/if}}
 </div>

static/templates/compose_banner/wildcard_warning.hbs

@@ -0,0 +1,7 @@
+{{#> compose_banner }}
+    <p>
+        {{#tr}}
+        Are you sure you want to send @-mention notifications to the <strong>{subscriber_count}</strong> users subscribed to #{stream_name}? If not, please edit your message to remove the <strong>@{wildcard_mention}</strong> mention.
+        {{/tr}}
+    </p>
+{{/compose_banner}}