From d5cadbcec24e0135434ceda920a659c5fe6a06c9 Mon Sep 17 00:00:00 2001 From: Steve Howell Date: Sat, 9 May 2020 10:13:03 +0000 Subject: [PATCH] user settings: Separate code for bot form. When editing a bot, there are only two fields that are similar to humans--full name and email--which are trivial. Before this commit we used a single codepath to build the human form and the bot form. Now we have two simple codepaths. The tricky nature of the code had already led to ugly things for the bot codepath that fortunately weren't user facing, but which were distracting: - For bots we would needlessly set things like is_admin, is_guest in the template data. - For bots we would needlessly try to update custom profile fields. The code that differs between bots and humans is nontrivial, and the code was both hard to read and hard to improve: - Humans don't have bot owners. - Bots don't have custom profile fields. The bot-owner code is nontrivial for performance reasons. In a big realm there are tens of thousands of potential bot owners. We avoid the most egregious performance problems (i.e we don't have multiple copies of the dropdown), but we may still want to refine that (at least adding a spinner). The custom-profile-fields code is nontrivial due to the dynamic nature of custom profile fields, which can bring in specialized widgets like pill fields. Now each form corresponds to a single endpoint: * human -> /json/users * bot -> /json/bots Before we had a lot of conditional logic in the template, the code to build to views, and the code to submit the data. Now everything is much flatter. The human code is still a bit messy (more work coming on that), but the bot code is fairly pristine. All three components of the bot code fit on a page, and there are no conditionals: - admin_bot_form.hbs - open_bot_form - handle_bot_form We may want to grow out the bot code a bit to allow admins to do more things, such as adding services, and this will be easier now. It would also be easier for us now to share widgets with the per-user bot settings. Note that the form for editing human data will continue to be invoked from two panels: - Users - Deactivated users There are some minor differences between users and deactivated users, but the shape of the data is the same for both, so that's still all one codepath. We eliminate `reset_edit_user` here, since it was never used. One nice thing about these forms was that they had very little custom CSS attached to them (at form-level specificity), and it turned out all the custom CSS was for the human-specific form. --- static/js/settings_users.js | 132 +++++++++++------- static/styles/settings.scss | 2 +- static/templates/admin_bot_form.hbs | 28 ++++ ...fo_form_modal.hbs => admin_human_form.hbs} | 18 +-- 4 files changed, 118 insertions(+), 62 deletions(-) create mode 100644 static/templates/admin_bot_form.hbs rename static/templates/{user_info_form_modal.hbs => admin_human_form.hbs} (68%) diff --git a/static/js/settings_users.js b/static/js/settings_users.js index c597631185..cccc05181e 100644 --- a/static/js/settings_users.js +++ b/static/js/settings_users.js @@ -1,7 +1,8 @@ const settings_data = require("./settings_data"); const render_admin_user_list = require("../templates/admin_user_list.hbs"); const render_bot_owner_select = require("../templates/bot_owner_select.hbs"); -const render_user_info_form_modal = require('../templates/user_info_form_modal.hbs'); +const render_admin_human_form = require('../templates/admin_human_form.hbs'); +const render_admin_bot_form = require('../templates/admin_bot_form.hbs'); const meta = { loaded: false, @@ -325,31 +326,41 @@ exports.set_up = function () { }); }; -function open_user_info_form_modal(person) { - const html = render_user_info_form_modal({ +function open_human_form(person) { + const html = render_admin_human_form({ user_id: person.user_id, email: person.email, full_name: people.get_full_name(person.user_id), is_admin: person.is_admin, is_guest: person.is_guest, is_member: !person.is_admin && !person.is_guest, - is_bot: person.is_bot, }); - const user_info_form_modal = $(html); + const div = $(html); const modal_container = $('#user-info-form-modal-container'); - modal_container.empty().append(user_info_form_modal); - overlays.open_modal('#user-info-form-modal'); + modal_container.empty().append(div); + overlays.open_modal('#admin-human-form'); - if (person.is_bot) { - // Dynamically add the owner select control in order to - // avoid performance issues in case of large number of users. - 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); - } + return div; +} - return user_info_form_modal; +function open_bot_form(person) { + const html = render_admin_bot_form({ + user_id: person.user_id, + email: person.email, + full_name: people.get_full_name(person.user_id), + }); + const div = $(html); + const modal_container = $('#user-info-form-modal-container'); + 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); + + return div; } function handle_deactivation() { @@ -451,8 +462,8 @@ function handle_bot_owner_profile() { }); } -function handle_user_form() { - $(".admin_user_table, .admin_bot_table").on("click", ".open-user-form", function (e) { +function handle_human_form() { + $(".admin_user_table").on("click", ".open-user-form", function (e) { const user_id = parseInt($(e.currentTarget).attr("data-user-id"), 10); const person = people.get_by_user_id(user_id); @@ -460,8 +471,8 @@ function handle_user_form() { return; } - const user_info_form_modal = open_user_info_form_modal(person); - const element = "#user-info-form-modal .custom-profile-field-form"; + const modal = open_human_form(person); + const element = "#admin-human-form .custom-profile-field-form"; $(element).html(""); settings_account.append_custom_profile_fields(element, user_id); settings_account.initialize_custom_date_type_fields(element); @@ -469,29 +480,15 @@ function handle_user_form() { user_id, true, false); - let url; - let data; - const full_name = user_info_form_modal.find("input[name='full_name']"); - - user_info_form_modal.find('.submit_user_info_change').on("click", function (e) { + modal.find('.submit_human_change').on("click", function (e) { e.preventDefault(); e.stopPropagation(); - const user_role_select_value = user_info_form_modal.find('#user-role-select').val(); - const admin_status = get_status_field(); - if (person.is_bot) { - url = "/json/bots/" + encodeURIComponent(user_id); - data = { - full_name: full_name.val(), - }; - const owner_select_value = user_info_form_modal.find('.bot_owner_select').val(); - if (owner_select_value) { - data.bot_owner_id = people.get_by_email(owner_select_value).user_id; - } - } else { + + function get_profile_data() { const new_profile_data = []; - $("#user-info-form-modal .custom_user_field_value").each(function () { + $("#admin-human-form .custom_user_field_value").each(function () { // Remove duplicate datepicker input element generated flatpicker library if (!$(this).hasClass("form-control")) { new_profile_data.push({ @@ -511,17 +508,57 @@ function handle_user_form() { } } - url = "/json/users/" + encodeURIComponent(user_id); - data = { - full_name: JSON.stringify(full_name.val()), - is_admin: JSON.stringify(user_role_select_value === 'admin'), - is_guest: JSON.stringify(user_role_select_value === 'guest'), - profile_data: JSON.stringify(new_profile_data), - }; + return new_profile_data; + } + + const user_role_select_value = modal.find('#user-role-select').val(); + const full_name = modal.find("input[name='full_name']"); + const profile_data = get_profile_data(); + + const url = "/json/users/" + encodeURIComponent(user_id); + const data = { + full_name: JSON.stringify(full_name.val()), + is_admin: JSON.stringify(user_role_select_value === 'admin'), + is_guest: JSON.stringify(user_role_select_value === 'guest'), + profile_data: JSON.stringify(profile_data), + }; + + settings_ui.do_settings_change(channel.patch, url, data, admin_status); + overlays.close_modal('#admin-human-form'); + }); + }); +} + +function handle_bot_form() { + $(".admin_bot_table").on("click", ".open-user-form", function (e) { + const user_id = parseInt($(e.currentTarget).attr("data-user-id"), 10); + const bot = people.get_by_user_id(user_id); + + if (!bot) { + return; + } + + const modal = open_bot_form(bot); + + modal.find('.submit_bot_change').on("click", function (e) { + e.preventDefault(); + e.stopPropagation(); + + const full_name = modal.find("input[name='full_name']"); + const admin_status = get_status_field(); + + const url = "/json/bots/" + encodeURIComponent(user_id); + const data = { + 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; } settings_ui.do_settings_change(channel.patch, url, data, admin_status); - overlays.close_modal('#user-info-form-modal'); + overlays.close_modal('#admin-bot-form'); }); }); } @@ -532,10 +569,11 @@ exports.on_load_success = function (realm_people_data) { populate_users(realm_people_data); handle_deactivation(); handle_reactivation(); - handle_user_form(); + handle_human_form(); handle_bot_owner_profile(); handle_bot_deactivation(); + handle_bot_form(); }; window.settings_users = exports; diff --git a/static/styles/settings.scss b/static/styles/settings.scss index b57a9ffcfc..6c59804028 100644 --- a/static/styles/settings.scss +++ b/static/styles/settings.scss @@ -1566,7 +1566,7 @@ input[type=checkbox].inline-block { } #account-settings, -#user-info-form-modal { +#admin-human-form { .user-role button { cursor: default; } diff --git a/static/templates/admin_bot_form.hbs b/static/templates/admin_bot_form.hbs new file mode 100644 index 0000000000..c3fdd212a4 --- /dev/null +++ b/static/templates/admin_bot_form.hbs @@ -0,0 +1,28 @@ + diff --git a/static/templates/user_info_form_modal.hbs b/static/templates/admin_human_form.hbs similarity index 68% rename from static/templates/user_info_form_modal.hbs rename to static/templates/admin_human_form.hbs index aa7e5500e2..bb53c6085d 100644 --- a/static/templates/user_info_form_modal.hbs +++ b/static/templates/admin_human_form.hbs @@ -1,11 +1,7 @@ -