From 563f8aba1e4bd1dcf19e6c9f3e342ddee6f8d30f Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 16 Jun 2021 10:37:51 +0000
Subject: [PATCH] compose_mobile_button: Use tippyjs for popover.

There are several benefits of using tippyjs here:
* Removes dependency on bootstrap.
* We don't have to manually handle show/hide of popover.
* There cannot be any memory leak since we don't store
  the instance.
---
 static/js/compose_closed_ui.js                | 13 -----
 static/js/popovers.js                         | 43 +----------------
 static/js/tippyjs.js                          | 47 +++++++++++++++++++
 .../mobile_message_buttons_popover.hbs        |  7 ---
 4 files changed, 48 insertions(+), 62 deletions(-)
 delete mode 100644 static/templates/mobile_message_buttons_popover.hbs

diff --git a/static/js/compose_closed_ui.js b/static/js/compose_closed_ui.js
index 5d34ed2f6a..3e4006cf86 100644
--- a/static/js/compose_closed_ui.js
+++ b/static/js/compose_closed_ui.js
@@ -6,7 +6,6 @@ import * as message_lists from "./message_lists";
 import * as message_store from "./message_store";
 import * as narrow_state from "./narrow_state";
 import * as people from "./people";
-import * as popovers from "./popovers";
 import * as recent_topics_util from "./recent_topics_util";
 
 function update_stream_button(btn_text, title) {
@@ -113,22 +112,10 @@ export function initialize() {
 
     // Click handlers for buttons in the compose compose box.
     $("body").on("click", ".compose_stream_button", () => {
-        popovers.hide_mobile_message_buttons_popover();
         compose_actions.start("stream", {trigger: "new topic button"});
     });
 
     $("body").on("click", ".compose_private_button", () => {
-        popovers.hide_mobile_message_buttons_popover();
-        compose_actions.start("private");
-    });
-
-    $("body").on("click", ".compose_mobile_stream_button", () => {
-        popovers.hide_mobile_message_buttons_popover();
-        compose_actions.start("stream", {trigger: "new topic button"});
-    });
-
-    $("body").on("click", ".compose_mobile_private_button", () => {
-        popovers.hide_mobile_message_buttons_popover();
         compose_actions.start("private");
     });
 
diff --git a/static/js/popovers.js b/static/js/popovers.js
index fde69cfde9..a158af0dc7 100644
--- a/static/js/popovers.js
+++ b/static/js/popovers.js
@@ -5,8 +5,6 @@ import $ from "jquery";
 import {hideAll} from "tippy.js";
 
 import render_actions_popover_content from "../templates/actions_popover_content.hbs";
-import render_mobile_message_buttons_popover from "../templates/mobile_message_buttons_popover.hbs";
-import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
 import render_no_arrow_popover from "../templates/no_arrow_popover.hbs";
 import render_playground_links_popover_content from "../templates/playground_links_popover_content.hbs";
 import render_remind_me_popover_content from "../templates/remind_me_popover_content.hbs";
@@ -60,7 +58,6 @@ import * as util from "./util";
 let current_actions_popover_elem;
 let current_flatpickr_instance;
 let current_message_info_popover_elem;
-let current_mobile_message_buttons_popover_elem;
 let current_user_info_popover_elem;
 let current_playground_links_popover_elem;
 let userlist_placement = "right";
@@ -71,7 +68,6 @@ export function clear_for_testing() {
     current_actions_popover_elem = undefined;
     current_flatpickr_instance = undefined;
     current_message_info_popover_elem = undefined;
-    current_mobile_message_buttons_popover_elem = undefined;
     current_user_info_popover_elem = undefined;
     current_playground_links_popover_elem = undefined;
     list_of_popovers.length = 0;
@@ -344,37 +340,6 @@ function show_user_info_popover_for_message(element, user, message) {
     }
 }
 
-function show_mobile_message_buttons_popover(element) {
-    const last_popover_elem = current_mobile_message_buttons_popover_elem;
-    hide_all();
-    if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) {
-        // We want it to be the case that a user can dismiss a popover
-        // by clicking on the same element that caused the popover.
-        return;
-    }
-
-    const $element = $(element);
-    $element.popover({
-        placement: "left",
-        template: render_mobile_message_buttons_popover(),
-        content: render_mobile_message_buttons_popover_content({
-            is_in_private_narrow: narrow_state.narrowed_to_pms(),
-        }),
-        html: true,
-        trigger: "manual",
-    });
-    $element.popover("show");
-
-    current_mobile_message_buttons_popover_elem = $element;
-}
-
-export function hide_mobile_message_buttons_popover() {
-    if (current_mobile_message_buttons_popover_elem) {
-        current_mobile_message_buttons_popover_elem.popover("destroy");
-        current_mobile_message_buttons_popover_elem = undefined;
-    }
-}
-
 export function hide_user_profile() {
     overlays.close_modal("#user-profile-modal");
 }
@@ -1145,12 +1110,6 @@ export function register_click_handlers() {
         hide_user_profile();
     });
 
