stream_popover: Migrate Bootstrap to Tippy in starred messages' popover.

web/src/hotkey.js

@@ -362,6 +362,11 @@ function handle_popover_events(event_name) {
         return true;
     }
 
+    if (popover_menus.is_starred_messages_visible()) {
+        popover_menus.starred_messages_sidebar_menu_handle_keyboard(event_name);
+        return true;
+    }
+
     if (popovers.user_info_manage_menu_popped()) {
         popovers.user_info_popover_manage_menu_handle_keyboard(event_name);
         return true;
@@ -397,10 +402,6 @@ function handle_popover_events(event_name) {
         return true;
     }
 
-    if (stream_popover.starred_messages_popped()) {
-        stream_popover.starred_messages_sidebar_menu_handle_keyboard(event_name);
-        return true;
-    }
     return false;
 }
 

web/src/popover_menus.js

@@ -11,7 +11,9 @@ import render_compose_control_buttons_popover from "../templates/compose_control
 import render_compose_select_enter_behaviour_popover from "../templates/compose_select_enter_behaviour_popover.hbs";
 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 render_starred_messages_sidebar_actions from "../templates/starred_messages_sidebar_actions.hbs";
 
+import * as blueslip from "./blueslip";
 import * as channel from "./channel";
 import * as common from "./common";
 import * as compose_actions from "./compose_actions";
@@ -28,6 +30,8 @@ import * as popovers from "./popovers";
 import * as read_receipts from "./read_receipts";
 import * as rows from "./rows";
 import * as settings_data from "./settings_data";
+import * as starred_messages from "./starred_messages";
+import * as starred_messages_ui from "./starred_messages_ui";
 import * as stream_popover from "./stream_popover";
 import {parse_html} from "./ui_util";
 import * as unread_ops from "./unread_ops";
@@ -36,18 +40,47 @@ import {user_settings} from "./user_settings";
 let left_sidebar_stream_setting_popover_displayed = false;
 let compose_mobile_button_popover_displayed = false;
 export let compose_enter_sends_popover_displayed = false;
-let compose_control_buttons_popover_instance;
 let message_actions_popover_displayed = false;
 let message_actions_popover_keyboard_toggle = false;
 
+let compose_control_buttons_popover_instance;
+let starred_messages_popover_instance;
+
 export function actions_popped() {
     return message_actions_popover_displayed;
 }
 
+export function is_starred_messages_visible() {
+    return starred_messages_popover_instance?.state.isVisible;
+}
+
 export function get_compose_control_buttons_popover() {
     return compose_control_buttons_popover_instance;
 }
 
+export function get_starred_messages_popover() {
+    return starred_messages_popover_instance;
+}
+
+function get_popover_items_for_instance(instance) {
+    const $current_elem = $(instance.popper);
+    const class_name = $current_elem.attr("class");
+
+    if (!$current_elem) {
+        blueslip.error(
+            `Trying to get menu items when popover with class "${class_name}" is closed.`,
+        );
+        return undefined;
+    }
+
+    return $current_elem.find("li:not(.divider):visible a");
+}
+
+export function starred_messages_sidebar_menu_handle_keyboard(key) {
+    const items = get_popover_items_for_instance(starred_messages_popover_instance);
+    popovers.popover_items_handle_keyboard(key, items);
+}
+
 const default_popover_props = {
     delay: 0,
     appendTo: () => document.body,
@@ -69,7 +102,8 @@ export function any_active() {
         compose_mobile_button_popover_displayed ||
         compose_control_buttons_popover_instance ||
         compose_enter_sends_popover_displayed ||
-        message_actions_popover_displayed
+        message_actions_popover_displayed ||
+        is_starred_messages_visible()
     );
 }
 
@@ -441,4 +475,63 @@ export function initialize() {
             message_actions_popover_keyboard_toggle = false;
         },
     });
