bots: Extract code for showing integration url modal in new file.

This commit creates a new file integration_url_modal.js which
now contains the code for showing integration url modal.

Since show_generate_integration_url_modal is used in multiple
places, this change helps us in avoiding import cycles.

tools/test-js-with-node

@@ -103,6 +103,7 @@ EXEMPT_FILES = make_set(
         "web/src/inbox_ui.js",
         "web/src/inbox_util.js",
         "web/src/info_overlay.js",
+        "web/src/integration_url_modal.js",
         "web/src/invite.ts",
         "web/src/lightbox.js",
         "web/src/list_util.ts",

web/src/integration_url_modal.js

@@ -0,0 +1,153 @@
+import ClipboardJS from "clipboard";
+import $ from "jquery";
+
+import render_generate_integration_url_modal from "../templates/settings/generate_integration_url_modal.hbs";
+
+import {show_copied_confirmation} from "./copied_tooltip";
+import * as dialog_widget from "./dialog_widget";
+import * as dropdown_widget from "./dropdown_widget";
+import {$t_html} from "./i18n";
+import {page_params} from "./page_params";
+import * as stream_data from "./stream_data";
+
+export function show_generate_integration_url_modal(api_key) {
+    const default_url_message = $t_html({defaultMessage: "Integration URL will appear here."});
+    const streams = stream_data.subscribed_subs();
+    const direct_messages_option = {
+        name: $t_html({defaultMessage: "Direct message to me"}),
+        unique_id: "",
+        is_direct_message: true,
+    };
+    const html_body = render_generate_integration_url_modal({
+        default_url_message,
+        max_topic_length: page_params.max_topic_length,
+    });
+
+    function generate_integration_url_post_render() {
+        let selected_integration = "";
+        let stream_input_dropdown_widget;
+
+        const $integration_input = $("#integration-input");
+        const $override_topic = $("#integration-url-override-topic");
+        const $topic_input = $("#integration-url-topic-input");
+        const $integration_url = $("#generate-integration-url-modal .integration-url");
+        const $dialog_submit_button = $("#generate-integration-url-modal .dialog_submit_button");
+
+        $dialog_submit_button.prop("disabled", true);
+
+        new ClipboardJS("#generate-integration-url-modal .dialog_submit_button", {
+            text() {
+                return $integration_url.text();
+            },
+        }).on("success", (e) => {
+            show_copied_confirmation(e.trigger);
+        });
+
+        $integration_input
+            .typeahead({
+                items: 5,
+                fixed: true,
+                source: () =>
+                    page_params.realm_incoming_webhook_bots.map((bot) => bot.display_name),
+                updater(item) {
+                    selected_integration = page_params.realm_incoming_webhook_bots.find(
+                        (bot) => bot.display_name === item,
+                    ).name;
+                    return item;
+                },
+            })
+            .on("input", function () {
+                const current_value = $(this).val();
+                if (current_value === "") {
+                    selected_integration = "";
+                }
+            });
+
+        $override_topic.on("change", function () {
+            const checked = $(this).prop("checked");
+            $topic_input.parent().toggleClass("hide", !checked);
+        });
+
+        $("#generate-integration-url-modal .integration-url-parameter").on("change input", () => {
+            update_url();
+        });
+
+        function update_url() {
+            if (selected_integration === "") {
+                $integration_url.text(default_url_message);
+                $dialog_submit_button.prop("disabled", true);
+                return;
+            }
+
+            const stream_name = stream_input_dropdown_widget.value();
+            const topic_name = $topic_input.val();
+
+            const params = new URLSearchParams({api_key});
+            if (stream_name !== "") {
+                params.set("stream", stream_name);
+                if (topic_name !== "") {
+                    params.set("topic", topic_name);
+                }
+            }
+
+            const realm_url = page_params.realm_uri;
+            const base_url = `${realm_url}/api/v1/external/`;
+            $integration_url.text(`${base_url}${selected_integration}?${params}`);
+            $dialog_submit_button.prop("disabled", false);
+        }
+
+        stream_input_dropdown_widget = new dropdown_widget.DropdownWidget({
+            widget_name: "integration-url-stream",
+            get_options: get_options_for_stream_dropdown_widget,
+            item_click_callback,
+            $events_container: $("#generate-integration-url-modal"),
+            tippy_props: {
+                placement: "bottom-start",
+            },
+            default_id: direct_messages_option.unique_id,
+            unique_id_type: dropdown_widget.DATA_TYPES.STRING,
+        });
+        stream_input_dropdown_widget.setup();
+
+        function get_options_for_stream_dropdown_widget() {
+            const options = [
+                direct_messages_option,
+                ...streams.map((stream) => ({
+                    name: stream.name,
+                    unique_id: stream.name,
+                    stream,
+                })),
+            ];
+            return options;
+        }
+
+        function item_click_callback(event, dropdown) {
+            stream_input_dropdown_widget.render();
+            $(".integration-url-stream-wrapper").trigger("input");
+            const user_selected_option = stream_input_dropdown_widget.value();
+            if (user_selected_option === direct_messages_option.unique_id) {
+                $override_topic.prop("checked", false).prop("disabled", true);
+                $override_topic.closest(".input-group").addClass("control-label-disabled");
+                $topic_input.val("");
+            } else {
+                $override_topic.prop("disabled", false);
+                $override_topic.closest(".input-group").removeClass("control-label-disabled");
+            }
+            $override_topic.trigger("change");
+
+            dropdown.hide();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    dialog_widget.launch({
+        html_heading: $t_html({defaultMessage: "Generate URL for an integration"}),
+        html_body,
+        id: "generate-integration-url-modal",
+        html_submit_button: $t_html({defaultMessage: "Copy URL"}),
+        html_exit_button: $t_html({defaultMessage: "Close"}),
+        on_click() {},
+        post_render: generate_integration_url_post_render,
+    });
+}

web/src/settings_bots.js

@@ -4,7 +4,6 @@ import $ from "jquery";
 import render_add_new_bot_form from "../templates/settings/add_new_bot_form.hbs";
 import render_bot_avatar_row from "../templates/settings/bot_avatar_row.hbs";
 import render_bot_settings_tip from "../templates/settings/bot_settings_tip.hbs";
-import render_generate_integration_url_modal from "../templates/settings/generate_integration_url_modal.hbs";
 
 import * as avatar from "./avatar";
 import * as bot_data from "./bot_data";
@@ -12,13 +11,12 @@ import * as channel from "./channel";
 import {show_copied_confirmation} from "./copied_tooltip";
 import {csrf_token} from "./csrf";
 import * as dialog_widget from "./dialog_widget";
-import * as dropdown_widget from "./dropdown_widget";
 import {$t, $t_html} from "./i18n";
+import * as integration_url_modal from "./integration_url_modal";
 import {page_params} from "./page_params";
 import * as people from "./people";
 import * as settings_data from "./settings_data";
 import * as settings_users from "./settings_users";
-import * as stream_data from "./stream_data";
 import * as ui_report from "./ui_report";
 import * as user_deactivation_ui from "./user_deactivation_ui";
 import * as user_profile from "./user_profile";
@@ -320,148 +318,6 @@ export function add_a_new_bot() {
     });
 }
 
-export function show_generate_integration_url_modal(api_key) {
-    const default_url_message = $t_html({defaultMessage: "Integration URL will appear here."});
-    const streams = stream_data.subscribed_subs();
-    const direct_messages_option = {
-        name: $t_html({defaultMessage: "Direct message to me"}),
-        unique_id: "",
-        is_direct_message: true,
-    };
-    const html_body = render_generate_integration_url_modal({
-        default_url_message,
-        max_topic_length: page_params.max_topic_length,
-    });
-
-    function generate_integration_url_post_render() {
-        let selected_integration = "";
-        let stream_input_dropdown_widget;
-
-        const $integration_input = $("#integration-input");
-        const $override_topic = $("#integration-url-override-topic");
-        const $topic_input = $("#integration-url-topic-input");
-        const $integration_url = $("#generate-integration-url-modal .integration-url");
-        const $dialog_submit_button = $("#generate-integration-url-modal .dialog_submit_button");
-
-        $dialog_submit_button.prop("disabled", true);
-
-        new ClipboardJS("#generate-integration-url-modal .dialog_submit_button", {
-            text() {
-                return $integration_url.text();
-            },
-        }).on("success", (e) => {
-            show_copied_confirmation(e.trigger);
-        });
-
-        $integration_input
-            .typeahead({
-                items: 5,
-                fixed: true,
-                source: () =>
-                    page_params.realm_incoming_webhook_bots.map((bot) => bot.display_name),
-                updater(item) {
-                    selected_integration = page_params.realm_incoming_webhook_bots.find(
-                        (bot) => bot.display_name === item,
-                    ).name;
-                    return item;
-                },
-            })
-            .on("input", function () {
-                const current_value = $(this).val();
-                if (current_value === "") {
-                    selected_integration = "";
-                }
-            });
-
-        $override_topic.on("change", function () {
-            const checked = $(this).prop("checked");
-            $topic_input.parent().toggleClass("hide", !checked);
-        });
-
-        $("#generate-integration-url-modal .integration-url-parameter").on("change input", () => {
-            update_url();
-        });
-
-        function update_url() {
-            if (selected_integration === "") {
-                $integration_url.text(default_url_message);
-                $dialog_submit_button.prop("disabled", true);
-                return;
-            }
-
-            const stream_name = stream_input_dropdown_widget.value();
-            const topic_name = $topic_input.val();
-
-            const params = new URLSearchParams({api_key});
-            if (stream_name !== "") {
-                params.set("stream", stream_name);
-                if (topic_name !== "") {
-                    params.set("topic", topic_name);
-                }
-            }
-
-            const realm_url = page_params.realm_uri;
-            const base_url = `${realm_url}/api/v1/external/`;
-            $integration_url.text(`${base_url}${selected_integration}?${params}`);
-            $dialog_submit_button.prop("disabled", false);
-        }
-
-        stream_input_dropdown_widget = new dropdown_widget.DropdownWidget({
-            widget_name: "integration-url-stream",
-            get_options: get_options_for_stream_dropdown_widget,
-            item_click_callback,
-            $events_container: $("#generate-integration-url-modal"),
-            tippy_props: {
-                placement: "bottom-start",
-            },
-            default_id: direct_messages_option.unique_id,
-            unique_id_type: dropdown_widget.DATA_TYPES.STRING,
-        });
-        stream_input_dropdown_widget.setup();
-
-        function get_options_for_stream_dropdown_widget() {
-            const options = [
-                direct_messages_option,
-                ...streams.map((stream) => ({
-                    name: stream.name,
-                    unique_id: stream.name,
-                    stream,
-                })),
-            ];
-            return options;
-        }
-
-        function item_click_callback(event, dropdown) {
-            stream_input_dropdown_widget.render();
-            $(".integration-url-stream-wrapper").trigger("input");
-            const user_selected_option = stream_input_dropdown_widget.value();
-            if (user_selected_option === direct_messages_option.unique_id) {
-                $override_topic.prop("checked", false).prop("disabled", true);
-                $override_topic.closest(".input-group").addClass("control-label-disabled");
-                $topic_input.val("");
-            } else {
-                $override_topic.prop("disabled", false);
-                $override_topic.closest(".input-group").removeClass("control-label-disabled");
-            }
-            $override_topic.trigger("change");
-
-            dropdown.hide();
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-
-    dialog_widget.launch({
-        html_heading: $t_html({defaultMessage: "Generate URL for an integration"}),
-        html_body,
-        id: "generate-integration-url-modal",
-        html_submit_button: $t_html({defaultMessage: "Copy URL"}),
-        html_exit_button: $t_html({defaultMessage: "Close"}),
-        on_click() {},
-        post_render: generate_integration_url_post_render,
-    });
-}
-
 export function set_up() {
     $("#download_botserverrc").on("click", function () {
         const OUTGOING_WEBHOOK_BOT_TYPE_INT = 3;
@@ -569,7 +425,7 @@ export function set_up() {
         e.preventDefault();
         e.stopPropagation();
         const api_key = $(e.currentTarget).attr("data-api-key");
-        show_generate_integration_url_modal(api_key);
+        integration_url_modal.show_generate_integration_url_modal(api_key);
     });
 
     const clipboard = new ClipboardJS("#copy_zuliprc", {

web/src/user_profile.js

@@ -21,6 +21,7 @@ import * as dialog_widget from "./dialog_widget";
 import * as dropdown_widget from "./dropdown_widget";
 import * as hash_util from "./hash_util";
 import {$t, $t_html} from "./i18n";
+import * as integration_url_modal from "./integration_url_modal";
 import * as ListWidget from "./list_widget";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
@@ -607,7 +608,7 @@ export function show_edit_bot_info_modal(user_id, $container) {
             e.preventDefault();
             e.stopPropagation();
             const current_bot_data = bot_data.get(bot.user_id);
-            settings_bots.show_generate_integration_url_modal(current_bot_data.api_key);
+            integration_url_modal.show_generate_integration_url_modal(current_bot_data.api_key);
         });
     }
 }