org settings: Make each subsection independent for saving changes.

This makes each subsection(like "Message feed") independent of changes
done in any other subsection and the save button of each subsection
saves the changes done in that subsection only.

frontend_tests/casper_tests/10-admin.js

@@ -317,9 +317,6 @@ casper.then(function () {
     });
 });
 
-function submit_org_settings_change() {
-    casper.click('form.org-settings-form button.button');
-}
 
 casper.then(function () {
     casper.click("li[data-section='organization-settings']");
@@ -328,14 +325,15 @@ casper.then(function () {
         casper.evaluate(function () {
             $('#id_realm_default_language').val('de').change();
         });
-        submit_org_settings_change();
+        casper.test.assertSelectorHasText('#org-submit-language-notify', "Save");
+        casper.click('#org-submit-language-notify');
     });
 });
 
 casper.then(function () {
-    casper.waitUntilVisible('#admin-realm-default-language-status', function () {
-        casper.test.assertSelectorHasText('#admin-realm-default-language-status',
-                                          'Default language changed!');
+    casper.waitUntilVisible('#org-submit-language-notify[data-status="saved"]', function () {
+        casper.test.assertSelectorHasText('#org-submit-language-notify',
+                                          'Saved');
     });
 });
 

frontend_tests/casper_tests/12-toggle-message-editing.js

@@ -6,19 +6,10 @@ function heading(heading_str) {
     });
 }
 
-function submit() {
-    // Casper 1.1.4 has a strange bug related to dispatching functions
-    // twice.  We call save_organization_settings() to try to minimize
-    // the moving parts involved in troubleshooting.
-    casper.evaluate(function () {
-        settings_org.save_organization_settings();
-    });
-}
-
 function submit_checked() {
     casper.then(function () {
         casper.waitUntilVisible('input:checked[type="checkbox"][id="id_realm_allow_message_editing"] + span', function () {
-            submit();
+            casper.click('#org-submit-msg-editing');
         });
     });
 }
