compose: Migrate compose_private_stream_alert to use compose_banner.

This is part several updates for #22524.

Notes:

* data-stream_name isn't needed in the template (before or after),
  since there is not even an action button that could use it.

frontend_tests/node_tests/compose_validate.js

@@ -622,11 +622,20 @@ test_ui("warn_if_private_stream_is_linked", ({mock_template}) => {
 
     peer_data.set_subscribers(denmark.stream_id, [1, 2, 3]);
 
+    let banner_rendered = false;
+    mock_template("compose_banner/private_stream_warning.hbs", false, (data) => {
+        assert.equal(data.classname, compose_error.CLASSNAMES.private_stream_warning);
+        assert.equal(data.stream_name, "Denmark");
+        banner_rendered = true;
+        return "private_stream_warning_stub";
+    });
+
     function test_noop_case(invite_only) {
+        banner_rendered = false;
         compose_state.set_message_type("stream");
         denmark.invite_only = invite_only;
         compose_validate.warn_if_private_stream_is_linked(denmark);
-        assert.equal($("#compose_private_stream_alert").visible(), false);
+        assert.ok(!banner_rendered);
     }
 
     test_noop_case(false);
@@ -637,44 +646,15 @@ test_ui("warn_if_private_stream_is_linked", ({mock_template}) => {
     $("#compose_private").hide();
     compose_state.set_message_type("stream");
 
-    const checks = [
-        (function () {
-            let called;
-            mock_template("compose_private_stream_alert.hbs", false, (context) => {
-                called = true;
-                assert.equal(context.stream_name, "Denmark");
-                return "fake-compose_private_stream_alert-template";
-            });
-            return function () {
-                assert.ok(called);
-            };
-        })(),
-
-        (function () {
-            let called;
-            $("#compose_private_stream_alert").append = (html) => {
-                called = true;
-                assert.equal(html, "fake-compose_private_stream_alert-template");
-            };
-            return function () {
-                assert.ok(called);
-            };
-        })(),
-    ];
-
     denmark = {
         invite_only: true,
         name: "Denmark",
         stream_id: 22,
     };
     stream_data.add_sub(denmark);
-
+    banner_rendered = false;
     compose_validate.warn_if_private_stream_is_linked(denmark);
-    assert.equal($("#compose_private_stream_alert").visible(), true);
-
-    for (const f of checks) {
-        f();
-    }
+    assert.ok(banner_rendered);
 });
 
 test_ui("warn_if_mentioning_unsubscribed_user", ({override, mock_template}) => {

static/js/compose.js

@@ -78,8 +78,7 @@ export function clear_invites() {
 }
 
 export function clear_private_stream_alert() {
-    $("#compose_private_stream_alert").hide();
-    $("#compose_private_stream_alert").empty();
+    $(`#compose_banners .${compose_error.CLASSNAMES.private_stream_warning}`).remove();
 }
 
 export function clear_preview_area() {
@@ -531,21 +530,6 @@ export function initialize() {
         },
     );
 
-    $("#compose_private_stream_alert").on(
-        "click",
-        ".compose_private_stream_alert_close",
-        (event) => {
-            const $stream_alert_row = $(event.target).parents(".compose_private_stream_alert");
-            const $stream_alert = $("#compose_private_stream_alert");
-
-            $stream_alert_row.remove();
-
-            if ($stream_alert.children().length === 0) {
-                $stream_alert.hide();
-            }
-        },
-    );
-
     for (const classname of Object.values(compose_error.CLASSNAMES)) {
         const classname_selector = `.${classname}`;
         $("#compose_banners").on(

static/js/compose_error.ts

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

static/js/compose_validate.js

@@ -3,8 +3,8 @@ import $ from "jquery";
 import * as resolved_topic from "../shared/js/resolved_topic";
 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_private_stream_warning from "../templates/compose_banner/private_stream_warning.hbs";
 import render_wildcard_warning from "../templates/compose_banner/wildcard_warning.hbs";
-import render_compose_private_stream_alert from "../templates/compose_private_stream_alert.hbs";
 
 import * as channel from "./channel";
 import * as compose_error from "./compose_error";
@@ -100,14 +100,13 @@ export function warn_if_private_stream_is_linked(linked_stream) {
         return;
     }
 
-    const stream_name = linked_stream.name;
+    const new_row = render_private_stream_warning({
+        banner_type: compose_error.WARNING,
+        stream_name: linked_stream.name,
+        classname: compose_error.CLASSNAMES.private_stream_warning,
+    });
 
-    const $warning_area = $("#compose_private_stream_alert");
-    const context = {stream_name};
-    const new_row = render_compose_private_stream_alert(context);
-
-    $warning_area.append(new_row);
-    $warning_area.show();
+    $("#compose_banners").append(new_row);
 }
 
 export function warn_if_mentioning_unsubscribed_user(mentioned) {

static/styles/compose.css

@@ -381,26 +381,6 @@
     }
 }
 
-.compose_private_stream_alert {
-    padding: 4px 0;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-}
-
-.compose_private_stream_alert_controls .compose_private_stream_alert_close {
-    display: inline-block;
-    position: absolute;
-    margin-top: -2px;
-    margin-right: -2px;
-    width: 10px;
-}
-
-.compose_private_stream_alert_controls {
-    float: right;
-    position: relative;
-}
-
 /* Like .nav-tabs > li > a */
 div[id^="message-edit-send-status"],
 #compose-send-status {

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_private_stream_alert" class="alert home-error-bar"></div>
         <div id="out-of-view-notification" class="notification-alert"></div>
         <div class="composition-area">
             <form id="send_message_form" action="/json/messages" method="post">

static/templates/compose_banner/private_stream_warning.hbs

@@ -0,0 +1,3 @@
+{{#> compose_banner }}
+    <p>{{#tr}}Warning: <strong>#{stream_name}</strong> is a private stream.{{/tr}}</p>
+{{/compose_banner}}

static/templates/compose_private_stream_alert.hbs

@@ -1,6 +0,0 @@
-<div class="compose_private_stream_alert" data-stream_name="{{stream_name}}">
-    <span>{{#tr}}Warning: <strong>{stream_name}</strong> is a private stream.{{/tr}}</span>
-    <div class="compose_private_stream_alert_controls">
-        <button type="button" class="compose_private_stream_alert_close close">&times;</button>
-    </div>
-</div>