compose_tooltips: Improve tooltip logic for compose_reply_button.

Change compose_reply_button tooltip logic to show the correct tooltip.
Earlier in organizations where DMs were disabled, a stale tooltip was
being displayed.

Earlier if the user hovered over the compose_reply_button when it was
disabled and switched to a stream in which it was enabled before waiting
for the tooltip delay, the next time the user hovers over the
compose_reply_button the stale disabled tooltip is displayed instead of
the enabled one.

This is fixed by checking if the compose_reply_button is enabled on the
fly while rendering the tooltip via instance.setContent().

Fixes #29238.

web/src/compose_closed_ui.js

@@ -67,20 +67,20 @@ function update_reply_button_state(disable = false) {
     $(".compose_reply_button").attr("disabled", disable);
     if (disable) {
         $("#compose_buttons .compose-reply-button-wrapper").attr(
-            "data-tooltip-template-id",
+            "data-reply-button-type",
-            "compose_reply_direct_disabled_button_tooltip_template",
+            "direct_disabled",
         );
         return;
     }
     if (narrow_state.is_message_feed_visible()) {
         $("#compose_buttons .compose-reply-button-wrapper").attr(
-            "data-tooltip-template-id",
+            "data-reply-button-type",
-            "compose_reply_message_button_tooltip_template",
+            "selected_message",
         );
     } else {
         $("#compose_buttons .compose-reply-button-wrapper").attr(
-            "data-tooltip-template-id",
+            "data-reply-button-type",
-            "compose_reply_selected_topic_button_tooltip_template",
+            "selected_conversation",
         );
     }
 }

web/src/compose_tooltips.ts

@@ -21,7 +21,6 @@ export function initialize(): void {
         target: [
             // Ideally this would be `#compose_buttons .button`, but the
             // reply button's actual area is its containing span.
-            "#compose_buttons .compose-reply-button-wrapper",
             "#left_bar_compose_mobile_button_big",
             "#new_direct_message_button",
         ].join(","),
@@ -35,6 +34,52 @@ export function initialize(): void {
             instance.destroy();
         },
     });
+    delegate("body", {
+        target: "#compose_buttons .compose-reply-button-wrapper",
+        delay: EXTRA_LONG_HOVER_DELAY,
+        // Only show on mouseenter since for spectators, clicking on these
+        // buttons opens login modal, and Micromodal returns focus to the
+        // trigger after it closes, which results in tooltip being displayed.
+        trigger: "mouseenter",
+        appendTo: () => document.body,
+        onShow(instance) {
+            const $elem = $(instance.reference);
+            const button_type = $elem.attr("data-reply-button-type");
+            switch (button_type) {
+                case "direct_disabled": {
+                    instance.setContent(
+                        parse_html(
+                            $("#compose_reply_direct_disabled_button_tooltip_template").html(),
+                        ),
+                    );
+                    return;
+                }
+                case "selected_message": {
+                    instance.setContent(
+                        parse_html($("#compose_reply_message_button_tooltip_template").html()),
+                    );
+                    return;
+                }
+                case "selected_conversation": {
+                    instance.setContent(
+                        parse_html(
+                            $("#compose_reply_selected_topic_button_tooltip_template").html(),
+                        ),
+                    );
+                    return;
+                }
+                default: {
+                    instance.setContent(
+                        parse_html($("#compose_reply_message_button_tooltip_template").html()),
+                    );
+                    return;
+                }
+            }
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
 
     delegate("body", {
         target: "#new_conversation_button",

web/templates/compose.hbs

@@ -13,7 +13,7 @@
     <div id="compose_controls" class="new-style">
         <div id="compose_buttons">
             <div class="new_message_button reply_button_container">
-                <div class="compose-reply-button-wrapper" data-tooltip-template-id="compose_reply_message_button_tooltip_template">
+                <div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
                     <button type="button" class="button small compose_reply_button"
                       id="left_bar_compose_reply_button_big">
                         {{t 'Compose message' }}