From 1de3a9f4a3273b7c114f82351a761b98a8893d37 Mon Sep 17 00:00:00 2001 From: Sahil Batra Date: Mon, 25 Sep 2023 22:43:40 +0530 Subject: [PATCH] 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 | 1 + web/src/integration_url_modal.js | 153 +++++++++++++++++++++++++++++++ web/src/settings_bots.js | 148 +----------------------------- web/src/user_profile.js | 3 +- 4 files changed, 158 insertions(+), 147 deletions(-) create mode 100644 web/src/integration_url_modal.js diff --git a/tools/test-js-with-node b/tools/test-js-with-node index b5494043ba..736bb64589 100755 --- a/tools/test-js-with-node +++ b/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", diff --git a/web/src/integration_url_modal.js b/web/src/integration_url_modal.js new file mode 100644 index 0000000000..8c2bd39764 --- /dev/null +++ b/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, + }); +} diff --git a/web/src/settings_bots.js b/web/src/settings_bots.js index 5086e90928..f930344c3e 100644 --- a/web/src/settings_bots.js +++ b/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", { diff --git a/web/src/user_profile.js b/web/src/user_profile.js index 3af05150c1..ae65fd8e5c 100644 --- a/web/src/user_profile.js +++ b/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); }); } }