notification_settings: Display streams that differ.

The user has an option for setting global
notification settings as well as the same settings
for individual streams. Currently the user has to
keep track of each unmatched stream and then visit
each individual stream whose settings he wants to
update.

Thus this adds a dedicated UI table allowing the user
to view and update the notifications of the specific
streams which differs from the global settings.
It is located on the same page where the user defined
global notification settings can be modified.

Fixes #9228.

static/js/settings_notifications.js

@@ -1,3 +1,5 @@
+const render_stream_specific_notification_row = require('../templates/settings/stream_specific_notification_row.hbs');
+
 const general_notifications_table_columns = [
     /* An array of notification settings of any category like
     * `stream_notification_settings` which makes a single row of
@@ -14,6 +16,14 @@ exports.stream_notification_settings = [
     "wildcard_mentions_notify",
 ];
 
+const stream_specific_notification_settings = [
+    "desktop_notifications",
+    "audible_notifications",
+    "push_notifications",
+    "email_notifications",
+    "wildcard_mentions_notify",
+];
+
 const pm_mention_notification_settings = [
     "enable_desktop_notifications",
     "enable_sounds",
@@ -90,6 +100,7 @@ exports.all_notifications = {
         email_notification_settings: email_notification_settings,
     },
     show_push_notifications_tooltip: {
+        push_notifications: !page_params.realm_push_notifications_enabled,
         enable_online_push_notifications: !page_params.realm_push_notifications_enabled,
     },
 };
@@ -109,6 +120,33 @@ exports.desktop_icon_count_display_values = {
     },
 };
 
+function rerender_ui() {
+    const unmatched_streams_table = $("#stream-specific-notify-table");
+    if (unmatched_streams_table.length === 0) {
+        // If we haven't rendered "notification settings" yet, do nothing.
+        return;
+    }
+
+    const unmatched_streams = stream_data.get_unmatched_streams_for_notification_settings();
+
+    list_render.create(unmatched_streams_table, unmatched_streams, {
+        name: "unmatched-streams-list",
+        modifier: function (unmatched_streams) {
+            return render_stream_specific_notification_row({
+                stream: unmatched_streams,
+                stream_specific_notification_settings: stream_specific_notification_settings,
+                is_disabled: exports.all_notifications.show_push_notifications_tooltip,
+            });
+        },
+    }).init();
+
+    if (unmatched_streams.length === 0) {
+        unmatched_streams_table.css("display", "none");
+    } else {
+        unmatched_streams_table.css("display", "table-row-group");
+    }
+}
+
 function change_notification_setting(setting, setting_data, status_element) {
     const data = {};
     data[setting] = JSON.stringify(setting_data);
@@ -134,6 +172,10 @@ exports.set_up = function () {
         e.preventDefault();
         e.stopPropagation();
         const input_elem = $(e.currentTarget);
+        if (input_elem.parents("#stream-specific-notify-table").length) {
+            stream_edit.stream_setting_clicked(e);
+            return;
+        }
         const setting_name = input_elem.attr("name");
         change_notification_setting(setting_name,
                                     settings_org.get_input_element_value(this),
@@ -159,6 +201,7 @@ exports.set_up = function () {
         }
     });
     exports.set_enable_digest_emails_visibility();
+    rerender_ui();
 };
 
 exports.update_page = function () {
@@ -175,6 +218,7 @@ exports.update_page = function () {
 
         $("#" + setting).prop('checked', page_params[setting]);
     }
+    rerender_ui();
 };
 
 window.settings_notifications = exports;

static/js/stream_edit.js

@@ -328,12 +328,16 @@ function stream_is_muted_clicked(e) {
     }
 }
 
-function stream_setting_clicked(e) {
+exports.stream_setting_clicked = function (e) {
     if (e.currentTarget.id === 'sub_is_muted_setting') {
         return;
     }
 
-    const checkbox = $(e.currentTarget).find('.sub_setting_control');
+    let checkbox = $(e.currentTarget).find('.sub_setting_control');
+    // sub data is being changed from the notification settings page.
+    if (checkbox.length === 0) {
+        checkbox = $(e.currentTarget);
+    }
     const sub = get_sub_for_target(e.target);
     const setting = checkbox.attr('name');
     if (!sub) {
@@ -351,7 +355,7 @@ function stream_setting_clicked(e) {
         }
     }
     exports.set_stream_property(sub, setting, !sub[setting]);
-}
+};
 
 exports.bulk_set_stream_property = function (sub_data) {
     return channel.post({
@@ -548,7 +552,7 @@ exports.initialize = function () {
                                  stream_is_muted_clicked);
 
     $("#subscriptions_table").on("click", ".sub_setting_checkbox",
-                                 stream_setting_clicked);
+                                 exports.stream_setting_clicked);
 
     $("#subscriptions_table").on("submit", ".subscriber_list_add form", function (e) {
         e.preventDefault();

static/styles/settings.scss

@@ -677,10 +677,18 @@ input[type=checkbox].inline-block {
         td {
             text-align: center;
             vertical-align: middle;
+            cursor: default;
+
+            .stream-privacy span.hashtag,
+            .filter-icon i {
+                padding-right: 0px;
+            }
         }
 
         td:first-child {
+            text-align: left;
             font-weight: bold;
+            word-break: break-all;
         }
     }
 }

static/templates/settings/notification_settings.hbs

@@ -35,13 +35,15 @@
                         {{> notification_settings_checkboxes
                           setting_name=this.setting_name
                           is_checked=this.is_checked
-                          is_disabled=this.is_disabled}}
+                          is_disabled=this.is_disabled }}
                         {{/each}}
                     </tr>
                     {{/each}}
                 </tbody>
+                <tbody id="stream-specific-notify-table">
+                    {{> ../settings/stream_specific_notification_row }}
+                </tbody>
             </table>
-            <p>{{t "You can also override these settings for individual streams." }}</p>
         </div>
 
         <div id="other_notifications" class="m-10 inline-block subsection-parent">

static/templates/settings/notification_settings_checkboxes.hbs

@@ -1,6 +1,6 @@
 <td>
     <label class="checkbox">
-        <input type="checkbox" name="{{setting_name}}" id="{{setting_name}}"
+        <input type="checkbox" name="{{setting_name}}" id="{{prefix}}{{setting_name}}"
           {{#if is_disabled}}disabled="disabled"{{/if}}
           {{#if is_checked}}checked="checked"{{/if}} data-setting-widget-type="bool"/>
         <span></span>

static/templates/settings/stream_specific_notification_row.hbs

@@ -0,0 +1,17 @@
+<tr class="stream-row" data-stream-id="{{stream.stream_id}}">
+    <td>
+        <span id="stream_privacy_swatch_{{stream.stream_id}}" class="stream-privacy filter-icon">
+            {{> ../stream_privacy
+              invite_only=stream.invite_only
+              is_web_public=stream.is_web_public }}
+        </span>
+        {{stream.stream_name}}
+    </td>
+    {{#each stream_specific_notification_settings}}
+    {{> notification_settings_checkboxes
+      setting_name=this
+      prefix=(lookup ../stream "stream_id")
+      is_checked=(lookup ../stream this)
+      is_disabled=(lookup ../is_disabled this) }}
+    {{/each}}
+</tr>