settings_org: Fix visibility time of Saved state.

This fixes the bug where the `Saved` state button faded out almost
instantly (that is actually 300 ms) and `Discard` button fades out
along with `Saved` state button; the key problem here was that the
setTimeout intended to fade was actually delaying the transition from
"saving" to "saved".

Now, first of all, we use `setTimeOut` function to fadeout elements giving
fadeout_delay time as `800 ms` and we hide discard button during `saving`
state. Also, when `Discard` button is selected, `Save changes` and `Dicard`
fade out simultaneously.

Fixes: #11737.

frontend_tests/node_tests/settings_org.js

@@ -169,6 +169,7 @@ function createSaveButtons(subsection) {
     const stub_save_button_header = $('.subsection-header');
     const save_btn_controls = $('.save-btn-controls');
     const stub_save_button = $(`#org-submit-${subsection}`);
+    const stub_discard_button = $(`#org-submit-${subsection}`);
     const stub_save_button_text = $('.icon-button-text');
     stub_save_button_header.set_find_results(
         '.subsection-failed-status p', $('<failed status element>')
@@ -186,6 +187,9 @@ function createSaveButtons(subsection) {
     stub_save_button_header.set_find_results(
         '.subsection-changes-discard .button', $(`#org-discard-${subsection}`)
     );
+    save_btn_controls.set_find_results(
+        '.discard-button', stub_discard_button
+    );
     const props  = {};
     props.hidden = false;
     save_btn_controls.fadeIn = () => {
@@ -197,6 +201,7 @@ function createSaveButtons(subsection) {
     return {
         props: props,
         save_button: stub_save_button,
+        discard_button: stub_discard_button,
         save_button_header: stub_save_button_header,
         save_button_controls: save_btn_controls,
         save_button_text: stub_save_button_text,
@@ -275,12 +280,14 @@ function test_change_save_button_state() {
     var $save_btn_controls = stubs.save_button_controls;
     var $save_btn_text = stubs.save_button_text;
     var $save_btn = stubs.save_button;
+    var $discard_btn = stubs.discard_button;
     $save_btn.attr("id", "org-submit-msg-editing");
     var props = stubs.props;
     settings_org.change_save_button_state($save_btn_controls, "unsaved");
     assert.equal($save_btn_text.text(), 'translated: Save changes');
     assert.equal(props.hidden, false);
     assert.equal($save_btn.attr("data-status"), "unsaved");
+    assert.equal($discard_btn.visible(), true);
     settings_org.change_save_button_state($save_btn_controls, "saved");
     assert.equal($save_btn_text.text(), 'translated: Save changes');
     assert.equal(props.hidden, true);
@@ -289,9 +296,9 @@ function test_change_save_button_state() {
     assert.equal($save_btn_text.text(), 'translated: Saving');
     assert.equal($save_btn.attr("data-status"), "saving");
     assert.equal($save_btn.hasClass('saving'), true);
+    assert.equal($discard_btn.visible(), false);
     settings_org.change_save_button_state($save_btn_controls, "discarded");
     assert.equal(props.hidden, true);
-    assert.equal($save_btn.hasClass('saving'), false);
     settings_org.change_save_button_state($save_btn_controls, "succeeded");
     assert.equal(props.hidden, true);
     assert.equal($save_btn.attr("data-status"), "saved");

static/js/settings_org.js

@@ -535,20 +535,31 @@ exports.sync_realm_settings = function (property) {
         discard_property_element_changes(element);
     }
 };
-function show_hide_element($element, show) {
+
+
+exports.change_save_button_state = function ($element, state) {
+    function show_hide_element($element, show, fadeout_delay) {
         if (show) {
             $element.removeClass('hide').addClass('.show').fadeIn(300);
             return;
         }
+        setTimeout(function () {
             $element.fadeOut(300);
+        }, fadeout_delay);
     }
 
-exports.change_save_button_state = function ($element, state) {
     var $saveBtn = $element.find('.save-button');
     var $textEl = $saveBtn.find('.icon-button-text');
+
     if (state !== "saving") {
         $saveBtn.removeClass('saving');
     }
+
+    if (state === "discarded") {
+        show_hide_element($element, false);
+        return;
+    }
+
     var button_text;
     var data_status;
     var is_show;
@@ -556,17 +567,18 @@ exports.change_save_button_state = function ($element, state) {
         button_text = i18n.t("Save changes");
         data_status = "unsaved";
         is_show = true;
+
+        $element.find('.discard-button').show();
     } else if (state === "saved") {
         button_text = i18n.t("Save changes");
         data_status = "";
         is_show = false;
-    } else if (state === "discarded") {
-        $element.removeClass('saving');
-        is_show = false;
     } else if (state === "saving") {
         button_text = i18n.t("Saving");
         data_status = "saving";
         is_show = true;
+
+        $element.find('.discard-button').hide();
         $saveBtn.addClass('saving');
     } else if (state === "failed") {
         button_text = i18n.t("Save changes");
@@ -578,13 +590,9 @@ exports.change_save_button_state = function ($element, state) {
         is_show = false;
     }
 
-    if (button_text) {
     $textEl.text(button_text);
-    }
-    if (data_status) {
     $saveBtn.attr("data-status", data_status);
-    }
+    show_hide_element($element, is_show, 800);
-    show_hide_element($element, is_show);
 };
 
 exports.set_up = function () {
@@ -704,9 +712,7 @@ exports.build_page = function () {
             data: data,
             success: function (response_data) {
                 failed_alert_elem.hide();
-                setTimeout(function () {
                 exports.change_save_button_state(save_btn_container, "succeeded");
-                }, 500);
                 if (success_continuation !== undefined) {
                     success_continuation(response_data);
                 }