-    $("body").on("click", ".compose_mobile_button", function (e) {
-        show_mobile_message_buttons_popover(this);
-        e.stopPropagation();
-        e.preventDefault();
-    });
-
     $("body").on("click", ".set_away_status", (e) => {
         hide_all();
         user_status.server_set_away();
@@ -1469,6 +1428,7 @@ export function any_active() {
     // Expanded sidebars on mobile view count as popovers as well.
     return (
         tippyjs.is_left_sidebar_stream_setting_popover_displayed() ||
+        tippyjs.is_compose_mobile_button_popover_displayed() ||
         actions_popped() ||
         user_sidebar_popped() ||
         stream_popover.stream_popped() ||
@@ -1499,7 +1459,6 @@ export function hide_all_except_sidebars(opts) {
     stream_popover.hide_all_messages_popover();
     stream_popover.hide_starred_messages_popover();
     hide_user_sidebar_popover();
-    hide_mobile_message_buttons_popover();
     hide_user_info_popover();
     hide_playground_links_popover();
 
diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
index 0075557c12..b24d810640 100644
--- a/static/js/tippyjs.js
+++ b/static/js/tippyjs.js
@@ -2,7 +2,10 @@ import $ from "jquery";
 import tippy, {delegate} from "tippy.js";
 
 import render_left_sidebar_stream_setting_popover from "../templates/left_sidebar_stream_setting_popover.hbs";
+import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
 
+import * as compose_actions from "./compose_actions";
+import * as narrow_state from "./narrow_state";
 import * as popovers from "./popovers";
 import * as reactions from "./reactions";
 import * as rows from "./rows";
@@ -40,11 +43,16 @@ tippy.setDefaultProps({
 });
 
 let left_sidebar_stream_setting_popover_displayed = false;
+let compose_mobile_button_popover_displayed = false;
 
 export function is_left_sidebar_stream_setting_popover_displayed() {
     return left_sidebar_stream_setting_popover_displayed;
 }
 
+export function is_compose_mobile_button_popover_displayed() {
+    return compose_mobile_button_popover_displayed;
+}
+
 export function initialize() {
     delegate("body", {
         // Add elements here which are not displayed on
@@ -145,6 +153,8 @@ export function initialize() {
         },
     });
 
+    // ------------------ Popovers ----------------------------------------------
+
     delegate("body", {
         delay: 0,
         target: "#streams_inline_cog",
@@ -169,4 +179,41 @@ export function initialize() {
             left_sidebar_stream_setting_popover_displayed = false;
         },
     });
+
+    // compose box buttons popover shown on mobile widths.
+    delegate("body", {
+        target: ".compose_mobile_button",
+        placement: "top",
+        onShow(instance) {
+            popovers.hide_all_except_sidebars(instance);
+            instance.setContent(
+                render_mobile_message_buttons_popover_content({
+                    is_in_private_narrow: narrow_state.narrowed_to_pms(),
+                }),
+            );
+            compose_mobile_button_popover_displayed = true;
+
+            const $popper = $(instance.popper);
+            $popper.one("click", instance.hide);
+            $popper.one("click", ".compose_mobile_stream_button", () => {
+                compose_actions.start("stream", {trigger: "new topic button"});
+            });
+            $popper.one("click", ".compose_mobile_private_button", () => {
+                compose_actions.start("private");
+            });
+        },
+        appendTo: () => document.body,
+        trigger: "click",
+        allowHTML: true,
+        interactive: true,
+        hideOnClick: true,
+        theme: "light-border",
+        touch: true,
+        onHidden(instance) {
+            // Destroy instance so that event handlers
+            // are destroyed too.
+            instance.destroy();
+            compose_mobile_button_popover_displayed = false;
+        },
+    });
 }
diff --git a/static/templates/mobile_message_buttons_popover.hbs b/static/templates/mobile_message_buttons_popover.hbs
deleted file mode 100644
index 7cbb38b31d..0000000000
--- a/static/templates/mobile_message_buttons_popover.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="popover mobile-message-buttons-popover">
-    <div class="popover-inner">
-        <div class="popover-content">
-            <div></div>
-        </div>
-    </div>
-</div>