Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

realm_domains_modal: Migrate modal to dialog_widget.

This commit is contained in:
Ganesh Pawar 2021-07-20 18:21:48 +05:30 committed by Tim Abbott
parent e8283b37b4
commit c6d636ef48
11 changed files with 318 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend_tests/node_tests/dispatch.js
View File

@ -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, []);

122
frontend_tests/node_tests/settings_org.js
View File

@ -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}) => {
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();

113
frontend_tests/node_tests/settings_realm_domains.js Normal file
View File

@ -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"),
);
});

16
static/js/server_events_dispatch.js
View File

@ -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);

120
static/js/settings_org.js
View File

@ -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) {

149
static/js/settings_realm_domains.js Normal file
View File

@ -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);
},
});
}

4
static/styles/settings.css
View File

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

2
static/templates/settings/admin_settings_modals.hbs
View File

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

2
static/templates/settings/organization_permissions_admin.hbs
View File

@ -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">

56
static/templates/settings/realm_domains_modal.hbs
View File

@ -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">
<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="realm_domains_modal_label">{{t "Allowed domains" }}</h3>
</div>
<div class="modal-body">
<table class="table table-condensed table-stripped" id="realm_domains_table">
<thead>
<th>{{t "Domain" }}</th>
<th>{{t "Allow subdomains"}}</th>
<th>{{t "Action" }}</th>
</thead>
<tbody>
</tbody>
<tfoot>
<tr id="add-realm-domain-widget">
<td><input type="text" class="new-realm-domain" placeholder="acme.com" /></td>
<td>
<label class="checkbox">
<input type="checkbox" class="new-realm-domain-allow-subdomains" />
<span></span>
</label>
</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>
<table class="table table-condensed table-stripped new-style" id="realm_domains_table">
<thead>
<th>{{t "Domain" }}</th>
<th>{{t "Allow subdomains"}}</th>
<th>{{t "Action" }}</th>
</thead>
<tbody>
</tbody>
<tfoot>
<tr id="add-realm-domain-widget">
<td><input type="text" class="new-realm-domain" placeholder="acme.com" /></td>
<td>
<label class="checkbox">
<input type="checkbox" class="new-realm-domain-allow-subdomains" />
<span></span>
</label>
</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>

1
tools/test-js-with-node
View File

@ -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",