ts: Migrate avatar.js module to TypeScript.

tools/test-js-with-node

@@ -53,7 +53,7 @@ EXEMPT_FILES = make_set(
         "web/src/archive.js",
         "web/src/assets.d.ts",
         "web/src/attachments_ui.ts",
-        "web/src/avatar.js",
+        "web/src/avatar.ts",
         "web/src/billing/event_status.ts",
         "web/src/billing/helpers.ts",
         "web/src/billing/upgrade.ts",

web/src/avatar.ts

@@ -8,12 +8,13 @@ import {$t_html} from "./i18n";
 import {page_params} from "./page_params";
 import * as settings_data from "./settings_data";
 import * as upload_widget from "./upload_widget";
+import type {UploadFunction, UploadWidget} from "./upload_widget";
 
-export function build_bot_create_widget() {
+export function build_bot_create_widget(): UploadWidget {
     // We have to do strange gyrations with the file input to clear it,
     // where we replace it wholesale, so we generalize the file input with
     // a callback function.
-    const get_file_input = function () {
+    const get_file_input = function (): JQuery<HTMLInputElement> {
         return $("#bot_avatar_file_input");
     };
 
@@ -34,9 +35,9 @@ export function build_bot_create_widget() {
     );
 }
 
-export function build_bot_edit_widget($target) {
-    const get_file_input = function () {
-        return $target.find(".edit_bot_avatar_file_input");
+export function build_bot_edit_widget($target: JQuery): UploadWidget {
+    const get_file_input = function (): JQuery<HTMLInputElement> {
+        return $target.find<HTMLInputElement>(".edit_bot_avatar_file_input");
     };
 
     const $file_name_field = $target.find(".edit_bot_avatar_file");
@@ -57,20 +58,20 @@ export function build_bot_edit_widget($target) {
     );
 }
 
-function display_avatar_delete_complete() {
+function display_avatar_delete_complete(): void {
     $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "hidden"});
     $("#user-avatar-upload-widget .image-upload-text").show();
     $("#user-avatar-source").show();
 }
 
-function display_avatar_delete_started() {
+function display_avatar_delete_started(): void {
     $("#user-avatar-upload-widget .upload-spinner-background").css({visibility: "visible"});
     $("#user-avatar-upload-widget .image-upload-text").hide();
     $("#user-avatar-upload-widget .image-delete-button").hide();
 }
 
-export function build_user_avatar_widget(upload_function) {
-    const get_file_input = function () {
+export function build_user_avatar_widget(upload_function: UploadFunction): void {
+    const get_file_input = function (): JQuery<HTMLInputElement> {
         return $("#user-avatar-upload-widget .image_file_input").expectOne();
     };
 
@@ -88,9 +89,9 @@ export function build_user_avatar_widget(upload_function) {
     $("#user-avatar-upload-widget .image-delete-button").on("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
-        function delete_user_avatar() {
+        function delete_user_avatar(): void {
             display_avatar_delete_started();
-            channel.del({
+            void channel.del({
                 url: "/json/users/me/avatar",
                 success() {
                     display_avatar_delete_complete();
@@ -106,7 +107,7 @@ export function build_user_avatar_widget(upload_function) {
                 },
             });
         }
-        const html_body = render_confirm_delete_user_avatar();
+        const html_body = render_confirm_delete_user_avatar({});
 
         confirm_dialog.launch({
             html_heading: $t_html({defaultMessage: "Delete profile picture"}),

web/src/page_params.ts

@@ -3,6 +3,7 @@ import $ from "jquery";
 const t1 = performance.now();
 export const page_params: {
     apps_page_url: string;
+    avatar_source: string;
     corporate_enabled: boolean;
     development_environment: boolean;
     language_list: {
@@ -19,6 +20,7 @@ export const page_params: {
     is_moderator: boolean;
     is_owner: boolean;
     is_spectator: boolean;
+    max_avatar_file_size_mib: number;
     muted_users: {id: number; timestamp: number}[];
     needs_tutorial: boolean;
     page_load_time: number;

web/src/upload_widget.ts

@@ -1,5 +1,16 @@
 import {$t} from "./i18n";
 
+export type UploadWidget = {
+    clear(): void;
+    close(): void;
+};
+
+export type UploadFunction = (
+    $file_input: JQuery<HTMLInputElement>,
+    night: boolean | null,
+    icon: boolean,
+) => void;
+
 const default_max_file_size = 5;
 
 const supported_types = ["image/jpeg", "image/png", "image/gif", "image/tiff"];
@@ -26,7 +37,7 @@ export function build_widget(
     $preview_text?: JQuery,
     $preview_image?: JQuery,
     max_file_upload_size = default_max_file_size,
-): {clear(): void; close(): void} {
+): UploadWidget {
     function accept(file: File): void {
         $file_name_field.text(file.name);
         $input_error.hide();
@@ -123,11 +134,7 @@ export function build_direct_upload_widget(
     $input_error: JQuery,
     // jQuery button to open file dialog
     $upload_button: JQuery,
-    upload_function: (
-        $file_input: JQuery<HTMLInputElement>,
-        night: boolean | null,
-        icon: boolean,
-    ) => void,
+    upload_function: UploadFunction,
     max_file_upload_size = default_max_file_size,
 ): void {
     // default value of max uploaded file size