windmill-components 1.444.2 → 1.447.4

package/package/components/triggers/NatsTriggersPanel.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+        newItem?: boolean | undefined;
+        isEditor?: boolean | undefined;
+        canHavePreprocessor?: boolean | undefined;
+        hasPreprocessor?: boolean | undefined;
+        loadTriggers?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        applyArgs: any;
+        addPreprocessor: any;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NatsTriggersPanelProps = typeof __propDef.props;
+export type NatsTriggersPanelEvents = typeof __propDef.events;
+export type NatsTriggersPanelSlots = typeof __propDef.slots;
+export default class NatsTriggersPanel extends SvelteComponent<NatsTriggersPanelProps, NatsTriggersPanelEvents, NatsTriggersPanelSlots> {
+    get loadTriggers(): () => Promise<void>;
+}
+export {};

package/package/components/triggers/RouteEditorConfigSection.svelte

@@ -14,6 +14,9 @@ import { base } from '../../base';
 import CaptureSection from './CaptureSection.svelte';
 import CaptureTable from './CaptureTable.svelte';
 import ClipboardPanel from '../details/ClipboardPanel.svelte';
+export let isFlow;
+export let path;
+export let args = { route_path: '', http_method: 'get' };
 export let dirtyRoutePath = false;
 export let route_path = '';
 export let http_method = 'post';
@@ -53,12 +56,18 @@ async function routeExists(route_path, method) {
         }
     });
 }
+$: captureURL = `${location.origin}${base}/api/w/${$workspaceStore}/capture_u/http/${isFlow ? 'flow' : 'script'}/${path.replaceAll('/', '.')}/${route_path}`;
 function getHttpRoute(route_path) {
     return `${location.origin}${base}/api/r/${isCloudHosted() ? $workspaceStore + '/' : ''}${route_path}`;
 }
 $: validateRoute(route_path, http_method);
 $: isValid = routeError === '';
 $: fullRoute = getHttpRoute(route_path);
+$: showCapture && (http_method = 'post');
+function updateArgs(route_path, http_method) {
+    args && ((args.route_path = route_path), (args.http_method = http_method));
+}
+$: updateArgs(route_path, http_method);
 </script>
 
 <div>
@@ -71,17 +80,18 @@ $: fullRoute = getHttpRoute(route_path);
 			on:applyArgs
 			on:updateSchema
 			on:addPreprocessor
+			on:testWithArgs
 			bind:captureTable
 		>
 			<Label label="URL">
-				<ClipboardPanel content={fullRoute} disabled={!captureInfo.active} />
+				<ClipboardPanel content={captureURL} disabled={!captureInfo.active} />
 			</Label>
 
 			<Label label="Example cUrl">
 				<CopyableCodeBlock
 					disabled={!captureInfo.active}
 					code={`curl \\
--X POST ${fullRoute} \\
+-X POST ${captureURL} \\
 -H 'Content-Type: application/json' \\
 -d '{"foo": 42}'`}
 					language={bash}

package/package/components/triggers/RouteEditorConfigSection.svelte.d.ts