@@ -26,7 +17,7 @@ function submit_checked() {
 function submit_unchecked() {
     casper.then(function () {
         casper.waitUntilVisible('input:not(:checked)[type="checkbox"][id="id_realm_allow_message_editing"] + span', function () {
-            submit();
+            casper.click('#org-submit-msg-editing');
         });
     });
 }
@@ -114,8 +105,9 @@ common.then_click('input[type="checkbox"][id="id_realm_allow_message_editing"] +
 submit_unchecked();
 
 casper.then(function () {
-    casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
-        casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can no longer edit their past messages!');
+    casper.waitUntilVisible('#org-submit-msg-editing[data-status="saved"]', function () {
+        casper.test.assertSelectorHasText('#org-submit-msg-editing',
+                                          'Saved');
         casper.test.assertEval(function () {
             return !(document.querySelector('input[type="checkbox"][id="id_realm_allow_message_editing"]').checked);
         }, 'Allow message editing Setting de-activated');
@@ -167,8 +159,9 @@ common.then_click('input[type="checkbox"][id="id_realm_allow_message_editing"] +
 submit_checked();
 
 casper.then(function () {
-    casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
-        casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can now edit topics for all their messages, and the content of messages which are less than 10 minutes old.');
+    casper.waitUntilVisible('#org-submit-msg-editing[data-status="saved"]', function () {
+        casper.test.assertSelectorHasText('#org-submit-msg-editing',
+                                          'Saved');
         casper.test.assertEval(function () {
             return document.querySelector('input[type="checkbox"][id="id_realm_allow_message_editing"]').checked;
         }, 'Allow message editing Setting re-activated');
@@ -204,8 +197,9 @@ common.then_click('input[type="checkbox"][id="id_realm_allow_message_editing"] +
 submit_unchecked();
 
 casper.then(function () {
-    casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
-        casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can no longer edit their past messages!');
+    casper.waitUntilVisible('#org-submit-msg-editing[data-status="saved"]', function () {
+        casper.test.assertSelectorHasText('#org-submit-msg-editing',
+                                          'Saved');
         casper.test.assertEval(function () {
             return !(document.querySelector('input[type="checkbox"][id="id_realm_allow_message_editing"]').checked);
         }, 'Allow message editing Setting de-activated');
@@ -222,8 +216,9 @@ common.then_click('input[type="checkbox"][id="id_realm_allow_message_editing"] +
 submit_checked();
 
 casper.then(function () {
-    casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
-        casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can now edit topics for all their messages, and the content of messages which are less than 4 minutes old.');
+    casper.waitUntilVisible('#org-submit-msg-editing[data-status="saved"]', function () {
+        casper.test.assertSelectorHasText('#org-submit-msg-editing',
+                                          'Saved');
         casper.test.assertEval(function () {
             return document.querySelector('input[type="checkbox"][id="id_realm_allow_message_editing"]').checked;
         }, 'Allow message editing Setting activated');
@@ -247,8 +242,9 @@ casper.then(function () {
 submit_checked();
 
 casper.then(function () {
-    casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
-        casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can now edit the content and topics of all their past messages!');
+    casper.waitUntilVisible('#org-submit-msg-editing[data-status="saved"]', function () {
+        casper.test.assertSelectorHasText('#org-submit-msg-editing',
+                                          'Saved');
         casper.test.assertEval(function () {
             return document.querySelector('input[type="checkbox"][id="id_realm_allow_message_editing"]').checked;
         }, 'Allow message editing Setting still activated');
@@ -273,8 +269,9 @@ common.then_click('input[type="checkbox"][id="id_realm_allow_message_editing"] +
 submit_unchecked();
 
 casper.then(function () {
-    casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
-        casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can no longer edit their past messages!');
+    casper.waitUntilVisible('#org-submit-msg-editing[data-status="saved"]', function () {
+        casper.test.assertSelectorHasText('#org-submit-msg-editing',
+                                          'Saved');
         casper.test.assertEval(function () {
             return !(document.querySelector('input[type="checkbox"][id="id_realm_allow_message_editing"]').checked);
         }, 'Allow message editing Setting de-activated');

frontend_tests/node_tests/settings_org.js

@@ -180,6 +180,7 @@ function test_submit_settings_form(submit_form) {
     var ev = {
         preventDefault: noop,
         stopPropagation: noop,
+        target: '#org-submit-msg-editing',
     };
 
     $('#id_realm_default_language').val('fr');
@@ -190,14 +191,21 @@ function test_submit_settings_form(submit_form) {
     channel.patch = function (req) {
         patched = true;
         assert.equal(req.url, '/json/realm');
-
-        var data = req.data;
-
-        assert.equal(data.default_language, '"fr"');
-
         success_callback = req.success;
     };
 
+    var stub_save_button = $('#org-submit-msg-editing');
+    stub_save_button.attr = function () {
+        return 'org-submit-msg-editing';
+    };
+    var stub_save_button_header = $('.subsection-header');
+    stub_save_button.closest = function () {
+        return stub_save_button_header;
+    };
+    stub_save_button_header.set_find_results(
+        '.subsection-changes-discard button', $.create('#org-discard-msg-editing')
+    );
+
     submit_form(ev);
     assert(patched);
 
@@ -208,26 +216,19 @@ function test_submit_settings_form(submit_form) {
 
     success_callback(response_data);
 
-    var editing_status = $('#admin-realm-message-editing-status').val();
-    assert(editing_status.indexOf('content of messages which are less than') > 0);
+    var updated_value_from_response = $('#id_realm_message_content_edit_limit_minutes').val();
+    assert(updated_value_from_response, 3);
+
+    $('#id_realm_message_content_edit_limit_minutes').val = function (time_limit) {
+        updated_value_from_response = time_limit;
+    };
 
     response_data = {
         allow_message_editing: true,
-        message_content_edit_limit_seconds: 0,
+        message_content_edit_limit_seconds: 10,
     };
     success_callback(response_data);
-
-    assert.equal($('#admin-realm-message-editing-status').val(),
-                 'translated: Users can now edit the content and topics ' +
-                 'of all their past messages!');
-
-    response_data = {
-        allow_message_editing: false,
-    };
-    success_callback(response_data);
-
-    assert.equal($('#admin-realm-message-editing-status').val(),
-          'translated: Users can no longer edit their past messages!');
+    assert(updated_value_from_response, 0);
 }
 
 function test_submit_permissions_form(submit_form) {
@@ -469,7 +470,7 @@ function test_change_allow_subdomains(change_allow_subdomains) {
     var submit_permissions_form;
     var submit_profile_form;
     $('.organization').on = function (action, selector, f) {
-        if (selector === 'button.save-message-org-settings') {
+        if (selector === '.subsection-header .subsection-changes-save button') {
             assert.equal(action, 'click');
             submit_settings_form = f;
         }

static/js/settings_org.js

@@ -418,20 +418,42 @@ function _set_up() {
         settings_ui.disable_sub_setting_onchange(this.checked, "id_realm_message_content_edit_limit_minutes", true);
     });
 
-    exports.save_organization_settings = function () {
-        _.each(property_types.settings, function (v, k) {
-            property_type_status_element(k).hide();
+    exports.save_organization_settings = function (data, save_button, success_continuation) {
+        var failed_alert_elem = $('#admin-realm-failed-change-status');
+        save_button.text(i18n.t("Saving"));
+        save_button.attr("data-status", "saving");
+        channel.patch({
+            url: "/json/realm",
+            data: data,
+            success: function (response_data) {
+                failed_alert_elem.hide();
+                save_button.text(i18n.t("Saved"));
+                save_button.attr("data-status", "saved");
+                if (success_continuation !== undefined) {
+                    success_continuation(response_data);
+                }
+            },
+            error: function (xhr) {
+                save_button.attr("data-status", "failed");
+                save_button.text(i18n.t("Save"));
+                ui_report.error(i18n.t("Failed"), xhr, failed_alert_elem);
+            },
         });
+    };
 
-        var message_editing_status = $("#admin-realm-message-editing-status").expectOne();
-        // grab the first alert available and use it for the status.
-        var $alerts = $(".settings-section.show .alert").hide();
-        // grab the first alert available and use it for the status.
-        var status = $("#admin-realm-notifications-stream-status");
+    $(".organization").on("click", ".subsection-header .subsection-changes-save button", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var save_button = $(e.target);
+        var subsection_id = save_button.attr('id').replace("org-submit-", "");
+        var subsection = subsection_id.split('-').join('_');
 
+        var data = {};
+        var success_continuation;
+
+        if (subsection === 'msg_editing') {
             var compose_textarea_edit_limit_minutes = $("#id_realm_message_content_edit_limit_minutes").val();
             var new_allow_message_editing = $("#id_realm_allow_message_editing").prop("checked");
-
             // If allow_message_editing is unchecked, message_content_edit_limit_minutes
             // is irrelevant.  Hence if allow_message_editing is unchecked, and
             // message_content_edit_limit_minutes is poorly formed, we set the latter to
@@ -445,77 +467,27 @@ function _set_up() {
                 }
             }
 
-        var url = "/json/realm";
-        var data = {};
-        data = populate_data_for_request({
+            data = {
                 allow_message_editing: JSON.stringify(new_allow_message_editing),
                 message_content_edit_limit_seconds:
                     JSON.stringify(parseInt(compose_textarea_edit_limit_minutes, 10) * 60),
-        }, property_types.settings);
+            };
 
-        channel.patch({
-            url: url,
-            data: data,
-
-            success: function (response_data) {
-                $alerts.hide();
+            success_continuation = function (response_data) {
                 if (response_data.allow_message_editing !== undefined) {
                    // We expect message_content_edit_limit_seconds was sent in the
                    // response as well
                    var data_message_content_edit_limit_minutes =
                    Math.ceil(response_data.message_content_edit_limit_seconds / 60);
-                    if (response_data.allow_message_editing) {
-                        if (response_data.message_content_edit_limit_seconds > 0) {
-                            ui_report.success(
-                                i18n.t("Users can now edit topics for all their messages, and the content of messages which are less than __num_minutes__ minutes old.",
-                                       {num_minutes : data_message_content_edit_limit_minutes}),
-                                message_editing_status);
-                        } else {
-                            ui_report.success(i18n.t("Users can now edit the content and topics of all their past messages!"), message_editing_status);
-                        }
-                    } else {
-                        ui_report.success(i18n.t("Users can no longer edit their past messages!"), message_editing_status);
-                    }
                    // message_content_edit_limit_seconds could have been changed earlier
                    // in this function, so update the field just in case
                    $("#id_realm_message_content_edit_limit_minutes").val(data_message_content_edit_limit_minutes);
                 }
-
-                process_response_data(response_data, 'settings');
-                // Check if no changes made
-                var no_changes_made = true;
-                for (var key in response_data) {
-                    if (['msg', 'result'].indexOf(key) < 0) {
-                        no_changes_made = false;
-                    }
-                }
-                if (no_changes_made) {
-                    ui_report.success(i18n.t("No changes to save!"), status);
-                }
-            },
-            error: function (xhr) {
-                $alerts.hide();
-                ui_report.error(i18n.t("Failed"), xhr, status);
-            },
-        });
             };
+        }
 
-    // For historical reasons, the save_organization_settings() function handles
-    // saving data for two different sections of the "Organization settings" panel.
-    // TODO: Make two separate click handlers, so that we only save changes that
-    //       make sense for the individual buttons.
-    $(".organization").on("click", "button.save-message-org-settings", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        exports.save_organization_settings(e);
-    });
-
-    $(".organization").on("click", "button.save-language-org-settings", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        exports.save_organization_settings(e);
+        data = populate_data_for_request(data, org_settings[subsection]);
+        exports.save_organization_settings(data, save_button, success_continuation);
     });
 
     $("#id_realm_create_stream_permission").change(function () {

static/styles/settings.css

@@ -359,6 +359,21 @@ input[type=checkbox] + .inline-block {
     margin-top: 0px;
 }
 
+.org-settings-form .subsection-header h3 {
+    display: inline;
+}
+
+.org-settings-form .subsection-header div[class*="subsection-changes"] {
+    display: inline;
+}
+
+.org-settings-form .subsection-header div[class*="subsection-changes"] button {
+    display: inline-block;
+    margin-top: -4px;
+    min-width: 80px;
+    line-height: 10px;
+}
+
 #default_language {
     margin-left: 20px;
 }

static/templates/settings/organization-settings-admin.handlebars

@@ -2,19 +2,18 @@
     <form class="form-horizontal admin-realm-form org-settings-form">
         <div class="alert" id="admin-realm-notifications-stream-status"></div>
         <div class="alert" id="admin-realm-signup-notifications-stream-status"></div>
-        <div class="alert" id="admin-realm-default-language-status"></div>
-        <div class="alert" id="admin-realm-send-welcome-emails-status"></div>
-
-        <div class="alert" id="admin-realm-inline-image-preview-status"></div>
-        <div class="alert" id="admin-realm-inline-url-embed-preview-status"></div>
-        <div class="alert" id="admin-realm-allow-edit-history-status"></div>
-        <div class="alert" id="admin-realm-allow-message-deleting-status"></div>
-        <div class="alert" id="admin-realm-message-editing-status"></div>
-        <div class="alert" id="admin-realm-mandatory-topics-status"></div>
+        <div class="alert" id="admin-realm-failed-change-status"></div>
 
         <div id="org-msg-editing" class="org-subsection-parent">
             <div class="subsection-header">
                 <h3>{{t "Message editing" }}</h3>
+                {{#if is_admin }}
+                <div class="input-group organization-submission subsection-changes-save">
+                    <button id="org-submit-msg-editing" class="button rounded sea-green" data-status="save">
+                        {{t 'Save' }}
+                    </button>
+                </div>
+                {{/if}}
             </div>
             <div class="inline-block organization-settings-parent">
                 <div class="input-group">
@@ -69,6 +68,13 @@
         <div id="org-msg-feed" class="org-subsection-parent">
             <div class="subsection-header">
                 <h3>{{t "Message feed" }}</h3>
+                {{#if is_admin }}
+                <div class="input-group organization-submission subsection-changes-save">
+                    <button id="org-submit-msg-feed" class="button rounded sea-green" data-status="save">
+                        {{t 'Save' }}
+                    </button>
+                </div>
+                {{/if}}
             </div>
             <div class="inline-block organization-settings-parent">
                 {{#if false}}
@@ -123,17 +129,16 @@
             </div>
         </div>
 
-        {{#if is_admin }}
-        <div class="input-group organization-submission">
-            <button class="button rounded sea-green save-message-org-settings">
-                {{t 'Save changes' }}
-            </button>
-        </div>
-        {{/if}}
-
         <div id="org-language-notify" class="org-subsection-parent">
             <div class="subsection-header">
                 <h3>{{t "Language &amp; notifications" }}</h3>
+                {{#if is_admin }}
+                <div class="input-group organization-submission subsection-changes-save">
+                    <button id="org-submit-language-notify" class="button rounded sea-green" data-status="save">
+                        {{t 'Save' }}
+                    </button>
+                </div>
+                {{/if}}
             </div>
             <div class="inline-block organization-settings-parent">
                 <div class="input-group">
@@ -156,14 +161,6 @@
                 </div>
             </div>
 
-            {{#if is_admin }}
-            <div class="input-group organization-submission">
-                <button class="button rounded sea-green save-language-org-settings">
-                    {{t 'Save changes' }}
-                </button>
-            </div>
-            {{/if}}
-
             <div class="input-group">
                 <label for="realm_notifications_stream" id="realm_notifications_stream_label" class="inline-block"
                     title="{{t 'The stream to which new stream notifications go to.' }}">