settings: Use dialog_widget for bot-edit form and remove edit_fields_modal.

This commit changes the bot-edit modal to use dialog_widget instead of
edit_fields_modal.

This commit also removes edit_fields_modal module as it is no longer used.

static/js/edit_fields_modal.js

@@ -1,67 +0,0 @@
-import $ from "jquery";
-
-import render_edit_fields_modal from "../templates/settings/edit_fields_modal.hbs";
-
-import * as blueslip from "./blueslip";
-import * as overlays from "./overlays";
-
-/*
-    Look for edit_fields_modal in settings_users.js to see an
-    example of how to use this widget.
-
-    Some things to note:
-
-        1) We create the DOM elements on the fly, and we remove the
-           DOM elements once it's closed.
-
-        2) We attach the DOM elements for the modal to modal_fields.parent.
-
-        3) The cancel button is driven by bootstrap.js.
-
-        4) We do not handle closing the modal on clicking "Save
-           changes" here, because some modals show errors, if the
-           request fails, in the modal itself without closing.
-
-        5) If a caller needs to run code after the modal body is added
-           to DOM, it can do so by passing a post_render hook.
-*/
-
-export function launch(modal_fields) {
-    const required_modal_fields = ["html_heading", "parent", "html_body", "on_click"];
-
-    for (const field of required_modal_fields) {
-        if (!modal_fields[field]) {
-            blueslip.error("programmer omitted " + field);
-        }
-    }
-
-    const html = render_edit_fields_modal({
-        html_heading: modal_fields.html_heading,
-    });
-    const edit_fields_modal = $(html);
-    modal_fields.parent.append(edit_fields_modal);
-
-    if (overlays.is_modal_open()) {
-        overlays.close_modal("#edit-fields-modal");
-    }
-
-    edit_fields_modal.find(".edit-fields-modal-body").append(modal_fields.html_body);
-
-    if (modal_fields.post_render !== undefined) {
-        modal_fields.post_render();
-    }
-
-    // Set up handlers.
-    $(".submit-modal-button").on("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        modal_fields.on_click();
-    });
-
-    edit_fields_modal.on("hidden.bs.modal", () => {
-        edit_fields_modal.remove();
-    });
-
-    // Open the modal
-    overlays.open_modal("#edit-fields-modal");
-}

static/js/settings_users.js

@@ -11,7 +11,6 @@ import * as channel from "./channel";
 import * as confirm_dialog from "./confirm_dialog";
 import * as dialog_widget from "./dialog_widget";
 import {DropdownListWidget as dropdown_list_widget} from "./dropdown_list_widget";
-import * as edit_fields_modal from "./edit_fields_modal";
 import {$t, $t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import * as loading from "./loading";
@@ -607,7 +606,7 @@ function handle_bot_form(tbody, status_field) {
         let owner_widget;
 
         function submit_bot_details() {
-            const full_name = $("#edit-fields-modal").find("input[name='full_name']");
+            const full_name = $("#dialog_widget_modal").find("input[name='full_name']");
 
             const url = "/json/bots/" + encodeURIComponent(user_id);
             const data = {
@@ -623,7 +622,7 @@ function handle_bot_form(tbody, status_field) {
             }
 
             settings_ui.do_settings_change(channel.patch, url, data, status_field);
-            overlays.close_modal("#edit-fields-modal");
+            overlays.close_modal("#dialog_widget_modal");
         }
 
         function get_bot_owner_widget() {
@@ -646,12 +645,13 @@ function handle_bot_form(tbody, status_field) {
             owner_widget = dropdown_list_widget(opts);
         }
 
-        edit_fields_modal.launch({
+        dialog_widget.launch({
             html_heading: $t({defaultMessage: "Change bot info and owner"}),
             parent: modal_parent,
             html_body,
             on_click: submit_bot_details,
             post_render: get_bot_owner_widget,
+            fade: true,
         });
     });
 }

static/styles/settings.css

@@ -1930,11 +1930,6 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
     }
 }
 
-#edit-fields-modal-status {
-    margin-top: 6px;
-    margin-bottom: 8px;
-}
-
 #edit-linkifier-form {
     #edit-linkifier-pattern,
     #edit-linkifier-url-format-string {

static/templates/settings/edit_fields_modal.hbs

@@ -1,13 +0,0 @@
-<div id="edit-fields-modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="edit-fields-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="edit-fields-modal-label">{{html_heading}}</h3>
-    </div>
-    <div class="modal-body edit-fields-modal-body">
-        <div class="alert" id="edit-fields-modal-status"></div>
-    </div>
-    <div class="modal-footer">
-        <button type="submit" class="button rounded sea-green submit-modal-button">{{t 'Save changes' }}</button>
-        <button type="button" class="button rounded close-modal-button" data-dismiss="modal">{{t "Cancel" }}</button>
-    </div>
-</div>

tools/linter_lib/custom_check.py

@@ -131,7 +131,6 @@ js_rules = RuleList(
                 "static/js/lightbox.js",
                 "static/js/ui_report.ts",
                 "static/js/dialog_widget.js",
-                "static/js/edit_fields_modal.js",
                 "frontend_tests/",
             },
             "description": "Setting HTML content with jQuery .html() can lead to XSS security bugs.  Consider .text() or using rendered_foo as a variable name if content comes from handlebars and thus is already sanitized.",

tools/test-js-with-node

@@ -62,7 +62,6 @@ EXEMPT_FILES = {
     "static/js/desktop_integration.js",
     "static/js/drafts.js",
     "static/js/echo.js",
-    "static/js/edit_fields_modal.js",
     "static/js/emoji_picker.js",
     "static/js/emojisets.js",
     "static/js/favicon.js",