+
+    // Starred messages popover
+    tippy_no_propagation(".starred-messages-sidebar-menu-icon", {
+        placement: "right",
+        maxWidth: "none",
+        popperOptions: {
+            modifiers: [
+                {
+                    name: "flip",
+                    options: {
+                        fallbackPlacements: "bottom",
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    options: {
+                        padding: 40,
+                    },
+                },
+            ],
+        },
+        onMount(instance) {
+            const $popper = $(instance.popper);
+            starred_messages_popover_instance = instance;
+
+            $popper.one("click", "#unstar_all_messages", () => {
+                starred_messages_ui.confirm_unstar_all_messages();
+                instance.hide();
+            });
+            $popper.one("click", "#toggle_display_starred_msg_count", () => {
+                const data = {};
+                const starred_msg_counts = user_settings.starred_message_counts;
+                data.starred_message_counts = JSON.stringify(!starred_msg_counts);
+
+                channel.patch({
+                    url: "/json/settings",
+                    data,
+                });
+                instance.hide();
+            });
+        },
+        onShow(instance) {
+            popovers.hide_all_except_sidebars();
+            const show_unstar_all_button = starred_messages.get_count() > 0;
+
+            instance.setContent(
+                parse_html(
+                    render_starred_messages_sidebar_actions({
+                        show_unstar_all_button,
+                        starred_message_counts: user_settings.starred_message_counts,
+                    }),
+                ),
+            );
+        },
+        onHidden(instance) {
+            instance.destroy();
+            starred_messages_popover_instance = undefined;
+        },
+    });
 }

web/src/popovers.js

@@ -1142,7 +1142,6 @@ export function hide_all_except_sidebars(opts) {
     stream_popover.hide_stream_popover();
     stream_popover.hide_topic_popover();
     stream_popover.hide_all_messages_popover();
-    stream_popover.hide_starred_messages_popover();
     stream_popover.hide_drafts_popover();
     hide_all_user_info_popovers();
     hide_playground_links_popover();

web/src/starred_messages.js

@@ -1,5 +1,6 @@
 import * as message_store from "./message_store";
 import {page_params} from "./page_params";
+import * as popover_menus from "./popover_menus";
 import * as stream_popover from "./stream_popover";
 import * as top_left_corner from "./top_left_corner";
 import {user_settings} from "./user_settings";
@@ -81,6 +82,6 @@ export function rerender_ui() {
     }
 
     stream_popover.hide_topic_popover();
+    popover_menus.get_starred_messages_popover()?.hide();
     top_left_corner.update_starred_count(count);
-    stream_popover.hide_starred_messages_popover();
 }

web/src/stream_popover.js

@@ -6,13 +6,11 @@ import render_all_messages_sidebar_actions from "../templates/all_messages_sideb
 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";
 import render_topic_sidebar_actions from "../templates/topic_sidebar_actions.hbs";
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
-import * as channel from "./channel";
 import * as compose_actions from "./compose_actions";
 import * as composebox_typeahead from "./composebox_typeahead";
 import * as confirm_dialog from "./confirm_dialog";
@@ -37,7 +35,6 @@ import * as stream_settings_ui from "./stream_settings_ui";
 import * as sub_store from "./sub_store";
 import * as ui_report from "./ui_report";
 import * as unread_ops from "./unread_ops";
-import {user_settings} from "./user_settings";
 import * as user_topics from "./user_topics";
 
 // We handle stream popovers and topic popovers in this
@@ -45,7 +42,6 @@ import * as user_topics from "./user_topics";
 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;
@@ -89,11 +85,6 @@ export function all_messages_sidebar_menu_handle_keyboard(key) {
     popovers.popover_items_handle_keyboard(key, items);
 }
 
-export function starred_messages_sidebar_menu_handle_keyboard(key) {
-    const items = get_popover_menu_items(starred_messages_sidebar_elem);
-    popovers.popover_items_handle_keyboard(key, items);
-}
-
 function elem_to_stream_id($elem) {
     const stream_id = Number.parseInt($elem.attr("data-stream-id"), 10);
 
@@ -120,10 +111,6 @@ export function all_messages_popped() {
     return all_messages_sidebar_elem !== undefined;
 }
 
-export function starred_messages_popped() {
-    return starred_messages_sidebar_elem !== undefined;
-}
-
 export function drafts_popped() {
     return drafts_sidebar_elem !== undefined;
 }
@@ -152,14 +139,6 @@ export function hide_all_messages_popover() {
     }
 }
 
