|
18 | 18 | <option value="manual">{{ $gettext('Manual') }}</option> |
19 | 19 | <option value="schedule">{{ $gettext('Schedule') }}</option> |
20 | 20 | <option value="event">{{ $gettext('File event') }}</option> |
| 21 | + <option value="webhook">{{ $gettext('Webhook') }}</option> |
21 | 22 | </select> |
22 | 23 |
|
23 | 24 | <template v-if="triggerType === 'schedule'"> |
|
44 | 45 | placeholder="/Invoices" |
45 | 46 | /> |
46 | 47 | </template> |
| 48 | + |
| 49 | + <template v-if="triggerType === 'webhook'"> |
| 50 | + <!-- Same "you need a saved workflow id first" problem the manual run/executions |
| 51 | + actions already have (see WorkflowBuilder's isNew()/currentId()) — the |
| 52 | + webhook URL is per-workflow-id, so it can't exist before the first save. --> |
| 53 | + <p v-if="!isWorkflowSaved" class="workflows-ndv-webhook-hint"> |
| 54 | + {{ $gettext('Save the workflow to generate its webhook URL.') }} |
| 55 | + </p> |
| 56 | + <template v-else> |
| 57 | + <label class="workflows-ndv-label" for="ndv-webhook-url">{{ $gettext('Webhook URL') }}</label> |
| 58 | + <div class="workflows-ndv-webhook-row"> |
| 59 | + <code id="ndv-webhook-url" class="workflows-ndv-webhook-value" data-test="webhook-url"> |
| 60 | + {{ webhookRevealed && webhookInfo ? webhookInfo.url : webhookMaskedValue }} |
| 61 | + </code> |
| 62 | + <oc-button |
| 63 | + appearance="raw" |
| 64 | + :disabled="webhookLoading" |
| 65 | + data-test="webhook-reveal" |
| 66 | + @click="toggleWebhookRevealed" |
| 67 | + > |
| 68 | + {{ webhookRevealed ? $gettext('Hide') : $gettext('Reveal') }} |
| 69 | + </oc-button> |
| 70 | + <oc-button appearance="raw" :disabled="webhookLoading" data-test="webhook-copy" @click="copyWebhookUrl"> |
| 71 | + {{ webhookCopied ? $gettext('Copied!') : $gettext('Copy') }} |
| 72 | + </oc-button> |
| 73 | + </div> |
| 74 | + <p class="workflows-ndv-description"> |
| 75 | + {{ |
| 76 | + $gettext( |
| 77 | + 'POST a request here (a JSON object body is optional) to run this workflow. The body is exposed to the graph as vars["webhook.body"], plus vars["webhook.body.<key>"] for each top-level JSON key.' |
| 78 | + ) |
| 79 | + }} |
| 80 | + </p> |
| 81 | + <oc-button |
| 82 | + appearance="outline" |
| 83 | + :disabled="webhookLoading" |
| 84 | + data-test="webhook-rotate" |
| 85 | + @click="rotateWebhookTokenNow" |
| 86 | + > |
| 87 | + {{ $gettext('Rotate token') }} |
| 88 | + </oc-button> |
| 89 | + <p v-if="webhookError" class="oc-text-input-danger">{{ webhookError }}</p> |
| 90 | + </template> |
| 91 | + </template> |
47 | 92 | </template> |
48 | 93 |
|
49 | 94 | <template v-else-if="node.type === 'llm'"> |
|
139 | 184 | </template> |
140 | 185 |
|
141 | 186 | <script lang="ts" setup> |
142 | | -import { computed } from 'vue' |
| 187 | +import { computed, ref, watch } from 'vue' |
143 | 188 | import { useGettext } from 'vue3-gettext' |
144 | 189 | import { findNodeTypeForNode } from '../nodeTypes' |
145 | | -import type { EventTriggerType, WorkflowNode, WorkflowNodeData } from '../types/workflow' |
| 190 | +import { useWorkflowsApi } from '../composables/useWorkflowsApi' |
| 191 | +import type { EventTriggerType, WebhookTokenInfo, WorkflowNode, WorkflowNodeData } from '../types/workflow' |
146 | 192 |
|
147 | | -const props = defineProps<{ node: WorkflowNode }>() |
| 193 | +const props = defineProps<{ node: WorkflowNode; workflowId?: string; backendUrl?: string }>() |
148 | 194 | const emit = defineEmits<{ (e: 'update', data: WorkflowNodeData): void; (e: 'close'): void }>() |
149 | 195 | const { $gettext } = useGettext() |
| 196 | +const api = useWorkflowsApi(props.backendUrl ?? '') |
150 | 197 |
|
151 | 198 | const nodeType = computed(() => findNodeTypeForNode(props.node.type, props.node.data.actionType)) |
152 | 199 |
|
@@ -192,6 +239,83 @@ const paramDestination = actionParam('destination') |
192 | 239 | const paramNewName = actionParam('newName') |
193 | 240 | const paramTarget = actionParam('target') |
194 | 241 | const paramMessage = actionParam('message') |
| 242 | +
|
| 243 | +// Webhook trigger: URL/token reveal + rotate. Same "need a saved workflow id first" |
| 244 | +// constraint as the manual run/executions actions already have — a webhook URL is |
| 245 | +// per-workflow-id, so there's nothing to show until the workflow has been saved at least |
| 246 | +// once (see WorkflowBuilder's isNew()/currentId()). |
| 247 | +const isWorkflowSaved = computed(() => !!props.workflowId && props.workflowId !== 'new') |
| 248 | +const webhookMaskedValue = '••••••••••••••••••••••••••••••••' |
| 249 | +
|
| 250 | +const webhookInfo = ref<WebhookTokenInfo | null>(null) |
| 251 | +const webhookRevealed = ref(false) |
| 252 | +const webhookLoading = ref(false) |
| 253 | +const webhookError = ref('') |
| 254 | +const webhookCopied = ref(false) |
| 255 | +
|
| 256 | +const loadWebhookToken = async () => { |
| 257 | + if (!isWorkflowSaved.value) { |
| 258 | + return |
| 259 | + } |
| 260 | + webhookLoading.value = true |
| 261 | + webhookError.value = '' |
| 262 | + try { |
| 263 | + webhookInfo.value = await api.getWebhookToken(props.workflowId!) |
| 264 | + } catch (e) { |
| 265 | + webhookError.value = e instanceof Error ? e.message : String(e) |
| 266 | + } finally { |
| 267 | + webhookLoading.value = false |
| 268 | + } |
| 269 | +} |
| 270 | +
|
| 271 | +const toggleWebhookRevealed = async () => { |
| 272 | + if (!webhookInfo.value) { |
| 273 | + await loadWebhookToken() |
| 274 | + } |
| 275 | + webhookRevealed.value = !webhookRevealed.value |
| 276 | +} |
| 277 | +
|
| 278 | +const copyWebhookUrl = async () => { |
| 279 | + if (!webhookInfo.value) { |
| 280 | + await loadWebhookToken() |
| 281 | + } |
| 282 | + if (!webhookInfo.value) { |
| 283 | + return |
| 284 | + } |
| 285 | + await navigator.clipboard.writeText(webhookInfo.value.url) |
| 286 | + webhookCopied.value = true |
| 287 | + setTimeout(() => { |
| 288 | + webhookCopied.value = false |
| 289 | + }, 2000) |
| 290 | +} |
| 291 | +
|
| 292 | +const rotateWebhookTokenNow = async () => { |
| 293 | + webhookLoading.value = true |
| 294 | + webhookError.value = '' |
| 295 | + try { |
| 296 | + webhookInfo.value = await api.rotateWebhookToken(props.workflowId!) |
| 297 | + webhookRevealed.value = true |
| 298 | + } catch (e) { |
| 299 | + webhookError.value = e instanceof Error ? e.message : String(e) |
| 300 | + } finally { |
| 301 | + webhookLoading.value = false |
| 302 | + } |
| 303 | +} |
| 304 | +
|
| 305 | +// Fetch eagerly (but keep it masked until "Reveal" is clicked) whenever the panel opens on |
| 306 | +// a saved workflow's webhook trigger — mirrors ExecutionsPanel's onMounted(load). |
| 307 | +watch( |
| 308 | + () => [props.node.id, triggerType.value, isWorkflowSaved.value] as const, |
| 309 | + ([, type, saved]) => { |
| 310 | + webhookInfo.value = null |
| 311 | + webhookRevealed.value = false |
| 312 | + webhookError.value = '' |
| 313 | + if (type === 'webhook' && saved) { |
| 314 | + loadWebhookToken() |
| 315 | + } |
| 316 | + }, |
| 317 | + { immediate: true } |
| 318 | +) |
195 | 319 | </script> |
196 | 320 |
|
197 | 321 | <style scoped> |
@@ -251,4 +375,21 @@ const paramMessage = actionParam('message') |
251 | 375 | padding-top: 1rem; |
252 | 376 | border-top: 1px solid var(--oc-color-border, rgba(0, 0, 0, 0.1)); |
253 | 377 | } |
| 378 | +.workflows-ndv-webhook-hint { |
| 379 | + opacity: 0.7; |
| 380 | +} |
| 381 | +.workflows-ndv-webhook-row { |
| 382 | + display: flex; |
| 383 | + align-items: center; |
| 384 | + gap: 0.5rem; |
| 385 | +} |
| 386 | +.workflows-ndv-webhook-value { |
| 387 | + flex: 1; |
| 388 | + overflow-x: auto; |
| 389 | + white-space: nowrap; |
| 390 | + padding: 0.4rem 0.6rem; |
| 391 | + background: var(--oc-color-background-muted, #f5f5f5); |
| 392 | + border-radius: 4px; |
| 393 | + font-size: 0.85rem; |
| 394 | +} |
254 | 395 | </style> |
0 commit comments