org settings: Improve error handling status elements.

With styling work by @maxnuss.

Fixes: #9188.

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

@@ -267,7 +267,7 @@ casper.then(function () {
 });
 
 casper.then(function () {
-    casper.waitUntilVisible('.admin-realm-failed-change-status', function () {
+    casper.waitUntilVisible('#org-msg-editing .subsection-failed-status', function () {
         casper.test.assertSelectorHasText('#org-submit-msg-editing',
                                           'Save');
     });

frontend_tests/node_tests/settings_org.js

@@ -143,9 +143,9 @@ function createSaveButtons(subsection) {
     var save_btn_controls = $('.save-btn-controls');
     var stub_save_button = $(`#org-submit-${subsection}`);
     var stub_save_button_text = $('.icon-button-text');
-    stub_save_button_header.prevAll = function () {
+    stub_save_button_header.set_find_results(
-        return $('<stub failed alert status element>');
+        '.subsection-failed-status p', $('<failed status element>')
-    };
+    );
     stub_save_button.closest = function () {
         return stub_save_button_header;
     };

static/js/settings_org.js

@@ -570,7 +570,9 @@ exports.set_up = function () {
         e.preventDefault();
         e.stopPropagation();
 
-        var subsection = $(this).closest('.org-subsection-parent');
+        var subsection = $(e.target).closest('.org-subsection-parent');
+        subsection.find('.subsection-failed-status p').hide();
+        subsection.find('.save-button').show();
         var properties_elements = get_subsection_property_elements(subsection);
         var show_change_process_button = false;
         _.each(properties_elements , function (elem) {
@@ -595,7 +597,7 @@ exports.set_up = function () {
     exports.save_organization_settings = function (data, save_button, success_continuation) {
         var subsection_parent = save_button.closest('.org-subsection-parent');
         var save_btn_container = subsection_parent.find('.save-button-controls');
-        var failed_alert_elem = subsection_parent.prevAll('.admin-realm-failed-change-status:first').expectOne();
+        var failed_alert_elem = subsection_parent.find('.subsection-failed-status p');
         exports.change_save_button_state(save_btn_container, "saving");
         channel.patch({
             url: "/json/realm",
@@ -611,7 +613,8 @@ exports.set_up = function () {
             },
             error: function (xhr) {
                 exports.change_save_button_state(save_btn_container, "failed");
-                ui_report.error(i18n.t("Failed"), xhr, failed_alert_elem);
+                save_button.hide();
+                ui_report.error(i18n.t("Save failed"), xhr, failed_alert_elem);
             },
         });
     };

static/styles/settings.scss

@@ -541,6 +541,11 @@ input[type=checkbox].inline-block {
         margin: auto;
         text-align: center;
     }
+
+    #settings_page .save-button-controls {
+        display: block;
+        margin: 10px 0 0 0;
+    }
 }
 
 #organization .settings-section .settings-section-icon,
@@ -1524,6 +1529,14 @@ input[type=text]#settings_search {
     bottom: 0px;
 }
 
+.subsection-failed-status p {
+    background: #f2dede;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin: 0 0 0 5px;
+}
+
+
 @media (max-width: 953px) {
     .user-avatar-section,
     .realm-icon-section {
@@ -1539,6 +1552,10 @@ input[type=text]#settings_search {
     #settings_content .warning {
         display: none;
     }
+
+    .subsection-failed-status p {
+        margin: 5px 0 0 0;
+    }
 }
 
 @media (max-width: 786px) {

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

@@ -1,8 +1,6 @@
 <div id="organization-permissions" data-name="organization-permissions" class="settings-section">
     <form class="form-horizontal admin-realm-form org-permissions-form">
 
-        <div class="alert admin-realm-failed-change-status"></div>
-
         <div id="org-org-join" class="org-subsection-parent">
             <div class="subsection-header">
                 <h3>{{t "Joining the organization" }}</h3>

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

@@ -1,7 +1,6 @@
 <div id="organization-profile" data-name="organization-profile" class="settings-section">
     <form class="form-horizontal admin-realm-form org-profile-form">
         <div class="alert" id="admin-realm-deactivation-status"></div>
-        <div class="alert admin-realm-failed-change-status"></div>
 
         <div id="org-org-profile" class="org-subsection-parent">
             <div class="subsection-header">

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

@@ -2,7 +2,6 @@
     <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 admin-realm-failed-change-status"></div>
 
         <div id="org-msg-editing" class="org-subsection-parent">
             <div class="subsection-header">

static/templates/settings/settings-save-discard-widget.handlebars

@@ -17,5 +17,6 @@
             </span>
         </div>
     </div>
+    <div class="inline-block subsection-failed-status"><p class="hide"></p></div>
 </div>
 {{/if}}