dialog_widget: Append dialog_widget to the body element.

We attach the DOM for the modal to the body element
to avoid style interference from other elements and having to choose
a separate parent element for every single dialog_widget.

static/js/avatar.js

@@ -95,12 +95,9 @@ export function build_user_avatar_widget(upload_function) {
                 },
             });
         }
-        const modal_parent = $("#profile-settings");
-
         const html_body = render_confirm_delete_user_avatar();
 
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: $t_html({defaultMessage: "Delete profile picture"}),
             html_body,
             on_click: delete_user_avatar,

static/js/dialog_widget.js

@@ -19,9 +19,8 @@ import * as settings_data from "./settings_data";
         1) We create DOM on the fly, and we remove
            the DOM once it's closed.
 
-        2) We attach the DOM for the modal to conf.parent,
+        2) We attach the DOM for the modal to the body element
-           and this temporary DOM location will influence
+           to avoid style interference from other elements.
-           how styles work.
 
         3) The cancel button is driven by bootstrap.js.
 
@@ -68,7 +67,6 @@ export function launch(conf) {
         "html_heading",
         "html_body",
         "on_click",
-        "parent",
     ];
 
     // Optional parameters:
@@ -103,7 +101,7 @@ export function launch(conf) {
         danger_submit_button: conf.danger_submit_button,
     });
     const dialog = $(html);
