From f9c72701c65b78afd399c0c11a611cb614201d27 Mon Sep 17 00:00:00 2001 From: evykassirer Date: Mon, 22 Aug 2022 16:03:37 -0700 Subject: [PATCH] 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 | 44 +++++-------------- static/js/compose.js | 18 +------- static/js/compose_error.ts | 1 + static/js/compose_validate.js | 15 +++---- static/styles/compose.css | 20 --------- static/templates/compose.hbs | 1 - .../compose_banner/private_stream_warning.hbs | 3 ++ .../compose_private_stream_alert.hbs | 6 --- 8 files changed, 24 insertions(+), 84 deletions(-) create mode 100644 static/templates/compose_banner/private_stream_warning.hbs delete mode 100644 static/templates/compose_private_stream_alert.hbs diff --git a/frontend_tests/node_tests/compose_validate.js b/frontend_tests/node_tests/compose_validate.js index dc77d71192..c3d0d235e7 100644 --- a/frontend_tests/node_tests/compose_validate.js +++ b/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}) => { diff --git a/static/js/compose.js b/static/js/compose.js index 456e0f5f84..6aea88c599 100644 --- a/static/js/compose.js +++ b/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( diff --git a/static/js/compose_error.ts b/static/js/compose_error.ts index 2c6f28d4dd..30b91c8775 100644 --- a/static/js/compose_error.ts +++ b/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", diff --git a/static/js/compose_validate.js b/static/js/compose_validate.js index 4e8174fa72..f0c752b52d 100644 --- a/static/js/compose_validate.js +++ b/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) { diff --git a/static/styles/compose.css b/static/styles/compose.css index 15c249befb..65d01748e0 100644 --- a/static/styles/compose.css +++ b/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 { diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs index 0df3aff413..37ea52ce54 100644 --- a/static/templates/compose.hbs +++ b/static/templates/compose.hbs @@ -51,7 +51,6 @@ × -
diff --git a/static/templates/compose_banner/private_stream_warning.hbs b/static/templates/compose_banner/private_stream_warning.hbs new file mode 100644 index 0000000000..dbc662fc28 --- /dev/null +++ b/static/templates/compose_banner/private_stream_warning.hbs @@ -0,0 +1,3 @@ +{{#> compose_banner }} +

{{#tr}}Warning: #{stream_name} is a private stream.{{/tr}}

+{{/compose_banner}} diff --git a/static/templates/compose_private_stream_alert.hbs b/static/templates/compose_private_stream_alert.hbs deleted file mode 100644 index 4e663abf44..0000000000 --- a/static/templates/compose_private_stream_alert.hbs +++ /dev/null @@ -1,6 +0,0 @@ -
- {{#tr}}Warning: {stream_name} is a private stream.{{/tr}} -
- -
-