From fbcf31c9e0114c6ff5ac337edecb0df1244b7e86 Mon Sep 17 00:00:00 2001 From: sujal Date: Tue, 19 Dec 2023 22:53:17 +0530 Subject: [PATCH] bot-url: Add event filtering UI to generate bot URL modal. Adds an option to the generate bot URL modal to filter for events that will trigger notifications. This option is conditionally displayed when only `all_event_types` is defined for the selected integration. If selected, the URL will display all events by default. There are "check all" and "uncheck all" buttons to easily include or remove all the events from the URL. Fixes #27628. --- web/src/integration_url_modal.ts | 81 ++++++++++++++++++- web/styles/modal.css | 20 +++++ .../generate_integration_url_modal.hbs | 17 ++++ web/templates/settings/integration_events.hbs | 13 +++ 4 files changed, 129 insertions(+), 2 deletions(-) create mode 100644 web/templates/settings/integration_events.hbs 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}}