From 3ea8b319c3dcea54a1043b6553fee2c1b938a7b9 Mon Sep 17 00:00:00 2001
From: Apoorva Pendse <apoorvavpendse@gmail.com>
Date: Fri, 15 Nov 2024 20:36:13 +0530
Subject: [PATCH] compose: Better error feedback via banners. Fixes #32115.

---
 web/src/compose_tooltips.ts |  4 ++--
 web/src/compose_validate.ts | 24 ++++++++++++++++++++++--
 web/styles/compose.css      |  2 +-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/web/src/compose_tooltips.ts b/web/src/compose_tooltips.ts
index 6abfa2e9f7..c6e58c84f4 100644
--- a/web/src/compose_tooltips.ts
+++ b/web/src/compose_tooltips.ts
@@ -146,8 +146,8 @@ export function initialize(): void {
         delay: LONG_HOVER_DELAY,
         placement: "top",
         onShow(instance) {
-            // Don't show send-area tooltips if the popover is displayed.
-            if (popover_menus.is_scheduled_messages_popover_displayed()) {
+            // Don't show send-area tooltips if the popover is displayed and when the send button is disabled.
+            if (popover_menus.is_scheduled_messages_popover_displayed() || $(".message-send-controls").hasClass("disabled-message-send-controls")) {
                 return false;
             }
             if (instance.reference.id === "compose-drafts-button") {
diff --git a/web/src/compose_validate.ts b/web/src/compose_validate.ts
index 3cd680bddc..fc9c0cba32 100644
--- a/web/src/compose_validate.ts
+++ b/web/src/compose_validate.ts
@@ -660,7 +660,7 @@ function validate_private_message(): boolean {
 
     if (compose_state.private_message_recipient().length === 0) {
         compose_banner.show_error_message(
-            $t({defaultMessage: "Please specify at least one valid recipient."}),
+            $t({defaultMessage: "Please specify a valid recipient."}),
             compose_banner.CLASSNAMES.missing_private_message_recipient,
             $banner_container,
             $("#private_message_recipient"),
@@ -758,15 +758,33 @@ export function validate_message_length(): boolean {
     if (compose_state.message_content().length > realm.max_message_length) {
         $("textarea#compose-textarea").addClass("flash");
         setTimeout(() => $("textarea#compose-textarea").removeClass("flash"), 1500);
+
+        const $banner_container = $("#compose_banners");
+        compose_banner.show_error_message(
+            $t({defaultMessage: "Message length shouldn't be greater than 10000 characters."}),
+            compose_banner.CLASSNAMES.missing_private_message_recipient,
+            $banner_container,
+            $("#private_message_recipient"),
+        );
+        
         return false;
     }
     return true;
 }
 
 export function validate(scheduling_message: boolean): boolean {
+    debugger
     const message_content = compose_state.message_content();
+    //P4
     if (/^\s*$/.test(message_content)) {
         $("textarea#compose-textarea").toggleClass("invalid", true);
+        const $banner_container = $("#compose_banners");
+        compose_banner.show_error_message(
+            $t({defaultMessage: "Compose a message."}),
+            compose_banner.CLASSNAMES.missing_private_message_recipient,
+            $banner_container,
+            $("#private_message_recipient"),
+        );
         return false;
     }
 
@@ -781,13 +799,15 @@ export function validate(scheduling_message: boolean): boolean {
         );
         return false;
     }
+    // P5
     if (!validate_message_length()) {
         return false;
     }
-
+    // P3
     if (compose_state.get_message_type() === "private") {
         return validate_private_message();
     }
+    // P1 and P2
     return validate_stream_message(scheduling_message);
 }
 
diff --git a/web/styles/compose.css b/web/styles/compose.css
index d4374306a3..0f487e0b6c 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1398,7 +1398,7 @@ textarea.new_message_textarea {
 
     &.disabled-message-send-controls {
         & button {
-            pointer-events: none;
+            cursor:default;
             opacity: 0.5;
         }
     }