message_list_view: Convert module to typescript.

docs/subsystems/widgets.md

@@ -23,7 +23,7 @@ These are the least complex. We use our markdown processors to
 detect if a message is a `/me` message, plumb the flag through
 the message object (as `is_me_message`) and have the clients
 format it correctly. Related code (for the web app) lies in
-`message_list_view.js` in `_maybe_get_me_message`.
+`message_list_view.ts` in `_maybe_get_me_message`.
 
 ## Polls, todo lists, and games
 

tools/test-js-with-node

@@ -147,7 +147,7 @@ EXEMPT_FILES = make_set(
         "web/src/message_list_data_cache.ts",
         "web/src/message_list_hover.js",
         "web/src/message_list_tooltips.ts",
-        "web/src/message_list_view.js",
+        "web/src/message_list_view.ts",
         "web/src/message_lists.ts",
         "web/src/message_live_update.ts",
         "web/src/message_notifications.js",

web/src/compose_fade.ts

@@ -4,6 +4,7 @@ import assert from "minimalistic-assert";
 
 import * as compose_fade_helper from "./compose_fade_helper";
 import * as compose_state from "./compose_state";
+import type {RecipientRowUser} from "./message_list_view";
 import * as message_lists from "./message_lists";
 import type {Message} from "./message_store";
 import * as message_viewport from "./message_viewport";
@@ -15,24 +16,30 @@ import * as util from "./util";
 
 // TODO/TypeScript: Move this to message_list_view.js when it's migrated to TypeScript.
 export type MessageContainer = {
-    background_color: string;
+    background_color?: string;
-    date_divider_html?: string;
+    date_divider_html: string | undefined;
-    edited_alongside_sender: boolean;
+    edited_alongside_sender?: boolean;
-    edited_in_left_col: boolean;
+    edited_in_left_col?: boolean;
-    edited_status_msg: boolean;
+    edited_status_msg?: boolean;
     include_recipient: boolean;
     include_sender: boolean;
     is_hidden: boolean;
+    last_edit_timestr: string | undefined;
     mention_classname: string | null;
     message_edit_notices_in_left_col: boolean;
+    message_edit_notices_alongside_sender: boolean;
+    message_edit_notices_for_status_message: boolean;
+    modified?: boolean;
+    moved?: boolean;
     msg: Message;
     sender_is_bot: boolean;
     sender_is_guest: boolean;
     should_add_guest_indicator_for_sender: boolean;
     small_avatar_url: string;
-    status_message: boolean;
+    status_message: string | false;
     stream_url?: string;
     subscribed?: boolean;
+    pm_with_url?: string;
     timestr: string;
     topic_url?: string;
     unsubscribed?: boolean;
@@ -40,32 +47,47 @@ export type MessageContainer = {
 };
 
 // TODO/TypeScript: Move this to message_list_view.js when it's migrated to TypeScript.
-type MessageGroup = {
+export type MessageGroup = {
-    all_visibility_policies: AllVisibilityPolicies;
+    bookend_top?: boolean;
-    always_visible_topic_edit: boolean;
     date: string;
     date_unchanged: boolean;
-    display_recipient: string;
-    invite_only: boolean;
-    is_private?: boolean;
-    is_stream: boolean;
-    is_subscribed: boolean;
-    is_web_public: boolean;
-    match_topic?: string;
     message_containers: MessageContainer[];
     message_group_id: string;
+} & (
+    | {
+          is_stream: true;
+          all_visibility_policies: AllVisibilityPolicies;
+          always_visible_topic_edit: boolean;
+          display_recipient: string;
+          invite_only: boolean;
+          is_subscribed: boolean;
+          is_topic_editable: boolean;
+          is_web_public: boolean;
+          just_unsubscribed?: boolean;
+          match_topic: string | undefined;
           on_hover_topic_edit: boolean;
           recipient_bar_color: string;
           stream_id: number;
+          stream_name?: string;
           stream_privacy_icon_color: string;
           stream_url: string;
+          subscribed?: boolean;
           topic: string;
           topic_is_resolved: boolean;
-    topic_links: TopicLink[];
+          topic_links: TopicLink[] | undefined;
-    topic_url: string;
+          topic_url: string | undefined;
           user_can_resolve_topic: boolean;
-    visibility_policy: number;
+          visibility_policy: number | false;
-};
+      }
+    | {
+          is_stream: false;
+          display_recipient: {email: string; full_name: string; id: number}[];
+          display_reply_to_for_tooltip: string;
+          is_private: true;
+          pm_with_url: string;
+          recipient_users: RecipientRowUser[];
+      }
+);
 
 let normal_display = false;
 

web/src/message_lists.ts

@@ -1,31 +1,12 @@
 import $ from "jquery";
 
-import type {MessageContainer} from "./compose_fade";
 import * as inbox_util from "./inbox_util";
 import type {MessageListData} from "./message_list_data";
 import * as message_list_data_cache from "./message_list_data_cache";
+import type {MessageListView} from "./message_list_view";
 import type {Message} from "./message_store";
 import * as ui_util from "./ui_util";
 
-// TODO(typescript): Move this to message_list_view when it's
-// converted to typescript.
-type MessageListView = {
-    update_recipient_bar_background_color: () => void;
-    rerender_messages: (messages: Message[], message_content_edited?: boolean) => void;
-    is_fetched_end_rendered: () => boolean;
-    is_fetched_start_rendered: () => boolean;
-    first_rendered_message: () => Message | undefined;
-    last_rendered_message: () => Message | undefined;
-    show_message_as_read: (message: Message, options: {from?: "pointer" | "server"}) => void;
-    show_messages_as_unread: (message_ids: number[]) => void;
-    change_message_id: (old_id: number, new_id: number) => void;
-    message_containers: Map<number, MessageContainer>;
-    _render_win_start: number;
-    _render_win_end: number;
-    sticky_recipient_message_id: number | undefined;
-    $list: JQuery;
-};
-
 export type RenderInfo = {need_user_to_scroll: boolean};
 
 export type SelectIdOpts = {
@@ -77,6 +58,11 @@ export type MessageList = {
     hide_edit_topic_on_recipient_row: ($recipient_row: JQuery) => void;
     hide_edit_message: ($row: JQuery) => void;
     get_last_message_sent_by_me: () => Message | undefined;
+    num_items: () => number;
+    last_message_historical: boolean;
+    reselect_selected_id: () => void;
+    is_keyword_search: () => boolean;
+    update_trailing_bookend: (force_render?: boolean) => void;
 };
 
 export let current: MessageList | undefined;

web/src/message_store.ts

@@ -159,7 +159,7 @@ export type Message = (
     sent_by_me: boolean;
     reply_to: string;
 
-    // These properties are set and used in `message_list_view.js`.
+    // These properties are set and used in `message_list_view.ts`.
     // TODO: It would be nice if we could not store these on the message
     // object and only reference them within `message_list_view`.
     message_reactions?: MessageCleanReaction[];

web/src/message_viewport.ts

@@ -8,7 +8,7 @@ import type {Message} from "./message_store";
 import * as rows from "./rows";
 import * as util from "./util";
 
-type MessageViewportInfo = {
+export type MessageViewportInfo = {
     visible_top: number;
     visible_bottom: number;
     visible_height: number;