message_edit: Show message edit button while saving changes.

Previously, when a message is edited and is saved, when the window
is closed during local echo, we would show an option to view the
source, despite the edit is not saved and we are waiting for the server
response.

This commit rather continues to show the edit button in such a state,
with the edit window showing the Save button as disabled along with
a loading spinner.

Fixes #29028

web/src/message_edit.js

@@ -123,9 +123,10 @@ export function is_message_editable_ignoring_permissions(message) {
     }
 
     // Messages where we're currently locally echoing an edit not yet acknowledged
-    // by the server.
+    // by the server. They are shown in the message edit box, but with "Save"
+    // disabled.
     if (currently_echoing_messages.has(message.id)) {
-        return false;
+        return true;
     }
     return true;
 }
@@ -288,7 +289,8 @@ export function stream_and_topic_exist_in_edit_history(message, stream_id, topic
 
 export function hide_message_edit_spinner($row) {
     $row.find(".loader").hide();
-    $row.find(".message_edit_save span").show();
+    $row.find(".message_edit_saving_container").hide();
+    $row.find(".message_edit_save_container").show();
     $row.find(".message_edit_save").removeClass("disable-btn");
     $row.find(".message_edit_cancel").removeClass("disable-btn");
 }
@@ -345,9 +347,14 @@ function handle_message_row_edit_keydown(e) {
             if (composebox_typeahead.should_enter_send(e)) {
                 const $row = $(".message_edit_content:focus").closest(".message_row");
                 const $message_edit_save_button = $row.find(".message_edit_save");
-                if ($message_edit_save_button.prop("disabled")) {
-                    // In cases when the save button is disabled
-                    // we need to disable save on pressing Enter
+                const $message_edit_save_container = $row.find(".message_edit_save_container");
+                if (
+                    $message_edit_save_button.prop("disabled") ||
+                    $message_edit_save_container.is(":hidden")
+                ) {
+                    // In cases when the save button is disabled,
+                    // or the save button is hidden to show the saving
+                    // button, we need to disable save on pressing Enter
                     // Prevent default to avoid new-line on pressing
                     // Enter inside the textarea in this case
                     e.preventDefault();
@@ -459,6 +466,8 @@ function edit_message($row, raw_content) {
 
     const is_editable = is_content_editable(message, seconds_left_buffer);
 
+    const currently_echoing = currently_echoing_messages.has(message.id);
+
     const $form = $(
         render_message_edit_form({
             message_id: message.id,
@@ -471,6 +480,12 @@ function edit_message($row, raw_content) {
         }),
     );
 
+    if (currently_echoing) {
+        $form.find(".message_edit_save_container").hide();
+    } else {
+        $form.find(".message_edit_saving_container").hide();
+    }
+
     const edit_obj = {$form, raw_content};
     currently_editing_messages.set(message.id, edit_obj);
     message_lists.current.show_edit_message($row, edit_obj);

web/src/message_events.js

@@ -196,8 +196,15 @@ export function update_messages(events) {
                 anchor_message.is_me_message = event.is_me_message;
             }
 
-            // mark the current message edit attempt as complete.
-            message_edit.end_message_edit(event.message_id);
+            // mark the current message edit attempt as complete if the
+            // message edit box is hidden. Else, just show the "Save" and
+            // "Cancel buttons".
+            const $row = message_lists.current.get_row(event.message_id);
+            if ($row.find(".message_edit:hidden").length > 0) {
+                message_edit.end_message_edit(event.message_id);
+            } else {
+                message_edit.hide_message_edit_spinner($row);
+            }
 
             // Save the content edit to the front end anchor_message.edit_history
             // before topic edits to ensure that combined topic / content

web/styles/message_row.css

@@ -487,7 +487,8 @@
         line-height: 1;
     }
 
-    .message_edit_save {
+    .message_edit_save,
+    .message_edit_saving {
         /* Match Save button's basic colors to
            the compose box Send button. */
         color: var(--color-compose-send-button-icon-color);
@@ -508,6 +509,10 @@
         }
     }
 
+    .message_edit_saving {
+        display: inline-block;
+    }
+
     .message_edit_cancel,
     .message_edit_close {
         color: var(--color-exit-button-text);

web/templates/message_edit_form.hbs

@@ -20,6 +20,14 @@
             {{/if}}
             <div class="message-edit-buttons-and-timer">
                 {{#if is_editable}}
+                    <div class="message_edit_saving_container tippy-zulip-tooltip"
+                      data-tippy-content="{{t 'Saving previous changes.' }}">
+                        <button type="button" class="message-actions-button message_edit_saving saving" disabled>
+                            <span class="fa fa-spinner fa-spin save-discard-widget-button-loading"></span>
+                            <span>{{t "Saving" }}</span>
+                        </button>
+                    </div>
+
                     <div class="message_edit_save_container"
                       data-tippy-content="{{t 'You can no longer save changes to this message.' }}">
                         <button type="button" class="message-actions-button message_edit_save">

web/tests/message_events.test.js

@@ -56,7 +56,7 @@ function test_helper(side_effects) {
     return self;
 }
 
-run_test("update_messages", () => {
+run_test("update_messages", ({override}) => {
     const original_message = {
         id: 111,
         display_recipient: denmark.name,
@@ -112,6 +112,12 @@ run_test("update_messages", () => {
     const $modal = $.create("micromodal").addClass("modal--open");
     $message_edit_history_modal.set_parents_result(".micromodal", $modal);
 
+    const $row = $.create("<stub message row>");
+    const $message_edit = $.create("<stub message edit>");
+    $message_edit.length = 1;
+    $row.set_find_results(".message_edit:hidden", $message_edit);
+    override(message_lists.current, "get_row", () => $row);
+
     // TEST THIS:
     message_events.update_messages(events);