WebhookCurl.vue

<template>
    <div class="webhook-curl">
        <div v-if="webhookTriggers.length > 0">
            <KsFormItem :label="$t('webhook.payload')" class="payload">
                <KsEditor
                    v-bind="editorBindings"
                    :options="{fullHeight: false, showScroll: true}"
                    :inline="true"
                    :navbar="false"
                    lang="json"
                    v-model="webhookPayload"
                />
            </KsFormItem>
            <div v-for="trigger in webhookTriggers" :key="trigger.id" class="trigger">
                <div class="code">
                    <pre><code>{{ generateWebhookCurlCommand(trigger) }}</code></pre>
                    <CopyToClipboard :text="generateWebhookCurlCommand(trigger)" class="copy" />
                </div>
            </div>

            <KsAlert type="info" :closable="false">
                {{ $t('webhook.curl_note') }}
            </KsAlert>
        </div>
        <div v-else>
            <KsAlert type="warning" :closable="false">
                {{ $t('webhook.no_triggers') }}
            </KsAlert>
        </div>
    </div>
</template>

<script setup lang="ts">
    import {computed, onMounted, ref} from "vue"
    import CopyToClipboard from "../layout/CopyToClipboard.vue"
    import {KsEditor} from "@kestra-io/design-system"
    import {useEditorBindings} from "../../composables/useEditorBindings"
    import {webhookUrl, WEBHOOK_TRIGGER_TYPE} from "../../utils/webhook"
    import {useFlowStore} from "../../stores/flow"

    interface Flow {
        namespace: string;
        id: string;
        triggers?: Trigger[];
    }

    interface Trigger {
        id: string;
        type: string;
        key?: string;
        disabled?: boolean;
    }

    const props = defineProps<{
        flow: Flow;
    }>()

    const editorBindings = useEditorBindings()

    const webhookPayload = ref("{\"key1\":\"value1\",\"key2\":\"value2\"}")

    const flowStore = useFlowStore()
    const webhookTriggers = computed(() => {
        const sourceFlow = flowStore.flow || props.flow

        if (!sourceFlow?.triggers) {
            return []
        }

        return sourceFlow.triggers.filter((trigger: Trigger) =>
            trigger.type === WEBHOOK_TRIGGER_TYPE &&
            (trigger.disabled === undefined || trigger.disabled === false),
        )
    })

    const generateWebhookCurlCommand = (trigger: Trigger): string => {
        if (!trigger.key) {
            return "Webhook key not available"
        }

        const url = webhookUrl({namespace: props.flow.namespace, id: props.flow.id, key: trigger.key})
        const command = [`curl -X POST ${url}`]
        command.push("-H \"Content-Type: application/json\"")

        if (webhookPayload.value.trim()) {
            command.push(`-d '${webhookPayload.value}'`)
        }

        return toShell(command)
    }

    const toShell = (command: string[]): string => {
        return command.join(" \\\n  ")
    }

    onMounted(async () => {
        if (props.flow?.namespace && props.flow?.id) {
            try {
                await flowStore.loadFlow({
                    namespace: props.flow.namespace,
                    id: props.flow.id,
                })
            } catch (error) {
                // oxlint-disable-next-line preserve-caught-error
                throw new Error(`Failed to load flow: ${error}`)
            }
        }
    })
</script>

<style scoped lang="scss">
.webhook-curl {
    position: relative;
    border: 1px solid var(--ks-border-default);
    padding: 1rem;
    border-radius: 0.5rem;

    .payload {
        margin-bottom: 1rem;

        :deep(.kel-form-item__label) {
            font-size: var(--ks-font-size-sm);
            color: var(--ks-text-secondary);
        }

        :deep(.editor-container) {
            height: 50px;
            max-height: 120px;
        }
    }

    .code {
        position: relative;
        pre {
            overflow-x: auto;
        }
    }

    .copy {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 10;
    }
}
</style>