Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Sahil Batra 2023-09-25 22:43:40 +05:30 committed by Tim Abbott
parent f3c17b8d4f
commit 1de3a9f4a3
4 changed files with 158 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tools/test-js-with-node
View File

@ -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",

153
web/src/integration_url_modal.js Normal file
View File

@ -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,
});
}

148
web/src/settings_bots.js
View File

@ -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", {

3
web/src/user_profile.js
View File

@ -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);
});
}
}