windmill-components 1.444.1 → 1.447.4

package/package/components/details/DetailPageDetailPanel.svelte

@@ -11,23 +11,23 @@ export let selected;
 
 <HighlightTheme />
 
-<Tabs bind:selected>
-	<Tab value="saved_inputs">Saved Inputs</Tab>
-	{#if !isOperator}
-		<Tab value="triggers">Triggers</Tab>
-	{/if}
-	{#if flow_json}
-		<Tab value="raw">Export</Tab>
-	{:else}
-		<Tab value="script">Script</Tab>
-	{/if}
-	{#if selected == 'flow_step'}
-		<Tab value="flow_step">Step</Tab>
-	{/if}
+<div class="flex flex-col h-full">
+	<Tabs bind:selected wrapperClass="flex-none w-full">
+		<Tab value="saved_inputs">Saved Inputs</Tab>
+		{#if !isOperator}
+			<Tab value="triggers">Triggers</Tab>
+		{/if}
+		{#if flow_json}
+			<Tab value="raw">Export</Tab>
+		{:else}
+			<Tab value="script">Script</Tab>
+		{/if}
+		{#if selected == 'flow_step'}
+			<Tab value="flow_step">Step</Tab>
+		{/if}
 
-	<svelte:fragment slot="content">
-		<div class="h-[calc(100%-32px)]">
-			<div class="h-full overflow-auto">
+		<svelte:fragment slot="content">
+			<div class="min-h-0 grow">
 				<TabContent value="saved_inputs" class="h-full">
 					<slot name="save_inputs" />
 				</TabContent>
@@ -40,6 +40,7 @@ export let selected;
 						<slot slot="routes" name="routes" />
 						<slot slot="websockets" name="websockets" />
 						<slot slot="kafka" name="kafka" />
+						<slot slot="nats" name="nats" />
 						<slot slot="emails" name="emails" />
 						<slot slot="schedules" name="schedules" />
 						<slot slot="cli" name="cli" />
@@ -54,6 +55,6 @@ export let selected;
 					</TabContent>
 				{/if}
 			</div>
-		</div>
-	</svelte:fragment>
-</Tabs>
+		</svelte:fragment>
+	</Tabs>
+</div>

package/package/components/details/DetailPageDetailPanel.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        triggerSelected?: "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
+        triggerSelected?: "kafka" | "nats" | "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
         flow_json?: any | undefined;
         simplfiedPoll?: boolean | undefined;
         isOperator?: boolean | undefined;
@@ -25,6 +25,9 @@ declare const __propDef: {
         kafka: {
             slot: string;
         };
+        nats: {
+            slot: string;
+        };
         emails: {
             slot: string;
         };

package/package/components/details/DetailPageLayout.svelte

@@ -20,7 +20,8 @@ setContext('TriggerContext', {
     triggersCount,
     simplifiedPoll,
     defaultValues: writable(undefined),
-    captureOn: writable(undefined)
+    captureOn: writable(undefined),
+    showCaptureHint: writable(undefined)
 });
 </script>
 
@@ -45,6 +46,7 @@ setContext('TriggerContext', {
 							<slot slot="routes" name="routes" />
 							<slot slot="websockets" name="websockets" />
 							<slot slot="kafka" name="kafka" />
+							<slot slot="nats" name="nats" />
 							<slot slot="emails" name="emails" />
 							<slot slot="schedules" name="schedules" />
 							<slot slot="cli" name="cli" />
@@ -90,6 +92,7 @@ setContext('TriggerContext', {
 								<slot slot="script" name="script" />
 								<slot slot="websockets" name="websockets" />
 								<slot slot="kafka" name="kafka" />
+								<slot slot="nats" name="nats" />
 								<slot slot="emails" name="emails" />
 								<slot slot="schedules" name="schedules" />
 								<slot slot="cli" name="cli" />

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -26,6 +26,9 @@ declare const __propDef: {
         kafka: {
             slot: string;
         };
+        nats: {
+            slot: string;
+        };
         emails: {
             slot: string;
         };

package/package/components/details/DetailPageTriggerPanel.svelte

@@ -1,77 +1,98 @@
 <script>import { Tabs, Tab } from '../common';
-import { CalendarCheck2, MailIcon, Route, Terminal, Webhook, Unplug } from 'lucide-svelte';
+import { CalendarCheck2, MailIcon, Route, Terminal, Webhook, Unplug, PlugZap } from 'lucide-svelte';
 import HighlightTheme from '../HighlightTheme.svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
+import NatsIcon from '../icons/NatsIcon.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 export let triggerSelected = 'webhooks';
 export let simplfiedPoll = false;
+export let eventStreamType = 'kafka';
+$: {
+    if (triggerSelected === 'kafka' || triggerSelected === 'nats') {
+        eventStreamType = triggerSelected;
+    }
+}
 </script>
 
 <HighlightTheme />
 
 {#if !simplfiedPoll}
-	<Tabs bind:selected={triggerSelected}>
-		<Tab value="webhooks">
-			<span class="flex flex-row gap-2 items-center text-xs">
-				<Webhook size={12} />
-				Webhooks
-			</span>
-		</Tab>
-		<Tab value="schedules">
-			<span class="flex flex-row gap-2 items-center text-xs">
-				<CalendarCheck2 size={12} />
-				Schedules
-			</span>
-		</Tab>
-		<Tab value="routes">
-			<span class="flex flex-row gap-2 items-center text-xs">
-				<Route size={12} />
-				HTTP
-			</span>
-		</Tab>
-		<Tab value="websockets">
-			<span class="flex flex-row gap-2 items-center text-xs">
-				<Unplug size={12} />
-				Websockets
-			</span>
-		</Tab>
-		<Tab value="kafka">
-			<span class="flex flex-row gap-2 items-center text-xs">
-				<KafkaIcon size={12} />
-				Kafka
-			</span>
-		</Tab>
-		<Tab value="emails">
-			<span class="flex flex-row gap-2 items-center text-xs">
-				<MailIcon size={12} />
-				Email
-			</span>
-		</Tab>
-		<Tab value="cli">
-			<span class="flex flex-row gap-2 items-center text-xs">
-				<Terminal size={12} />
-				CLI
-			</span>
-		</Tab>
-	</Tabs>
+	<div class="flex flex-col h-full">
+		<Tabs bind:selected={triggerSelected} wrapperClass="flex-none w-full">
+			<Tab value="webhooks">
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<Webhook size={12} />
+					Webhooks
+				</span>
+			</Tab>
+			<Tab value="schedules">
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<CalendarCheck2 size={12} />
+					Schedules
+				</span>
+			</Tab>
+			<Tab value="routes">
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<Route size={12} />
+					HTTP
+				</span>
+			</Tab>
+			<Tab value="websockets">
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<Unplug size={12} />
+					Websockets
+				</span>
+			</Tab>
+			<Tab value="kafka" otherValues={['nats']}>
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<PlugZap size={12} />
+					Event streams
+				</span>
+			</Tab>
+			<Tab value="emails">
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<MailIcon size={12} />
+					Email
+				</span>
+			</Tab>
+			<Tab value="cli">
+				<span class="flex flex-row gap-2 items-center text-xs">
+					<Terminal size={12} />
+					CLI
+				</span>
+			</Tab>
 
-	<div class="h-[calc(100%-32px)]">
-		<div class="h-full overflow-auto">
-			{#if triggerSelected === 'webhooks'}
-				<slot name="webhooks" />
-			{:else if triggerSelected === 'routes'}
-				<slot name="routes" />
-			{:else if triggerSelected === 'emails'}
-				<slot name="emails" />
-			{:else if triggerSelected === 'schedules'}
-				<slot name="schedules" />
-			{:else if triggerSelected === 'websockets'}
-				<slot name="websockets" />
-			{:else if triggerSelected === 'kafka'}
-				<slot name="kafka" />
-			{:else if triggerSelected === 'cli'}
-				<slot name="cli" />
-			{/if}
-		</div>
+			<svelte:fragment slot="content">
+				<div class="min-h-0 grow overflow-y-auto">
+					{#if triggerSelected === 'webhooks'}
+						<slot name="webhooks" />
+					{:else if triggerSelected === 'routes'}
+						<slot name="routes" />
+					{:else if triggerSelected === 'emails'}
+						<slot name="emails" />
+					{:else if triggerSelected === 'schedules'}
+						<slot name="schedules" />
+					{:else if triggerSelected === 'websockets'}
+						<slot name="websockets" />
+					{:else if triggerSelected === 'kafka' || triggerSelected === 'nats'}
+						<div class="m-1.5">
+							<ToggleButtonGroup bind:selected={eventStreamType}>
+								<ToggleButton value="kafka" label="Kafka" icon={KafkaIcon} />
+								<ToggleButton value="nats" label="NATS" icon={NatsIcon} />
+							</ToggleButtonGroup>
+						</div>
+						{#if eventStreamType === 'kafka'}
+							<slot name="kafka" />
+						{:else if eventStreamType === 'nats'}
+							<slot name="nats" />
+						{/if}
+					{:else if triggerSelected === 'cli'}
+						<slot name="cli" />
+					{/if}
+				</div>
+			</svelte:fragment>
+		</Tabs>
 	</div>
 {:else}
 	<slot name="schedules" />

package/package/components/details/DetailPageTriggerPanel.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        triggerSelected?: "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | "kafka" | undefined;
+        triggerSelected?: "kafka" | "nats" | "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
         simplfiedPoll?: boolean | undefined;
+        eventStreamType?: "kafka" | "nats" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +15,7 @@ declare const __propDef: {
         schedules: {};
         websockets: {};
         kafka: {};
+        nats: {};
         cli: {};
     };
 };

package/package/components/details/EmailTriggerConfigSection.svelte

@@ -29,7 +29,6 @@ function getCaptureEmail() {
         pad: false
     })
         .toLowerCase();
-    console.log(encodedPrefix);
     return `${encodedPrefix}@${emailDomain}`;
 }
 $: captureEmail = getCaptureEmail();
@@ -58,6 +57,7 @@ $: email = emailAddress(requestType, path, hash, isFlow, token);
 			on:applyArgs
 			on:updateSchema
 			on:addPreprocessor
+			on:testWithArgs
 		>
 			<Label label="Email address">
 				<ClipboardPanel content={captureEmail} disabled={!captureInfo.active} />

package/package/components/details/EmailTriggerConfigSection.svelte.d.ts

@@ -21,10 +21,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/details/EmailTriggerPanel.svelte

@@ -65,6 +65,8 @@ getEmailDomain();
 				{hasPreprocessor}
 				on:applyArgs
 				on:addPreprocessor
+				on:updateSchema
+				on:testWithArgs
 				{newItem}
 			/>
 		{:else}

package/package/components/details/EmailTriggerPanel.svelte.d.ts

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

package/package/components/flows/FlowEditor.svelte

@@ -56,12 +56,18 @@ setContext('PropPickerContext', {
 		<Pane class="relative z-10" size={100 - size} minSize={40}>
 			{#if loading}
 				<div class="w-full h-full">
-					<div class="block m-auto mt-40 w-10">
+					<div class="block m-auto pt-40 w-10">
 						<WindmillIcon height="40px" width="40px" spin="fast" />
 					</div>
 				</div>
 			{:else}
-				<FlowEditorPanel {disabledFlowInputs} {newFlow} enableAi={!disableAi} on:applyArgs />
+				<FlowEditorPanel
+					{disabledFlowInputs}
+					{newFlow}
+					enableAi={!disableAi}
+					on:applyArgs
+					on:testWithArgs
+				/>
 			{/if}
 		</Pane>
 	</Splitpanes>

package/package/components/flows/FlowEditor.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
     events: {
         reload: any;
         applyArgs: any;
+        testWithArgs: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/flows/common/FlowCard.svelte

@@ -4,10 +4,16 @@ export let flowModule = undefined;
 export let noEditor;
 </script>
 
-{#if !noEditor}
-	<FlowCardHeader on:reload {title} bind:flowModule>
-		<slot name="header" />
-	</FlowCardHeader>
-{/if}
+<div class="flex flex-col h-full">
+	{#if !noEditor}
+		<div>
+			<FlowCardHeader on:reload {title} bind:flowModule>
+				<slot name="header" />
+			</FlowCardHeader>
+		</div>
+	{/if}
 
-<slot />
+	<div class="min-h-0 flex-grow">
+		<slot />
+	</div>
+</div>

package/package/components/flows/content/DynamicInputHelpBox.svelte

@@ -31,6 +31,7 @@ $: opened = false;
 				not exist because branch was not chosen)</li
 			>
 			<li><b>flow_input</b>: the object containing the flow input arguments</li>
+			<li><b>previous_result</b>: the result of previous step</li>
 			<li><b>params</b>: the object containing the current step static values</li>
 			<li>
 				<b>variable(path)</b>: the function returning the variable (including secrets) at given path

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -13,8 +13,8 @@ export let noEditor = false;
 export let enableAi = false;
 export let newFlow = false;
 export let disabledFlowInputs = false;
-const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPath } = getContext('FlowEditorContext');
-const { selectedTrigger, defaultValues, captureOn } = getContext('TriggerContext');
+const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPath, previewArgs, flowInputEditorState } = getContext('FlowEditorContext');
+const { selectedTrigger, defaultValues, captureOn, showCaptureHint } = getContext('TriggerContext');
 function checkDup(modules) {
     let seenModules = [];
     for (const m of modules) {
@@ -54,15 +54,9 @@ onMount(() => {
 			selectedTrigger.set(ev.detail.kind)
 			defaultValues.set(ev.detail.config)
 			captureOn.set(true)
+			showCaptureHint.set(true)
 		}}
 		on:applyArgs
-		on:updateSchema={(e) => {
-			const { schema, redirect } = e.detail
-			$flowStore.schema = schema
-			if (redirect) {
-				$selectedId = 'Input'
-			}
-		}}
 	/>
 {:else if $selectedId === 'Result'}
 	<p class="p-4 text-secondary">The result of the flow will be the result of the last node.</p>
@@ -82,6 +76,18 @@ onMount(() => {
 			})
 			$selectedId = 'preprocessor'
 		}}
+		on:updateSchema={(e) => {
+			const { payloadData, redirect } = e.detail
+			if (payloadData) {
+				$previewArgs = JSON.parse(JSON.stringify(payloadData))
+			}
+			if (redirect) {
+				$selectedId = 'Input'
+				$flowInputEditorState.selectedTab = 'captures'
+				$flowInputEditorState.payloadData = payloadData
+			}
+		}}
+		on:testWithArgs
 		currentPath={$pathStore}
 		{initialPath}
 		schema={$flowStore.schema}

package/package/components/flows/content/FlowEditorPanel.svelte.d.ts

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