-    conf.parent.append(dialog);
+    $("body").append(dialog);
 
     if (conf.post_render !== undefined) {
         conf.post_render();
@@ -126,7 +124,7 @@ export function launch(conf) {
     });
 
     if (conf.focus_submit_on_open) {
-        conf.parent.on("shown.bs.modal", () => {
+        dialog.on("shown.bs.modal", () => {
             submit_button.trigger("focus");
         });
     }

static/js/message_edit.js

@@ -1008,7 +1008,6 @@ export function edit_last_sent_message() {
 
 export function delete_message(msg_id) {
     const html_body = render_delete_message_modal();
-    const modal_parent = $("#main_div");
 
     function do_delete_message() {
         currently_deleting_messages.push(msg_id);
@@ -1037,7 +1036,6 @@ export function delete_message(msg_id) {
     }
 
     confirm_dialog.launch({
-        parent: modal_parent,
         html_heading: $t_html({defaultMessage: "Delete message"}),
         html_body,
         help_link: "/help/edit-or-delete-a-message#delete-a-message",

static/js/muted_users_ui.js

@@ -1,5 +1,3 @@
-import $ from "jquery";
-
 import render_confirm_mute_user from "../templates/confirm_dialog/confirm_mute_user.hbs";
 
 import * as activity from "./activity";
@@ -27,13 +25,11 @@ export function confirm_mute_user(user_id) {
         mute_user(user_id);
     }
 
-    const modal_parent = $(".mute-user-modal-holder");
     const html_body = render_confirm_mute_user({
         user_name: people.get_full_name(user_id),
     });
 
     confirm_dialog.launch({
-        parent: modal_parent,
         html_heading: $t_html({defaultMessage: "Mute user"}),
         help_link: "/help/mute-a-user",
         html_body,

static/js/settings_account.js

@@ -598,9 +598,7 @@ export function set_up() {
             });
         }
         const html_body = render_confirm_deactivate_own_user();
-        const modal_parent = $("#account-settings .account-settings-form");
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: $t_html({defaultMessage: "Deactivate your account"}),
             html_body,
             on_click: handle_confirm,

static/js/settings_emoji.js

@@ -250,13 +250,11 @@ export function set_up() {
             }
 
             if (is_default_emoji(emoji.name)) {
-                const modal_parent = $("#settings_content");
                 const html_body = emoji_settings_warning_modal({
                     emoji_name: emoji.name,
                 });
 
                 confirm_dialog.launch({
-                    parent: modal_parent,
                     html_heading: $t_html({defaultMessage: "Override built-in emoji?"}),
                     html_body,
                     on_click: submit_custom_emoji_request,

static/js/settings_invites.js

@@ -197,11 +197,9 @@ export function on_load_success(invites_data, initialize_event_handlers) {
             email,
             referred_by,
         };
-        const modal_parent = $("#admin_invites_table");
         const html_body = render_settings_revoke_invite_modal(ctx);
 
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: ctx.is_multiuse
                 ? $t_html({defaultMessage: "Revoke invitation link"})
                 : $t_html({defaultMessage: "Revoke invitation to {email}"}, {email}),
@@ -224,11 +222,9 @@ export function on_load_success(invites_data, initialize_event_handlers) {
         const email = row.find(".email").text();
         meta.current_resend_invite_user_modal_row = row;
         meta.invite_id = $(e.currentTarget).attr("data-invite-id");
-        const modal_parent = $("#admin_invites_table");
         const html_body = render_settings_resend_invite_modal({email});
 
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: $t_html({defaultMessage: "Resend invitation"}),
             html_body,
             on_click: do_resend_invite,

static/js/settings_linkifiers.js

@@ -51,7 +51,6 @@ function open_linkifier_edit_form(linkifier_id) {
         pattern: linkifier.pattern,
         url_format_string: linkifier.url_format,
     });
-    const modal_parent = $("#linkifier-edit-form-modal-container");
 
     function submit_linkifier_form() {
         const change_linkifier_button = $(".dialog_submit_button");
@@ -99,7 +98,6 @@ function open_linkifier_edit_form(linkifier_id) {
 
     dialog_widget.launch({
         html_heading: $t_html({defaultMessage: "Edit linkfiers"}),
-        parent: modal_parent,
         html_body,
         on_click: submit_linkifier_form,
         fade: true,

static/js/settings_org.js

@@ -1235,10 +1235,8 @@ export function build_page() {
         }
 
         const html_body = render_settings_deactivate_realm_modal();
-        const modal_parent = $(".organization-box");
 
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: $t_html({defaultMessage: "Deactivate organization"}),
             help_link: "/help/deactivate-your-organization",
             html_body,

static/js/settings_user_groups.js

@@ -353,15 +353,11 @@ export function set_up() {
             });
         }
 
-        // This is mostly important for styling concerns.
-        const modal_parent = $("#settings_content");
-
         const html_body = render_confirm_delete_user({
             group_name: user_group.name,
         });
 
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: $t_html({defaultMessage: "Delete user group"}),
             html_body,
             on_click: delete_user_group,

static/js/settings_users.js

@@ -419,7 +419,6 @@ function get_human_profile_data(fields_user_pills) {
 
 function confirm_deactivation(row, user_id, status_field) {
     const user = people.get_by_user_id(user_id);
-    const modal_parent = $("#settings_content .organization-box");
     const opts = {
         username: user.full_name,
         email: user.email,
@@ -443,7 +442,6 @@ function confirm_deactivation(row, user_id, status_field) {
     }
 
     confirm_dialog.launch({
-        parent: modal_parent,
         html_heading: $t_html({defaultMessage: "Deactivate {email}"}, {email: user.email}),
         html_body,
         on_click: handle_confirm,
@@ -539,7 +537,6 @@ function handle_human_form(tbody, status_field) {
             disable_role_dropdown: person.is_owner && !page_params.is_owner,
         });
 
-        const modal_parent = $("#user-info-form-modal-container");
         let fields_user_pills;
 
         function set_role_dropdown_and_fields_user_pills() {
@@ -584,7 +581,6 @@ function handle_human_form(tbody, status_field) {
 
         dialog_widget.launch({
             html_heading: $t_html({defaultMessage: "Change user info and roles"}),
-            parent: modal_parent,
             html_body,
             on_click: submit_user_details,
             post_render: set_role_dropdown_and_fields_user_pills,
@@ -610,8 +606,6 @@ function handle_bot_form(tbody, status_field) {
             full_name: bot.full_name,
         });
 
-        const modal_parent = $("#user-info-form-modal-container");
-
         let owner_widget;
 
         function submit_bot_details() {
@@ -656,7 +650,6 @@ function handle_bot_form(tbody, status_field) {
 
         dialog_widget.launch({
             html_heading: $t_html({defaultMessage: "Change bot info and owner"}),
-            parent: modal_parent,
             html_body,
             on_click: submit_bot_details,
             post_render: get_bot_owner_widget,

static/js/starred_messages_ui.js

@@ -1,5 +1,3 @@
-import $ from "jquery";
-
 import render_confirm_unstar_all_messages from "../templates/confirm_dialog/confirm_unstar_all_messages.hbs";
 import render_confirm_unstar_all_messages_in_topic from "../templates/confirm_dialog/confirm_unstar_all_messages_in_topic.hbs";
 
@@ -9,11 +7,9 @@ import * as message_flags from "./message_flags";
 import * as stream_data from "./stream_data";
 
 export function confirm_unstar_all_messages() {
-    const modal_parent = $(".left-sidebar-modal-holder");
     const html_body = render_confirm_unstar_all_messages();
 
     confirm_dialog.launch({
-        parent: modal_parent,
         html_heading: $t_html({defaultMessage: "Unstar all messages"}),
         html_body,
         on_click: message_flags.unstar_all_messages,
@@ -30,14 +26,12 @@ export function confirm_unstar_all_messages_in_topic(stream_id, topic) {
         return;
     }
 
-    const modal_parent = $(".left-sidebar-modal-holder");
     const html_body = render_confirm_unstar_all_messages_in_topic({
         stream_name,
         topic,
     });
 
     confirm_dialog.launch({
-        parent: modal_parent,
         html_heading: $t_html({defaultMessage: "Unstar messages in topic"}),
         html_body,
         on_click,

static/js/stream_create.js

@@ -455,14 +455,12 @@ export function set_up_handlers() {
         }
 
         if (principals.length >= 50) {
-            const modal_parent = $("#subscription_overlay");
             const html_body = render_subscription_invites_warning_modal({
                 stream_name,
                 count: principals.length,
             });
 
             confirm_dialog.launch({
-                parent: modal_parent,
                 html_heading: $t_html({defaultMessage: "Large number of subscribers"}),
                 html_body,
                 on_click: () => {

static/js/stream_edit.js

@@ -914,11 +914,9 @@ export function initialize() {
         }
 
         if (sub.invite_only && people.is_my_user_id(target_user_id)) {
-            const modal_parent = $("#subscriptions_table");
             const html_body = render_unsubscribe_private_stream_modal();
 
             confirm_dialog.launch({
-                parent: modal_parent,
                 html_heading: $t_html(
                     {defaultMessage: "Unsubscribe from {stream_name}"},
                     {stream_name: sub.name},
@@ -941,7 +939,7 @@ export function initialize() {
         const stream_row = $(
             `#subscriptions_table div.stream-row[data-stream-id='${CSS.escape(sub.stream_id)}']`,
         );
-        stream_settings_ui.sub_or_unsub(sub, false, stream_row);
+        stream_settings_ui.sub_or_unsub(sub, stream_row);
 
         if (!sub.subscribed) {
             open_edit_panel_for_row(stream_row);
@@ -978,14 +976,12 @@ export function initialize() {
             archive_stream(stream_id, $(".stream_change_property_info"), row);
         }
 
-        const modal_parent = $("#subscription_overlay");
         const stream_name = stream_data.maybe_get_stream_name(stream_id);
         const html_body = render_settings_deactivation_stream_modal({
             stream_name,
         });
 
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: $t_html(
                 {defaultMessage: "Archive stream {stream}"},
                 {stream: stream_name},

static/js/stream_popover.js

@@ -543,7 +543,7 @@ export function register_stream_handlers() {
         $(this).closest(".popover").fadeOut(500).delay(500).remove();
 
         const sub = stream_popover_sub(e);
-        stream_settings_ui.sub_or_unsub(sub, true);
+        stream_settings_ui.sub_or_unsub(sub);
         e.preventDefault();
         e.stopPropagation();
     });
@@ -664,11 +664,9 @@ export function register_topic_handlers() {
 
         hide_topic_popover();
 
-        const modal_parent = $("#delete-topic-modal-holder");
         const html_body = render_delete_topic_modal(args);
 
         confirm_dialog.launch({
-            parent: modal_parent,
             html_heading: $t_html({defaultMessage: "Delete topic"}),
             help_link: "/help/delete-a-topic",
             html_body,

static/js/stream_settings_ui.js

@@ -799,7 +799,7 @@ export function keyboard_sub() {
     const active_data = get_active_data();
     const row_data = get_row_data(active_data.row);
     if (row_data) {
-        sub_or_unsub(row_data.object, false);
+        sub_or_unsub(row_data.object);
     }
 }
 
@@ -949,14 +949,9 @@ export function open_create_stream() {
     browser_history.update("#streams/new");
 }
 
-export function unsubscribe_from_private_stream(sub, from_stream_popover) {
+export function unsubscribe_from_private_stream(sub) {
-    let modal_parent = $("#subscriptions_table");
     const html_body = render_unsubscribe_private_stream_modal();
 
-    if (from_stream_popover) {
-        modal_parent = $(".left-sidebar-modal-holder");
-    }
-
     function unsubscribe_from_stream() {
         let stream_row;
         if (overlays.streams_open()) {
@@ -969,7 +964,6 @@ export function unsubscribe_from_private_stream(sub, from_stream_popover) {
     }
 
     confirm_dialog.launch({
-        parent: modal_parent,
         html_heading: $t_html(
             {defaultMessage: "Unsubscribe from {stream_name}"},
             {stream_name: sub.name},
@@ -980,11 +974,11 @@ export function unsubscribe_from_private_stream(sub, from_stream_popover) {
     });
 }
 
-export function sub_or_unsub(sub, from_stream_popover, stream_row) {
+export function sub_or_unsub(sub, stream_row) {
     if (sub.subscribed) {
         // TODO: This next line should allow guests to access web-public streams.
         if (sub.invite_only || page_params.is_guest) {
-            unsubscribe_from_private_stream(sub, from_stream_popover);
+            unsubscribe_from_private_stream(sub);
             return;
         }
         ajaxUnsubscribe(sub, stream_row);