settings: Migrate notification checkboxes to table format.

Here we have migrated checkboxes of all general notifications to the table.
By general notifications we mean, Mobile, Email, Desktop audio, and visual
notifications.

This is a part of a bigger migration to simply our notifications setting
changing infrastructure for all streams and individual streams. Later we
will add more row to this for different categories of notifications in
addition to the current ones ("Streams" and "PMs, mentions, alerts").

Fixes: #12182.

static/js/notifications.js

@@ -753,11 +753,7 @@ exports.handle_global_notification_updates = function (notification_name, settin
         page_params[notification_name] = setting;
     }
 
-    if (
-        settings_notifications.all_notifications.settings.stream_notification_settings.includes(
-            notification_name
-        )
-    ) {
+    if (settings_notifications.stream_notification_settings.includes(notification_name)) {
         notification_name = notification_name.replace("enable_stream_", "");
         stream_ui_updates.update_notification_setting_checkbox(notification_name);
     }

static/js/settings.js

@@ -63,23 +63,9 @@ $("body").ready(function () {
 function setup_settings_label() {
     exports.settings_label = {
         // settings_notification
-        // stream_notification_settings
-        enable_stream_desktop_notifications: i18n.t("Visual desktop notifications"),
-        enable_stream_audible_notifications: i18n.t("Audible desktop notifications"),
-        enable_stream_push_notifications: i18n.t("Mobile notifications"),
-        enable_stream_email_notifications: i18n.t("Email notifications"),
-        wildcard_mentions_notify: i18n.t("Notifications for @all/@everyone mentions"),
-
-        // pm_mention_notification_settings
-        enable_desktop_notifications: i18n.t("Visual desktop notifications"),
-        enable_offline_email_notifications: i18n.t("Email notifications"),
-        enable_offline_push_notifications: i18n.t("Mobile notifications"),
         enable_online_push_notifications: i18n.t("Send mobile notifications even if I'm online (useful for testing)"),
-        enable_sounds: i18n.t("Audible desktop notifications"),
         pm_content_in_desktop_notifications: i18n.t("Include content of private messages in desktop notifications"),
         desktop_icon_count_display: i18n.t("Unread count summary (appears in desktop sidebar and browser tab)"),
-
-        // other_notification_settings
         enable_digest_emails: i18n.t("Send digest emails when I'm away"),
         enable_login_emails: i18n.t("Send email notifications for new logins to my account"),
         message_content_in_email_notifications: i18n.t("Include message content in missed message emails"),
@@ -112,6 +98,7 @@ exports.build_page = function () {
         settings_label: exports.settings_label,
         demote_inactive_streams_values: settings_config.demote_inactive_streams_values,
         twenty_four_hour_time_values: settings_config.twenty_four_hour_time_values,
+        general_settings: settings_notifications.all_notifications.general_settings,
         notification_settings: settings_notifications.all_notifications.settings,
         desktop_icon_count_display_values: settings_notifications.desktop_icon_count_display_values,
         show_push_notifications_tooltip:

static/js/settings_notifications.js

@@ -1,4 +1,12 @@
-const stream_notification_settings = [
+const general_notifications_table_columns = [
+    /* An array of notification settings of any category like
+    * `stream_notification_settings` which makes a single row of
+    * "Notification triggers" table should follow this order
+    */
+    "visual", "audio", "mobile", "email", "all_mentions",
+];
+
+exports.stream_notification_settings = [
     "enable_stream_desktop_notifications",
     "enable_stream_audible_notifications",
     "enable_stream_push_notifications",
@@ -37,20 +45,51 @@ const other_notification_settings = desktop_notification_settings.concat(
 
 exports.all_notification_settings = other_notification_settings.concat(
     pm_mention_notification_settings,
-    stream_notification_settings
+    exports.stream_notification_settings
 );
 
+
+function get_notifications_table_row_data(notify_settings) {
+    return general_notifications_table_columns.map((column, index) => {
+        const setting_name = notify_settings[index];
+        if (setting_name === undefined) {
+            return {
+                setting_name: "",
+                is_disabled: true,
+                is_checked: false,
+            };
+        }
+        const checkbox = {
+            setting_name: setting_name,
+            is_disabled: false,
+        };
+        if (column === "mobile") {
+            checkbox.is_disabled = !page_params.realm_push_notifications_enabled;
+        }
+        checkbox.is_checked = page_params[setting_name];
+        return checkbox;
+    });
+}
+
 exports.all_notifications = {
+    general_settings: [
+        {
+            label: i18n.t("Streams"),
+            notification_settings: get_notifications_table_row_data(
+                exports.stream_notification_settings),
+        },
+        {
+            label: i18n.t("PMs, mentions, and alerts"),
+            notification_settings: get_notifications_table_row_data(
+                pm_mention_notification_settings),
+        },
+    ],
     settings: {
-        stream_notification_settings: stream_notification_settings,
-        pm_mention_notification_settings: pm_mention_notification_settings,
         desktop_notification_settings: desktop_notification_settings,
         mobile_notification_settings: mobile_notification_settings,
         email_notification_settings: email_notification_settings,
     },
     show_push_notifications_tooltip: {
-        enable_stream_push_notifications: !page_params.realm_push_notifications_enabled,
-        enable_offline_push_notifications: !page_params.realm_push_notifications_enabled,
         enable_online_push_notifications: !page_params.realm_push_notifications_enabled,
     },
 };