diff --git a/static/images/integrations/integrations_dev_panel.png b/static/images/integrations/integrations_dev_panel.png index 462757ae5e..99d2878dc4 100644 Binary files a/static/images/integrations/integrations_dev_panel.png and b/static/images/integrations/integrations_dev_panel.png differ diff --git a/static/js/integrations_dev_panel.js b/static/js/integrations_dev_panel.js index 10014753b9..f8220fa0d9 100644 --- a/static/js/integrations_dev_panel.js +++ b/static/js/integrations_dev_panel.js @@ -17,6 +17,7 @@ var clear_handlers = { integration_name: function () { $('#integration_name').children()[0].selected = true; }, fixture_name: function () { $('#fixture_name').empty(); }, fixture_body: function () { $("#fixture_body")[0].value = ""; }, + custom_http_headers: function () { $("#custom_http_headers")[0].value = ""; }, }; function clear_elements(elements) { @@ -141,7 +142,7 @@ function get_fixtures(integration_name) { /* Request fixtures from the backend for any integrations that we don't already have fixtures for (which would be stored in the JS variable called "loaded_fixtures"). */ if (integration_name === "") { - clear_elements(["fixture_body", "fixture_name", "URL", "message"]); + clear_elements(["custom_http_headers", "fixture_body", "fixture_name", "URL", "message"]); return; } @@ -190,9 +191,21 @@ function send_webhook_fixture_message() { return; } + var custom_headers = $("#custom_http_headers").val(); + if (custom_headers !== "") { + // JSON.parse("") would trigger an error, as empty strings do not qualify as JSON. + try { + // Let JavaScript validate the JSON for us. + custom_headers = JSON.stringify(JSON.parse(custom_headers)); + } catch (err) { + set_message("Custom HTTP headers are not in a valid JSON format.", "warning"); + return; + } + } + channel.post({ url: "/devtools/integrations/check_send_webhook_fixture_message", - data: {url: url, body: body}, + data: {url: url, body: body, custom_headers: custom_headers}, beforeSend: function (xhr) {xhr.setRequestHeader('X-CSRFToken', csrftoken);}, success: function () { // If the previous fixture body was sent successfully, then we should change the success @@ -214,7 +227,7 @@ function send_webhook_fixture_message() { // Initialization $(function () { clear_elements(["stream_name", "topic_name", "URL", "bot_name", "integration_name", - "fixture_name", "fixture_body", "message"]); + "fixture_name", "custom_http_headers", "fixture_body", "message"]); var potential_default_bot = $("#bot_name")[0][1]; if (potential_default_bot !== undefined) { @@ -222,7 +235,7 @@ $(function () { } $('#integration_name').change(function () { - clear_elements(["fixture_body", "fixture_name", "message"]); + clear_elements(["custom_http_headers", "fixture_body", "fixture_name", "message"]); var integration_name = $(this).children("option:selected").val(); get_fixtures(integration_name); update_url(); diff --git a/static/styles/integrations_dev_panel.css b/static/styles/integrations_dev_panel.css index e38f68a074..bb36c4cd96 100644 --- a/static/styles/integrations_dev_panel.css +++ b/static/styles/integrations_dev_panel.css @@ -7,6 +7,11 @@ padding: 10px; } +#custom_http_headers { + height: 200px; + width: 700px; +} + #fixture_body { height: 500px; width: 700px; diff --git a/templates/zerver/api/incoming-webhooks-walkthrough.md b/templates/zerver/api/incoming-webhooks-walkthrough.md index f6ff4b1d31..b62b8bc604 100644 --- a/templates/zerver/api/incoming-webhooks-walkthrough.md +++ b/templates/zerver/api/incoming-webhooks-walkthrough.md @@ -237,17 +237,19 @@ This is the GUI tool. 1. Run `./tools/run-dev.py` then go to http://localhost:9991/devtools/integrations/. -2. Set the following mandatory fields: -- **Bot** - Any incoming webhook bot. -- **Integration** - One of the integrations. -- **Fixture** - Though not mandatory, it's recommended that you select one and then tweak it if necessary. +2. Set the following mandatory fields: +**Bot** - Any incoming webhook bot. +**Integration** - One of the integrations. +**Fixture** - Though not mandatory, it's recommended that you select one and then tweak it if necessary. The remaining fields are optional, and the URL will automatically be generated. 3. Click **Send**! -By opening Zulip in one tab and this tool in another, you can quickly tweak +By opening Zulip in one tab and then this tool in another, you can quickly tweak your code and send sample messages for many different test fixtures. +Note: Custom HTTP Headers must be entered as a JSON dictionary, if you want to use any in the first place that is. +Feel free to use 4-spaces as tabs for indentation if you'd like! Your sample notification may look like: diff --git a/templates/zerver/integrations/development/dev_panel.html b/templates/zerver/integrations/development/dev_panel.html index 18084fca7c..0f9e5236c4 100644 --- a/templates/zerver/integrations/development/dev_panel.html +++ b/templates/zerver/integrations/development/dev_panel.html @@ -65,6 +65,15 @@ +