108 lines
2.7 KiB
Svelte
108 lines
2.7 KiB
Svelte
|
<script>
|
||
|
import { store, backendUiStore, automationStore } from "builderStore"
|
||
|
import WebhookDisplay from "./WebhookDisplay.svelte"
|
||
|
import { ModalContent } from "@budibase/bbui"
|
||
|
import { onMount, onDestroy } from "svelte"
|
||
|
import { cloneDeep } from "lodash/fp"
|
||
|
import analytics from "analytics"
|
||
|
|
||
|
const POLL_RATE_MS = 2500
|
||
|
const DEFAULT_SCHEMA_OUTPUT = "Any input allowed"
|
||
|
let name
|
||
|
let interval
|
||
|
let valid = false
|
||
|
let schemaURL
|
||
|
let schema = DEFAULT_SCHEMA_OUTPUT
|
||
|
|
||
|
$: instanceId = $backendUiStore.selectedDatabase._id
|
||
|
$: appId = $store.appId
|
||
|
$: automation = $automationStore.selectedAutomation?.automation
|
||
|
|
||
|
onMount(async () => {
|
||
|
// save the automation initially
|
||
|
await automationStore.actions.save({
|
||
|
instanceId,
|
||
|
automation,
|
||
|
})
|
||
|
interval = setInterval(async () => {
|
||
|
await automationStore.actions.fetch()
|
||
|
const outputs = automation?.definition?.trigger.schema.outputs?.properties
|
||
|
if (Object.keys(outputs).length !== 0) {
|
||
|
schema = cloneDeep(outputs)
|
||
|
// clear out the "description" properties
|
||
|
for (let key of Object.keys(schema)) {
|
||
|
delete schema[key].description
|
||
|
}
|
||
|
schema = JSON.stringify(schema, null, 2)
|
||
|
//schema = schema.replace(/(?:\r\n|\r|\n)/g, "<br />")
|
||
|
//console.log(schema)
|
||
|
valid = true
|
||
|
}
|
||
|
}, POLL_RATE_MS)
|
||
|
schemaURL = automation?.definition?.trigger?.inputs.schemaUrl
|
||
|
})
|
||
|
|
||
|
onDestroy(() => {
|
||
|
clearInterval(interval)
|
||
|
})
|
||
|
</script>
|
||
|
|
||
|
<ModalContent
|
||
|
title="Webhook Setup"
|
||
|
confirmText="Finished"
|
||
|
cancelText="Skip"
|
||
|
disabled={!valid}>
|
||
|
<p class="webhook-exp">To configure a webhook we need to create a schema for your webhook to validate against.
|
||
|
Use the URL shown below and send a <b>POST</b> request to it with a JSON body in the format that
|
||
|
your webhook should use!</p>
|
||
|
<WebhookDisplay value={schemaURL}/>
|
||
|
<h5>Schema</h5>
|
||
|
<code>
|
||
|
{schema}
|
||
|
</code>
|
||
|
<div slot="footer">
|
||
|
<a
|
||
|
target="_blank"
|
||
|
href="https://docs.budibase.com/automate/steps/triggers">
|
||
|
<i class="ri-information-line" />
|
||
|
<span>Learn about webhooks</span>
|
||
|
</a>
|
||
|
</div>
|
||
|
</ModalContent>
|
||
|
|
||
|
<style>
|
||
|
a {
|
||
|
color: var(--ink);
|
||
|
font-size: 14px;
|
||
|
vertical-align: middle;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
a span {
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
i {
|
||
|
font-size: 20px;
|
||
|
margin-right: var(--spacing-m);
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
p {
|
||
|
margin-top: 0;
|
||
|
padding-top: 0;
|
||
|
text-align: justify;
|
||
|
}
|
||
|
h5 {
|
||
|
margin: 0;
|
||
|
}
|
||
|
code {
|
||
|
padding: 8px;
|
||
|
font-size: 14px;
|
||
|
color: var(--grey-5);
|
||
|
background-color: var(--grey-4);
|
||
|
border-radius: 6px;
|
||
|
display: block;
|
||
|
white-space: pre-wrap;
|
||
|
}
|
||
|
</style>
|