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

settings_linkifiers: Convert module to TypeScript.

This commit is contained in:
Varun Singh 2024-03-09 16:42:17 +05:30 committed by Tim Abbott
parent bc530162ca
commit ee232bba05
2 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -207,7 +207,7 @@ EXEMPT_FILES = make_set(
"web/src/settings_emoji.ts", "web/src/settings_emoji.ts",
"web/src/settings_exports.ts", "web/src/settings_exports.ts",
"web/src/settings_invites.ts", "web/src/settings_invites.ts",
"web/src/settings_linkifiers.js", "web/src/settings_linkifiers.ts",
"web/src/settings_muted_users.ts", "web/src/settings_muted_users.ts",
"web/src/settings_notifications.js", "web/src/settings_notifications.js",
"web/src/settings_org.js", "web/src/settings_org.js",

69
web/src/settings_linkifiers.js → web/src/settings_linkifiers.ts
View File

@ -1,5 +1,7 @@
import $ from "jquery"; import $ from "jquery";
import {Sortable} from "sortablejs"; import assert from "minimalistic-assert";
import SortableJS from "sortablejs";
import z from "zod";
import render_confirm_delete_linkifier from "../templates/confirm_dialog/confirm_delete_linkifier.hbs"; import render_confirm_delete_linkifier from "../templates/confirm_dialog/confirm_delete_linkifier.hbs";
import render_admin_linkifier_edit_form from "../templates/settings/admin_linkifier_edit_form.hbs"; import render_admin_linkifier_edit_form from "../templates/settings/admin_linkifier_edit_form.hbs";
@ -12,40 +14,51 @@ import {$t_html} from "./i18n";
import * as ListWidget from "./list_widget"; import * as ListWidget from "./list_widget";
import * as scroll_util from "./scroll_util"; import * as scroll_util from "./scroll_util";
import * as settings_ui from "./settings_ui"; import * as settings_ui from "./settings_ui";
import type {realm_schema} from "./state_data";
import {current_user, realm} from "./state_data"; import {current_user, realm} from "./state_data";
import * as ui_report from "./ui_report"; import * as ui_report from "./ui_report";
type RealmLinkifiers = z.infer<typeof realm_schema>["realm_linkifiers"];
const configure_linkifier_api_response_schema = z.object({
id: z.number(),
});
const meta = { const meta = {
loaded: false, loaded: false,
}; };
export function reset() { export function reset(): void {
meta.loaded = false; meta.loaded = false;
} }
export function maybe_disable_widgets() { export function maybe_disable_widgets(): void {
if (current_user.is_admin) { if (current_user.is_admin) {
return; return;
} }
} }
function open_linkifier_edit_form(linkifier_id) { function open_linkifier_edit_form(linkifier_id: number): void {
const linkifiers_list = realm.realm_linkifiers; const linkifiers_list = realm.realm_linkifiers;
const linkifier = linkifiers_list.find((linkifier) => linkifier.id === linkifier_id); const linkifier = linkifiers_list.find((linkifier) => linkifier.id === linkifier_id);
assert(linkifier !== undefined);
const html_body = render_admin_linkifier_edit_form({ const html_body = render_admin_linkifier_edit_form({
linkifier_id, linkifier_id,
pattern: linkifier.pattern, pattern: linkifier.pattern,
url_template: linkifier.url_template, url_template: linkifier.url_template,
}); });
function submit_linkifier_form() { function submit_linkifier_form(): void {
const $change_linkifier_button = $(".dialog_submit_button"); const $change_linkifier_button = $(".dialog_submit_button");
$change_linkifier_button.prop("disabled", true); $change_linkifier_button.prop("disabled", true);
const $modal = $("#dialog_widget_modal"); const $modal = $("#dialog_widget_modal");
const url = "/json/realm/filters/" + encodeURIComponent(linkifier_id); const url = "/json/realm/filters/" + encodeURIComponent(linkifier_id);
const pattern = $modal.find("#edit-linkifier-pattern").val().trim(); const pattern = $modal.find<HTMLInputElement>("input#edit-linkifier-pattern").val()!.trim();
const url_template = $modal.find("#edit-linkifier-url-template").val().trim(); const url_template = $modal
.find<HTMLInputElement>("input#edit-linkifier-url-template")
.val()!
.trim();
const data = {pattern, url_template}; const data = {pattern, url_template};
const $pattern_status = $modal.find("#edit-linkifier-pattern-status").expectOne(); const $pattern_status = $modal.find("#edit-linkifier-pattern-status").expectOne();
const $template_status = $modal.find("#edit-linkifier-template-status").expectOne(); const $template_status = $modal.find("#edit-linkifier-template-status").expectOne();
@ -55,7 +68,7 @@ function open_linkifier_edit_form(linkifier_id) {
$change_linkifier_button.prop("disabled", false); $change_linkifier_button.prop("disabled", false);
dialog_widget.close(); dialog_widget.close();
}, },
error_continuation(xhr) { error_continuation(xhr: JQuery.jqXHR<unknown>) {
$change_linkifier_button.prop("disabled", false); $change_linkifier_button.prop("disabled", false);
if (xhr.responseJSON?.errors) { if (xhr.responseJSON?.errors) {
handle_linkifier_api_error( handle_linkifier_api_error(
@ -92,10 +105,10 @@ function open_linkifier_edit_form(linkifier_id) {
}); });
} }
function update_linkifiers_order() { function update_linkifiers_order(): void {
const order = []; const order: number[] = [];
$(".linkifier_row").each(function () { $(".linkifier_row").each(function () {
order.push(Number.parseInt($(this).attr("data-linkifier-id"), 10)); order.push(Number.parseInt($(this).attr("data-linkifier-id")!, 10));
}); });
settings_ui.do_settings_change( settings_ui.do_settings_change(
channel.patch, channel.patch,
@ -105,7 +118,12 @@ function update_linkifiers_order() {
); );
} }
function handle_linkifier_api_error(xhr, pattern_status, template_status, linkifier_status) { function handle_linkifier_api_error(
xhr: JQuery.jqXHR<unknown>,
pattern_status: JQuery,
template_status: JQuery,
linkifier_status: JQuery,
): void {
// The endpoint uses the Django ValidationError system for error // The endpoint uses the Django ValidationError system for error
// handling, which returns somewhat complicated error // handling, which returns somewhat complicated error
// dictionaries. This logic parses them. // dictionaries. This logic parses them.
@ -124,7 +142,7 @@ function handle_linkifier_api_error(xhr, pattern_status, template_status, linkif
} }
} }
export function populate_linkifiers(linkifiers_data) { export function populate_linkifiers(linkifiers_data: RealmLinkifiers): void {
if (!meta.loaded) { if (!meta.loaded) {
return; return;
} }
@ -145,7 +163,9 @@ export function populate_linkifiers(linkifiers_data) {
}); });
}, },
filter: { filter: {
$element: $linkifiers_table.closest(".settings-section").find(".search"), $element: $linkifiers_table
.closest(".settings-section")
.find<HTMLInputElement>("input.search"),
predicate(item, value) { predicate(item, value) {
return ( return (
item.pattern.toLowerCase().includes(value) || item.pattern.toLowerCase().includes(value) ||
@ -161,7 +181,7 @@ export function populate_linkifiers(linkifiers_data) {
}); });
if (current_user.is_admin) { if (current_user.is_admin) {
Sortable.create($linkifiers_table[0], { new SortableJS($linkifiers_table[0], {
onUpdate: update_linkifiers_order, onUpdate: update_linkifiers_order,
handle: ".move-handle", handle: ".move-handle",
filter: "input", filter: "input",
@ -170,12 +190,12 @@ export function populate_linkifiers(linkifiers_data) {
} }
} }
export function set_up() { export function set_up(): void {
build_page(); build_page();
maybe_disable_widgets(); maybe_disable_widgets();
} }
export function build_page() { export function build_page(): void {
meta.loaded = true; meta.loaded = true;
// Populate linkifiers table // Populate linkifiers table
@ -186,13 +206,15 @@ export function build_page() {
e.stopPropagation(); e.stopPropagation();
const $btn = $(this); const $btn = $(this);
const html_body = render_confirm_delete_linkifier(); const html_body = render_confirm_delete_linkifier();
const url = "/json/realm/filters/" + encodeURIComponent($btn.attr("data-linkifier-id")); const url = "/json/realm/filters/" + encodeURIComponent($btn.attr("data-linkifier-id")!);
confirm_dialog.launch({ confirm_dialog.launch({
html_heading: $t_html({defaultMessage: "Delete linkifier?"}), html_heading: $t_html({defaultMessage: "Delete linkifier?"}),
html_body, html_body,
id: "confirm_delete_linkifiers_modal", id: "confirm_delete_linkifiers_modal",
on_click: () => dialog_widget.submit_api_request(channel.del, url, {}), on_click() {
dialog_widget.submit_api_request(channel.del, url, {});
},
loading_spinner: true, loading_spinner: true,
}); });
}); });
@ -202,7 +224,7 @@ export function build_page() {
e.stopPropagation(); e.stopPropagation();
const $btn = $(this); const $btn = $(this);
const linkifier_id = Number.parseInt($btn.attr("data-linkifier-id"), 10); const linkifier_id = Number.parseInt($btn.attr("data-linkifier-id")!, 10);
open_linkifier_edit_form(linkifier_id); open_linkifier_edit_form(linkifier_id);
}); });
@ -219,20 +241,21 @@ export function build_page() {
$linkifier_status.hide(); $linkifier_status.hide();
$pattern_status.hide(); $pattern_status.hide();
$template_status.hide(); $template_status.hide();
const linkifier = {}; const linkifier: {[key in string]?: string} & {id?: number} = {};
for (const obj of $(this).serializeArray()) { for (const obj of $(this).serializeArray()) {
linkifier[obj.name] = obj.value; linkifier[obj.name] = obj.value;
} }
channel.post({ void channel.post({
url: "/json/realm/filters", url: "/json/realm/filters",
data: $(this).serialize(), data: $(this).serialize(),
success(data) { success(data) {
const clean_data = configure_linkifier_api_response_schema.parse(data);
$("#linkifier_pattern").val(""); $("#linkifier_pattern").val("");
$("#linkifier_template").val(""); $("#linkifier_template").val("");
$add_linkifier_button.prop("disabled", false); $add_linkifier_button.prop("disabled", false);
linkifier.id = data.id; linkifier.id = clean_data.id;
ui_report.success( ui_report.success(
$t_html({defaultMessage: "Custom linkifier added!"}), $t_html({defaultMessage: "Custom linkifier added!"}),
$linkifier_status, $linkifier_status,