diff --git a/web/src/integration_url_modal.ts b/web/src/integration_url_modal.ts index 5223d427a2..2eafb3bdb4 100644 --- a/web/src/integration_url_modal.ts +++ b/web/src/integration_url_modal.ts @@ -3,6 +3,7 @@ import $ from "jquery"; import type {Instance} from "tippy.js"; import render_generate_integration_url_modal from "../templates/settings/generate_integration_url_modal.hbs"; +import render_integration_events from "../templates/settings/integration_events.hbs"; import {show_copied_confirmation} from "./copied_tooltip"; import * as dialog_widget from "./dialog_widget"; @@ -39,6 +40,7 @@ export function show_generate_integration_url_modal(api_key: string): void { const $topic_input = $("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"); + const $show_integration_events = $("#show-integration-events"); $dialog_submit_button.prop("disabled", true); $("#integration-url-stream_widget").prop("disabled", true); @@ -57,11 +59,33 @@ export function show_generate_integration_url_modal(api_key: string): void { $topic_input.parent().toggleClass("hide", !checked); }); + $show_integration_events.on("change", () => { + $("#integrations-event-container").toggleClass( + "hide", + !$show_integration_events.prop("checked"), + ); + update_url(true); + }); + + $(document).on("change", "#integrations-event-container .integration-event", () => { + update_url(); + }); + + $("#add-all-integration-events").on("click", () => { + $("#integrations-event-container .integration-event").prop("checked", true); + update_url(); + }); + + $("#remove-all-integration-events").on("click", () => { + $("#integrations-event-container .integration-event").prop("checked", false); + update_url(); + }); + $("#generate-integration-url-modal .integration-url-parameter").on("change input", () => { update_url(); }); - function update_url(): void { + function update_url(render_events = false): void { selected_integration = integration_input_dropdown_widget.value()!.toString(); if (selected_integration === default_integration_option.unique_id) { $("#integration-url-stream_widget").prop("disabled", true); @@ -73,6 +97,35 @@ export function show_generate_integration_url_modal(api_key: string): void { const stream_id = stream_input_dropdown_widget.value(); const topic_name = $topic_input.val()!; + const selected_integration_data = realm.realm_incoming_webhook_bots.find( + (bot) => bot.name === selected_integration, + ); + const all_event_types = selected_integration_data?.all_event_types; + + if (all_event_types !== null) { + $("#integration-events-parameter").removeClass("hide"); + } else { + $("#integration-events-parameter").addClass("hide"); + $("#integrations-event-container").addClass("hide"); + $("#integrations-event-options").empty(); + $show_integration_events.prop("checked", false); + } + + if ($show_integration_events.prop("checked") && render_events) { + const events_with_ids = all_event_types?.map((event) => { + const event_id = event.replaceAll(/\s+/g, "-"); + return { + event, + event_id, + }; + }); + events_with_ids?.sort((a, b) => a.event.localeCompare(b.event)); + const events = render_integration_events({ + events: events_with_ids, + }); + $("#integrations-event-options").empty().append(events); + } + const params = new URLSearchParams({api_key}); if (stream_id !== -1) { params.set("stream", stream_id!.toString()); @@ -80,13 +133,17 @@ export function show_generate_integration_url_modal(api_key: string): void { params.set("topic", topic_name); } } + const selected_events = set_events_param(params); const realm_url = realm.realm_uri; const base_url = `${realm_url}/api/v1/external/`; $integration_url.text(`${base_url}${selected_integration}?${params.toString()}`); $dialog_submit_button.prop("disabled", false); - if ($override_topic.prop("checked") && topic_name === "") { + if ( + ($override_topic.prop("checked") && topic_name === "") || + ($show_integration_events.prop("checked") && !selected_events) + ) { $dialog_submit_button.prop("disabled", true); } } @@ -174,6 +231,26 @@ export function show_generate_integration_url_modal(api_key: string): void { event.preventDefault(); event.stopPropagation(); } + + function set_events_param(params: URLSearchParams): boolean { + if (!$show_integration_events.prop("checked")) { + return false; + } + const $selected_integration_events = $( + "#integrations-event-container .integration-event:checked", + ); + + const selected_events = $selected_integration_events + .map(function () { + return $(this).val(); + }) + .get(); + if (selected_events.length > 0) { + params.set("only_events", JSON.stringify(selected_events)); + return true; + } + return false; + } } dialog_widget.launch({ diff --git a/web/styles/modal.css b/web/styles/modal.css index 689ff2a00f..bd752c5ed5 100644 --- a/web/styles/modal.css +++ b/web/styles/modal.css @@ -482,3 +482,23 @@ border: 1px solid var(--color-hotkey-hint); } } + +#generate-integration-url-modal { + #integrations-event-container { + .integration-all-events-buttons { + display: flex; + gap: 10px; + margin: 5px 0 10px; + } + + #integrations-event-options { + .integration-event-wrapper { + margin: 5px 0; + } + + .integration-event-name { + word-break: break-all; + } + } + } +} diff --git a/web/templates/settings/generate_integration_url_modal.hbs b/web/templates/settings/generate_integration_url_modal.hbs index 3797bb173f..e3c223aae2 100644 --- a/web/templates/settings/generate_integration_url_modal.hbs +++ b/web/templates/settings/generate_integration_url_modal.hbs @@ -26,6 +26,23 @@ +
+ + +
+
+ +
+ + +
+
+

{{t "URL for your integration"}}

diff --git a/web/templates/settings/integration_events.hbs b/web/templates/settings/integration_events.hbs new file mode 100644 index 0000000000..5d7cae137b --- /dev/null +++ b/web/templates/settings/integration_events.hbs @@ -0,0 +1,13 @@ +{{#each events }} +
+ + +
+{{/each}}