From 110ca73545723187dcbd050bf7566ce568d088a6 Mon Sep 17 00:00:00 2001
From: Kenneth Rodrigues <kenneth012004@outlook.com>
Date: Tue, 9 Apr 2024 11:26:36 +0530
Subject: [PATCH] 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 | 12 ++++-----
 web/src/compose_tooltips.ts  | 47 +++++++++++++++++++++++++++++++++++-
 web/templates/compose.hbs    |  2 +-
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/web/src/compose_closed_ui.js b/web/src/compose_closed_ui.js
index 5193587418..50c9061359 100644
--- a/web/src/compose_closed_ui.js
+++ b/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",
-            "compose_reply_direct_disabled_button_tooltip_template",
+            "data-reply-button-type",
+            "direct_disabled",
         );
         return;
     }
     if (narrow_state.is_message_feed_visible()) {
         $("#compose_buttons .compose-reply-button-wrapper").attr(
-            "data-tooltip-template-id",
-            "compose_reply_message_button_tooltip_template",
+            "data-reply-button-type",
+            "selected_message",
         );
     } else {
         $("#compose_buttons .compose-reply-button-wrapper").attr(
-            "data-tooltip-template-id",
-            "compose_reply_selected_topic_button_tooltip_template",
+            "data-reply-button-type",
+            "selected_conversation",
         );
     }
 }
diff --git a/web/src/compose_tooltips.ts b/web/src/compose_tooltips.ts
index d194c6a89a..8be83290de 100644
--- a/web/src/compose_tooltips.ts
+++ b/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",
diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs
index 8ff7d25424..eccc4a4a52 100644
--- a/web/templates/compose.hbs
+++ b/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' }}