From 920a5eac1a472a8c1a68239e0dc95e163a1c995a Mon Sep 17 00:00:00 2001
From: Satyam Bansal <sbansal1999@gmail.com>
Date: Sat, 20 May 2023 17:48:20 +0530
Subject: [PATCH] stream_settings: Migrate popovers to tippy.

Fixes #25627.
---
 web/src/stream_ui_updates.js     | 29 ++++++++---------------------
 web/src/user_group_ui_updates.js |  2 +-
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/web/src/stream_ui_updates.js b/web/src/stream_ui_updates.js
index faad1eed1a..fd84784943 100644
--- a/web/src/stream_ui_updates.js
+++ b/web/src/stream_ui_updates.js
@@ -1,4 +1,5 @@
 import $ from "jquery";
+import tippy from "tippy.js";
 
 import render_announce_stream_checkbox from "../templates/stream_settings/announce_stream_checkbox.hbs";
 import render_stream_privacy_icon from "../templates/stream_settings/stream_privacy_icon.hbs";
@@ -20,26 +21,11 @@ export function initialize_disable_btn_hint_popover(
     $disabled_btn,
     hint_text,
 ) {
-    // Disabled button blocks mouse events(hover) from reaching
-    // to it's parent div element, so popover don't get triggered.
-    // Add css to prevent this.
-    $disabled_btn.css("pointer-events", "none");
-    $popover_btn.popover({
-        placement: "bottom",
-        content: $("<div>").addClass("sub_disable_btn_hint").text(hint_text).prop("outerHTML"),
-        trigger: "manual",
-        html: true,
+    tippy($btn_wrapper[0], {
+        content: hint_text,
         animation: false,
-    });
-
-    $btn_wrapper.on("mouseover", (e) => {
-        $popover_btn.popover("show");
-        e.stopPropagation();
-    });
-
-    $btn_wrapper.on("mouseout", (e) => {
-        $popover_btn.popover("hide");
-        e.stopPropagation();
+        hideOnClick: false,
+        placement: "bottom",
     });
 }
 
@@ -101,7 +87,7 @@ export function update_settings_button_for_sub(sub) {
     }
     if (stream_data.can_toggle_subscription(sub)) {
         $settings_button.prop("disabled", false);
-        $settings_button.popover("destroy");
+        $settings_button.parent()[0]._tippy?.destroy();
         $settings_button.css("pointer-events", "");
     } else {
         $settings_button.attr("title", "");
@@ -289,13 +275,14 @@ export function enable_or_disable_add_subscribers_elements(
     const $add_subscribers_button = $container_elem
         .find('button[name="add_subscriber"]')
         .expectOne();
+    const $add_subscribers_container = $(".edit_subscribers_for_stream .subscriber_list_settings");
 
     $input_element.prop("contenteditable", enable_elem);
     $add_subscribers_button.prop("disabled", !enable_elem);
 
     if (enable_elem) {
         $add_subscribers_button.css("pointer-events", "");
-        $input_element.popover("destroy");
+        $add_subscribers_container[0]?._tippy?.destroy();
         $container_elem.find(".add_subscribers_container").removeClass("add_subscribers_disabled");
     } else {
         $container_elem.find(".add_subscribers_container").addClass("add_subscribers_disabled");
diff --git a/web/src/user_group_ui_updates.js b/web/src/user_group_ui_updates.js
index f9f755898c..e5fba94bed 100644
--- a/web/src/user_group_ui_updates.js
+++ b/web/src/user_group_ui_updates.js
@@ -37,7 +37,7 @@ export function update_add_members_elements(group) {
         $input_element.prop("disabled", false);
         $button_element.prop("disabled", false);
         $button_element.css("pointer-events", "");
-        $input_element.popover("destroy");
+        $add_members_container[0]._tippy?.destroy();
     } else {
         $input_element.prop("disabled", true);
         $button_element.prop("disabled", true);