settings: Update notification settings to new feedback style.

This split notification settings to separate settings for streams,
PM/mention and other notifications settings.
Previously we have to treat them combined, but with this refactor,
we can treat them separately for future changes.

Fixes #8587.

static/js/settings_notifications.js

@@ -44,39 +44,36 @@ function maybe_bulk_update_stream_notification_setting(notification_checkbox,
     });
 }
 
-exports.set_up = function () {
+function change_notification_setting(setting, setting_data, status_element) {
-    var notify_settings_status = $("#notify-settings-status").expectOne();
+    var data = {};
-    notify_settings_status.hide();
+    data[setting] = JSON.stringify(setting_data);
+    settings_ui.do_settings_change('/json/settings/notifications', data, status_element);
+}
 
+exports.set_up = function () {
     if (!page_params.realm_show_digest_email) {
         $("#digest_container").hide();
     }
 
-    _.each(notification_settings, function (setting) {
+    _.each(pm_mention_notification_settings, function (setting) {
         $("#" + setting).change(function () {
-            var data = {};
+            change_notification_setting(setting, $(this).prop('checked'),
-            var setting_name = $('label[for=' + setting + ']').text().trim();
+                                        "#pm-mention-notify-settings-status");
-            var context = {setting_name: setting_name};
-            var setting_data = $(this).prop('checked');
-            data[setting] = JSON.stringify(setting_data);
-
-            channel.patch({
-                url: '/json/settings/notifications',
-                data: data,
-                success: function () {
-                    if (setting_data === true) {
-                        ui_report.success(i18n.t("Enabled: __- setting_name__",
-                            context), notify_settings_status);
-                    } else {
-                        ui_report.success(i18n.t("Disabled: __- setting_name__",
-                            context), notify_settings_status);
-                    }
-                },
-                error: function (xhr) {
-                    ui_report.error(i18n.t('Error updating: __- setting_name__',
-                        context), xhr, notify_settings_status);
-                },
         });
+    });
+
+    _.each(other_notification_settings, function (setting) {
+        $("#" + setting).change(function () {
+            change_notification_setting(setting, $(this).prop('checked'),
+                                        "#other-notify-settings-status");
+        });
+    });
+
+    _.each(stream_notification_settings, function (stream_setting) {
+        var setting = stream_setting.setting;
+        $("#" + setting).change(function () {
+            var setting_data = $(this).prop('checked');
+            change_notification_setting(setting, setting_data, "#stream-notify-settings-status");
             if (setting === 'enable_stream_desktop_notifications') {
                 maybe_bulk_update_stream_notification_setting($('#' + setting), function () {
                     stream_edit.set_notification_setting_for_all_streams('desktop_notifications', setting_data);

static/templates/settings/notification-settings.handlebars

@@ -1,9 +1,9 @@
 <div id="notification-settings" class="settings-section" data-name="notifications">
     <form class="notification-settings-form">
         <div class="notification-reminder tip">{{#tr this }}Notifications are triggered when a message arrives and Zulip isn't in focus or the message is offscreen.{{/tr}}</div>
-        <div class="alert" id="notify-settings-status"></div>
 
-        <h3>{{t "Stream messages" }}</h3>
+        <h3 class="inline-block">{{t "Stream messages" }}</h3>
+        <div class="alert-notification" id="stream-notify-settings-status"></div>
         <p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p>
 
         <div class="input-group">
@@ -53,7 +53,8 @@
             {{#tr this}}Change notification settings for individual streams on your <a href="/#streams">Streams page</a>.{{/tr}}
         </p>
 
-        <h3>{{t "Private messages and @-mentions" }}</h3>
+        <h3 class="inline-block">{{t "Private messages and @-mentions" }}</h3>
+        <div class="alert-notification" id="pm-mention-notify-settings-status"></div>
         <p>{{t "I want:" }}</p>
 
         <div class="input-group">
@@ -139,8 +140,8 @@
 
         <div id="other_notifications">
 
-            <h3>{{t "Other notification settings" }}</h3>
+            <h3 class="inline-block">{{t "Other notification settings" }}</h3>
-
+            <div class="alert-notification" id="other-notify-settings-status"></div>
             <div class="input-group no-margin" id="digest_container">
                 <label class="checkbox">
                     <input type="checkbox" name="enable_digest_emails" id="enable_digest_emails"