1
0
Fork 0
mirror of synced 2024-07-01 12:30:41 +12:00
budibase/packages/builder/src/components/automation/AutomationPanel/BlockList/CreateWebhookModal.svelte

108 lines
2.7 KiB
Svelte
Raw Normal View History

<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>