-export function hide_starred_messages_popover() {
-    if (starred_messages_popped()) {
-        $(starred_messages_sidebar_elem).popover("destroy");
-        hide_left_sidebar_menu_icon();
-        starred_messages_sidebar_elem = undefined;
-    }
-}
-
 export function hide_drafts_popover() {
     if (drafts_popped()) {
         $(drafts_sidebar_elem).popover("destroy");
@@ -348,36 +327,6 @@ function build_all_messages_popover(e) {
     e.stopPropagation();
 }
 
-function build_starred_messages_popover(e) {
-    const elt = e.target;
-
-    if (starred_messages_popped() && starred_messages_sidebar_elem === elt) {
-        hide_starred_messages_popover();
-        e.stopPropagation();
-        return;
-    }
-
-    popovers.hide_all_except_sidebars();
-
-    const show_unstar_all_button = starred_messages.get_count() > 0;
-    const content = render_starred_messages_sidebar_actions({
-        show_unstar_all_button,
-        starred_message_counts: user_settings.starred_message_counts,
-    });
-
-    $(elt).popover({
-        content,
-        html: true,
-        trigger: "manual",
-        fixed: true,
-    });
-
-    $(elt).popover("show");
-    starred_messages_sidebar_elem = elt;
-    show_left_sidebar_menu_icon(elt);
-    e.stopPropagation();
-}
-
 function build_drafts_popover(e) {
     const elt = e.target;
 
@@ -624,12 +573,6 @@ export function register_click_handlers() {
 
     $("#global_filters").on("click", ".all-messages-sidebar-menu-icon", build_all_messages_popover);
 
-    $("#global_filters").on(
-        "click",
-        ".starred-messages-sidebar-menu-icon",
-        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) => {
@@ -684,14 +627,6 @@ export function register_stream_handlers() {
         unread_ops.confirm_mark_all_as_read();
     });
 
-    // Unstar all messages
-    $("body").on("click", "#unstar_all_messages", (e) => {
-        hide_starred_messages_popover();
-        e.preventDefault();
-        e.stopPropagation();
-        starred_messages_ui.confirm_unstar_all_messages();
-    });
-
     $("body").on("click", "#delete_all_drafts_sidebar", (e) => {
         hide_drafts_popover();
         e.stopPropagation();
@@ -711,19 +646,6 @@ export function register_stream_handlers() {
         );
     });
 
-    // Toggle displaying starred message count
-    $("body").on("click", "#toggle_display_starred_msg_count", (e) => {
-        hide_starred_messages_popover();
-        e.preventDefault();
-        e.stopPropagation();
-        const starred_msg_counts = user_settings.starred_message_counts;
-        const data = {};
-        data.starred_message_counts = JSON.stringify(!starred_msg_counts);
-        channel.patch({
-            url: "/json/settings",
-            data,
-        });
-    });
     // Mute/unmute
     $("body").on("click", ".toggle_stream_muted", (e) => {
         const sub = stream_popover_sub(e);

web/tests/hotkey.test.js

@@ -66,6 +66,7 @@ const popovers = mock_esm("../src/popovers", {
 });
 const popover_menus = mock_esm("../src/popover_menus", {
     actions_popped: () => false,
+    is_starred_messages_visible: () => false,
 });
 const reactions = mock_esm("../src/reactions");
 const search = mock_esm("../src/search");
@@ -86,7 +87,6 @@ const stream_popover = mock_esm("../src/stream_popover", {
     stream_popped: () => false,
     topic_popped: () => false,
     all_messages_popped: () => false,
-    starred_messages_popped: () => false,
 });
 
 message_lists.current = {

web/tests/popovers.test.js

@@ -33,7 +33,6 @@ mock_esm("../src/stream_popover", {
     hide_stream_popover: noop,
     hide_topic_popover: noop,
     hide_all_messages_popover: noop,
-    hide_starred_messages_popover: noop,
     hide_drafts_popover: noop,
     hide_streamlist_sidebar: noop,
 });

web/tests/starred_messages.test.js

@@ -12,7 +12,6 @@ const top_left_corner = mock_esm("../src/top_left_corner", {
 });
 const stream_popover = mock_esm("../src/stream_popover", {
     hide_topic_popover() {},
-    hide_starred_messages_popover() {},
 });
 
 const message_store = zrequire("message_store");