From 9a6f7f0ead174bac1bbe635b7fcdf45ae1f0d394 Mon Sep 17 00:00:00 2001 From: Lalit Kumar Singh Date: Wed, 30 Aug 2023 17:38:17 +0530 Subject: [PATCH] ts: Migrate `attachments_ui.js` to typescript. --- tools/test-js-with-node | 2 +- .../{attachments_ui.js => attachments_ui.ts} | 74 ++++++++++++++----- web/src/page_params.ts | 1 + 3 files changed, 59 insertions(+), 18 deletions(-) rename web/src/{attachments_ui.js => attachments_ui.ts} (73%) diff --git a/tools/test-js-with-node b/tools/test-js-with-node index 4d1a0e86ee..6293f74a66 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -52,7 +52,7 @@ EXEMPT_FILES = make_set( "web/src/alert_words_ui.js", "web/src/archive.js", "web/src/assets.d.ts", - "web/src/attachments_ui.js", + "web/src/attachments_ui.ts", "web/src/avatar.js", "web/src/billing/event_status.ts", "web/src/billing/helpers.ts", diff --git a/web/src/attachments_ui.js b/web/src/attachments_ui.ts similarity index 73% rename from web/src/attachments_ui.js rename to web/src/attachments_ui.ts index 4fdda567ca..6d95194a67 100644 --- a/web/src/attachments_ui.js +++ b/web/src/attachments_ui.ts @@ -1,4 +1,5 @@ import $ from "jquery"; +import {z} from "zod"; import render_confirm_delete_attachment from "../templates/confirm_dialog/confirm_delete_attachment.hbs"; import render_settings_upload_space_stats from "../templates/settings/upload_space_stats.hbs"; @@ -14,10 +15,48 @@ import * as scroll_util from "./scroll_util"; import * as timerender from "./timerender"; import * as ui_report from "./ui_report"; -let attachments; -let upload_space_used; +type ServerAttachment = z.infer["attachments"][number]; -export function bytes_to_size(bytes, kb_with_1024_bytes = false) { +type Attachment = ServerAttachment & { + create_time_str: string; + size_str: string; +}; + +type AttachmentEvent = + | { + op: "add" | "update"; + attachment: ServerAttachment; + upload_space_used: number; + } + | { + op: "remove"; + attachment: {id: number}; + upload_space_used: number; + }; + +const attachment_api_response_schema = z.object({ + attachments: z.array( + z.object({ + id: z.number(), + name: z.string(), + path_id: z.string(), + size: z.number(), + create_time: z.number(), + messages: z.array( + z.object({ + id: z.number(), + date_sent: z.number(), + }), + ), + }), + ), + upload_space_used: z.number(), +}); + +let attachments: Attachment[]; +let upload_space_used: z.infer["upload_space_used"]; + +export function bytes_to_size(bytes: number, kb_with_1024_bytes = false): string { const kb_size = kb_with_1024_bytes ? 1024 : 1000; const sizes = ["B", "KB", "MB", "GB", "TB"]; if (bytes === 0) { @@ -31,14 +70,14 @@ export function bytes_to_size(bytes, kb_with_1024_bytes = false) { return size + " " + sizes[i]; } -export function percentage_used_space(uploads_size) { +export function percentage_used_space(uploads_size: number): string | null { if (page_params.realm_upload_quota_mib === null) { return null; } return ((100 * uploads_size) / page_params.realm_upload_quota_mib).toFixed(1); } -function set_upload_space_stats() { +function set_upload_space_stats(): void { if (page_params.realm_upload_quota_mib === null) { return; } @@ -51,7 +90,7 @@ function set_upload_space_stats() { $("#attachment-stats-holder").html(rendered_upload_stats_html); } -function delete_attachments(attachment, file_name) { +function delete_attachments(attachment: string, file_name: string): void { const html_body = render_confirm_delete_attachment({file_name}); dialog_widget.launch({ @@ -66,7 +105,7 @@ function delete_attachments(attachment, file_name) { }); } -function sort_mentioned_in(a, b) { +function sort_mentioned_in(a: Attachment, b: Attachment): number { const a_m = a.messages[0]; const b_m = b.messages[0]; @@ -86,13 +125,13 @@ function sort_mentioned_in(a, b) { return -1; } -function render_attachments_ui() { +function render_attachments_ui(): void { set_upload_space_stats(); const $uploaded_files_table = $("#uploaded_files_table").expectOne(); const $search_input = $("#upload_file_search"); - ListWidget.create($uploaded_files_table, attachments, { + ListWidget.create($uploaded_files_table, attachments, { name: "uploaded-files-list", get_item: ListWidget.default_get_item, modifier(attachment) { @@ -123,7 +162,7 @@ function render_attachments_ui() { scroll_util.reset_scrollbar($uploaded_files_table.closest(".progressive-table-wrapper")); } -function format_attachment_data(new_attachments) { +function format_attachment_data(new_attachments: ServerAttachment[]): Attachment[] { return new_attachments.map((attachment) => ({ ...attachment, create_time_str: timerender.render_now(new Date(attachment.create_time)).time_str, @@ -131,7 +170,7 @@ function format_attachment_data(new_attachments) { })); } -export function update_attachments(event) { +export function update_attachments(event: AttachmentEvent): void { if (attachments === undefined) { // If we haven't fetched attachment data yet, there's nothing to do. return; @@ -148,7 +187,7 @@ export function update_attachments(event) { render_attachments_ui(); } -export function set_up_attachments() { +export function set_up_attachments(): void { // The settings page must be rendered before this function gets called. const $status = $("#delete-upload-status"); @@ -159,17 +198,18 @@ export function set_up_attachments() { $("#uploaded_files_table").on("click", ".remove-attachment", (e) => { const file_name = $(e.target).closest(".uploaded_file_row").attr("id"); delete_attachments( - $(e.target).closest(".uploaded_file_row").attr("data-attachment-id"), - file_name, + $(e.target).closest(".uploaded_file_row").attr("data-attachment-id")!, + file_name!, ); }); - channel.get({ + void channel.get({ url: "/json/attachments", success(data) { + const clean_data = attachment_api_response_schema.parse(data); loading.destroy_indicator($("#attachments_loading_indicator")); - attachments = format_attachment_data(data.attachments); - upload_space_used = data.upload_space_used; + attachments = format_attachment_data(clean_data.attachments); + upload_space_used = clean_data.upload_space_used; render_attachments_ui(); }, error(xhr) { diff --git a/web/src/page_params.ts b/web/src/page_params.ts index 4c391012cf..22348a35a8 100644 --- a/web/src/page_params.ts +++ b/web/src/page_params.ts @@ -45,6 +45,7 @@ export const page_params: { realm_private_message_policy: number; realm_push_notifications_enabled: boolean; realm_sentry_key: string | undefined; + realm_upload_quota_mib: number | null; realm_uri: string; realm_user_group_edit_policy: number; realm_waiting_period_threshold: number;