stream settings: Disable Mobile notifications if push bouncer not set up.

This commit disables "Mobile notifications" if `push_notifications` are not
enabled. It also adds a tooltip explaining why this is disabled.

Fixes #12208

frontend_tests/node_tests/templates.js

@@ -3,6 +3,7 @@ zrequire('templates');
 zrequire('settings_notifications');
 
 set_global('i18n', global.stub_i18n);
+set_global('page_params', {});
 zrequire('stream_edit');
 
 const { JSDOM } = require("jsdom");
@@ -1268,9 +1269,15 @@ run_test('subscription_settings', () => {
     };
 
     var html = '';
+    page_params.realm_push_notifications_enabled = false;
+    var check_realm_setting = {
+        push_notifications: !page_params.realm_push_notifications_enabled,
+    };
+
     html += render('subscription_settings', {
         sub: sub,
         settings: stream_edit.stream_settings(sub),
+        realm_settings: check_realm_setting,
     });
 
     var div = $(html).find(".subscription-type");

static/js/stream_edit.js

@@ -238,6 +238,10 @@ var settings_labels = {
     pin_to_top: i18n.t("Pin stream to top of left sidebar"),
 };
 
+var check_realm_setting = {
+    push_notifications: !page_params.realm_push_notifications_enabled,
+};
+
 exports.stream_settings = function (sub) {
     var settings = [];
     _.each(Object.keys(settings_labels), function (setting) {
@@ -267,6 +271,7 @@ exports.show_settings_for = function (node) {
     var html = templates.render('subscription_settings', {
         sub: sub,
         settings: exports.stream_settings(sub),
+        realm_settings: check_realm_setting,
     });
     ui.get_content_element($('.subscriptions .right .settings')).html(html);
 

static/styles/subscriptions.scss

@@ -144,7 +144,8 @@
     white-space: normal;
 }
 
-.muted-sub {
+.muted-sub,
+.control-label-disabled {
     color: hsl(0, 0%, 64%);
 }
 

static/templates/stream-settings-checkbox.handlebars

@@ -1,7 +1,13 @@
-<div id="{{prefix}}{{setting_name}}{{suffix}}" class="sub_setting_checkbox {{#if notification_setting}}sub_notification_setting {{#if is_muted}}muted-sub{{/if}}{{/if}}">
+{{!-- If setting is disabled on realm level, then render setting as control-label-disabled and do not set setting value. Setting status should not change on any click handler, as it is disabled at realm level. --}}
-    <input id="{{setting_name}}_{{stream_id}}" name="{{setting_name}}" class="sub_setting_control" type="checkbox" tabindex="-1" {{#if is_checked}}checked{{/if}} {{#if_and is_muted notification_setting}}disabled="disabled"{{/if_and}}/>
+<div id="{{prefix}}{{setting_name}}{{suffix}}" class="sub_setting_checkbox {{#unless realm_setting_disabled}}{{#if notification_setting}}sub_notification_setting {{#if is_muted}}muted-sub{{/if}}{{/if}}{{else}}control-label-disabled{{/unless}}">
+    <input id="{{setting_name}}_{{stream_id}}" name="{{setting_name}}" class="sub_setting_control" type="checkbox" tabindex="-1" {{#unless realm_setting_disabled}}{{#if is_checked}}checked{{/if}}{{#if_and is_muted notification_setting}}disabled="disabled"{{/if_and}}{{else}}disabled="disabled"{{/unless}} />
     <label class="subscription-control-label">{{label}}</label>
+
+    {{!-- Tooltips for settings --}}
     {{#if_equal setting_name "is_muted"}}
     <p class="mute-note {{#unless is_muted}}hide-mute-note{{/unless}}">{{t "Muted streams don't show up in \"All messages\" or generate notifications unless you are mentioned." }}</p>
     {{/if_equal}}
+    {{#if_equal setting_name "push_notifications"}}
+    <i class="fa fa-question-circle settings-info-icon {{#unless realm_setting_disabled}}hide{{/unless}}" data-toggle="tooltip" title="{{t 'Mobile push notifications are not configured on this server.' }}"></i>
+    {{/if_equal}}
 </div>

static/templates/subscription_settings.handlebars

@@ -59,6 +59,7 @@
                           "is_muted" (lookup ../sub "is_muted")
                           "stream_id" (lookup ../sub "stream_id")
                           "notification_setting" is_notification_setting
+                          "realm_setting_disabled" (lookup ../realm_settings name)
                           "label" label}}
                     </li>
                     {{/each}}