diff --git a/frontend_tests/node_tests/dispatch.js b/frontend_tests/node_tests/dispatch.js index 6c97de99ef..934466a269 100644 --- a/frontend_tests/node_tests/dispatch.js +++ b/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, []); diff --git a/frontend_tests/node_tests/settings_org.js b/frontend_tests/node_tests/settings_org.js index 07b98b6628..ecd26766e4 100644 --- a/frontend_tests/node_tests/settings_org.js +++ b/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(""); - 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}) => { - mock_template("settings/admin_realm_domains_list.hbs", false, () => "stub-domains-list"); - - const verify_realm_domains = simulate_realm_domains_table(); +test("set_up", ({override, override_rewire}) => { 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(); diff --git a/frontend_tests/node_tests/settings_realm_domains.js b/frontend_tests/node_tests/settings_realm_domains.js new file mode 100644 index 0000000000..fe2ede6523 --- /dev/null +++ b/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(""); + 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"), + ); +}); diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js index 8bdd81c8a6..91ddb2b787 100644 --- a/static/js/server_events_dispatch.js +++ b/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); diff --git a/static/js/settings_org.js b/static/js/settings_org.js index 69ce751dcb..466a67ae82 100644 --- a/static/js/settings_org.js +++ b/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) { - 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) { + $("#show_realm_domains_modal").on("click", (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); - }, - }); + settings_realm_domains.show_realm_domains_modal(); }); function realm_icon_logo_upload_complete($spinner, $upload_text, $delete_button) { diff --git a/static/js/settings_realm_domains.js b/static/js/settings_realm_domains.js new file mode 100644 index 0000000000..d4b34d53a6 --- /dev/null +++ b/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); + }, + }); +} diff --git a/static/styles/settings.css b/static/styles/settings.css index b2ef671354..56061667c4 100644 --- a/static/styles/settings.css +++ b/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 { diff --git a/static/templates/settings/admin_settings_modals.hbs b/static/templates/settings/admin_settings_modals.hbs index 3411c134e0..b8888f3983 100644 --- a/static/templates/settings/admin_settings_modals.hbs +++ b/static/templates/settings/admin_settings_modals.hbs @@ -1,4 +1,2 @@ -{{> realm_domains_modal }} -
diff --git a/static/templates/settings/organization_permissions_admin.hbs b/static/templates/settings/organization_permissions_admin.hbs index 845b6ea887..259af88af8 100644 --- a/static/templates/settings/organization_permissions_admin.hbs +++ b/static/templates/settings/organization_permissions_admin.hbs @@ -32,7 +32,7 @@

{{#if is_admin }} - {{t "[Configure]" }} + {{t "[Configure]" }} {{/if}}
diff --git a/static/templates/settings/realm_domains_modal.hbs b/static/templates/settings/realm_domains_modal.hbs index 9b268d208a..fee525aa96 100644 --- a/static/templates/settings/realm_domains_modal.hbs +++ b/static/templates/settings/realm_domains_modal.hbs @@ -1,34 +1,22 @@ - + + + + + + + + + + + + + + + +
{{t "Domain" }}{{t "Allow subdomains"}}{{t "Action" }}
+ +
+
diff --git a/tools/test-js-with-node b/tools/test-js-with-node index fd24539ca3..6b9744f3f7 100755 --- a/tools/test-js-with-node +++ b/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",