message_editing: Make bouncing "..." open edit history modal on click.

Previously, clicking on the bouncing "..." (indicating an ongoing
edit) did not open the edit history modal, even when the message had
prior edits. This made it difficult for users to view the edit history
while an edit was in progress.

This commit updates the behavior so that if a message has an edit
history, clicking on the bouncing "..." will open the edit history
modal, just as clicking on the "EDITED" notice does. If no prior edits
exist, the indicator doesn't show any tooltip.

web/src/click_handlers.ts

@@ -126,7 +126,11 @@ export function initialize(): void {
         }
 
         // UI elements for triggering message editing or viewing edit history.
-        if ($target.is("i.edit_message_button") || $target.is(".message_edit_notice")) {
+        if (
+            $target.is("i.edit_message_button") ||
+            $target.is(".message_edit_notice") ||
+            $target.is(".edit-notifications")
+        ) {
             return true;
         }
 

web/src/message_edit_history.ts

@@ -294,7 +294,7 @@ export function handle_keyboard_events(event_key: string): void {
 }
 
 export function initialize(): void {
-    $("body").on("mouseenter", ".message_edit_notice", (e) => {
+    $("body").on("mouseenter", ".message_edit_notice, .edit-notifications", (e) => {
         if (
             realm.realm_message_edit_history_visibility_policy !==
             message_edit_history_visibility_policy_values.never.code
@@ -303,7 +303,7 @@ export function initialize(): void {
         }
     });
 
-    $("body").on("mouseleave", ".message_edit_notice", (e) => {
+    $("body").on("mouseleave", ".message_edit_notice, .edit-notifications", (e) => {
         if (
             realm.realm_message_edit_history_visibility_policy !==
             message_edit_history_visibility_policy_values.never.code
@@ -312,30 +312,34 @@ export function initialize(): void {
         }
     });
 
-    $("body").on("click", ".message_edit_notice", function (this: HTMLElement, e) {
-        e.stopPropagation();
-        e.preventDefault();
+    $("body").on(
+        "click",
+        ".message_edit_notice, .edit-notifications",
+        function (this: HTMLElement, e) {
+            e.stopPropagation();
+            e.preventDefault();
 
-        const message_id = rows.id($(this).closest(".message_row"));
-        assert(message_lists.current !== undefined);
-        const $row = message_lists.current.get_row(message_id);
-        const row_id = rows.id($row);
-        const message = message_lists.current.get(row_id);
-        assert(message !== undefined);
+            const message_id = rows.id($(this).closest(".message_row"));
+            assert(message_lists.current !== undefined);
+            const $row = message_lists.current.get_row(message_id);
+            const row_id = rows.id($row);
+            const message = message_lists.current.get(row_id);
+            assert(message !== undefined);
 
-        if (page_params.is_spectator) {
-            spectators.login_to_access();
-            return;
-        }
+            if (page_params.is_spectator) {
+                spectators.login_to_access();
+                return;
+            }
 
-        if (
-            realm.realm_message_edit_history_visibility_policy !==
-            message_edit_history_visibility_policy_values.never.code
-        ) {
-            fetch_and_render_message_history(message);
-            $("#message-history-overlay .exit-sign").trigger("focus");
-        }
-    });
+            if (
+                realm.realm_message_edit_history_visibility_policy !==
+                message_edit_history_visibility_policy_values.never.code
+            ) {
+                fetch_and_render_message_history(message);
+                $("#message-history-overlay .exit-sign").trigger("focus");
+            }
+        },
+    );
 
     $("body").on(
         "focus",

web/src/message_list_tooltips.ts

@@ -124,7 +124,7 @@ export function destroy_all_message_list_tooltips(): void {
     message_list_tippy_instances.clear();
 }
 
-function get_last_edit_timestr(message: Message): string {
+function get_last_edit_timestr(message: Message): string | null {
     let last_edit_timestamp;
     if (message.local_edit_timestamp !== undefined) {
         last_edit_timestamp = message.local_edit_timestamp;
@@ -132,6 +132,12 @@ function get_last_edit_timestr(message: Message): string {
         last_edit_timestamp = message.last_edit_timestamp!;
     }
     const last_edit_time = new Date(last_edit_timestamp * 1000);
+
+    // Return null if the timestamp is invalid (i.e., there's no edit history).
+    if (Number.isNaN(last_edit_time.getTime())) {
+        return null;
+    }
+
     let date = timerender.render_date(last_edit_time).textContent;
     // If the date is today or yesterday, we don't want to show the date as capitalized.
     // Thus, we need to check if the date string contains a digit or not using regex,
@@ -366,7 +372,7 @@ export function initialize(): void {
         },
     });
 
-    message_list_tooltip(".message_edit_notice", {
+    message_list_tooltip(".message_edit_notice, .edit-notifications", {
         trigger: "mouseenter",
         delay: LONG_HOVER_DELAY,
         popperOptions: {
@@ -387,6 +393,9 @@ export function initialize(): void {
             const message_container = message_lists.current.view.message_containers.get(message_id);
             assert(message_container !== undefined);
             const last_edit_timestr = get_last_edit_timestr(message_container.msg);
+            if (last_edit_timestr === null) {
+                return false;
+            }
             instance.setContent(
                 parse_html(
                     render_message_edit_notice_tooltip({
@@ -398,6 +407,7 @@ export function initialize(): void {
                     }),
                 ),
             );
+            return undefined;
         },
         onHidden(instance) {
             instance.destroy();