realm_domains_modal: Migrate modal to dialog_widget.

frontend_tests/node_tests/dispatch.js

@@ -60,6 +60,7 @@ const settings_profile_fields = mock_esm("../../static/js/settings_profile_field
 const settings_realm_user_settings_defaults = mock_esm(
     "../../static/js/settings_realm_user_settings_defaults",
 );
+const settings_realm_domains = mock_esm("../../static/js/settings_realm_domains");
 const settings_streams = mock_esm("../../static/js/settings_streams");
 const settings_user_groups = mock_esm("../../static/js/settings_user_groups");
 const settings_users = mock_esm("../../static/js/settings_users");
@@ -616,16 +617,19 @@ run_test("realm_playgrounds", ({override}) => {
 run_test("realm_domains", ({override}) => {
     let event = event_fixtures.realm_domains__add;
     page_params.realm_domains = [];
-    override(settings_org, "populate_realm_domains", noop);
+    override(settings_org, "populate_realm_domains_label", noop);
+    override(settings_realm_domains, "populate_realm_domains_table", noop);
     dispatch(event);
     assert_same(page_params.realm_domains, [event.realm_domain]);
 
-    override(settings_org, "populate_realm_domains", noop);
+    override(settings_org, "populate_realm_domains_label", noop);
+    override(settings_realm_domains, "populate_realm_domains_table", noop);
     event = event_fixtures.realm_domains__change;
     dispatch(event);
     assert_same(page_params.realm_domains, [event.realm_domain]);
 
-    override(settings_org, "populate_realm_domains", noop);
+    override(settings_org, "populate_realm_domains_label", noop);
+    override(settings_realm_domains, "populate_realm_domains_table", noop);
     event = event_fixtures.realm_domains__remove;
     dispatch(event);
     assert_same(page_params.realm_domains, []);

frontend_tests/node_tests/settings_org.js

@@ -24,15 +24,6 @@ mock_esm("../../static/js/loading", {
     make_indicator: noop,
     destroy_indicator: noop,
 });
-mock_esm("../../static/js/ui_report", {
-    success(msg, $elem) {
-        $elem.val(msg);
-    },
-
-    error(msg, xhr, $elem) {
-        $elem.val(msg);
-    },
-});
 
 set_global(
     "FormData",
@@ -69,60 +60,10 @@ test("unloaded", () => {
     // sure things don't explode before set_up is called.
 
     settings_org.reset();
-    settings_org.populate_realm_domains();
+    settings_org.populate_realm_domains_label();
     settings_org.populate_auth_methods();
 });
 
-function simulate_realm_domains_table() {
-    const $tr_stub = $.create("realm-tr-stub");
-    $("#realm_domains_table tbody").set_find_results("tr", $tr_stub);
-    $tr_stub.remove = () => {};
-
-    let appended;
-    $("#realm_domains_table tbody").append = (html) => {
-        appended = true;
-        assert.equal(html, "stub-domains-list");
-    };
-
-    return function verify() {
-        assert.ok(appended);
-    };
-}
-
-function test_realms_domain_modal(override, add_realm_domain) {
-    const $info = $(".realm_domains_info");
-
-    $("#add-realm-domain-widget").set_find_results(
-        ".new-realm-domain",
-        $.create("new-realm-domain-stub"),
-    );
-
-    $("#add-realm-domain-widget").set_find_results(
-        ".new-realm-domain-allow-subdomains",
-        $.create("new-realm-domain-allow-subdomains-stub"),
-    );
-
-    let posted;
-    let success_callback;
-    let error_callback;
-    override(channel, "post", (req) => {
-        posted = true;
-        assert.equal(req.url, "/json/realm/domains");
-        success_callback = req.success;
-        error_callback = req.error;
-    });
-
-    add_realm_domain();
-
-    assert.ok(posted);
-
-    success_callback();
-    assert.equal($info.val(), "translated HTML: Added successfully!");
-
-    error_callback({});
-    assert.equal($info.val(), "translated HTML: Failed");
-}
-
 function createSaveButtons(subsection) {
     const $stub_save_button_header = $(`#org-${CSS.escape(subsection)}`);
     const $save_button_controls = $(".save-button-controls");
@@ -348,56 +289,6 @@ function test_upload_realm_icon(override, upload_realm_logo_or_icon) {
     assert.ok(posted);
 }
 
-function test_change_allow_subdomains(change_allow_subdomains) {
-    const ev = {
-        stopPropagation: noop,
-    };
-
-    const $info = $(".realm_domains_info");
-    $info.fadeOut = noop;
-    const domain = "example.com";
-    let allow = true;
-
-    let success_callback;
-    let error_callback;
-    channel.patch = (req) => {
-        assert.equal(req.url, "/json/realm/domains/example.com");
-        assert.equal(req.data.allow_subdomains, JSON.stringify(allow));
-        success_callback = req.success;
-        error_callback = req.error;
-    };
-
-    const $domain_obj = $.create("domain object");
-    $domain_obj.text(domain);
-
-    const $elem_obj = $.create("<elem html>");
-    const $parents_obj = $.create("parents object");
-
-    $elem_obj.set_parents_result("tr", $parents_obj);
-    $parents_obj.set_find_results(".domain", $domain_obj);
-    $elem_obj.prop("checked", allow);
-
-    change_allow_subdomains.call($elem_obj, ev);
-
-    success_callback();
-    assert.equal(
-        $info.val(),
-        "translated HTML: Update successful: Subdomains allowed for example.com",
-    );
-
-    error_callback({});
-    assert.equal($info.val(), "translated HTML: Failed");
-
-    allow = false;
-    $elem_obj.prop("checked", allow);
-    change_allow_subdomains.call($elem_obj, ev);
-    success_callback();
-    assert.equal(
-        $info.val(),
-        "translated HTML: Update successful: Subdomains no longer allowed for example.com",
-    );
-}
-
 function test_extract_property_name() {
     $("#id_realm_allow_message_editing").attr("id", "id_realm_allow_message_editing");
     assert.equal(
@@ -637,10 +528,7 @@ function test_discard_changes_button(discard_changes) {
     settings_org.__Rewire__("change_save_button_state", stubbed_function);
 }
 
-test("set_up", ({override, override_rewire, mock_template}) => {
+test("set_up", ({override, override_rewire}) => {
-    mock_template("settings/admin_realm_domains_list.hbs", false, () => "stub-domains-list");
-
-    const verify_realm_domains = simulate_realm_domains_table();
     page_params.realm_available_video_chat_providers = {
         jitsi_meet: {
             id: 1,
@@ -690,9 +578,6 @@ test("set_up", ({override, override_rewire, mock_template}) => {
     override_rewire(settings_org, "maybe_disable_widgets", noop);
     settings_org.set_up();
 
-    verify_realm_domains();
-
-    test_realms_domain_modal(override, () => $("#submit-add-realm-domain").trigger("click"));
     test_submit_settings_form(
         override,
         $(".admin-realm-form").get_on_handler(
@@ -701,9 +586,6 @@ test("set_up", ({override, override_rewire, mock_template}) => {
         ),
     );
     test_upload_realm_icon(override, upload_realm_logo_or_icon);
-    test_change_allow_subdomains(
-        $("#realm_domains_table").get_on_handler("change", ".allow-subdomains"),
-    );
     test_extract_property_name();
     test_change_save_button_state();
     test_sync_realm_settings();

frontend_tests/node_tests/settings_realm_domains.js

@@ -0,0 +1,113 @@
+"use strict";
+
+const {strict: assert} = require("assert");
+
+const {mock_esm, zrequire} = require("../zjsunit/namespace");
+const {run_test} = require("../zjsunit/test");
+const $ = require("../zjsunit/zjquery");
+
+const channel = mock_esm("../../static/js/channel");
+const noop = () => {};
+mock_esm("../../static/js/ui_report", {
+    success(msg, elem) {
+        elem.val(msg);
+    },
+
+    error(msg, xhr, elem) {
+        elem.val(msg);
+    },
+});
+
+const settings_realm_domains = zrequire("settings_realm_domains");
+
+function test_realms_domain_modal(override, add_realm_domain) {
+    const $info = $(".realm_domains_info");
+
+    $("#add-realm-domain-widget").set_find_results(
+        ".new-realm-domain",
+        $.create("new-realm-domain-stub"),
+    );
+
+    $("#add-realm-domain-widget").set_find_results(
+        ".new-realm-domain-allow-subdomains",
+        $.create("new-realm-domain-allow-subdomains-stub"),
+    );
+
+    let posted;
+    let success_callback;
+    let error_callback;
+    override(channel, "post", (req) => {
+        posted = true;
+        assert.equal(req.url, "/json/realm/domains");
+        success_callback = req.success;
+        error_callback = req.error;
+    });
+
+    add_realm_domain();
+
+    assert.ok(posted);
+
+    success_callback();
+    assert.equal($info.val(), "translated HTML: Added successfully!");
+
+    error_callback({});
+    assert.equal($info.val(), "translated HTML: Failed");
+}
+
+function test_change_allow_subdomains(change_allow_subdomains) {
+    const ev = {
+        stopPropagation: noop,
+    };
+
+    const $info = $(".realm_domains_info");
+    $info.fadeOut = noop;
+    const domain = "example.com";
+    let allow = true;
+
+    let success_callback;
+    let error_callback;
+    channel.patch = (req) => {
+        assert.equal(req.url, "/json/realm/domains/example.com");
+        assert.equal(req.data.allow_subdomains, JSON.stringify(allow));
+        success_callback = req.success;
+        error_callback = req.error;
+    };
+
+    const $domain_obj = $.create("domain object");
+    $domain_obj.text(domain);
+
+    const $elem_obj = $.create("<elem html>");
+    const $parents_obj = $.create("parents object");
+
+    $elem_obj.set_parents_result("tr", $parents_obj);
+    $parents_obj.set_find_results(".domain", $domain_obj);
+    $elem_obj.prop("checked", allow);
+
+    change_allow_subdomains.call($elem_obj, ev);
+
+    success_callback();
+    assert.equal(
+        $info.val(),
+        "translated HTML: Update successful: Subdomains allowed for example.com",
+    );
+
+    error_callback({});
+    assert.equal($info.val(), "translated HTML: Failed");
+
+    allow = false;
+    $elem_obj.prop("checked", allow);
+    change_allow_subdomains.call($elem_obj, ev);
+    success_callback();
+    assert.equal(
+        $info.val(),
+        "translated HTML: Update successful: Subdomains no longer allowed for example.com",
+    );
+}
+
+run_test("test_realm_domains_table", ({override}) => {
+    settings_realm_domains.setup_realm_domains_modal_handlers();
+    test_realms_domain_modal(override, () => $("#submit-add-realm-domain").trigger("click"));
+    test_change_allow_subdomains(
+        $("#realm_domains_table").get_on_handler("change", ".allow-subdomains"),
+    );
+});

static/js/server_events_dispatch.js

@@ -53,6 +53,7 @@ import * as settings_notifications from "./settings_notifications";
 import * as settings_org from "./settings_org";
 import * as settings_playgrounds from "./settings_playgrounds";
 import * as settings_profile_fields from "./settings_profile_fields";
+import * as settings_realm_domains from "./settings_realm_domains";
 import * as settings_realm_user_settings_defaults from "./settings_realm_user_settings_defaults";
 import * as settings_streams from "./settings_streams";
 import * as settings_user_groups from "./settings_user_groups";
@@ -378,7 +379,10 @@ export function dispatch_normal_event(event) {
                 switch (event.op) {
                     case "add":
                         page_params.realm_domains.push(event.realm_domain);
-                        settings_org.populate_realm_domains(page_params.realm_domains);
+                        settings_org.populate_realm_domains_label(page_params.realm_domains);
+                        settings_realm_domains.populate_realm_domains_table(
+                            page_params.realm_domains,
+                        );
                         break;
                     case "change":
                         for (i = 0; i < page_params.realm_domains.length; i += 1) {
@@ -388,7 +392,10 @@ export function dispatch_normal_event(event) {
                                 break;
                             }
                         }
-                        settings_org.populate_realm_domains(page_params.realm_domains);
+                        settings_org.populate_realm_domains_label(page_params.realm_domains);
+                        settings_realm_domains.populate_realm_domains_table(
+                            page_params.realm_domains,
+                        );
                         break;
                     case "remove":
                         for (i = 0; i < page_params.realm_domains.length; i += 1) {
@@ -397,7 +404,10 @@ export function dispatch_normal_event(event) {
                                 break;
                             }
                         }
-                        settings_org.populate_realm_domains(page_params.realm_domains);
+                        settings_org.populate_realm_domains_label(page_params.realm_domains);
+                        settings_realm_domains.populate_realm_domains_table(
+                            page_params.realm_domains,
+                        );
                         break;
                     default:
                         blueslip.error("Unexpected event type realm_domains/" + event.op);

static/js/settings_org.js

@@ -3,7 +3,6 @@ import $ from "jquery";
 import pygments_data from "../generated/pygments_data.json";
 import render_settings_deactivate_realm_modal from "../templates/confirm_dialog/confirm_deactivate_realm.hbs";
 import render_settings_admin_auth_methods_list from "../templates/settings/admin_auth_methods_list.hbs";
-import render_settings_admin_realm_domains_list from "../templates/settings/admin_realm_domains_list.hbs";
 
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
@@ -19,6 +18,7 @@ import * as realm_logo from "./realm_logo";
 import {realm_user_settings_defaults} from "./realm_user_settings_defaults";
 import * as settings_config from "./settings_config";
 import * as settings_notifications from "./settings_notifications";
+import * as settings_realm_domains from "./settings_realm_domains";
 import * as settings_realm_user_settings_defaults from "./settings_realm_user_settings_defaults";
 import * as settings_ui from "./settings_ui";
 import * as stream_settings_data from "./stream_settings_data";
@@ -377,7 +377,7 @@ function set_create_web_public_stream_dropdown_visibility() {
     );
 }
 
-export function populate_realm_domains(realm_domains) {
+export function populate_realm_domains_label(realm_domains) {
     if (!meta.loaded) {
         return;
     }
@@ -390,17 +390,6 @@ export function populate_realm_domains(realm_domains) {
         domains = $t({defaultMessage: "None"});
     }
     $("#allowed_domains_label").text($t({defaultMessage: "Allowed domains: {domains}"}, {domains}));
-
-    const $realm_domains_table_body = $("#realm_domains_table tbody").expectOne();
-    $realm_domains_table_body.find("tr").remove();
-
-    for (const realm_domain of realm_domains) {
-        $realm_domains_table_body.append(
-            render_settings_admin_realm_domains_list({
-                realm_domain,
-            }),
-        );
-    }
 }
 
 function sort_object_by_key(obj) {
@@ -1070,7 +1059,7 @@ export function build_page() {
     // Initialize all the dropdown list widgets.
     init_dropdown_widgets();
     // Populate realm domains
-    populate_realm_domains(page_params.realm_domains);
+    populate_realm_domains_label(page_params.realm_domains);
 
     // Populate authentication methods table
     populate_auth_methods(page_params.realm_authentication_methods);
@@ -1150,7 +1139,7 @@ export function build_page() {
         if (org_join_restrictions === "only_selected_domain") {
             $node.show();
             if (page_params.realm_domains.length === 0) {
-                overlays.open_modal("#realm_domains_modal");
+                settings_realm_domains.show_realm_domains_modal();
             }
         } else {
             $node.hide();
@@ -1164,106 +1153,9 @@ export function build_page() {
         e.stopPropagation();
     });
 
-    function fade_status_element($elem) {
+    $("#show_realm_domains_modal").on("click", (e) => {
-        setTimeout(() => {
-            $elem.fadeOut(500);
-        }, 1000);
-    }
-
-    $("#realm_domains_table").on("click", ".delete_realm_domain", function () {
-        const domain = $(this).parents("tr").find(".domain").text();
-        const url = "/json/realm/domains/" + domain;
-        const $realm_domains_info = $(".realm_domains_info");
-
-        channel.del({
-            url,
-            success() {
-                ui_report.success(
-                    $t_html({defaultMessage: "Deleted successfully!"}),
-                    $realm_domains_info,
-                );
-                fade_status_element($realm_domains_info);
-            },
-            error(xhr) {
-                ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info);
-                fade_status_element($realm_domains_info);
-            },
-        });
-    });
-
-    $("#submit-add-realm-domain").on("click", () => {
-        const $realm_domains_info = $(".realm_domains_info");
-        const $widget = $("#add-realm-domain-widget");
-        const domain = $widget.find(".new-realm-domain").val();
-        const allow_subdomains = $widget.find(".new-realm-domain-allow-subdomains").prop("checked");
-        const data = {
-            domain,
-            allow_subdomains: JSON.stringify(allow_subdomains),
-        };
-
-        channel.post({
-            url: "/json/realm/domains",
-            data,
-            success() {
-                $("#add-realm-domain-widget .new-realm-domain").val("");
-                $("#add-realm-domain-widget .new-realm-domain-allow-subdomains").prop(
-                    "checked",
-                    false,
-                );
-                ui_report.success(
-                    $t_html({defaultMessage: "Added successfully!"}),
-                    $realm_domains_info,
-                );
-                fade_status_element($realm_domains_info);
-            },
-            error(xhr) {
-                ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info);
-                fade_status_element($realm_domains_info);
-            },
-        });
-    });
-
-    $("#realm_domains_table").on("change", ".allow-subdomains", function (e) {
         e.stopPropagation();
-        const $realm_domains_info = $(".realm_domains_info");
+        settings_realm_domains.show_realm_domains_modal();
-        const domain = $(this).parents("tr").find(".domain").text();
-        const allow_subdomains = $(this).prop("checked");
-        const url = "/json/realm/domains/" + domain;
-        const data = {
-            allow_subdomains: JSON.stringify(allow_subdomains),
-        };
-
-        channel.patch({
-            url,
-            data,
-            success() {
-                if (allow_subdomains) {
-                    ui_report.success(
-                        $t_html(
-                            {defaultMessage: "Update successful: Subdomains allowed for {domain}"},
-                            {domain},
-                        ),
-                        $realm_domains_info,
-                    );
-                } else {
-                    ui_report.success(
-                        $t_html(
-                            {
-                                defaultMessage:
-                                    "Update successful: Subdomains no longer allowed for {domain}",
-                            },
-                            {domain},
-                        ),
-                        $realm_domains_info,
-                    );
-                }
-                fade_status_element($realm_domains_info);
-            },
-            error(xhr) {
-                ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info);
-                fade_status_element($realm_domains_info);
-            },
-        });
     });
 
     function realm_icon_logo_upload_complete($spinner, $upload_text, $delete_button) {

static/js/settings_realm_domains.js

@@ -0,0 +1,149 @@
+import $ from "jquery";
+
+import render_settings_admin_realm_domains_list from "../templates/settings/admin_realm_domains_list.hbs";
+import render_realm_domains_modal from "../templates/settings/realm_domains_modal.hbs";
+
+import * as channel from "./channel";
+import * as dialog_widget from "./dialog_widget";
+import {$t_html} from "./i18n";
+import {page_params} from "./page_params";
+import * as ui_report from "./ui_report";
+
+export function populate_realm_domains_table(realm_domains) {
+    const $realm_domains_table_body = $("#realm_domains_table tbody").expectOne();
+    $realm_domains_table_body.find("tr").remove();
+
+    for (const realm_domain of realm_domains) {
+        $realm_domains_table_body.append(
+            render_settings_admin_realm_domains_list({
+                realm_domain,
+            }),
+        );
+    }
+}
+
+function fade_status_element($elem) {
+    setTimeout(() => {
+        $elem.fadeOut(500);
+    }, 3000);
+}
+
+export function setup_realm_domains_modal_handlers() {
+    $("#realm_domains_table").on("click", ".delete_realm_domain", function () {
+        const domain = $(this).parents("tr").find(".domain").text();
+        const url = "/json/realm/domains/" + domain;
+        const $realm_domains_info = $(".realm_domains_info");
+
+        channel.del({
+            url,
+            success() {
+                ui_report.success(
+                    $t_html({defaultMessage: "Deleted successfully!"}),
+                    $realm_domains_info,
+                );
+                fade_status_element($realm_domains_info);
+            },
+            error(xhr) {
+                ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info);
+                fade_status_element($realm_domains_info);
+            },
+        });
+    });
+
+    $("#realm_domains_table").on("change", ".allow-subdomains", function (e) {
+        e.stopPropagation();
+        const $realm_domains_info = $(".realm_domains_info");
+        const domain = $(this).parents("tr").find(".domain").text();
+        const allow_subdomains = $(this).prop("checked");
+        const url = "/json/realm/domains/" + domain;
+        const data = {
+            allow_subdomains: JSON.stringify(allow_subdomains),
+        };
+
+        channel.patch({
+            url,
+            data,
+            success() {
+                if (allow_subdomains) {
+                    ui_report.success(
+                        $t_html(
+                            {
+                                defaultMessage:
+                                    "Update successful: Subdomains allowed for {domain}",
+                            },
+                            {domain},
+                        ),
+                        $realm_domains_info,
+                    );
+                } else {
+                    ui_report.success(
+                        $t_html(
+                            {
+                                defaultMessage:
+                                    "Update successful: Subdomains no longer allowed for {domain}",
+                            },
+                            {domain},
+                        ),
+                        $realm_domains_info,
+                    );
+                }
+                fade_status_element($realm_domains_info);
+            },
+            error(xhr) {
+                ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info);
+                fade_status_element($realm_domains_info);
+            },
+        });
+    });
+
+    $("#submit-add-realm-domain").on("click", () => {
+        const $realm_domains_info = $(".realm_domains_info");
+        const $widget = $("#add-realm-domain-widget");
+        const domain = $widget.find(".new-realm-domain").val();
+        const allow_subdomains = $widget.find(".new-realm-domain-allow-subdomains").prop("checked");
+        const data = {
+            domain,
+            allow_subdomains: JSON.stringify(allow_subdomains),
+        };
+
+        channel.post({
+            url: "/json/realm/domains",
+            data,
+            success() {
+                $("#add-realm-domain-widget .new-realm-domain").val("");
+                $("#add-realm-domain-widget .new-realm-domain-allow-subdomains").prop(
+                    "checked",
+                    false,
+                );
+                ui_report.success(
+                    $t_html({defaultMessage: "Added successfully!"}),
+                    $realm_domains_info,
+                );
+                fade_status_element($realm_domains_info);
+            },
+            error(xhr) {
+                ui_report.error($t_html({defaultMessage: "Failed"}), xhr, $realm_domains_info);
+                fade_status_element($realm_domains_info);
+            },
+        });
+    });
+}
+
+export function show_realm_domains_modal() {
+    const realm_domains_table_body = render_realm_domains_modal();
+
+    dialog_widget.launch({
+        html_heading: $t_html({defaultMessage: "Allowed domains"}),
+        html_body: realm_domains_table_body,
+        html_submit_button: $t_html({defaultMessage: "Close"}),
+        id: "realm_domains_modal",
+        on_click: () => {},
+        close_on_submit: true,
+        focus_submit_on_open: true,
+        single_footer_button: true,
+        post_render: () => {
+            setup_realm_domains_modal_handlers();
+            populate_realm_domains_table(page_params.realm_domains);
+        },
+    });
+}

static/styles/settings.css

@@ -913,6 +913,10 @@ input[type="checkbox"] {
     text-decoration: none;
 }
 
+#realm_domains_table {
+    margin: 0;
+}
+
 #api_key_form,
 #change_password_modal {
     .password-div {

static/templates/settings/admin_settings_modals.hbs

@@ -1,4 +1,2 @@
-{{> realm_domains_modal }}
-
 <div id="user-info-form-modal-container"></div>
 <div id="linkifier-edit-form-modal-container"></div>

static/templates/settings/organization_permissions_admin.hbs

@@ -32,7 +32,7 @@
                 <div class="dependent-block">
                     <p id="allowed_domains_label" class="inline-block"></p>
                     {{#if is_admin }}
-                    <a data-toggle="modal" href="#realm_domains_modal">{{t "[Configure]" }}</a>
+                    <a id="show_realm_domains_modal" role="button">{{t "[Configure]" }}</a>
                     {{/if}}
                 </div>
                 <div class="input-group">

static/templates/settings/realm_domains_modal.hbs

@@ -1,34 +1,22 @@
-<div id="realm_domains_modal" class="modal modal-bg hide" tabindex="-1" role="dialog" aria-labelledby="realm_domains_modal_label" aria-hidden="true">
+<table class="table table-condensed table-stripped new-style" id="realm_domains_table">
-    <div class="modal-header">
+    <thead>
-        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
+        <th>{{t "Domain" }}</th>
-        <h3 id="realm_domains_modal_label">{{t "Allowed domains" }}</h3>
+        <th>{{t "Allow subdomains"}}</th>
-    </div>
+        <th>{{t "Action" }}</th>
-    <div class="modal-body">
+    </thead>
-        <table class="table table-condensed table-stripped" id="realm_domains_table">
+    <tbody>
-            <thead>
+    </tbody>
-                <th>{{t "Domain" }}</th>
+    <tfoot>
-                <th>{{t "Allow subdomains"}}</th>
+        <tr id="add-realm-domain-widget">
-                <th>{{t "Action" }}</th>
+            <td><input type="text" class="new-realm-domain" placeholder="acme.com" /></td>
-            </thead>
+            <td>
-            <tbody>
+                <label class="checkbox">
-            </tbody>
+                    <input type="checkbox" class="new-realm-domain-allow-subdomains" />
-            <tfoot>
+                    <span></span>
-                <tr id="add-realm-domain-widget">
+                </label>
-                    <td><input type="text" class="new-realm-domain" placeholder="acme.com" /></td>
+            </td>
-                    <td>
+            <td><button type="button" class="button sea-green small rounded" id="submit-add-realm-domain">{{t "Add" }}</button></td>
-                        <label class="checkbox">
+        </tr>
-                            <input type="checkbox" class="new-realm-domain-allow-subdomains" />
+    </tfoot>
-                            <span></span>
+</table>
-                        </label>
+<div class="alert realm_domains_info"></div>
-                    </td>
-                    <td><button type="button" class="button sea-green small rounded" id="submit-add-realm-domain">{{t "Add" }}</button></td>
-                </tr>
-            </tfoot>
-        </table>
-
-        <div class="alert realm_domains_info"></div>
-    </div>
-    <div class="modal-footer centered-footer">
-        <button class="new-style button rounded" data-dismiss="modal">{{t "Close" }}</button>
-    </div>
-</div>

tools/test-js-with-node

@@ -158,6 +158,7 @@ EXEMPT_FILES = make_set(
         "static/js/settings_panel_menu.js",
         "static/js/settings_playgrounds.js",
         "static/js/settings_profile_fields.js",
+        "static/js/settings_realm_domains.js",
         "static/js/settings_realm_user_settings_defaults.js",
         "static/js/settings_sections.js",
         "static/js/settings_streams.js",