bots: Extract user_dropdown widget.

We use this new widget in bot settings panels
(personal and org).  It lets you re-assign a
bot to a new human user.

Ideally we can improve this code to use
our existing list widgets to make it more
performant for realms with lots of users.

static/js/settings_bots.js

@@ -1,3 +1,4 @@
+const user_dropdown = require("./user_dropdown");
 const render_bot_avatar_row = require('../templates/bot_avatar_row.hbs');
 const render_edit_bot = require('../templates/edit_bot.hbs');
 const render_settings_edit_embedded_bot_service = require("../templates/settings/edit_embedded_bot_service.hbs");
@@ -403,7 +404,10 @@ exports.set_up = function () {
         const image = li.find(".image");
         const errors = form.find('.bot_edit_errors');
 
-        $("#settings_page .edit_bot_form .edit-bot-owner select").val(bot.owner);
+        const owner_dropdown = user_dropdown.create(bot.owner_id);
+        const owner_select_div = $('#edit_bot_modal .select-form');
+        owner_select_div.append(owner_dropdown.elem);
+
         const service = bot_data.get_services(bot_id)[0];
         if (bot.bot_type.toString() === OUTGOING_WEBHOOK_BOT_TYPE) {
             $("#service_data").append(render_settings_edit_outgoing_webhook_service({
@@ -429,7 +433,7 @@ exports.set_up = function () {
                 const type = form.attr('data-type');
 
                 const full_name = form.find('.edit_bot_name').val();
-                const bot_owner = form.find('.edit-bot-owner select').val();
+                const bot_owner_id = owner_dropdown.get_user_id();
                 const file_input = $(".edit_bot_form").find('.edit_bot_avatar_file_input');
                 const spinner = form.find('.edit_bot_spinner');
                 const edit_button = form.find('.edit_bot_button');
@@ -437,7 +441,7 @@ exports.set_up = function () {
                 const formData = new FormData();
                 formData.append('csrfmiddlewaretoken', csrf_token);
                 formData.append('full_name', full_name);
-                formData.append('bot_owner_id', people.get_by_email(bot_owner).user_id);
+                formData.append('bot_owner_id', bot_owner_id);
 
                 if (type === OUTGOING_WEBHOOK_BOT_TYPE) {
                     const service_payload_url = $("#edit_service_base_url").val();

static/js/settings_users.js

@@ -1,6 +1,6 @@
 const settings_data = require("./settings_data");
+const user_dropdown = require("./user_dropdown");
 const render_admin_user_list = require("../templates/admin_user_list.hbs");
-const render_bot_owner_select = require("../templates/bot_owner_select.hbs");
 const render_admin_human_form = require('../templates/admin_human_form.hbs');
 const render_admin_bot_form = require('../templates/admin_bot_form.hbs');
 
@@ -451,13 +451,18 @@ function open_bot_form(person) {
     modal_container.empty().append(div);
     overlays.open_modal('#admin-bot-form');
 
-    // NOTE: building `users_list` is quite expensive!
-    const users_list = people.get_active_humans();
-    const owner_select = $(render_bot_owner_select({users_list: users_list}));
-    owner_select.val(bot_data.get(person.user_id).owner || "");
-    modal_container.find(".edit_bot_owner_container").append(owner_select);
+    // NOTE: building `owner_dropdown` is quite expensive!
+    const owner_id = bot_data.get(person.user_id).owner_id;
+    const owner_dropdown = user_dropdown.create(owner_id);
 
-    return div;
+    modal_container.find(
+        ".edit_bot_owner_container"
+    ).append(owner_dropdown.elem);
+
+    return {
+        modal: div,
+        owner_dropdown: owner_dropdown,
+    };
 }
 
 function confirm_deactivation(row, user_id, status_field) {
@@ -609,7 +614,9 @@ function handle_bot_form(tbody, status_field) {
             return;
         }
 
-        const modal = open_bot_form(bot);
+        const ret = open_bot_form(bot);
+        const modal = ret.modal;
+        const owner_dropdown = ret.owner_dropdown;
 
         modal.find('.submit_bot_change').on("click", function (e) {
             e.preventDefault();
@@ -622,9 +629,9 @@ function handle_bot_form(tbody, status_field) {
                 full_name: full_name.val(),
             };
 
-            const owner_select_value = modal.find('.bot_owner_select').val();
-            if (owner_select_value) {
-                data.bot_owner_id = people.get_by_email(owner_select_value).user_id;
+            const human_user_id = owner_dropdown.get_user_id();
+            if (human_user_id) {
+                data.bot_owner_id = human_user_id;
             }
 
             settings_ui.do_settings_change(channel.patch, url, data, status_field);

static/js/user_dropdown.js

@@ -0,0 +1,33 @@
+/*
+    This module lets you create a dropdown list of all
+    active humans.
+
+    Right now the only use case is to select the owner
+    of a bot, but we can generalize this code going forward
+    for other use cases.  Right now it should be quick to
+    audit the code to find places where we specifically
+    hard-code stuff for the bot owner case.  See
+    'bot_owner_select' as an example.
+*/
+
+const render_user_dropdown = require("../templates/user_dropdown.hbs");
+
+exports.create = (current_user_id) => {
+    const users = people.get_active_humans();
+    const info = {
+        users: users,
+        name: 'bot_owner_select', // used for label
+    };
+
+    const html = render_user_dropdown(info);
+    const elem = $(html);
+
+    if (current_user_id) {
+        elem.val(current_user_id);
+    }
+
+    return {
+        elem: elem,
+        get_user_id: () => elem.val(),
+    };
+};

static/templates/bot_owner_select.hbs

@@ -1,5 +0,0 @@
-<select class="bot_owner_select" name="bot_owner_select">
-    {{#each users_list}}
-    <option value='{{this.email}}'>{{this.full_name}}</option>
-    {{/each}}
-</select>

static/templates/edit_bot.hbs

@@ -19,7 +19,6 @@
             <div class="edit-bot-owner">
                 <label for="bot_owner_select">{{t "Owner" }}</label>
                 <div class="select-form">
-                    {{> bot_owner_select }}
                 </div>
             </div>
             <div id="service_data">

static/templates/user_dropdown.hbs

@@ -0,0 +1,5 @@
+<select name="{{name}}">
+    {{#each users}}
+    <option value='{{this.user_id}}'>{{this.full_name}}</option>
+    {{/each}}
+</select>

tools/test-js-with-node

@@ -154,6 +154,7 @@ EXEMPT_FILES = {
     'static/js/unread_ops.js',
     'static/js/unread_ui.js',
     'static/js/upload_widget.js',
+    'static/js/user_dropdown.js',
     'static/js/user_status_ui.js',
     'static/js/zcommand.js',
     'static/js/zform.js',