edit-bot: Show dropdown list widget for selecting owner.

This commit removes user_dropdown in favor of the common
dropdown_list_widget for our bot edit forms.

static/js/settings_bots.js

@@ -1,4 +1,3 @@
-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");
@@ -404,9 +403,13 @@ exports.set_up = function () {
         const image = li.find(".image");
         const errors = form.find('.bot_edit_errors');
 
-        const owner_dropdown = user_dropdown.create(bot.owner_id);
+        const opts = {
-        const owner_select_div = $('#edit_bot_modal .select-form');
+            widget_name: 'bot_owner',
-        owner_select_div.append(owner_dropdown.elem);
+            data: users_list.map(u => ({name: u.full_name, value: u.user_id.toString()})),
+            default_text: i18n.t("No owner"),
+            value: bot.owner_id,
+        };
+        const owner_widget = dropdown_list_widget(opts);
 
         const service = bot_data.get_services(bot_id)[0];
         if (bot.bot_type.toString() === OUTGOING_WEBHOOK_BOT_TYPE) {
@@ -433,7 +436,7 @@ exports.set_up = function () {
                 const type = form.attr('data-type');
 
                 const full_name = form.find('.edit_bot_name').val();
-                const bot_owner_id = owner_dropdown.get_user_id();
+                const bot_owner_id = owner_widget.value();
                 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');

static/js/settings_users.js

@@ -1,5 +1,4 @@
 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_admin_human_form = require('../templates/admin_human_form.hbs');
 const render_admin_bot_form = require('../templates/admin_bot_form.hbs');
@@ -453,15 +452,19 @@ function open_bot_form(person) {
 
     // 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);
 
-    modal_container.find(
+    const users_list = people.get_active_humans();
-        ".edit_bot_owner_container"
+    const opts = {
-    ).append(owner_dropdown.elem);
+        widget_name: 'edit_bot_owner',
+        data: users_list.map(u => ({name: u.full_name, value: u.user_id.toString()})),
+        default_text: i18n.t("No owner"),
+        value: owner_id,
+    };
+    const owner_widget = dropdown_list_widget(opts);
 
     return {
         modal: div,
-        owner_dropdown: owner_dropdown,
+        owner_widget,
     };
 }
 
@@ -614,9 +617,7 @@ function handle_bot_form(tbody, status_field) {
             return;
         }
 
-        const ret = open_bot_form(bot);
+        const {modal, owner_widget} = 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();
@@ -629,7 +630,7 @@ function handle_bot_form(tbody, status_field) {
                 full_name: full_name.val(),
             };
 
-            const human_user_id = owner_dropdown.get_user_id();
+            const human_user_id = owner_widget.value();
             if (human_user_id) {
                 data.bot_owner_id = human_user_id;
             }

static/js/user_dropdown.js

@@ -1,33 +0,0 @@
-/*
-    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/admin_bot_form.hbs

@@ -17,6 +17,11 @@
                 </div>
                 <div class="input-group edit_bot_owner_container">
                     <label for="bot_owner_select">{{t "Owner" }}</label>
+                    {{> settings/dropdown_list_widget
+                      widget_name="edit_bot_owner"
+                      list_placeholder=(t 'Filter users')
+                      reset_button_text=(t '[Remove owner]')
+                      label="" }}
                 </div>
             </form>
         </div>

static/templates/edit_bot.hbs

@@ -18,8 +18,11 @@
             </div>
             <div class="edit-bot-owner">
                 <label for="bot_owner_select">{{t "Owner" }}</label>
-                <div class="select-form">
+                {{> settings/dropdown_list_widget
-                </div>
+                  widget_name="bot_owner"
+                  list_placeholder=(t 'Filter users')
+                  reset_button_text=(t '[Remove owner]')
+                  label="" }}
             </div>
             <div id="service_data">
             </div>

static/templates/user_dropdown.hbs

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

tools/test-js-with-node

@@ -154,7 +154,6 @@ 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',