@@ -3,6 +3,9 @@ import type { CaptureInfo } from './CaptureSection.svelte';
 import CaptureTable from './CaptureTable.svelte';
 declare const __propDef: {
     props: {
+        isFlow: boolean;
+        path: string;
+        args?: Record<string, any> | undefined;
         dirtyRoutePath?: boolean | undefined;
         route_path?: string | undefined;
         http_method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
@@ -26,10 +29,11 @@ declare const __propDef: {
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{
-            schema: any;
+            payloadData: Record<string, any>;
             redirect: boolean;
         }>;
         addPreprocessor: CustomEvent<null>;
+        testWithArgs: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/triggers/RouteEditorInner.svelte

@@ -149,6 +149,8 @@ async function triggerScript() {
 }
 let drawer;
 let dirtyPath = false;
+let args = { route_path: '' };
+$: args && (route_path = args.route_path);
 </script>
 
 {#if static_asset_config}
@@ -203,7 +205,10 @@ let dirtyPath = false;
 				</div>
 
 				<RouteEditorConfigSection
+					isFlow={is_flow}
+					{path}
 					bind:route_path
+					bind:args
 					bind:isValid
 					bind:dirtyRoutePath
 					bind:http_method

package/package/components/triggers/RoutesPanel.svelte

@@ -13,6 +13,7 @@ export let path;
 export let newItem = false;
 export let isEditor = false;
 export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
 let routeEditor;
 $: path && loadTriggers();
 const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
@@ -60,12 +61,15 @@ export async function loadTriggers() {
 		}}
 		on:applyArgs
 		on:addPreprocessor
+		on:updateSchema
+		on:testWithArgs
 		cloudDisabled={false}
 		triggerType="http"
 		{isFlow}
 		{path}
 		{isEditor}
 		{canHavePreprocessor}
+		{hasPreprocessor}
 		{newItem}
 	/>
 	{#if !newItem}

package/package/components/triggers/RoutesPanel.svelte.d.ts

@@ -6,11 +6,14 @@ declare const __propDef: {
         newItem?: boolean | undefined;
         isEditor?: boolean | undefined;
         canHavePreprocessor?: boolean | undefined;
+        hasPreprocessor?: boolean | undefined;
         loadTriggers?: (() => Promise<void>) | undefined;
     };
     events: {
         applyArgs: any;
         addPreprocessor: any;
+        updateSchema: any;
+        testWithArgs: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/triggers/TriggersEditor.svelte

@@ -11,6 +11,10 @@ import { getContext, onDestroy, createEventDispatcher } from 'svelte';
 import WebsocketTriggersPanel from './WebsocketTriggersPanel.svelte';
 import ScheduledPollPanel from './ScheduledPollPanel.svelte';
 import KafkaTriggersPanel from './KafkaTriggersPanel.svelte';
+import NatsTriggersPanel from './NatsTriggersPanel.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import { KafkaIcon, NatsIcon } from '../icons';
 export let noEditor;
 export let newItem = false;
 export let currentPath;
@@ -20,6 +24,12 @@ export let schema;
 export let isFlow;
 export let canHavePreprocessor = false;
 export let hasPreprocessor = false;
+let eventStreamType = 'kafka';
+$: {
+    if ($selectedTrigger === 'kafka' || $selectedTrigger === 'nats') {
+        eventStreamType = $selectedTrigger;
+    }
+}
 const { selectedTrigger, simplifiedPoll } = getContext('TriggerContext');
 const dispatch = createEventDispatcher();
 onDestroy(() => {
@@ -29,106 +39,145 @@ onDestroy(() => {
 
 <FlowCard {noEditor} title="Triggers">
 	{#if !$simplifiedPoll}
-		<Tabs bind:selected={$selectedTrigger}>
-			<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
-			<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
-			<Tab value="routes" selectedClass="text-primary text-sm font-semibold">HTTP</Tab>
-			<Tab value="websockets" selectedClass="text-primary text-sm font-semibold">Websockets</Tab>
-			<Tab value="kafka" selectedClass="text-primary text-sm font-semibold">Kafka</Tab>
-			<Tab value="emails" selectedClass="text-primary text-sm font-semibold">Email</Tab>
-			{#if isFlow}
-				<Tab value="scheduledPoll" selectedClass="text-primary text-sm font-semibold"
-					>Scheduled Poll</Tab
+		<div class="h-full flex flex-col">
+			<Tabs bind:selected={$selectedTrigger} wrapperClass="overflow-hidden shrink-0">
+				<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
+				<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
+				<Tab value="routes" selectedClass="text-primary text-sm font-semibold">HTTP</Tab>
+				<Tab value="websockets" selectedClass="text-primary text-sm font-semibold">Websockets</Tab>
+				<Tab
+					value="kafka"
+					otherValues={['nats']}
+					selectedClass="text-primary text-sm font-semibold"
 				>
-			{/if}
+					Event streams
+				</Tab>
+				<Tab value="emails" selectedClass="text-primary text-sm font-semibold">Email</Tab>
+				{#if isFlow}
+					<Tab value="scheduledPoll" selectedClass="text-primary text-sm font-semibold"
+						>Scheduled Poll</Tab
+					>
+				{/if}
 
-			<svelte:fragment slot="content">
-				{#if $selectedTrigger === 'webhooks'}
-					<div class="p-4">
-						<WebhooksPanel
-							on:applyArgs
-							on:addPreprocessor
-							scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-							path={currentPath}
-							{hash}
-							{isFlow}
-							args={{}}
-							token=""
-							{newItem}
-							isEditor={true}
-							{canHavePreprocessor}
-							{hasPreprocessor}
-						/>
-					</div>
-				{:else if $selectedTrigger === 'emails'}
-					<div class="p-4">
-						<EmailTriggerPanel
-							on:applyArgs
-							on:addPreprocessor
-							token=""
-							scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-							path={currentPath}
-							{isFlow}
-							isEditor={true}
-							{canHavePreprocessor}
-							{hasPreprocessor}
-							{newItem}
-						/>
-					</div>
-				{:else if $selectedTrigger === 'routes'}
-					<div class="p-4">
-						<RoutesPanel
-							on:applyArgs
-							on:addPreprocessor
-							{newItem}
-							path={currentPath}
-							{isFlow}
-							isEditor={true}
-						/>
-					</div>
-				{:else if $selectedTrigger === 'websockets'}
-					<div class="p-4">
-						<WebsocketTriggersPanel
-							on:applyArgs
-							on:addPreprocessor
-							{newItem}
-							path={currentPath}
-							{isFlow}
-							isEditor={true}
-							{canHavePreprocessor}
-							{hasPreprocessor}
-						/>
-					</div>
-				{:else if $selectedTrigger === 'kafka'}
-					<div class="p-4">
-						<KafkaTriggersPanel
-							on:applyArgs
-							on:addPreprocessor
-							{newItem}
-							path={currentPath}
-							{isFlow}
-							isEditor={true}
-							{canHavePreprocessor}
-							{hasPreprocessor}
-						/>
+				<svelte:fragment slot="content">
+					<div class="min-h-0 grow overflow-y-auto">
+						{#if $selectedTrigger === 'webhooks'}
+							<div class="p-4">
+								<WebhooksPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+									path={currentPath}
+									{hash}
+									{isFlow}
+									args={{}}
+									token=""
+									{newItem}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'emails'}
+							<div class="p-4">
+								<EmailTriggerPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									token=""
+									scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+									path={currentPath}
+									{isFlow}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+									{newItem}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'routes'}
+							<div class="p-4">
+								<RoutesPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									{newItem}
+									path={currentPath}
+									{isFlow}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'websockets'}
+							<div class="p-4">
+								<WebsocketTriggersPanel
+									on:applyArgs
+									on:addPreprocessor
+									on:updateSchema
+									on:testWithArgs
+									{newItem}
+									path={currentPath}
+									{isFlow}
+									isEditor={true}
+									{canHavePreprocessor}
+									{hasPreprocessor}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'kafka' || $selectedTrigger === 'nats'}
+							<div class="p-4 flex flex-col gap-2">
+								<ToggleButtonGroup bind:selected={eventStreamType}>
+									<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} />
+									<ToggleButton value="nats" label="NATS" icon={NatsIcon} />
+								</ToggleButtonGroup>
+								{#if eventStreamType === 'kafka'}
+									<KafkaTriggersPanel
+										on:applyArgs
+										on:addPreprocessor
+										on:updateSchema
+										on:testWithArgs
+										{newItem}
+										path={currentPath}
+										{isFlow}
+										isEditor={true}
+										{canHavePreprocessor}
+										{hasPreprocessor}
+									/>
+								{:else if eventStreamType === 'nats'}
+									<NatsTriggersPanel
+										on:applyArgs
+										on:addPreprocessor
+										{newItem}
+										path={currentPath}
+										{isFlow}
+										isEditor={true}
+										{canHavePreprocessor}
+										{hasPreprocessor}
+									/>
+								{/if}
+							</div>
+						{:else if $selectedTrigger === 'schedules'}
+							<div class="p-4">
+								<RunPageSchedules
+									{schema}
+									{isFlow}
+									path={initialPath}
+									{newItem}
+									can_write={canWrite(currentPath, {}, $userStore)}
+								/>
+							</div>
+						{:else if $selectedTrigger === 'scheduledPoll'}
+							<div class="p-4">
+								<ScheduledPollPanel />
+							</div>
+						{/if}
 					</div>
-				{:else if $selectedTrigger === 'schedules'}
-					<div class="p-4">
-						<RunPageSchedules
-							{schema}
-							{isFlow}
-							path={initialPath}
-							{newItem}
-							can_write={canWrite(currentPath, {}, $userStore)}
-						/>
-					</div>
-				{:else if $selectedTrigger === 'scheduledPoll'}
-					<div class="p-4">
-						<ScheduledPollPanel />
-					</div>
-				{/if}
-			</svelte:fragment>
-		</Tabs>
+				</svelte:fragment>
+			</Tabs>
+		</div>
 	{:else}
 		<div class="px-4 pb-2">
 			<RunPageSchedules

package/package/components/triggers/TriggersEditor.svelte.d.ts

@@ -14,6 +14,8 @@ declare const __propDef: {
     events: {
         applyArgs: any;
         addPreprocessor: any;
+        updateSchema: any;
+        testWithArgs: any;
         exitTriggers: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/triggers/TriggersEditorSection.svelte

@@ -23,12 +23,22 @@ const captureTypeLabels = {
     websocket: 'New websocket trigger',
     webhook: 'Webhook',
     kafka: 'New kafka trigger',
-    email: 'Email trigger'
+    email: 'Email trigger',
+    nats: 'NATS trigger'
 };
 const { captureOn } = getContext('TriggerContext');
 let args = {};
 const dispatch = createEventDispatcher();
-const { flowStore, selectedId } = getContext('FlowEditorContext') || {};
+let showCapture = false;
+let init = false;
+$: updateShowCapture(!!$captureOn);
+function updateShowCapture(show) {
+    if (show && !init) {
+        $captureOn = undefined;
+        showCapture = true;
+        init = true;
+    }
+}
 </script>
 
 <Section label={captureTypeLabels[triggerType]}>
@@ -38,16 +48,16 @@ const { flowStore, selectedId } = getContext('FlowEditorContext') || {};
 				<Button
 					size="xs2"
 					on:click={() => {
-						$captureOn = !$captureOn
+						showCapture = !showCapture
 					}}
 					variant="border"
 					color="light"
 					endIcon={{
 						icon: ChevronDown,
-						classes: twMerge('transition', $captureOn ? 'rotate-180' : '')
+						classes: twMerge('transition', showCapture ? 'rotate-180' : '')
 					}}
 				>
-					Capture
+					Test trigger
 				</Button>
 			{/if}
 
@@ -59,6 +69,7 @@ const { flowStore, selectedId } = getContext('FlowEditorContext') || {};
 						{disabled}
 						startIcon={{ icon: Save }}
 						on:click={() => {
+							console.log('saveTrigger', args)
 							dispatch('saveTrigger', {
 								config: args
 							})
@@ -91,17 +102,12 @@ const { flowStore, selectedId } = getContext('FlowEditorContext') || {};
 			{canHavePreprocessor}
 			on:applyArgs
 			on:addPreprocessor
-			on:updateSchema={(e) => {
-				const { schema, redirect } = e.detail
-				$flowStore.schema = schema
-				if (redirect) {
-					$selectedId = 'Input'
-				}
-			}}
+			on:updateSchema
 			on:saveTrigger
+			on:testWithArgs
 			bind:args
 			{data}
-			showCapture={$captureOn}
+			{showCapture}
 		/>
 	{:else}
 		<TriggersWrapper {path} {isFlow} {triggerType} {cloudDisabled} {args} {data} />

package/package/components/triggers/TriggersEditorSection.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import { type CaptureTriggerKind } from '../../gen';
 declare const __propDef: {
     props: {
         cloudDisabled: boolean;
@@ -15,7 +16,9 @@ declare const __propDef: {
     events: {
         applyArgs: any;
         addPreprocessor: any;
+        updateSchema: any;
         saveTrigger: CustomEvent<any>;
+        testWithArgs: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/triggers/TriggersWrapper.svelte

@@ -6,6 +6,7 @@ import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
 import WebhooksConfigSection from './WebhooksConfigSection.svelte';
 import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte';
 import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte';
+import NatsTriggersConfigSection from './NatsTriggersConfigSection.svelte';
 export let triggerType = 'webhook';
 export let cloudDisabled = false;
 export let args;
@@ -41,9 +42,10 @@ export let data = {};
 		<RouteEditorConfigSection
 			showCapture={false}
 			can_write={true}
-			bind:route_path={args.route_path}
-			bind:http_method={args.http_method}
+			bind:args
 			headless
+			{isFlow}
+			{path}
 		/>
 	{:else if triggerType === 'email'}
 		<EmailTriggerConfigSection
@@ -55,6 +57,8 @@ export let data = {};
 			emailDomain={data?.emailDomain}
 		/>
 	{:else if triggerType === 'kafka'}
-		<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} />
+		<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} {path} />
+	{:else if triggerType === 'nats'}
+		<NatsTriggersConfigSection headless={true} bind:args staticInputDisabled={false} {path} />
 	{/if}
 </div>

package/package/components/triggers/TriggersWrapper.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponent } from "svelte";
+import { type CaptureTriggerKind } from '../../gen';
 declare const __propDef: {
     props: {
-        triggerType?: any;
+        triggerType?: CaptureTriggerKind | undefined;
         cloudDisabled?: boolean | undefined;
         args: any;
         isFlow?: boolean | undefined;

package/package/components/triggers/WebhooksConfigSection.svelte

@@ -210,6 +210,7 @@ $: url =
 			on:applyArgs
 			on:updateSchema
 			on:addPreprocessor
+			on:testWithArgs
 		>
 			<Label label="URL">
 				<ClipboardPanel content={captureUrl} disabled={!captureInfo.active} />

package/package/components/triggers/WebhooksConfigSection.svelte.d.ts

@@ -22,10 +22,11 @@ declare const __propDef: {
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{
-            schema: any;
+            payloadData: Record<string, any>;
             redirect: boolean;
         }>;
         addPreprocessor: CustomEvent<null>;
+        testWithArgs: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/triggers/WebhooksPanel.svelte

@@ -38,6 +38,8 @@ let data = {
 		on:applyArgs
 		on:addPreprocessor
 		on:refreshCaptures
+		on:updateSchema
+		on:testWithArgs
 		cloudDisabled={false}
 		triggerType="webhook"
 		{isFlow}

package/package/components/triggers/WebhooksPanel.svelte.d.ts

@@ -16,6 +16,8 @@ declare const __propDef: {
         applyArgs: any;
         addPreprocessor: any;
         refreshCaptures: CustomEvent<any>;
+        updateSchema: any;
+        testWithArgs: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/triggers/WebsocketEditorConfigSection.svelte

@@ -59,7 +59,7 @@ function validateUrl(url) {
             }
         }
         else if (!url || /^(ws:|wss:)\/\/[^\s]+$/.test(url) === false) {
-            urlError = 'Invalid websocket URL';
+            urlError = 'Websocket URL must start with ws:// or wss://';
         }
         else {
             urlError = '';
@@ -81,6 +81,7 @@ $: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid);
 			on:applyArgs
 			on:updateSchema
 			on:addPreprocessor
+			on:testWithArgs
 			bind:captureTable
 		/>
 	{/if}
@@ -162,6 +163,7 @@ $: isValid = urlError === '' && (!url?.startsWith('$') || areRunnableArgsValid);
 						on:input={() => {
 							dirtyUrl = true
 						}}
+						placeholder="ws://example.com"
 						class={urlError === ''
 							? ''
 							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}

package/package/components/triggers/WebsocketEditorConfigSection.svelte.d.ts

@@ -20,10 +20,11 @@ declare const __propDef: {
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{
-            schema: any;
+            payloadData: Record<string, any>;
             redirect: boolean;
         }>;
         addPreprocessor: CustomEvent<null>;
+        testWithArgs: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/triggers/WebsocketTriggersPanel.svelte

@@ -67,6 +67,8 @@ export async function loadTriggers() {
 				wsTriggerEditor?.openNew(isFlow, path, e.detail.config)
 			}}
 			on:addPreprocessor
+			on:updateSchema
+			on:testWithArgs
 			cloudDisabled={false}
 			triggerType="websocket"
 			{isFlow}