echo: Update message controls dynamically for failed messages.

Previously, the message controls for failed messages was present for
all messages, regardless of their status, and was being rendered
unconditionally; only being hidden for successfully sent messages.

This commit adds dynamic rendering for the failed message controls,
only rendering them via the handlebars template when a message is
confirmed to be failed.

Fixes #31132.

web/src/echo.ts

@@ -2,6 +2,9 @@ import $ from "jquery";
 import assert from "minimalistic-assert";
 import {z} from "zod";
 
+import render_message_controls from "../templates/message_controls.hbs";
+import render_message_controls_failed_msg from "../templates/message_controls_failed_msg.hbs";
+
 import * as alert_words from "./alert_words";
 import * as blueslip from "./blueslip";
 import * as compose_notifications from "./compose_notifications";
@@ -118,20 +121,22 @@ function hide_retry_spinner($row: JQuery): boolean {
     return true;
 }
 
-function show_message_failed(message_id: number, failed_msg: string): void {
+function show_message_failed(message_id: number, _failed_msg: string): void {
     // Failed to send message, so display inline retry/cancel
     message_live_update.update_message_in_all_views(message_id, ($row) => {
         $row.find(".slow-send-spinner").addClass("hidden");
-        const $failed_div = $row.find(".message_failed");
-        $failed_div.toggleClass("hide", false);
-        $failed_div.find(".failed_text").attr("title", failed_msg);
+        const $message_controls = $row.find(".message_controls");
+        $message_controls.html(render_message_controls_failed_msg());
     });
+    // TODO: Show the `_failed_msg` in the UI, describing the reason for the failure.
 }
 
 function show_failed_message_success(message_id: number): void {
     // Previously failed message succeeded
+    const msg = message_store.get(message_id);
     message_live_update.update_message_in_all_views(message_id, ($row) => {
-        $row.find(".message_failed").toggleClass("hide", true);
+        const $message_controls = $row.find(".message_controls");
+        $message_controls.html(render_message_controls({msg}));
     });
 }
 

web/styles/message_row.css

@@ -77,8 +77,7 @@
       padding on either side of the message box. */
     padding: 0 5px 0 3px;
 
-    &:hover .message_controls,
-    &:hover .message_failed {
+    &:hover .message_controls {
         .empty-star:hover {
             cursor: pointer;
         }
@@ -142,8 +141,8 @@
 
         @media (width < $sm_min), ((width >= $md_min) and (width < $mc_min)) {
             /* This is intended to target the first message_controls child
-               when there are 3 displayed. 4 = 3 + hidden message_failed element. */
-            .message_control_button:nth-last-child(4) {
+               when there are 3 displayed. */
+            .message_control_button:nth-last-child(3) {
                 display: none;
             }
         }
@@ -504,35 +503,16 @@
         }
     }
 
-    .message_failed {
-        display: inline-flex;
-        justify-content: space-between;
-        cursor: pointer;
-        position: relative;
-        vertical-align: middle;
-        padding-left: 2px;
-
-        &.hide {
-            display: none;
-        }
+    .failed_message_action {
+        color: var(--color-failed-message-send-icon);
+        font-weight: bold;
+        padding: 1px;
+        opacity: 1;
+        visibility: visible;
 
         .rotating {
-            display: inline-block;
-            outline: none;
-
             animation: rotate 1s infinite linear;
         }
-
-        .failed_message_action {
-            opacity: 1 !important;
-            color: var(--color-failed-message-send-icon);
-            font-weight: bold;
-            padding: 1px;
-        }
-
-        .message_control_button {
-            visibility: inherit;
-        }
     }
 
     .star_container {

web/templates/message_body.hbs

@@ -37,7 +37,15 @@
     <span data-tooltip-template-id="slow-send-spinner-tooltip-template" class="fa fa-circle-o-notch slow-send-spinner{{#unless msg/show_slow_send_spinner }} hidden{{/unless}}"></span>
 {{/if}}
 
-{{> message_controls}}
+<div class="message_controls no-select">
+    {{#if msg/locally_echoed}}
+        {{#if msg/failed_request}}
+            {{> message_controls_failed_msg}}
+        {{/if}}
+    {{else}}
+        {{> message_controls}}
+    {{/if}}
+</div>
 
 {{#unless status_message}}
     {{#unless is_hidden}}

web/templates/message_controls.hbs

@@ -1,36 +1,19 @@
-<div class="message_controls no-select">
-    {{#if msg/sent_by_me}}
+{{#if msg/sent_by_me}}
     <div class="edit_content message_control_button"></div>
-    {{/if}}
+{{/if}}
 
-    {{#unless msg/sent_by_me}}
+{{#unless msg/sent_by_me}}
     <div class="reaction_button message_control_button" data-tooltip-template-id="add-emoji-tooltip-template">
         <div class="emoji-message-control-button-container">
             <i class="message-controls-icon zulip-icon zulip-icon-smile" aria-label="{{t 'Add emoji reaction' }} (:)" role="button" aria-haspopup="true" tabindex="0"></i>
         </div>
     </div>
-    {{/unless}}
-
-    {{#unless msg/locally_echoed}}
-    <div class="actions_hover message_control_button" data-tooltip-template-id="message-actions-tooltip-template" >
-        <i class="message-controls-icon message-actions-menu-button zulip-icon zulip-icon-more-vertical-spread" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Message actions' }}"></i>
-    </div>
-    {{/unless}}
-
-    <div class="message_failed {{#unless msg.failed_request}}hide{{/unless}}">
-        <div class="message_control_button failed_message_action" data-tippy-content="{{t 'Retry' }}">
-            <i class="message-controls-icon fa fa-refresh refresh-failed-message" aria-label="{{t 'Retry' }}" role="button" tabindex="0"></i>
-        </div>
-
-        <div class="message_control_button failed_message_action" data-tooltip-template-id="dismiss-failed-send-button-tooltip-template">
-            <i class="message-controls-icon fa fa-times-circle remove-failed-message" aria-label="{{t 'Dismiss' }}" role="button" tabindex="0"></i>
-        </div>
-    </div>
-
-    {{#unless msg/locally_echoed}}
-    <div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tooltip-template-id="{{#if msg/starred}}unstar{{else}}star{{/if}}-message-tooltip-template">
-        <i role="button" tabindex="0" class="message-controls-icon star zulip-icon {{#if msg/starred}}zulip-icon-star-filled{{else}}zulip-icon-star{{/if}}"></i>
-    </div>
-    {{/unless}}
+{{/unless}}
 
+<div class="actions_hover message_control_button" data-tooltip-template-id="message-actions-tooltip-template" >
+    <i class="message-controls-icon message-actions-menu-button zulip-icon zulip-icon-more-vertical-spread" role="button" aria-haspopup="true" tabindex="0" aria-label="{{t 'Message actions' }}"></i>
+</div>
+
+<div class="star_container message_control_button {{#if msg/starred}}{{else}}empty-star{{/if}}" data-tooltip-template-id="{{#if msg/starred}}unstar{{else}}star{{/if}}-message-tooltip-template">
+    <i role="button" tabindex="0" class="message-controls-icon star zulip-icon {{#if msg/starred}}zulip-icon-star-filled{{else}}zulip-icon-star{{/if}}"></i>
 </div>

web/templates/message_controls_failed_msg.hbs

@@ -0,0 +1,7 @@
+<div class="message_control_button failed_message_action" data-tippy-content="{{t 'Retry' }}">
+    <i class="message-controls-icon fa fa-refresh refresh-failed-message" aria-label="{{t 'Retry' }}" role="button" tabindex="0"></i>
+</div>
+
+<div class="message_control_button failed_message_action" data-tooltip-template-id="dismiss-failed-send-button-tooltip-template">
+    <i class="message-controls-icon fa fa-times-circle remove-failed-message" aria-label="{{t 'Dismiss' }}" role="button" tabindex="0"></i>
+</div>