compose: Improve tooltip on compose box "x" button.

In compose box, the "x" button tooltip text changed to
"Cancel compose and save draft" except when unsent
message length is short(<3).

Also in help(?) > keyboard shortcuts, text for `Esc`
changed to "Cancel compose and save draft".

The help center page updated with the above changes.

Fixes #21599.

static/js/compose.js

@@ -412,7 +412,14 @@ export function initialize() {
 
     $("#compose-textarea").on("input propertychange", () => {
         compose_validate.warn_if_topic_resolved(false);
-        compose_validate.check_overflow_text();
+        const compose_text_length = compose_validate.check_overflow_text();
+        // Change compose close button tooltip as per condition.
+        // We save compose text in draft only if its length is > 2.
+        if (compose_text_length > 2) {
+            $("#compose_close").attr("data-tooltip-template-id", "compose_close_and_save_tooltip");
+        } else {
+            $("#compose_close").attr("data-tooltip-template-id", "compose_close_tooltip");
+        }
     });
 
     $("#compose form").on("submit", (e) => {

static/js/compose_validate.js

@@ -581,6 +581,8 @@ export function check_overflow_text() {
             $("#compose-send-status").stop(true).fadeOut();
         }
     }
+
+    return text.length;
 }
 
 export function warn_for_text_overflow_when_tries_to_send() {

static/templates/compose.hbs

@@ -66,6 +66,7 @@
                             <button type="button" class="collapse_composebox_button fa fa-chevron-down" aria-label="{{t 'Collapse compose' }}" data-tippy-content="{{t 'Collapse compose' }}"></button>
                             <button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip"></button>
                             <template id="compose_close_tooltip">{{t 'Cancel compose' }} <span class="hotkey-hint">(Esc)</span></template>
+                            <template id="compose_close_and_save_tooltip">{{t 'Cancel compose and save draft' }} <span class="hotkey-hint">(Esc)</span></template>
                         </div>
                         <div id="stream-message" class="order-1">
                             <div class="stream-selection-header-colorblock message_header_stream left_part" tab-index="-1"></div>

static/templates/keyboard_shortcuts.hbs

@@ -21,7 +21,7 @@
                     <td><span class="hotkey"><kbd>X</kbd></span></td>
                 </tr>
                 <tr>
-                    <td class="definition">{{t 'Cancel compose' }}</td>
+                    <td class="definition">{{t 'Cancel compose and save draft' }}</td>
                     <td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
                 </tr>
                 <tr>
@@ -143,7 +143,7 @@
                     <td><span class="hotkey"><kbd>Shift</kbd> + <kbd>Enter</kbd></span></td>
                 </tr>
                 <tr>
-                    <td class="definition">{{t 'Cancel compose' }}</td>
+                    <td class="definition">{{t 'Cancel compose and save draft' }}</td>
                     <td><span class="hotkey"><kbd>Esc</kbd> or <kbd>Ctrl</kbd> + <kbd>[</kbd></span></td>
                 </tr>
             </table>

templates/zerver/help/keyboard-shortcuts.md

@@ -22,7 +22,7 @@ below, and add more to your repertoire as needed.
 
 * **New private message**: `x`
 
-* **Cancel compose**: `Esc` or `Ctrl` + `[` — Close the compose box and save
+* **Cancel compose and save draft**: `Esc` or `Ctrl` + `[` — Close the compose box and save
   the unsent message as a draft.
 
 * **View drafts**: `d` — Use the arrow keys and `Enter` to restore a draft.
@@ -114,7 +114,7 @@ below, and add more to your repertoire as needed.
 * **Insert bold text**: `**bold**` or `Ctrl` + `B`
 * **Insert link**: `[Zulip website](https://zulip.org)` or `Ctrl` + `Shift` + `L`
 
-* **Cancel compose**: `Esc` or `Ctrl` + `[` — Close the compose box and save
+* **Cancel compose and save draft**: `Esc` or `Ctrl` + `[` — Close the compose box and save
   the unsent message as a draft.
 
 ## Message actions