settings_user: Add modal for user info and roles form.

Advantages of changing it to modal is that now it doesn't render
form for every row i.e. form is rendered only for row edit button
is clicked.

frontend_tests/node_tests/templates.js

@@ -398,7 +398,8 @@ run_test('admin_user_list', () => {
     html += "</table>";
 
     buttons = $(html).find('.button');
-    assert.equal($(buttons).length, 6);
+    // No buttons should be availabe to non-admins
+    assert.equal($(buttons).length, 0);
 });
 
 run_test('alert_word_settings_item', () => {

static/js/settings_users.js

@@ -10,12 +10,8 @@ exports.reset = function () {
     meta.loaded = false;
 };
 
-function get_user_info(user_id) {
-    var self = {};
-    self.user_row = $("tr.user_row[data-user-id='" + user_id + "']");
-    self.form_row = $("tr.user-name-form[data-user-id='" + user_id + "']");
-
-    return self;
+function get_user_info_row(user_id) {
+    return $("tr.user_row[data-user-id='" + user_id + "']");
 }
 
 function update_view_on_deactivate(row) {
@@ -46,14 +42,11 @@ exports.update_user_data = function (user_id, new_data) {
         return;
     }
 
-    var user_info = get_user_info(user_id);
-    var user_row = user_info.user_row;
-    var form_row = user_info.form_row;
+    var user_row = get_user_info_row(user_id);
 
     if (new_data.full_name !== undefined) {
         // Update the full name in the table
         user_row.find(".user_name").text(new_data.full_name);
-        form_row.find("input[name='full_name']").val(new_data.full_name);
     }
 
     if (new_data.owner !== undefined) {
@@ -70,13 +63,6 @@ exports.update_user_data = function (user_id, new_data) {
             update_view_on_reactivate(user_row);
         }
     }
-
-    // Remove the bot owner select control.
-    form_row.find(".edit_bot_owner_container select").remove();
-
-    // Hide name change form
-    form_row.hide();
-    user_row.show();
 };
 
 function failed_listing_users(xhr) {
@@ -374,39 +360,37 @@ exports.on_load_success = function (realm_people_data) {
 
     $(".admin_user_table, .admin_bot_table").on("click", ".open-user-form", function (e) {
         var users_list = people.get_active_human_persons();
+
         var user_id = $(e.currentTarget).attr("data-user-id");
-        var user_info = get_user_info(user_id);
-        var user_row = user_info.user_row;
-        var form_row = user_info.form_row;
-        var reset_button = form_row.find(".reset_edit_user");
-        var submit_button = form_row.find(".submit_name_changes");
-        var full_name = form_row.find("input[name='full_name']");
-        var owner_select = $(templates.render("bot_owner_select", {users_list: users_list}));
-        var admin_status = $('#organization-status').expectOne();
         var person = people.get_person_from_user_id(user_id);
-        var url;
-        var data;
+
+        var html = templates.render('user-info-form-modal', {
+            user_id: user_id,
+            full_name: people.get_full_name(user_id),
+            is_bot: person.is_bot,
+        });
+        var user_info_form_modal = $(html);
+        var modal_container = $('#user-info-form-modal-container');
+        modal_container.empty().append(user_info_form_modal);
+        overlays.open_modal('user-info-form-modal');
+
+        var owner_select = $(templates.render("bot_owner_select", {users_list: users_list}));
+
         if (!person) {
             return;
         } else if (person.is_bot) {
             // Dynamically add the owner select control in order to
             // avoid performance issues in case of large number of users.
             owner_select.val(bot_data.get(user_id).owner || "");
-            form_row.find(".edit_bot_owner_container").append(owner_select);
+            modal_container.find(".edit_bot_owner_container").append(owner_select);
         }
 
-        // Show user form and set the full name value in input field.
-        full_name.val(person.full_name);
-        user_row.hide();
-        form_row.show();
+        var url;
+        var data;
+        var admin_status = $('#organization-status').expectOne();
+        var full_name = user_info_form_modal.find("input[name='full_name']");
 
-        reset_button.on("click", function () {
-            owner_select.remove();
-            form_row.hide();
-            user_row.show();
-        });
-
-        submit_button.on("click", function (e) {
+        user_info_form_modal.find('.submit_name_changes').on("click", function (e) {
             e.preventDefault();
             e.stopPropagation();
 
@@ -431,9 +415,11 @@ exports.on_load_success = function (realm_people_data) {
                 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/templates/admin-settings-modals.handlebars

@@ -5,3 +5,5 @@
 {{ partial "revoke-invite-modal" }}
 
 {{ partial "resend-invite-modal" }}
+
+<div id="user-info-form-modal-container"></div>

static/templates/admin_user_list.handlebars

@@ -49,26 +49,4 @@
     </td>
     {{/if}}
 </tr>
-<tr class="user-name-form display-none" data-user-id="{{user_id}}">
-    <td colspan="{{#if is_bot}}4{{else}}3{{/if}}">
-        <form class="form-horizontal name-setting">
-            <input type="hidden" name="is_full_name" value="true" />
-            <div class="input-group name_change_container">
-                <label for="full_name">{{t "Full name" }}</label>
-                <input type="text" autocomplete="off" name="full_name" value="{{ full_name }}" />
-            </div>
-            {{#if is_bot}}
-            <div class="input-group edit_bot_owner_container">
-                <label for="bot_owner_select">{{t "Owner" }}</label>
-            </div>
-            {{/if}}
-            <div class="input-group">
-                <button type="submit" class="button rounded sea-green submit_name_changes">
-                    {{t 'Save changes' }}
-                </button>
-                <button type="button" class="button rounded reset_edit_user">{{t 'Cancel' }}</button>
-            </div>
-        </form>
-    </td>
-</tr>
 {{/with}}

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

@@ -0,0 +1,26 @@
+<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>
+        <h3 id="user-info-form-modal-label">{{t "Change user info and roles" }}</h3>
+    </div>
+    <div class="modal-body">
+        <div class="user-name-form" data-user-id="{{user_id}}">
+            <form class="form-horizontal name-setting">
+                <input type="hidden" name="is_full_name" value="true" />
+                <div class="input-group name_change_container">
+                    <label for="full_name">{{t "Full name" }}</label>
+                    <input type="text" autocomplete="off" name="full_name" value="{{ full_name }}" />
+                </div>
+                {{#if is_bot}}
+                <div class="input-group edit_bot_owner_container">
+                    <label for="bot_owner_select">{{t "Owner" }}</label>
+                </div>
+                {{/if}}
+            </form>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="button rounded sea-green submit_name_changes">{{t 'Save changes' }}</button>
+        <button type="button" class="button rounded reset_edit_user" data-dismiss="modal">{{t "Cancel" }}</button>
+    </div>
+</div>