compose: Add subscribe button to the not subscribed stream error message.

Before that, we needed to go the stream settings to subscribe to a
particular stream.

Fixes #3877.

frontend_tests/node_tests/compose.js

@@ -101,8 +101,12 @@ people.add(bob);
 
     sub.subscribed = false;
     stream_data.add_sub('social', sub);
+    templates.render = function (template_name) {
+        assert.equal(template_name, 'compose_not_subscribed');
+        return 'compose_not_subscribed_stub';
+    };
     assert(!compose.validate_stream_message_address_info('social'));
-    assert.equal($('#compose-error-msg').html(), "translated: <p>You're not subscribed to the stream <b>social</b>.</p><p>Manage your subscriptions <a href='#streams/all'>on your Streams page</a>.</p>");
+    assert.equal($('#compose-error-msg').html(), 'compose_not_subscribed_stub');
 
     global.page_params.narrow_stream = false;
     channel.post = function (payload) {
@@ -121,7 +125,7 @@ people.add(bob);
         payload.success(payload.data);
     };
     assert(!compose.validate_stream_message_address_info('Frontend'));
-    assert.equal($('#compose-error-msg').html(), "translated: <p>You're not subscribed to the stream <b>Frontend</b>.</p><p>Manage your subscriptions <a href='#streams/all'>on your Streams page</a>.</p>");
+    assert.equal($('#compose-error-msg').html(), 'compose_not_subscribed_stub');
 
     channel.post = function (payload) {
         assert.equal(payload.data.stream, 'Frontend');

frontend_tests/node_tests/templates.js

@@ -622,6 +622,13 @@ function render(template_name, args) {
     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_not_subscribed() {
+    var html = render('compose_not_subscribed');
+    global.write_handlebars_output("compose_not_subscribed", html);
+    var button = $(html).find("button:first");
+    assert.equal(button.text(), "translated: Subscribe");
+}());
+
 (function compose_notification() {
     var args = {
         note: "You sent a message to a muted topic.",

static/js/compose.js

@@ -185,6 +185,19 @@ function nonexistent_stream_reply_error() {
     }, 5000);
 }
 
+function compose_not_subscribed_error(error_text, bad_input) {
+    $('#compose-send-status').removeClass(common.status_classes)
+               .addClass('home-error-bar')
+               .stop(true).fadeTo(0, 1);
+    $('#compose-error-msg').html(error_text);
+    $("#compose-send-button").prop('disabled', false);
+    $("#sending-indicator").hide();
+    $(".compose-send-status-close").hide();
+    if (bad_input !== undefined) {
+        bad_input.focus().select();
+    }
+}
+
 exports.nonexistent_stream_reply_error = nonexistent_stream_reply_error;
 
 function clear_compose_box() {
@@ -513,8 +526,8 @@ exports.validation_error = function (error_type, stream_name) {
         compose_error(i18n.t("Error checking subscription"), $("#stream"));
         return false;
     case "not-subscribed":
-        response = i18n.t("<p>You're not subscribed to the stream <b>__stream_name__</b>.</p><p>Manage your subscriptions <a href='#streams/all'>on your Streams page</a>.</p>", context);
-        compose_error(response, $('#stream'));
+        var new_row = templates.render("compose_not_subscribed");
+        compose_not_subscribed_error(new_row, $('#stream'));
         return false;
     }
     return true;
@@ -769,6 +782,18 @@ exports.initialize = function () {
         compose.finish();
     });
 
+    $("#compose-send-status").on('click', '.sub_unsub_button', function (event) {
+        event.preventDefault();
+
+        var stream_name = $('#stream').val();
+        if (stream_name === undefined) {
+            return;
+        }
+        var sub = stream_data.get_sub(stream_name);
+        subs.sub_or_unsub(sub);
+        $("#compose-send-status").hide();
+    });
+
     $("#compose_invite_users").on('click', '.compose_invite_link', function (event) {
         event.preventDefault();
 

static/styles/compose.css

@@ -193,13 +193,19 @@ table.compose_table {
 .compose_invite_user,
 .compose_private_stream_alert,
 .compose-all-everyone,
-.compose-announce {
+.compose-announce,
+.compose_not_subscribed {
     padding: 4px 0px 4px 0px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
+#compose_not_subscribed_close {
+    top: 1px;
+    right: 10px;
+}
+
 .compose_invite_close,
 .compose_private_stream_alert_close {
     display: inline-block;
@@ -216,12 +222,17 @@ table.compose_table {
     position: relative;
 }
 
-.compose_invite_user p {
+.compose_invite_user p,
+.compose_not_subscribed p {
     margin: 0px;
     display: inline-block;
     max-width: calc(100% - 100px);
 }
 
+#error-message-sub-button {
+    margin-right: 30px;
+}
+
 .compose_invite_user_error {
     margin-right: 10px;
     padding: 3px 8px 3px 8px;

static/templates/compose_not_subscribed.handlebars

@@ -0,0 +1,10 @@
+<div class="compose_not_subscribed">
+    <p>
+        {{#tr this}}
+        You're not subscribed to this stream. You will not be notified if other users reply to your message.
+        {{/tr}}
+    </p>
+    <div>
+        <button id="error-message-sub-button" class="btn btn-warning subscribe-button sub_unsub_button">{{t "Subscribe" }}</button><button type="button" id="compose_not_subscribed_close" class="close">&times;</button>
+    </div>
+</div>

templates/zerver/compose.html

@@ -49,6 +49,7 @@
             <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_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>
             <div class="composition-area">