settings: Improve status messages styling on "users" changes.

The legacy "Updated Successfully" message shown after saving changes,
is removed, and replaced with our standard "Saving" spinner and
animation.

Fixes: #11177.

static/js/settings_users.js

@@ -78,7 +78,7 @@ exports.update_user_data = function (user_id, new_data) {
 
 function failed_listing_users(xhr) {
     loading.destroy_indicator($('#subs_page_loading_indicator'));
-    ui_report.error(i18n.t("Error listing users or bots"), xhr, $("#organization-status"));
+    ui_report.error(i18n.t("Error listing users or bots"), xhr, $("#user-field-status"));
 }
 
 function populate_users(realm_people_data) {
@@ -252,7 +252,7 @@ exports.on_load_success = function (realm_people_data) {
         channel.del({
             url: '/json/users/' + encodeURIComponent(user_id),
             error: function (xhr) {
-                var status = $("#organization-status").expectOne();
+                var status = $("#user-field-status").expectOne();
                 ui_report.error(i18n.t("Failed"), xhr, status);
                 var button = meta.current_deactivate_user_modal_row.find("button.deactivate");
                 button.text(i18n.t("Deactivate"));
@@ -345,7 +345,7 @@ exports.on_load_success = function (realm_people_data) {
 
         var url;
         var data;
-        var admin_status = $('#organization-status').expectOne();
+        var admin_status;
         var full_name = user_info_form_modal.find("input[name='full_name']");
 
         user_info_form_modal.find('.submit_user_info_change').on("click", function (e) {
@@ -356,6 +356,7 @@ exports.on_load_success = function (realm_people_data) {
 
             if (person.is_bot) {
                 url = "/json/bots/" + encodeURIComponent(user_id);
+                admin_status = $('#bot-field-status').expectOne();
                 data = {
                     full_name: full_name.val(),
                 };
@@ -364,6 +365,7 @@ exports.on_load_success = function (realm_people_data) {
                     data.bot_owner_id = people.get_by_email(owner_select_value).user_id;
                 }
             } else {
+                admin_status = $('#user-field-status').expectOne();
                 url = "/json/users/" + encodeURIComponent(user_id);
                 data = {
                     full_name: JSON.stringify(full_name.val()),
@@ -372,18 +374,9 @@ exports.on_load_success = function (realm_people_data) {
                 };
             }
 
-            channel.patch({
+            settings_ui.do_settings_change(channel.patch, url,
-                url: url,
+                                           data, admin_status);
-                data: data,
-                success: function () {
-                    ui_report.success(i18n.t('Updated successfully!'), admin_status);
             overlays.close_modal('user-info-form-modal');
-                },
-                error: function (xhr) {
-                    ui_report.error(i18n.t('Failed'), xhr, admin_status);
-                    overlays.close_modal('user-info-form-modal');
-                },
-            });
         });
     });
 

static/styles/settings.scss

@@ -1347,7 +1347,7 @@ input[type=checkbox].inline-block {
 
 #settings_page input.search {
     font-size: 0.9rem;
-    margin: 0px 0px 20px 0px;
+    margin: 10px 0px 20px 0px;
 }
 
 #settings_page .form-sidebar {

static/templates/settings/bot-list-admin.handlebars

@@ -1,6 +1,8 @@
 <div id="admin-bot-list" class="settings-section" data-name="bot-list-admin">
     <div class="tip bot-settings-tip"></div>
+    <h3 class="inline-block">{{t "Bots" }}</h3>
     <input type="text" class="search" placeholder="{{t 'Filter bots' }}" aria-label="{{t 'Filter bots' }}"/>
+    <div class="alert-notification" id="bot-field-status"></div>
     <div class="clear-float"></div>
     <table class="table table-condensed table-striped wrapped-table">
         <thead>

static/templates/settings/deactivated-users-admin.handlebars

@@ -1,5 +1,7 @@
 <div id="admin-deactivated-users-list" class="settings-section" data-name="deactivated-users-admin">
+    <h3 class="inline-block">{{t "Deactivated users" }}</h3>
     <input type="text" class="search" placeholder="{{t 'Filter deactivated users' }}" aria-label="{{t 'Filter deactivated users' }}"/>
+    <div class="alert-notification" id="deactivated-user-field-status"></div>
     <div class="clear-float"></div>
 
     <div class="progressive-table-wrapper">

static/templates/settings/user-list-admin.handlebars

@@ -1,5 +1,8 @@
 <div id="admin-user-list" class="settings-section" data-name="user-list-admin">
+    <h3 class="inline-block">{{t "Users" }}</h3>
+
     <input type="text" class="search" placeholder="{{t 'Filter users' }}" aria-label="{{t 'Filter users' }}"/>
+    <div class="alert-notification" id="user-field-status"></div>
     <div class="clear-float"></div>
 
     <table class="table table-condensed table-striped wrapped-table">

static/templates/user-info-form-modal.handlebars

@@ -1,7 +1,11 @@
 <div id="user-info-form-modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="user-info-form-modal-label" aria-hidden="true">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
+        {{#if is_bot}}
+        <h3 id="user-info-form-modal-label">{{t "Change bot info and owner" }}</h3>
+        {{else}}
         <h3 id="user-info-form-modal-label">{{t "Change user info and roles" }}</h3>
+        {{/if}}
     </div>
     <div class="modal-body">
         <div id="user-name-form" data-user-id="{{user_id}}">