popover_menus: Extract user_topic_popover menus.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

tools/test-js-with-node

@@ -249,6 +249,7 @@ EXEMPT_FILES = make_set(
         "web/src/user_sort.js",
         "web/src/user_status.js",
         "web/src/user_status_ui.js",
+        "web/src/user_topic_popover.js",
         "web/src/user_topics.ts",
         "web/src/user_topics_ui.js",
         "web/src/views_util.js",

web/src/popover_menus.js

@@ -6,7 +6,6 @@ import $ from "jquery";
 import tippy, {delegate} from "tippy.js";
 
 import render_all_messages_sidebar_actions from "../templates/all_messages_sidebar_actions.hbs";
-import render_change_visibility_policy_popover from "../templates/change_visibility_policy_popover.hbs";
 import render_compose_control_buttons_popover from "../templates/compose_control_buttons_popover.hbs";
 import render_compose_select_enter_behaviour_popover from "../templates/compose_select_enter_behaviour_popover.hbs";
 import render_drafts_sidebar_actions from "../templates/drafts_sidebar_action.hbs";
@@ -21,7 +20,6 @@ import * as drafts from "./drafts";
 import * as giphy from "./giphy";
 import * as narrow_state from "./narrow_state";
 import * as overlays from "./overlays";
-import * as popover_menus_data from "./popover_menus_data";
 import * as popovers from "./popovers";
 import * as rows from "./rows";
 import * as starred_messages from "./starred_messages";
@@ -29,7 +27,6 @@ import * as starred_messages_ui from "./starred_messages_ui";
 import {parse_html} from "./ui_util";
 import * as unread_ops from "./unread_ops";
 import {user_settings} from "./user_settings";
-import * as user_topics from "./user_topics";
 
 // On mobile web, opening the keyboard can trigger a resize event
 // (which in turn can trigger a scroll event).  This will have the
@@ -395,65 +392,6 @@ export function initialize() {
         },
     });
 
-    register_popover_menu(".change_visibility_policy", {
-        placement: "bottom",
-        popperOptions: {
-            modifiers: [
-                {
-                    // The placement is set to bottom, but if that placement does not fit,
-                    // the opposite top placement will be used.
-                    name: "flip",
-                    options: {
-                        fallbackPlacements: ["top", "left"],
-                    },
-                },
-            ],
-        },
-        onShow(instance) {
-            popover_instances.change_visibility_policy = instance;
-            on_show_prep(instance);
-            const elt = $(instance.reference).closest(".change_visibility_policy").expectOne()[0];
-            const stream_id = $(elt).attr("data-stream-id");
-            const topic_name = $(elt).attr("data-topic-name");
-
-            instance.context =
-                popover_menus_data.get_change_visibility_policy_popover_content_context(
-                    Number.parseInt(stream_id, 10),
-                    topic_name,
-                );
-            instance.setContent(
-                parse_html(render_change_visibility_policy_popover(instance.context)),
-            );
-        },
-        onMount(instance) {
-            const $popper = $(instance.popper);
-            const {stream_id, topic_name} = instance.context;
-
-            if (!stream_id) {
-                instance.hide();
-                return;
-            }
-
-            // TODO: Figure out a good way to offer feedback if this request fails.
-            $popper.on("click", ".visibility_policy_option", (e) => {
-                $(".visibility_policy_option").removeClass("selected_visibility_policy");
-                $(e.currentTarget).addClass("selected_visibility_policy");
-
-                const visibility_policy = $(e.currentTarget).attr("data-visibility-policy");
-                user_topics.set_user_topic_visibility_policy(
-                    stream_id,
-                    topic_name,
-                    visibility_policy,
-                );
-                instance.hide();
-            });
-        },
-        onHidden(instance) {
-            instance.destroy();
-            popover_instances.change_visibility_policy = undefined;
-        },
-    });
-
     // Starred messages popover
     register_popover_menu(".starred-messages-sidebar-menu-icon", {
         ...left_sidebar_tippy_options,

web/src/ui_init.js

@@ -132,6 +132,7 @@ import * as user_profile from "./user_profile";
 import {initialize_user_settings, user_settings} from "./user_settings";
 import * as user_status from "./user_status";
 import * as user_status_ui from "./user_status_ui";
+import * as user_topic_popover from "./user_topic_popover";
 import * as user_topics from "./user_topics";
 
 // This is where most of our initialization takes place.
@@ -528,6 +529,7 @@ export function initialize_everything() {
     // This populates data for scheduled messages.
     scheduled_messages.initialize(scheduled_messages_params);
     popover_menus.initialize();
+    user_topic_popover.initialize();
     topic_popover.initialize();
     message_actions_popover.initialize();
     scheduled_messages_popover.initialize();

web/src/user_topic_popover.js

@@ -0,0 +1,69 @@
+import $ from "jquery";
+
+import render_change_visibility_policy_popover from "../templates/change_visibility_policy_popover.hbs";
+
+import * as popover_menus from "./popover_menus";
+import * as popover_menus_data from "./popover_menus_data";
+import {parse_html} from "./ui_util";
+import * as user_topics from "./user_topics";
+
+export function initialize() {
+    popover_menus.register_popover_menu(".change_visibility_policy", {
+        placement: "bottom",
+        popperOptions: {
+            modifiers: [
+                {
+                    // The placement is set to bottom, but if that placement does not fit,
+                    // the opposite top placement will be used.
+                    name: "flip",
+                    options: {
+                        fallbackPlacements: ["top", "left"],
+                    },
+                },
+            ],
+        },
+        onShow(instance) {
+            popover_menus.popover_instances.change_visibility_policy = instance;
+            popover_menus.on_show_prep(instance);
+            const elt = $(instance.reference).closest(".change_visibility_policy").expectOne()[0];
+            const stream_id = $(elt).attr("data-stream-id");
+            const topic_name = $(elt).attr("data-topic-name");
+
+            instance.context =
+                popover_menus_data.get_change_visibility_policy_popover_content_context(
+                    Number.parseInt(stream_id, 10),
+                    topic_name,
+                );
+            instance.setContent(
+                parse_html(render_change_visibility_policy_popover(instance.context)),
+            );
+        },
+        onMount(instance) {
+            const $popper = $(instance.popper);
+            const {stream_id, topic_name} = instance.context;
+
+            if (!stream_id) {
+                instance.hide();
+                return;
+            }
+
+            // TODO: Figure out a good way to offer feedback if this request fails.
+            $popper.on("click", ".visibility_policy_option", (e) => {
+                $(".visibility_policy_option").removeClass("selected_visibility_policy");
+                $(e.currentTarget).addClass("selected_visibility_policy");
+
+                const visibility_policy = $(e.currentTarget).attr("data-visibility-policy");
+                user_topics.set_user_topic_visibility_policy(
+                    stream_id,
+                    topic_name,
+                    visibility_policy,
+                );
+                instance.hide();
+            });
+        },
+        onHidden(instance) {
+            instance.destroy();
+            popover_menus.popover_instances.change_visibility_policy = undefined;
+        },
+    });
+}