streams: Disable sub-btn with explanation if user not allowed to subscribe.

static/js/stream_edit.js

@@ -164,6 +164,9 @@ function show_subscription_settings(sub_row) {
     if (!sub.render_subscribers) {
         return;
     }
+    if (!sub.should_display_subscription_button) {
+        stream_ui_updates.initialize_cant_subscribe_popover(sub);
+    }
     // fetch subscriber list from memory.
     var list = get_subscriber_list(sub_settings);
     list.empty();

static/js/stream_ui_updates.js

@@ -16,6 +16,34 @@ exports.update_check_button_for_sub = function (sub) {
     }
 };
 
+exports.initialize_cant_subscribe_popover = function (sub) {
+    var button_wrapper = stream_edit.settings_for_sub(sub).find('.sub_unsub_button_wrapper');
+    var settings_button = subs.settings_button_for_sub(sub);
+
+    // Disabled button blocks mouse events(hover) from reaching
+    // to it's parent div element, so popover don't get triggered.
+    // Add css to prevent this.
+    settings_button.css("pointer-events", "none");
+    settings_button.popover({
+        placement: "bottom",
+        content: "<div class='cant_subscribe_hint'>%s</div>".replace(
+            '%s', i18n.t('Only existing subscribers can add users to private streams.')),
+        trigger: "manual",
+        html: true,
+        animation: false,
+    });
+
+    button_wrapper.on('mouseover', function (e) {
+        settings_button.popover('show');
+        e.stopPropagation();
+    });
+
+    button_wrapper.on('mouseout', function (e) {
+        settings_button.popover('hide');
+        e.stopPropagation();
+    });
+};
+
 exports.update_settings_button_for_sub = function (sub) {
     var settings_button = subs.settings_button_for_sub(sub);
     if (sub.subscribed) {
@@ -24,9 +52,13 @@ exports.update_settings_button_for_sub = function (sub) {
         settings_button.text(i18n.t("Subscribe")).addClass("unsubscribed");
     }
     if (sub.should_display_subscription_button) {
-        settings_button.show();
+        settings_button.prop("disabled", false);
+        settings_button.popover('destroy');
+        settings_button.css("pointer-events", "");
     } else {
-        settings_button.hide();
+        settings_button.attr("title", "");
+        exports.initialize_cant_subscribe_popover(sub);
+        settings_button.attr("disabled", "disabled");
     }
 };
 

static/styles/popovers.scss

@@ -337,6 +337,7 @@ ul.remind_me_popover .remind_icon {
     top: 1px;
 }
 
+.popover .cant_subscribe_hint,
 .popover .cant_add_subs_hint {
     padding-left: 5px;
     padding-right: 5px;

static/templates/subscription_settings.handlebars

@@ -21,8 +21,10 @@
                 {{#if is_admin}}
                 <button class="button small rounded btn-danger deactivate" type="button" name="delete_button" title="{{t 'Delete stream'}}"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
                 {{/if}}
-                <button class="button small rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" title="{{t 'Toggle subscription'}} (S)" {{#unless should_display_subscription_button}}style="display: none"{{/unless}}>
+                <div class="sub_unsub_button_wrapper inline-block">
+                    <button class="button small rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" {{#if should_display_subscription_button}}title="{{t 'Toggle subscription'}} (S)" {{else}}disabled="disabled"{{/if}}>
                         {{#if subscribed }}{{#tr oneself }}Unsubscribe{{/tr}}{{else}}{{#tr oneself }}Subscribe{{/tr}}{{/if}}</button>
+                </div>
                 <a href="{{preview_url}}" class="button small rounded" id="preview-stream-button" role="button" title="{{t 'View stream'}} (V)" {{#unless should_display_preview_button }}style="display: none"{{/unless}}>{{t "View stream"}}</a>
             </div>
         </div>