settings: Use edit_fields_modal framework for admin bot form.

This commit modifies the modal for editing bot information to
use edit_fields_modal framework.

We also change the id of form element of this modal such that
it makes sense with the actual use of modal and there is no
problem with this change as styling of this modal is not
affected.

static/js/settings_users.js

@@ -11,6 +11,7 @@ import * as channel from "./channel";
 import * as confirm_dialog from "./confirm_dialog";
 import {DropdownListWidget as dropdown_list_widget} from "./dropdown_list_widget";
 import {$t, $t_html} from "./i18n";
+import * as edit_fields_modal from "./edit_fields_modal";
 import * as ListWidget from "./list_widget";
 import * as loading from "./loading";
 import * as overlays from "./overlays";
@@ -455,39 +456,6 @@ function get_human_profile_data(fields_user_pills) {
     return new_profile_data;
 }
 
-function open_bot_form(person) {
-    const html = render_admin_bot_form({
-        user_id: person.user_id,
-        email: person.email,
-        full_name: person.full_name,
-    });
-    const div = $(html);
-    const modal_container = $("#user-info-form-modal-container");
-    modal_container.empty().append(div);
-    overlays.open_modal("#admin-bot-form");
-
-    // NOTE: building `owner_dropdown` is quite expensive!
-    const owner_id = bot_data.get(person.user_id).owner_id;
-
-    const user_ids = people.get_active_human_ids();
-    const users_list = user_ids.map((user_id) => ({
-        name: people.get_full_name(user_id),
-        value: user_id.toString(),
-    }));
-    const opts = {
-        widget_name: "edit_bot_owner",
-        data: users_list,
-        default_text: $t({defaultMessage: "No owner"}),
-        value: owner_id,
-    };
-    const owner_widget = dropdown_list_widget(opts);
-
-    return {
-        modal: div,
-        owner_widget,
-    };
-}
-
 function confirm_deactivation(row, user_id, status_field) {
     const user = people.get_by_user_id(user_id);
     const modal_parent = $("#settings_content .organization-box");
@@ -629,26 +597,62 @@ function handle_bot_form(tbody, status_field) {
             return;
         }
 
-        const {modal, owner_widget} = open_bot_form(bot);
+        const modal_body_html = render_admin_bot_form({
+            user_id,
+            email: bot.email,
+            full_name: bot.full_name,
+        });
 
-        modal.find(".submit_bot_change").on("click", (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+        const modal_parent = $("#user-info-form-modal-container");
 
-            const full_name = modal.find("input[name='full_name']");
+        let owner_widget;
+
+        function submit_bot_details() {
+            const full_name = $("#edit-fields-modal").find("input[name='full_name']");
 
             const url = "/json/bots/" + encodeURIComponent(user_id);
             const data = {
                 full_name: full_name.val(),
             };
 
+            if (owner_widget === undefined) {
+                blueslip.error("get_bot_owner_widget not called");
+            }
             const human_user_id = owner_widget.value();
             if (human_user_id) {
                 data.bot_owner_id = human_user_id;
             }
 
             settings_ui.do_settings_change(channel.patch, url, data, status_field);
-            overlays.close_modal("#admin-bot-form");
+            overlays.close_modal("#edit-fields-modal");
+        }
+
+        function get_bot_owner_widget() {
+            const owner_id = bot_data.get(user_id).owner_id;
+
+            const user_ids = people.get_active_human_ids();
+            const users_list = user_ids.map((user_id) => ({
+                name: people.get_full_name(user_id),
+                value: user_id.toString(),
+            }));
+
+            const opts = {
+                widget_name: "edit_bot_owner",
+                data: users_list,
+                default_text: $t({defaultMessage: "No owner"}),
+                value: owner_id,
+            };
+            // Note: Rendering this is quite expensive in
+            // organizations with 10Ks of users.
+            owner_widget = dropdown_list_widget(opts);
+        }
+
+        edit_fields_modal.launch({
+            modal_label: $t({defaultMessage: "Change bot info and owner"}),
+            parent: modal_parent,
+            modal_body_html,
+            on_click: submit_bot_details,
+            post_render: get_bot_owner_widget,
         });
     });
 }

static/templates/settings/admin_bot_form.hbs

@@ -1,32 +1,20 @@
-<div id="admin-bot-form" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="admin-bot-form-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="admin-bot-form-label">{{t "Change bot info and owner" }}</h3>
-    </div>
-    <div class="modal-body">
-        <div id="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 edit_bot_owner_container">
-                    <label for="bot_owner_select">{{t "Owner" }}</label>
-                    {{> dropdown_list_widget
-                      widget_name="edit_bot_owner"
-                      list_placeholder=(t 'Filter users')
-                      reset_button_text=(t '[Remove owner]')}}
-                </div>
-                <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>
-                <div class="input-group email_change_container">
-                    <label for="email">{{t "Email" }}</label>
-                    <input type="text" autocomplete="off" name="email" value="{{ email }}" readonly/>
-                </div>
-            </form>
+<div id="bot-edit-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 edit_bot_owner_container">
+            <label for="bot_owner_select">{{t "Owner" }}</label>
+            {{> dropdown_list_widget
+              widget_name="edit_bot_owner"
+              list_placeholder=(t 'Filter users')
+              reset_button_text=(t '[Remove owner]')}}
         </div>
-    </div>
-    <div class="modal-footer">
-        <button type="submit" class="button rounded sea-green submit_bot_change">{{t 'Save changes' }}</button>
-        <button type="button" class="button rounded" data-dismiss="modal">{{t "Cancel" }}</button>
-    </div>
+        <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>
+        <div class="input-group email_change_container">
+            <label for="email">{{t "Email" }}</label>
+            <input type="text" autocomplete="off" name="email" value="{{ email }}" readonly/>
+        </div>
+    </form>
 </div>