drafts: Enable dynamic re-rendering of draft list in overlay.

This commit laying the groundwork for dynamic re-rendering of
drafts.

Previously, the draft list was rendered once with the overlay,
and re-rendering wasn't needed. However, to support features like
"undo," we now need to re-render the draft list dynamically.

web/src/drafts_overlay_ui.ts

@@ -4,6 +4,7 @@ import _ from "lodash";
 import assert from "minimalistic-assert";
 
 import render_draft_table_body from "../templates/draft_table_body.hbs";
+import render_drafts_list from "../templates/drafts_list.hbs";
 
 import * as browser_history from "./browser_history.ts";
 import * as compose_actions from "./compose_actions.ts";
@@ -190,15 +191,24 @@ function render_widgets(
     other_drafts: FormattedDraft[],
     narrow_drafts_header: string,
 ): void {
-    $("#drafts_table").empty();
-
-    const rendered = render_draft_table_body({
-        narrow_drafts_header,
-        narrow_drafts,
-        other_drafts,
-    });
     const $drafts_table = $("#drafts_table");
-    $drafts_table.append($(rendered));
+    if ($(".drafts-list").length === 0) {
+        const rendered = render_draft_table_body({
+            context: {
+                narrow_drafts_header,
+                narrow_drafts,
+                other_drafts,
+            },
+        });
+        $drafts_table.append($(rendered));
+    } else {
+        const rendered = render_drafts_list({
+            narrow_drafts_header,
+            narrow_drafts,
+            other_drafts,
+        });
+        $(".drafts-list").replaceWith($(rendered));
+    }
     if ($("#drafts_table .overlay-message-row").length > 0) {
         $("#drafts_table .no-drafts").hide();
         // Update possible dynamic elements.
@@ -297,6 +307,7 @@ function setup_bulk_actions_handlers(): void {
 export function launch(): void {
     const {narrow_drafts, other_drafts, narrow_drafts_header} = get_formatted_drafts_data();
 
+    $("#drafts_table").empty();
     render_widgets(narrow_drafts, other_drafts, narrow_drafts_header);
 
     // We need to force a style calculation on the newly created

web/templates/draft_table_body.hbs

@@ -23,24 +23,7 @@
                     </div>
                 </div>
             </div>
-            <div class="drafts-list overlay-messages-list">
+            {{> drafts_list context }}
-                <div class="no-drafts no-overlay-messages">
-                    {{t 'No drafts.'}}
-                </div>
-
-                <div id="drafts-from-conversation">
-                    <h2>{{narrow_drafts_header}}</h2>
-                    {{#each narrow_drafts}}
-                        {{> draft .}}
-                    {{/each}}
-                </div>
-                <div id="other-drafts">
-                    <h2 id="other-drafts-header">{{t "Other drafts" }}</h2>
-                    {{#each other_drafts}}
-                        {{> draft .}}
-                    {{/each}}
-                </div>
-            </div>
         </div>
     </div>
 </div>

web/templates/drafts_list.hbs

@@ -0,0 +1,18 @@
+<div class="drafts-list overlay-messages-list">
+    <div class="no-drafts no-overlay-messages">
+        {{t 'No drafts.'}}
+    </div>
+
+    <div id="drafts-from-conversation">
+        <h2>{{narrow_drafts_header}}</h2>
+        {{#each narrow_drafts}}
+            {{> draft .}}
+        {{/each}}
+    </div>
+    <div id="other-drafts">
+        <h2 id="other-drafts-header">{{t "Other drafts" }}</h2>
+        {{#each other_drafts}}
+            {{> draft .}}
+        {{/each}}
+    </div>
+</div>

web/tests/drafts.test.cjs

@@ -646,8 +646,8 @@ test("format_drafts", ({override, override_rewire, mock_template}) => {
 
     mock_template("draft_table_body.hbs", false, (data) => {
         // Tests formatting and time-sorting of drafts
-        assert.deepEqual(data.narrow_drafts, []);
+        assert.deepEqual(data.context.narrow_drafts, []);
-        assert.deepEqual(data.other_drafts, expected);
+        assert.deepEqual(data.context.other_drafts, expected);
         assert.ok(data);
         return "<draft table stub>";
     });
@@ -657,6 +657,7 @@ test("format_drafts", ({override, override_rewire, mock_template}) => {
     const $unread_count = $("<unread-count-stub>");
     $(".top_left_drafts").set_find_results(".unread_count", $unread_count);
 
+    $.create(".drafts-list", {children: []});
     $.create("#drafts_table .overlay-message-row", {children: []});
     $(".draft-selection-checkbox").filter = () => [];
     drafts_overlay_ui.launch();
@@ -800,8 +801,8 @@ test("filter_drafts", ({override, override_rewire, mock_template}) => {
 
     mock_template("draft_table_body.hbs", false, (data) => {
         // Tests splitting up drafts by current narrow.
-        assert.deepEqual(data.narrow_drafts, expected_pm_drafts);
+        assert.deepEqual(data.context.narrow_drafts, expected_pm_drafts);
-        assert.deepEqual(data.other_drafts, expected_other_drafts);
+        assert.deepEqual(data.context.other_drafts, expected_other_drafts);
         return "<draft table stub>";
     });
 
@@ -813,6 +814,7 @@ test("filter_drafts", ({override, override_rewire, mock_template}) => {
     override(user_pill, "get_user_ids", () => [aaron.user_id]);
     compose_state.set_message_type("private");
 
+    $.create(".drafts-list", {children: []});
     $.create("#drafts_table .overlay-message-row", {children: []});
     $(".draft-selection-checkbox").filter = () => [];
     drafts_overlay_ui.launch();