settings: Enable and disable the save button in change_save_button_state.

We now enable and disable save button when changing inputs for custom time
limit settings in change_save_button_state function only which shows or hide
the save-discard widget instead of handling them in "change" event handlers.

This fixes the bug of save button flashing to its enabled state from
disabled state before hiding after clicking on "Discard" as now button
is re-enabled only after save-discard widget is hidden and it is disabled
if required before being shown.

Note that there is still a bug for message edit and delete limit settings
where the save button flashes to enabled state when setting is changed to
the original value instead of clicking on "Discard". This bug is not present
for email notification batching setting in a follow-up PR.

This commit also renames update_save_button_state function to
enable_or_disable_save_button to avoid confusion with
change_save_button_state function.

frontend_tests/node_tests/settings_org.js

@@ -86,6 +86,11 @@ function createSaveButtons(subsection) {
     $save_button_controls.fadeOut = () => {
         props.hidden = true;
     };
+
+    $save_button_controls.closest = () => $stub_save_button_header;
+    $stub_save_button_header.set_find_results(".time-limit-setting", []);
+    $stub_save_button_header.set_find_results(".subsection-changes-save button", $stub_save_button);
+
     return {
         props,
         $save_button: $stub_save_button,

static/js/settings_org.js

@@ -626,13 +626,13 @@ export function sync_realm_settings(property) {
 }
 
 export function change_save_button_state($element, state) {
-    function show_hide_element($element, show, fadeout_delay) {
+    function show_hide_element($element, show, fadeout_delay, fadeout_callback) {
         if (show) {
             $element.removeClass("hide").addClass(".show").fadeIn(300);
             return;
         }
         setTimeout(() => {
-            $element.fadeOut(300);
+            $element.fadeOut(300, fadeout_callback);
         }, fadeout_delay);
     }
 
@@ -644,10 +644,9 @@ export function change_save_button_state($element, state) {
     }
 
     if (state === "discarded") {
-        if ($saveBtn.prop("disabled")) {
-            $saveBtn.prop("disabled", false);
-        }
-        show_hide_element($element, false, 0);
+        show_hide_element($element, false, 0, () =>
+            enable_or_disable_save_button($element.closest(".org-subsection-parent")),
+        );
         return;
     }
 
@@ -689,6 +688,9 @@ export function change_save_button_state($element, state) {
 
     $textEl.text(button_text);
     $saveBtn.attr("data-status", data_status);
+    if (state === "unsaved") {
+        enable_or_disable_save_button($element.closest(".org-subsection-parent"));
+    }
     show_hide_element($element, is_show, 800);
 }
 
@@ -888,8 +890,7 @@ export function init_dropdown_widgets() {
     default_code_language_widget.setup();
 }
 
-export function update_save_button_state(e) {
-    const $subsection_elem = $(e.target).closest(".org-subsection-parent");
+function enable_or_disable_save_button($subsection_elem) {
     const time_limit_settings = Array.from($subsection_elem.find(".time-limit-setting"));
     let disable_save_btn = false;
     for (const setting_elem of time_limit_settings) {
@@ -1210,8 +1211,6 @@ export function build_page() {
             const setting_value = get_property_value("realm_message_content_edit_limit_minutes");
             $("#id_realm_message_content_edit_limit_minutes").val(setting_value);
         }
-
-        update_save_button_state(e);
     });
 
     $("#id_realm_msg_delete_limit_setting").on("change", (e) => {
@@ -1229,8 +1228,6 @@ export function build_page() {
             const setting_value = get_property_value("realm_message_content_delete_limit_minutes");
             $("#id_realm_message_content_delete_limit_minutes").val(setting_value);
         }
-
-        update_save_button_state(e);
     });
 
     $("#id_realm_message_retention_setting").on("change", (e) => {
@@ -1287,10 +1284,6 @@ export function build_page() {
         e.stopPropagation();
     });
 
-    $("#org-msg-editing").on("input", ".admin-realm-time-limit-input", (e) => {
-        update_save_button_state(e);
-    });
-
     $("#show_realm_domains_modal").on("click", (e) => {
         e.stopPropagation();
         settings_realm_domains.show_realm_domains_modal();

static/js/settings_realm_user_settings_defaults.js

@@ -63,14 +63,6 @@ export function set_up() {
     );
 
     maybe_disable_widgets();
-
-    $container.on("input", ".email_notification_batching_period_edit_minutes", (e) => {
-        settings_org.update_save_button_state(e);
-    });
-
-    $container.on("change", ".setting_email_notifications_batching_period_seconds", (e) => {
-        settings_org.update_save_button_state(e);
-    });
 }
 
 export function initialize() {