settings: Use save-discard widget in realm-level defaults section.

This commit adds save-discard widget in the realm-level defaults
section. We use most of the functions used in settings_org.js
by passing for_realm_default_settings and add conditionals
according to it.

Some of the major changes wrt to the organzation settings code
are -

- We use element name attribute here to get the setting name from
element instead of id. We can add id for the elements here but
there is a problem doing so for the emojiset setting as for the
radio buttons we use four different input elements and all being
for the same setting.

- Added separate cases in discard_property_element_changes and
get_input_element_value to handle the radio buttons.

- We do not need get_complete_data_for_subsection here because
all settings are controlled by single field in DB and single
element in UI and thus we can simply get changed setting values
from populate_data_for_request.

- Added org-subsection-parent to the subsection container and
prop-element to the input and select elements so that we can
use the existing code.

- Modified get_subsection_property_elements to just return the
input element which is selected for emoji-settings subsection and
not all the input elements because we only need the selected value
of emojiset. We need other elements also when discarding the changes
but we handle it separately.

static/js/settings_display.js

@@ -68,10 +68,18 @@ export function set_up(settings_panel) {
         .find(`.setting_emojiset_choice[value="${CSS.escape(settings_object.emojiset)}"]`)
         .prop("checked", true);
 
+    if (for_realm_settings) {
+        // For the realm-level defaults page, we use the common
+        // settings_org.js handlers, so we can return early here.
+        return;
+    }
+
     $(`${CSS.escape(language_modal_elem)} [data-dismiss]`).on("click", () => {
         overlays.close_modal(language_modal_elem);
     });
 
+    // Common handler for sending requests to the server when an input
+    // element is changed.
     const all_display_settings = settings_config.get_all_display_settings();
     for (const setting of all_display_settings.settings.user_display_settings) {
         container.find(`.${CSS.escape(setting)}`).on("change", function () {

static/js/settings_notifications.js

@@ -133,6 +133,14 @@ export function set_up(settings_panel) {
 
     set_enable_digest_emails_visibility(settings_panel);
 
+    if (for_realm_settings) {
+        // For the realm-level defaults page, we use the common
+        // settings_org.js handlers, so we can return early here.
+        return;
+    }
+
+    // Common handler for sending requests to the server when an input
+    // element is changed.
     container.find(".notification-settings-form").on("change", "input, select", function (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -150,6 +158,10 @@ export function set_up(settings_panel) {
         );
     });
 
+    // This final patch of settings are ones for which we
+    // intentionally don't let organization administrators set
+    // organization-level defaults.
+
     if (!for_realm_settings) {
         container.find(".send_test_notification").on("click", () => {
             notifications.send_test_notification(

static/js/settings_org.js

@@ -16,6 +16,7 @@ import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as realm_icon from "./realm_icon";
 import * as realm_logo from "./realm_logo";
+import {realm_user_settings_defaults} from "./realm_user_settings_defaults";
 import * as settings_config from "./settings_config";
 import * as settings_notifications from "./settings_notifications";
 import * as settings_realm_user_settings_defaults from "./settings_realm_user_settings_defaults";
@@ -119,7 +120,15 @@ export function get_realm_time_limits_in_minutes(property) {
     return val.toString();
 }
 
-function get_property_value(property_name) {
+function get_property_value(property_name, for_realm_default_settings) {
+    if (for_realm_default_settings) {
+        // realm_user_default_settings are stored in a separate object.
+        if (property_name === "twenty_four_hour_time") {
+            return JSON.stringify(realm_user_settings_defaults.twenty_four_hour_time);
+        }
+        return realm_user_settings_defaults[property_name];
+    }
+
     if (property_name === "realm_message_content_edit_limit_minutes") {
         return get_realm_time_limits_in_minutes("realm_message_content_edit_limit_seconds");
     }
@@ -182,12 +191,27 @@ function get_property_value(property_name) {
     return page_params[property_name];
 }
 
-export function extract_property_name(elem) {
+export function extract_property_name(elem, for_realm_default_settings) {
+    if (for_realm_default_settings) {
+        // We use the name attribute, rather than the ID attribute,
+        // for realm_user_default_settings. This is because the
+        // display/notification settings elements do not always have
+        // IDs, and also the emojiset input is not compatible with the
+        // ID approach.
+        return elem.attr("name");
+    }
     return elem.attr("id").split("-").join("_").replace("id_", "");
 }
 
 function get_subsection_property_elements(element) {
     const subsection = $(element).closest(".org-subsection-parent");
+    if (subsection.hasClass("emoji-settings")) {
+        // Because the emojiset widget has a unique radio button
+        // structure, it needs custom code.
+        const emojiset_elem = subsection.find("input[name='emojiset']:checked");
+        const translate_emoticons_elem = subsection.find(".translate_emoticons");
+        return [emojiset_elem, translate_emoticons_elem];
+    }
     return Array.from(subsection.find(".prop-element"));
 }
 
@@ -428,10 +452,10 @@ export let default_code_language_widget = null;
 export let notifications_stream_widget = null;
 export let signup_notifications_stream_widget = null;
 
-function discard_property_element_changes(elem) {
+function discard_property_element_changes(elem, for_realm_default_settings) {
     elem = $(elem);
-    const property_name = extract_property_name(elem);
+    const property_name = extract_property_name(elem, for_realm_default_settings);
-    const property_value = get_property_value(property_name);
+    const property_value = get_property_value(property_name, for_realm_default_settings);
 
     switch (property_name) {
         case "realm_authentication_methods":
@@ -446,6 +470,13 @@ function discard_property_element_changes(elem) {
         case "realm_default_code_block_language":
             default_code_language_widget.render(property_value);
             break;
+        case "emojiset":
+            // Because the emojiset widget has a unique radio button
+            // structure, it needs custom reset code.
+            elem.closest(".org-subsection-parent")
+                .find(`.setting_emojiset_choice[value='${CSS.escape(property_value)}'`)
+                .prop("checked", true);
+            break;
         default:
             if (property_value !== undefined) {
                 set_input_element_value(elem, property_value);
@@ -597,6 +628,11 @@ export function get_input_element_value(input_elem, input_type) {
             return input_elem.val().trim();
         case "number":
             return Number.parseInt(input_elem.val().trim(), 10);
+        case "radio-group":
+            if (input_elem.prop("checked")) {
+                return input_elem.val().trim();
+            }
+            return undefined;
         default:
             return undefined;
     }
@@ -633,10 +669,10 @@ function get_auth_method_table_data() {
     return new_auth_methods;
 }
 
-function check_property_changed(elem) {
+function check_property_changed(elem, for_realm_default_settings) {
     elem = $(elem);
-    const property_name = extract_property_name(elem);
+    const property_name = extract_property_name(elem, for_realm_default_settings);
-    let current_val = get_property_value(property_name);
+    let current_val = get_property_value(property_name, for_realm_default_settings);
     let changed_val;
 
     switch (property_name) {
@@ -665,12 +701,12 @@ function check_property_changed(elem) {
     return current_val !== changed_val;
 }
 
-export function save_discard_widget_status_handler(subsection) {
+export function save_discard_widget_status_handler(subsection, for_realm_default_settings) {
     subsection.find(".subsection-failed-status p").hide();
     subsection.find(".save-button").show();
     const properties_elements = get_subsection_property_elements(subsection);
     const show_change_process_button = properties_elements.some((elem) =>
-        check_property_changed(elem),
+        check_property_changed(elem, for_realm_default_settings),
     );
 
     const save_btn_controls = subsection.find(".subsection-header .save-button-controls");
@@ -716,7 +752,11 @@ export function init_dropdown_widgets() {
     });
 }
 
-export function register_save_discard_widget_handlers(container, patch_url) {
+export function register_save_discard_widget_handlers(
+    container,
+    patch_url,
+    for_realm_default_settings,
+) {
     container.on("change input", "input, select, textarea", (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -736,7 +776,7 @@ export function register_save_discard_widget_handlers(container, patch_url) {
         }
 
         const subsection = $(e.target).closest(".org-subsection-parent");
-        save_discard_widget_status_handler(subsection);
+        save_discard_widget_status_handler(subsection, for_realm_default_settings);
         return undefined;
     });
 
@@ -744,7 +784,7 @@ export function register_save_discard_widget_handlers(container, patch_url) {
         e.preventDefault();
         e.stopPropagation();
         for (const elem of get_subsection_property_elements(e.target)) {
-            discard_property_element_changes(elem);
+            discard_property_element_changes(elem, for_realm_default_settings);
         }
         const save_btn_controls = $(e.target).closest(".save-button-controls");
         change_save_button_state(save_btn_controls, "discarded");
@@ -875,10 +915,20 @@ export function register_save_discard_widget_handlers(container, patch_url) {
 
         for (let input_elem of properties_elements) {
             input_elem = $(input_elem);
-            if (check_property_changed(input_elem)) {
+            if (check_property_changed(input_elem, for_realm_default_settings)) {
                 const input_value = get_input_element_value(input_elem);
                 if (input_value !== undefined) {
-                    const property_name = input_elem.attr("id").replace("id_realm_", "");
+                    let property_name;
+                    if (for_realm_default_settings) {
+                        // We use the name attribute, rather than the ID attribute,
+                        // for realm_user_default_settings. This is because the
+                        // display/notification settings elements do not always have
+                        // IDs, and also the emojiset input is not compatible with the
+                        // ID approach.
+                        property_name = input_elem.attr("name");
+                    } else {
+                        property_name = input_elem.attr("id").replace("id_realm_", "");
+                    }
                     data[property_name] = input_value;
                 }
             }
@@ -891,13 +941,21 @@ export function register_save_discard_widget_handlers(container, patch_url) {
         e.preventDefault();
         e.stopPropagation();
         const save_button = $(e.currentTarget);
-        const subsection_id = save_button.attr("id").replace("org-submit-", "");
-        const subsection = subsection_id.split("-").join("_");
         const subsection_elem = save_button.closest(".org-subsection-parent");
+        let extra_data = {};
+
+        if (!for_realm_default_settings) {
+            // The organization settings system has some coupled
+            // fields that must be submitted together, which is
+            // managed by the get_complete_data_for_subsection function.
+            const subsection_id = save_button.attr("id").replace("org-submit-", "");
+            const subsection = subsection_id.split("-").join("_");
+            extra_data = get_complete_data_for_subsection(subsection);
+        }
 
         const data = {
             ...populate_data_for_request(subsection_elem),
-            ...get_complete_data_for_subsection(subsection),
+            ...extra_data,
         };
         save_organization_settings(data, save_button, patch_url);
     });
@@ -931,7 +989,7 @@ export function build_page() {
     set_message_content_in_email_notifications_visiblity();
     set_digest_emails_weekday_visibility();
 
-    register_save_discard_widget_handlers($(".admin-realm-form"), "/json/realm");
+    register_save_discard_widget_handlers($(".admin-realm-form"), "/json/realm", false);
 
     $(".org-subsection-parent").on("keydown", "input", (e) => {
         e.stopPropagation();

static/js/settings_realm_user_settings_defaults.js

@@ -1,11 +1,10 @@
 import $ from "jquery";
 
-import * as channel from "./channel";
 import {page_params} from "./page_params";
 import {realm_user_settings_defaults} from "./realm_user_settings_defaults";
 import * as settings_display from "./settings_display";
 import * as settings_notifications from "./settings_notifications";
-import * as settings_ui from "./settings_ui";
+import * as settings_org from "./settings_org";
 
 export const realm_default_settings_panel = {};
 
@@ -25,31 +24,11 @@ export function set_up() {
     settings_display.set_up(realm_default_settings_panel);
     settings_notifications.set_up(realm_default_settings_panel);
 
-    container.find(".presence_enabled").on("change", (e) => {
+    settings_org.register_save_discard_widget_handlers(
-        e.preventDefault();
+        container,
-        e.stopPropagation();
+        "/json/realm/user_settings_defaults",
-
+        true,
-        const data = {presence_enabled: container.find(".presence_enabled").prop("checked")};
+    );
-        settings_ui.do_settings_change(
-            channel.patch,
-            "/json/realm/user_settings_defaults",
-            data,
-            container.find(".privacy-setting-status").expectOne(),
-        );
-    });
-
-    container.find(".enter_sends").on("change", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const data = {enter_sends: container.find(".enter_sends").prop("checked")};
-        settings_ui.do_settings_change(
-            channel.patch,
-            "/json/realm/user_settings_defaults",
-            data,
-            container.find(".other-setting-status").expectOne(),
-        );
-    });
 
     maybe_disable_widgets();
 }

static/templates/settings/display_settings.hbs

@@ -20,17 +20,17 @@
     </div>
     {{/unless}}
 
-    <div class="display-settings">
+    <div class="display-settings {{#if for_realm_settings}}org-subsection-parent{{/if}}">
         <div class="subsection-header">
             <h3>{{t "Display settings" }}</h3>
-            {{> settings_save_discard_widget section_name="display-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="display-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
         <div class="input-group inline-block">
             <label for="default_view" class="dropdown-title">{{t "Default view" }}
                 {{> ../help_link_widget link="/help/change-default-view" }}
             </label>
-            <select name="default_view" class="setting_default_view">
+            <select name="default_view" class="setting_default_view prop-element" data-setting-widget-type="string">
                 {{> dropdown_options_widget option_values=default_view_values}}
             </select>
         </div>
@@ -38,7 +38,7 @@
         <div class="input-group">
             <label for="color_scheme" class="dropdown-title">{{t "Color scheme" }}
             </label>
-            <select name="color_scheme" class="setting_color_scheme">
+            <select name="color_scheme" class="setting_color_scheme prop-element" data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=color_scheme_values}}
             </select>
         </div>
@@ -56,21 +56,21 @@
             <label for="demote_inactive_streams" class="dropdown-title">{{t "Demote inactive streams" }}
                 {{> ../help_link_widget link="/help/manage-inactive-streams" }}
             </label>
-            <select name="demote_inactive_streams" class="setting_demote_inactive_streams">
+            <select name="demote_inactive_streams" class="setting_demote_inactive_streams prop-element"  data-setting-widget-type="number">
                 {{> dropdown_options_widget option_values=demote_inactive_streams_values}}
             </select>
         </div>
     </div>
 
-    <div class="time-settings">
+    <div class="time-settings {{#if for_realm_settings}}org-subsection-parent{{/if}}">
         <div class="subsection-header">
             <h3>{{t "Time settings" }}</h3>
-            {{> settings_save_discard_widget section_name="time-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="time-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
         <div class="input-group">
             <label for="twenty_four_hour_time" class="dropdown-title">{{ settings_label.twenty_four_hour_time }}</label>
-            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time">
+            <select name="twenty_four_hour_time" class="setting_twenty_four_hour_time prop-element" data-setting-widget-type="string">
                 {{#each twenty_four_hour_time_values}}
                 <option value='{{ this.value }}'>{{ this.description }}</option>
                 {{/each}}
@@ -78,17 +78,17 @@
         </div>
     </div>
 
-    <div class="emoji-settings">
+    <div class="emoji-settings {{#if for_realm_settings}}org-subsection-parent{{/if}}">
         <div class="subsection-header">
             <h3 class="light">{{t "Emoji settings" }}</h3>
-            {{> settings_save_discard_widget section_name="emoji-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="emoji-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
         <div class="input-group">
             <div class="emojiset_choices grey-box">
                 {{#each settings_object.emojiset_choices}}
                 <label>
-                    <input type="radio" class="setting_emojiset_choice" name="emojiset" value="{{this.key}}" />
+                    <input type="radio" class="setting_emojiset_choice prop-element" name="emojiset" value="{{this.key}}" data-setting-widget-type="radio-group"/>
                     <span>{{this.text}}</span>
                     <span class="right">
                         {{#if (eq this.key "text") }}

static/templates/settings/notification_settings.hbs

@@ -1,8 +1,8 @@
 <form class="notification-settings-form">
-    <div class="general_notifications subsection-parent">
+    <div class="general_notifications {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
         <div class="subsection-header inline-block">
             <h3>{{t "Notification triggers" }}</h3>
-            {{> settings_save_discard_widget section_name="general-notifiy-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="general-notifiy-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
         <p>{{t "Configure how Zulip notifies you about new messages." }}</p>
         <table class="notification-table table table-condensed table-bordered wrapped-table">
@@ -48,11 +48,11 @@
         </table>
     </div>
 
-    <div class="desktop_notifications m-10 subsection-parent">
+    <div class="desktop_notifications m-10 {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
 
         <div class="subsection-header inline-block">
             <h3>{{t "Desktop message notifications" }}</h3>
-            {{> settings_save_discard_widget section_name="desktop-message-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="desktop-message-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
         {{#unless for_realm_settings}}
@@ -72,7 +72,7 @@
         </label>
 
         <div class="input-group {{#unless enable_sound_select}}control-label-disabled{{/unless}}">
-            <select name="notification_sound" class="setting_notification_sound" data-setting-widget-type="string"
+            <select name="notification_sound" class="setting_notification_sound prop-element" data-setting-widget-type="string"
               {{#unless enable_sound_select}}
               disabled
               {{/unless}}>
@@ -95,11 +95,11 @@
         </div>
     </div>
 
-    <div class="mobile_notifications m-10 subsection-parent">
+    <div class="mobile_notifications m-10 {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
 
         <div class="subsection-header inline-block">
             <h3>{{t "Mobile message notifications" }}</h3>
-            {{> settings_save_discard_widget section_name="mobile-message-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="mobile-message-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
         {{#each notification_settings.mobile_notification_settings}}
@@ -112,11 +112,11 @@
         {{/each}}
     </div>
 
-    <div class="email_message_notifications m-10 subsection-parent">
+    <div class="email_message_notifications m-10 {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
 
         <div class="subsection-header inline-block">
             <h3>{{t "Email message notifications" }}</h3>
-            {{> settings_save_discard_widget section_name="email-message-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="email-message-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
 
         <label for="email_notifications_batching_period">
@@ -124,7 +124,7 @@
         </label>
 
         <div class="input-group">
-            <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds" data-setting-widget-type="number">
+            <select name="email_notifications_batching_period_seconds" class="setting_email_notifications_batching_period_seconds prop-element" data-setting-widget-type="number">
                 {{#each email_notifications_batching_period_values}}
                 <option value="{{ this.value }}">{{ this.description }}</option>
                 {{/each}}
@@ -140,11 +140,11 @@
         {{/each}}
     </div>
 
-    <div class="other_email_notifications m-10 subsection-parent">
+    <div class="other_email_notifications m-10 {{#if for_realm_settings}}org-subsection-parent{{else}}subsection-parent{{/if}}">
 
         <div class="subsection-header inline-block">
             <h3>{{t "Other emails" }}</h3>
-            {{> settings_save_discard_widget section_name="other-emails-settings" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="other-emails-settings" show_only_indicator=(not for_realm_settings) }}
         </div>
         {{#each notification_settings.other_email_settings}}
         {{> settings_checkbox

static/templates/settings/notification_settings_checkboxes.hbs

@@ -3,7 +3,7 @@
         <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="boolean"
-          class="{{setting_name}}"/>
+          class="{{setting_name}}{{#unless is_disabled}} prop-element{{/unless}}"/>
         <span></span>
     </label>
 </td>

static/templates/settings/organization_user_settings_defaults.hbs

@@ -10,10 +10,10 @@
 
     {{> notification_settings prefix="realm_" for_realm_settings=true}}
 
-    <div class="form-horizontal privacy_settings">
+    <div class="form-horizontal privacy_settings org-subsection-parent">
         <div class="subsection-header inline-block">
             <h3 class="inline-block">{{t "Privacy settings" }}</h3>
-            {{> settings_save_discard_widget section_name="privacy-setting" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="privacy-setting" show_only_indicator=false }}
         </div>
         {{> settings_checkbox
           setting_name="presence_enabled"
@@ -23,10 +23,10 @@
           prefix="realm_"}}
     </div>
 
-    <div class="form-horizontal other_settings">
+    <div class="form-horizontal other_settings org-subsection-parent">
         <div class="subsection-header inline-block">
             <h3 class="inline-block">{{t "Other settings" }}</h3>
-            {{> settings_save_discard_widget section_name="other-setting" show_only_indicator=true }}
+            {{> settings_save_discard_widget section_name="other-setting" show_only_indicator=false }}
         </div>
         {{> settings_checkbox
           setting_name="enter_sends"