popovers: Add sidebar menu to delete all drafts.

This provides a convenient interface to hide all drafts.

Fixes #19360.

However, we may want to continue to implement a button in the drafts
overlay as well for doing this operation.

frontend_tests/node_tests/drafts.js

@@ -221,6 +221,20 @@ test("remove_old_drafts", () => {
     assert.deepEqual(draft_model.get(), {id3: draft_3});
 });
 
+test("delete_all_drafts", () => {
+    const draft_model = drafts.draft_model;
+    const ls = localstorage();
+    const data = {draft_1, draft_2, short_msg};
+    ls.set("drafts", data);
+    assert.deepEqual(draft_model.get(), data);
+
+    const unread_count = $('<span class="unread_count"></span>');
+    $(".top_left_drafts").set_find_results(".unread_count", unread_count);
+
+    drafts.delete_all_drafts();
+    assert.deepEqual(draft_model.get(), {});
+});
+
 test("format_drafts", ({override, mock_template}) => {
     function feb12() {
         return new Date(1549958107000); // 2/12/2019 07:55:07 AM (UTC+0)

static/js/drafts.js

@@ -3,6 +3,7 @@ import Handlebars from "handlebars/runtime";
 import $ from "jquery";
 import tippy from "tippy.js";
 
+import render_confirm_delete_all_drafts from "../templates/confirm_dialog/confirm_delete_all_drafts.hbs";
 import render_draft_table_body from "../templates/draft_table_body.hbs";
 
 import * as blueslip from "./blueslip";
@@ -13,7 +14,8 @@ import * as compose_actions from "./compose_actions";
 import * as compose_fade from "./compose_fade";
 import * as compose_state from "./compose_state";
 import * as compose_ui from "./compose_ui";
-import {$t} from "./i18n";
+import * as confirm_dialog from "./confirm_dialog";
+import {$t, $t_html} from "./i18n";
 import {localstorage} from "./localstorage";
 import * as markdown from "./markdown";
 import * as narrow from "./narrow";
@@ -90,6 +92,23 @@ export const draft_model = (function () {
     return exports;
 })();
 
+export function delete_all_drafts() {
+    const drafts = draft_model.get();
+    for (const [id] of Object.entries(drafts)) {
+        draft_model.deleteDraft(id);
+    }
+}
+
+export function confirm_delete_all_drafts() {
+    const html_body = render_confirm_delete_all_drafts();
+
+    confirm_dialog.launch({
+        html_heading: $t_html({defaultMessage: "Delete all drafts"}),
+        html_body,
+        on_click: delete_all_drafts,
+    });
+}
+
 export function snapshot_message() {
     if (!compose_state.composing() || compose_state.message_content().length <= 2) {
         // If you aren't in the middle of composing the body of a

static/js/stream_popover.js

@@ -3,6 +3,7 @@ import $ from "jquery";
 
 import render_all_messages_sidebar_actions from "../templates/all_messages_sidebar_actions.hbs";
 import render_delete_topic_modal from "../templates/confirm_dialog/confirm_delete_topic.hbs";
+import render_drafts_sidebar_actions from "../templates/drafts_sidebar_action.hbs";
 import render_move_topic_to_stream from "../templates/move_topic_to_stream.hbs";
 import render_starred_messages_sidebar_actions from "../templates/starred_messages_sidebar_actions.hbs";
 import render_stream_sidebar_actions from "../templates/stream_sidebar_actions.hbs";
@@ -14,6 +15,7 @@ import * as channel from "./channel";
 import * as compose_actions from "./compose_actions";
 import * as confirm_dialog from "./confirm_dialog";
 import * as dialog_widget from "./dialog_widget";
+import * as drafts from "./drafts";
 import {DropdownListWidget} from "./dropdown_list_widget";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
@@ -40,6 +42,7 @@ let current_stream_sidebar_elem;
 let current_topic_sidebar_elem;
 let all_messages_sidebar_elem;
 let starred_messages_sidebar_elem;
+let drafts_sidebar_elem;
 let stream_widget;
 let stream_header_colorblock;
 
@@ -107,6 +110,10 @@ export function starred_messages_popped() {
     return starred_messages_sidebar_elem !== undefined;
 }
 
+export function drafts_popped() {
+    return drafts_sidebar_elem !== undefined;
+}
+
 export function hide_stream_popover() {
     if (stream_popped()) {
         $(current_stream_sidebar_elem).popover("destroy");
@@ -135,6 +142,13 @@ export function hide_starred_messages_popover() {
     }
 }
 
+export function hide_drafts_popover() {
+    if (drafts_popped()) {
+        $(drafts_sidebar_elem).popover("destroy");
+        drafts_sidebar_elem = undefined;
+    }
+}
+
 // These are the only two functions that is really shared by the
 // two popovers, so we could split out topic stuff to
 // another module pretty easily.
@@ -348,6 +362,30 @@ function build_starred_messages_popover(e) {
     e.stopPropagation();
 }
 
+function build_drafts_popover(e) {
+    const elt = e.target;
+
+    if (drafts_popped() && drafts_sidebar_elem === elt) {
+        hide_drafts_popover();
+        e.stopPropagation();
+        return;
+    }
+
+    popovers.hide_all();
+    show_streamlist_sidebar();
+    const content = render_drafts_sidebar_actions({});
+    $(elt).popover({
+        content,
+        html: true,
+        trigger: "manual",
+        fixed: true,
+    });
+
+    $(elt).popover("show");
+    drafts_sidebar_elem = elt;
+    e.stopPropagation();
+}
+
 function build_move_topic_to_stream_popover(e, current_stream_id, topic_name) {
     // TODO: Add support for keyboard-alphabet navigation. Some orgs
     // many streams and scrolling can be a painful process in that
@@ -499,6 +537,8 @@ export function register_click_handlers() {
         build_starred_messages_popover,
     );
 
+    $("#global_filters").on("click", ".drafts-sidebar-menu-icon", build_drafts_popover);
+
     $("body").on("click keypress", ".move-topic-dropdown .list_item", (e) => {
         // We want the dropdown to collapse once any of the list item is pressed
         // and thus don't want to kill the natural bubbling of event.
@@ -559,6 +599,12 @@ export function register_stream_handlers() {
         starred_messages_ui.confirm_unstar_all_messages();
     });
 
+    $("body").on("click", "#delete_all_drafts_sidebar", (e) => {
+        hide_drafts_popover();
+        e.stopPropagation();
+        drafts.confirm_delete_all_drafts();
+    });
+
     // Unstar all messages in topic
     $("body").on("click", ".sidebar-popover-unstar-all-in-topic", (e) => {
         e.preventDefault();

static/styles/left_sidebar.css

@@ -366,6 +366,7 @@ li.top_left_recent_topics {
 .all-messages-sidebar-menu-icon,
 .stream-sidebar-menu-icon,
 .starred-messages-sidebar-menu-icon,
+.drafts-sidebar-menu-icon,
 .topic-sidebar-menu-icon {
     position: absolute;
     display: none;
@@ -405,6 +406,7 @@ li.top_left_recent_topics {
 */
 .all-messages-sidebar-menu-icon,
 .starred-messages-sidebar-menu-icon,
+.drafts-sidebar-menu-icon,
 .stream-sidebar-menu-icon {
     top: 1px;
     right: 0;
@@ -432,6 +434,7 @@ li.top_left_recent_topics {
 */
 li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
 li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,
+li.top_left_drafts:hover .drafts-sidebar-menu-icon,
 #stream_filters li:hover .stream-sidebar-menu-icon,
 li.topic-list-item:hover .topic-sidebar-menu-icon {
     display: inline;

static/templates/confirm_dialog/confirm_delete_all_drafts.hbs

@@ -0,0 +1,5 @@
+<p>
+    {{#tr}}
+    Are you sure you want to delete all drafts?  This action cannot be undone.
+    {{/tr}}
+</p>

static/templates/drafts_sidebar_action.hbs

@@ -0,0 +1,10 @@
+{{! Contents of the "drafts sidebar" popup }}
+<ul class="nav nav-list">
+    <li>
+        {{! tabindex="0" Makes anchor tag focusable. Needed for keyboard support. }}
+        <a tabindex="0" id="delete_all_drafts_sidebar">
+            <i class="fa fa-trash-o" aria-hidden="true"></i>
+            {{#tr}}Delete all drafts{{/tr}}
+        </a>
+    </li>
+</ul>

static/templates/left_sidebar.hbs

@@ -57,6 +57,7 @@
                     <span>{{t 'Drafts' }}</span>
                     <span class="unread_count"></span>
                 </a>
+                <span class="arrow drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-ellipsis-v-solid" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_recent_topics top_left_row" title="{{t 'Recent topics' }} (t)">
                 <a href="#recent_topics">