windmill-components 1.394.7 → 1.405.0

package/package/components/FlowBuilder.svelte

@@ -321,6 +321,7 @@ const testStepStore = writable({});
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
+let insertButtonOpen = writable(false);
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
     schedule: scheduleStore,
@@ -335,7 +336,8 @@ setContext('FlowEditorContext', {
     saveDraft,
     initialPath,
     flowInputsStore: writable({}),
-    customUi
+    customUi,
+    insertButtonOpen
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -381,20 +383,24 @@ function onKeyDown(event) {
             }
             break;
         case 'ArrowDown': {
-            let ids = generateIds();
-            let idx = ids.indexOf($selectedIdStore);
-            if (idx > -1 && idx < ids.length - 1) {
-                $selectedIdStore = ids[idx + 1];
-                event.preventDefault();
+            if (!$insertButtonOpen) {
+                let ids = generateIds();
+                let idx = ids.indexOf($selectedIdStore);
+                if (idx > -1 && idx < ids.length - 1) {
+                    $selectedIdStore = ids[idx + 1];
+                    event.preventDefault();
+                }
             }
             break;
         }
         case 'ArrowUp': {
-            let ids = generateIds();
-            let idx = ids.indexOf($selectedIdStore);
-            if (idx > 0 && idx < ids.length) {
-                $selectedIdStore = ids[idx - 1];
-                event.preventDefault();
+            if (!$insertButtonOpen) {
+                let ids = generateIds();
+                let idx = ids.indexOf($selectedIdStore);
+                if (idx > 0 && idx < ids.length) {
+                    $selectedIdStore = ids[idx - 1];
+                    event.preventDefault();
+                }
             }
             break;
         }
@@ -404,6 +410,7 @@ function generateIds() {
     return [
         'settings-metadata',
         'constants',
+        'preprocessor',
         ...dfsApply($flowStore.value.modules, (module) => module.id)
     ];
 }
@@ -718,7 +725,8 @@ async function genFlow(idx, flowModules, stepOnly = false) {
                             const schemaProperty = Object.entries(schema?.properties ?? {}).find((x) => x[0] === key)?.[1];
                             const snakeKey = snakeCase(key);
                             if (schemaProperty &&
-                                (!$flowStore.schema || !(snakeKey in $flowStore.schema.properties ?? {})) // prevent overriding flow inputs
+                                (!$flowStore.schema ||
+                                    !(snakeKey in ($flowStore?.schema?.properties ?? {}))) // prevent overriding flow inputs
                             ) {
                                 copilotFlowInputs[snakeKey] = schemaProperty;
                                 if (schema?.required.includes(snakeKey)) {

package/package/components/FlowGraphViewer.svelte

@@ -23,9 +23,16 @@ const dispatch = createEventDispatcher();
 				minHeight={400}
 				modules={flow?.value?.modules}
 				failureModule={flow?.value?.failure_module}
+				preprocessorModule={flow?.value?.preprocessor_module}
 				on:select={(e) => {
-					const mod = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === e?.detail)
-					stepDetail = mod ?? e.detail
+					if (e?.detail === 'failure') {
+						stepDetail = flow?.value?.failure_module
+					} else if (e?.detail === 'preprocessor') {
+						stepDetail = flow?.value?.preprocessor_module
+					} else {
+						stepDetail = dfs(flow?.value?.modules ?? [], (m) => m).find((m) => m?.id === e?.detail)
+					}
+					stepDetail = stepDetail ?? e?.detail
 					dispatch('select', stepDetail)
 				}}
 			/>

package/package/components/FlowGraphViewerStep.svelte

@@ -98,12 +98,17 @@ let codeViewer;
 	{:else if typeof stepDetail != 'string' && stepDetail.value}
 		<div class="">
 			<div class="sticky top-0 bg-surface w-full flex items-center py-2">
-				{#if stepDetail.id}
+				{#if stepDetail.id && stepDetail.id != 'failure' && stepDetail.id != 'preprocessor'}
 					<Badge color="indigo">
 						{stepDetail.id}
 					</Badge>
 				{/if}
-				<span class="ml-2 font-medium text-lg">
+				<span
+					class={twMerge(
+						'font-medium text-lg',
+						stepDetail.id !== 'failure' && stepDetail.id !== 'preprocessor' ? 'ml-2' : ''
+					)}
+				>
 					{#if stepDetail.summary}
 						{stepDetail.summary}
 					{:else if stepDetail.value.type == 'identity'}
@@ -119,6 +124,10 @@ let codeViewer;
 						Inner flow
 					{:else if stepDetail.value.type == 'whileloopflow'}
 						While loop
+					{:else if stepDetail.id === 'failure'}
+						Error handler
+					{:else if stepDetail.id === 'preprocessor'}
+						Preprocessor
 					{:else}
 						Anonymous step
 					{/if}
@@ -142,10 +151,12 @@ let codeViewer;
 				An identity step returns its inputs as outputs
 			</p>
 		{:else if stepDetail.value.type == 'rawscript'}
-			<div class="text-xs">
-				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
-				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
-			</div>
+			{#if stepDetail.id !== 'preprocessor'}
+				<div class="text-xs">
+					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+			{/if}
 
 			<div>
 				<div class="mb-2 mt-4 flex justify-between items-center">
@@ -175,10 +186,12 @@ let codeViewer;
 				</div>
 			</div>
 		{:else if stepDetail.value.type == 'script'}
-			<div class="text-2xs">
-				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
-				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
-			</div>
+			{#if stepDetail.id !== 'preprocessor'}
+				<div class="text-2xs">
+					<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+				</div>
+			{/if}
 			{#if stepDetail.value.path.startsWith('hub/')}
 				<div class="flex flex-col grow">
 					<div class="mb-2 flex justify-between items-center">

package/package/components/FlowJobResult.svelte

@@ -32,7 +32,6 @@ async function diffJobId() {
 let logOffset = 0;
 async function getLogs() {
     if (jobId) {
-        console.log('getLogs');
         const getUpdate = await JobService.getJobUpdates({
             workspace: workspaceId ?? $workspaceStore,
             id: jobId,

package/package/components/FlowStatusViewerInner.svelte

@@ -94,6 +94,9 @@ let innerModules = [];
 function updateStatus(status) {
     innerModules =
         status?.modules?.concat(status.failure_module.type != 'WaitingForPriorSteps' ? status.failure_module : []) ?? [];
+    if (status.preprocessor_module) {
+        innerModules.unshift(status.preprocessor_module);
+    }
     updateInnerModules();
     let count = status.retry?.fail_count;
     if (count) {
@@ -339,7 +342,8 @@ function onJobsLoaded(mod, job, force) {
                 flow_jobs: mod.flow_jobs,
                 flow_jobs_success: mod.flow_jobs_success,
                 iteration_total: mod.iterator?.itered?.length,
-                retries: mod?.failed_retries?.length
+                retries: mod?.failed_retries?.length,
+                skipped: mod.skipped
                 // retries: $flowStateStore?.raw_flow
             }, force);
             setDurationStatusByJob(mod.id, job.id, {
@@ -660,6 +664,7 @@ let wrapperHeight = 0;
 					{/each}
 				</div>
 			{:else if innerModules.length > 0 && (job.raw_flow?.modules.length ?? 0) > 0}
+				{@const hasPreprocessor = innerModules[0]?.id == 'preprocessor' ? 1 : 0}
 				<ul class="w-full">
 					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
 						Step-by-step
@@ -669,10 +674,12 @@ let wrapperHeight = 0;
 						{#if render}
 							<div class="line w-8 h-10" />
 							<h3 class="text-tertiary mb-2 w-full">
-								{#if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length}
+								{#if mod.id === 'preprocessor'}
+									<h3>Preprocessor module</h3>
+								{:else if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length + hasPreprocessor}
 									Step
 									<span class="font-medium text-primary">
-										{i + 1}
+										{i + 1 - hasPreprocessor}
 									</span>
 									out of
 									<span class="font-medium text-primary">{job?.raw_flow?.modules.length}</span>
@@ -844,6 +851,8 @@ let wrapperHeight = 0;
 								globalRefreshes[detail.moduleId]?.({ job: detail.id, index: detail.index })
 							}}
 							modules={job.raw_flow?.modules ?? []}
+							failureModule={job.raw_flow?.failure_module}
+							preprocessorModule={job.raw_flow?.preprocessor_module}
 						/>
 					</div>
 					<div
@@ -917,7 +926,11 @@ let wrapperHeight = 0;
 											<span class="pl-1 text-tertiary text-lg pt-4">Selected subflow</span>
 										{/if}
 										<div class="px-2 flex gap-2 min-w-0 w-full">
-											<ModuleStatus type={node.type} scheduled_for={node.scheduled_for} />
+											<ModuleStatus
+												type={node.type}
+												scheduled_for={node.scheduled_for}
+												skipped={node.skipped}
+											/>
 											{#if node.duration_ms}
 												<Badge>
 													<Hourglass class="mr-2" size={10} />

package/package/components/FlowTimeline.svelte

@@ -146,10 +146,10 @@ onDestroy(() => {
 				{/if}
 
 				<div class="px-2 py-2 grid grid-cols-6 w-full">
-					<div>{k}</div>
-					<div class="col-span-5 flex min-h-6 w-full">
+					<div class="truncate">{k}</div>
+					<div class="col-span-5 flex min-h-6">
 						{#if min && total}
-							<div class="flex flex-col gap-2 w-full p-2">
+							<div class="flex flex-col gap-2 w-full p-2 ml-4">
 								{#each items?.[k] ?? [] as b}
 									{@const waitingLen = b?.created_at
 										? b.started_at

package/package/components/HighlightCode.svelte

@@ -9,6 +9,7 @@ import sql from 'svelte-highlight/languages/sql';
 import powershell from 'svelte-highlight/languages/powershell';
 import php from 'svelte-highlight/languages/php';
 import rust from 'svelte-highlight/languages/rust';
+import yaml from 'svelte-highlight/languages/yaml';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -50,6 +51,8 @@ function getLang(lang) {
             return php;
         case 'rust':
             return rust;
+        case 'ansible':
+            return yaml;
         default:
             return typescript;
     }

package/package/components/IconedResourceType.svelte

@@ -1,13 +1,15 @@
 <script>
-import { APP_TO_ICON_COMPONENT } from './icons';
-export let name;
-export let silent = false;
-export let after = false;
-export let height = '24px';
-export let width = '24px';
-export let center = false;
-export let isSelected = false;
-$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
+	import { FileText } from 'lucide-svelte'
+	import { APP_TO_ICON_COMPONENT } from './icons'
+	export let name
+	export let silent = false
+	export let after = false
+	export let height = '24px'
+	export let width = '24px'
+	export let center = false
+	export let isSelected = false
+	export let formatExtension = undefined
+	$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
 </script>
 
 <div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
@@ -18,10 +20,15 @@ $: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.spl
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
 			<svelte:component this={iconComponent} {height} {width} />
 		</span>
+	{:else if formatExtension}
+		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+			<svelte:component this={FileText} {height} {width} />
+		</span>
 	{:else}
 		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full" />
 	{/if}
 	{#if !silent && after}
 		{name}
 	{/if}
-</div>	
+</div>
+

package/package/components/IconedResourceType.svelte.d.ts

@@ -9,6 +9,7 @@ export default class IconedResourceType extends SvelteComponent<{
     width?: string | undefined;
     silent?: boolean | undefined;
     isSelected?: boolean | undefined;
+    formatExtension?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -26,6 +27,7 @@ declare const __propDef: {
         width?: string | undefined;
         silent?: boolean | undefined;
         isSelected?: boolean | undefined;
+        formatExtension?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/IdEditorInput.svelte

@@ -43,7 +43,6 @@ $: inputDiv?.focus();
 	<div class="flex w-full">
 		<input
 			bind:this={inputDiv}
-			autofocus
 			type="text"
 			bind:value
 			class="!w-auto grow"