compose: Warn users when posting to the #announce stream.

Currently, users are warned when mentioning @all and @everyone, but not
when posting on the #announce stream. Confirm with users that they want
to send their message on #announce if over 60 people are going to be
notified.

Fixes #6928.

frontend_tests/node_tests/templates.js

@@ -507,6 +507,18 @@ function render(template_name, args) {
     assert.equal(error_msg, "translated: Are you sure you want to mention all 101 people in this stream?");
 }());
 
+(function compose_announce() {
+    var args = {
+        count: '101',
+    };
+    var html = render('compose_announce', args);
+    global.write_handlebars_output("compose_announce", html);
+    var button = $(html).find("button:first");
+    assert.equal(button.text(), "translated: Yes, send");
+    var error_msg = $(html).find('span.compose-announce-msg').text().trim();
+    assert.equal(error_msg, "translated:         This stream is reserved for announcements.\n        \n        Are you sure you want to message all 101 people in this stream?");
+}());
+
 (function compose_notification() {
     var args = {
         note: "You sent a message to a muted topic.",

static/js/compose.js

@@ -11,8 +11,10 @@ var exports = {};
    true: user clicked YES */
 
 var user_acknowledged_all_everyone;
+var user_acknowledged_announce;
 
 exports.all_everyone_warn_threshold = 15;
+exports.announce_warn_threshold = 60;
 
 exports.uploads_domain = document.location.protocol + '//' + document.location.host;
 exports.uploads_path = '/user_uploads';
@@ -45,6 +47,26 @@ exports.clear_all_everyone_warnings = function () {
     $("#compose-send-status").hide();
 };
 
+function show_announce_warnings() {
+    var stream_count = stream_data.get_subscriber_count(compose_state.stream_name()) || 0;
+
+    var announce_template = templates.render("compose_announce", {count: stream_count});
+    var error_area_announce = $("#compose-announce");
+
+    if (!error_area_announce.is(':visible')) {
+        error_area_announce.append(announce_template);
+    }
+
+    error_area_announce.show();
+    user_acknowledged_announce = false;
+}
+
+exports.clear_announce_warnings = function () {
+    $("#compose-announce").hide();
+    $("#compose-announce").empty();
+    $("#compose-send-status").hide();
+};
+
 exports.clear_invites = function () {
     $("#compose_invite_users").hide();
     $("#compose_invite_users").empty();
@@ -59,6 +81,10 @@ exports.reset_user_acknowledged_all_everyone_flag = function () {
     user_acknowledged_all_everyone = undefined;
 };
 
+exports.reset_user_acknowledged_announce_flag = function () {
+    user_acknowledged_announce = undefined;
+};
+
 exports.clear_preview_area = function () {
     $("#compose-textarea").show();
     $("#undo_markdown_preview").hide();
@@ -397,6 +423,29 @@ function validate_stream_message_mentions(stream_name) {
     return true;
 }
 
+function validate_stream_message_announce(stream_name) {
+    var stream_count = stream_data.get_subscriber_count(stream_name) || 0;
+
+    if (stream_name === "announce" &&
+        stream_count > compose.announce_warn_threshold) {
+        if (user_acknowledged_announce === undefined ||
+            user_acknowledged_announce === false) {
+            // user has not seen a warning message yet if undefined
+            show_announce_warnings();
+
+            $("#compose-send-button").prop('disabled', false);
+            $("#sending-indicator").hide();
+            return false;
+        }
+    } else {
+        exports.clear_announce_warnings();
+    }
+    // at this point, the user has acknowledged the warning
+    user_acknowledged_announce = undefined;
+
+    return true;
+}
+
 exports.validate_stream_message_address_info = function (stream_name) {
     if (stream_data.is_subscribed(stream_name)) {
         return true;
@@ -440,9 +489,21 @@ function validate_stream_message() {
         }
     }
 
-    if (!exports.validate_stream_message_address_info(stream_name) ||
-        !validate_stream_message_mentions(stream_name)) {
-        return false;
+    // If both `@all` is mentioned and it's in `#announce`, just validate
+    // for `@all`. Users shouldn't have to hit "yes" more than once.
+    if (util.is_all_or_everyone_mentioned(compose_state.message_content()) &&
+        stream_name === "announce") {
+        if (!exports.validate_stream_message_address_info(stream_name) ||
+            !validate_stream_message_mentions(stream_name)) {
+            return false;
+        }
+    // If either criteria isn't met, just do the normal validation.
+    } else {
+      if (!exports.validate_stream_message_address_info(stream_name) ||
+          !validate_stream_message_mentions(stream_name) ||
+          !validate_stream_message_announce(stream_name)) {
+          return false;
+      }
     }
 
     return true;
@@ -579,6 +640,15 @@ exports.initialize = function () {
         compose.finish();
     });
 
+    $("#compose-announce").on('click', '.compose-announce-confirm', function (event) {
+        event.preventDefault();
+
+        $(event.target).parents('.compose-announce').remove();
+        user_acknowledged_announce = true;
+        exports.clear_announce_warnings();
+        compose.finish();
+    });
+
     $("#compose_invite_users").on('click', '.compose_invite_link', function (event) {
         event.preventDefault();
 

static/js/compose_actions.js

@@ -92,8 +92,10 @@ function clear_box() {
 
     // TODO: Better encapsulate at-mention warnings.
     compose.clear_all_everyone_warnings();
+    compose.clear_announce_warnings();
     compose.clear_private_stream_alert();
     compose.reset_user_acknowledged_all_everyone_flag();
+    compose.reset_user_acknowledged_announce_flag();
 
     exports.clear_textarea();
     $("#compose-textarea").removeData("draft-id");

static/styles/compose.css

@@ -215,6 +215,7 @@ table.compose_table {
 }
 
 .compose-all-everyone-controls,
+.compose-announce-controls,
 .compose_invite_user_controls,
 .compose_private_stream_alert_controls {
     float: right;

static/templates/compose_announce.handlebars

@@ -0,0 +1,12 @@
+<div class="compose-announce">
+    <span class="compose-announce-msg">
+        {{#tr this}}
+        This stream is reserved for <strong>announcements</strong>.
+        <br />
+        Are you sure you want to message all <strong>__count__</strong> people in this stream?
+        {{/tr}}
+    </span>
+    <span class="compose-announce-controls">
+        <button type="button" class="btn btn-warning compose-announce-confirm">{{t "Yes, send" }}</button>
+    </span>
+</div>

templates/zerver/compose.html

@@ -47,6 +47,7 @@
       </div>
       <div  id="compose_invite_users" class="alert home-error-bar"></div>
       <div  id="compose-all-everyone" class="alert home-error-bar"></div>
+      <div  id="compose-announce" 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>
      <div class="composition-area">