windmill-components 1.434.1 → 1.444.0

package/package/components/Editor.svelte

@@ -152,10 +152,10 @@ export let awareness = undefined;
 export let folding = false;
 export let args = undefined;
 export let useWebsockets = true;
-export let listenEmptyChanges = false;
 export let small = false;
 export let scriptLang;
 export let disabled = false;
+export let lineNumbersMinChars = 3;
 const rHash = randomHash();
 $: filePath = computePath(path);
 function computePath(path) {
@@ -329,6 +329,9 @@ export async function format() {
         }
     }
 }
+export function getScriptLang() {
+    return scriptLang;
+}
 let command = undefined;
 let sqlTypeCompletor = undefined;
 $: initialized && lang === 'sql' && scriptLang
@@ -903,6 +906,7 @@ function onVimMode() {
         vimDisposable = initVim(editor, statusDiv, saveDraft);
     }
 }
+let timeoutModel = undefined;
 async function loadMonaco() {
     try {
         console.log("Loading Monaco's language client");
@@ -931,21 +935,19 @@ async function loadMonaco() {
         ...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets),
         model,
         fontSize: !small ? 14 : 12,
+        lineNumbersMinChars,
         // overflowWidgetsDomNode: widgets,
         tabSize: lang == 'python' ? 4 : 2,
         folding
     });
     // updateEditorKeybindingsMode(editor, 'vim', undefined)
-    let timeoutModel = undefined;
     let ataModel = undefined;
     editor?.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             let ncode = getCode();
-            if (ncode != '' || listenEmptyChanges) {
-                code = ncode;
-                dispatch('change', code);
-            }
+            code = ncode;
+            dispatch('change', code);
         }, 500);
         ataModel && clearTimeout(ataModel);
         ataModel = setTimeout(() => {
@@ -1092,6 +1094,7 @@ onDestroy(() => {
     sqlSchemaCompletor && sqlSchemaCompletor.dispose();
     copilotCompletor && copilotCompletor.dispose();
     sqlTypeCompletor && sqlTypeCompletor.dispose();
+    timeoutModel && clearTimeout(timeoutModel);
 });
 async function genRoot(hostname) {
     let token = $lspTokenStore;

package/package/components/Editor.svelte.d.ts

@@ -7,7 +7,7 @@ import { editor as meditor, type IDisposable } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust' | 'yaml';
+        lang: 'typescript' | 'python' | 'go' | 'shell' | 'sql' | 'graphql' | 'powershell' | 'php' | 'css' | 'javascript' | 'rust' | 'yaml' | 'csharp';
         code?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;
@@ -27,10 +27,10 @@ declare const __propDef: {
         folding?: boolean | undefined;
         args?: Record<string, any> | undefined;
         useWebsockets?: boolean | undefined;
-        listenEmptyChanges?: boolean | undefined;
         small?: boolean | undefined;
         scriptLang: Preview['language'] | 'bunnative';
         disabled?: boolean | undefined;
+        lineNumbersMinChars?: number | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         arrowDown?: (() => void) | undefined;
@@ -44,6 +44,7 @@ declare const __propDef: {
         setCode?: ((ncode: string, noHistory?: boolean) => void) | undefined;
         append?: ((code: any) => void) | undefined;
         format?: (() => Promise<void>) | undefined;
+        getScriptLang?: (() => string | undefined) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
         addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
@@ -74,6 +75,7 @@ export default class Editor extends SvelteComponent<EditorProps, EditorEvents, E
     get setCode(): (ncode: string, noHistory?: boolean) => void;
     get append(): (code: any) => void;
     get format(): () => Promise<void>;
+    get getScriptLang(): () => string | undefined;
     get reloadWebsocket(): () => Promise<void>;
     get addAction(): (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
 }

package/package/components/EditorBar.svelte

@@ -63,7 +63,8 @@ $: showContextVarPicker = [
     'bunnative',
     'nativets',
     'php',
-    'rust'
+    'rust',
+    'csharp'
 ].includes(lang ?? '');
 $: showVarPicker = [
     'python3',
@@ -75,7 +76,8 @@ $: showVarPicker = [
     'bunnative',
     'nativets',
     'php',
-    'rust'
+    'rust',
+    'csharp'
 ].includes(lang ?? '');
 $: showResourcePicker = [
     'python3',
@@ -87,7 +89,8 @@ $: showResourcePicker = [
     'bunnative',
     'nativets',
     'php',
-    'rust'
+    'rust',
+    'csharp'
 ].includes(lang ?? '');
 $: showResourceTypePicker =
     ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
@@ -253,6 +256,23 @@ function clearContent() {
         editor.setCode(resetCode);
     }
 }
+function windmillPathToCamelCaseName(path) {
+    const parts = path.split('/');
+    const lastPart = parts[parts.length - 1];
+    const words = lastPart.split('_');
+    return words
+        .map((word, index) => {
+        if (index === 0) {
+            // Lowercase the first word
+            return word.toLowerCase();
+        }
+        else {
+            // Capitalize the first letter of subsequent words
+            return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        }
+    })
+        .join('');
+}
 let historyBrowserDrawerOpen = false;
 </script>
 
@@ -312,6 +332,10 @@ let historyBrowserDrawerOpen = false;
 			editor.insertAtCursor(`$Env:${name}`)
 		} else if (lang == 'php') {
 			editor.insertAtCursor(`getenv('${name}');`)
+		} else if (lang == 'rust') {
+			editor.insertAtCursor(`std::env::var("${name}").unwrap();`)
+		} else if (lang == 'csharp') {
+			editor.insertAtCursor(`Environment.GetEnvironmentVariable("${name}");`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -368,6 +392,15 @@ let historyBrowserDrawerOpen = false;
 curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . getenv('WM_TOKEN')));
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 $var = json_decode(curl_exec($ch));`)
+		} else if (lang == 'csharp') {
+			editor.insertAtCursor(`var baseUrl = Environment.GetEnvironmentVariable("BASE_INTERNAL_URL");
+var workspace = Environment.GetEnvironmentVariable("WM_WORKSPACE");
+var uri = $"{baseUrl}/api/w/{workspace}/variables/get_value/${path}";
+using var client = new HttpClient();
+client.DefaultRequestHeaders.Add("Authorization", $"Bearer {Environment.GetEnvironmentVariable("WM_TOKEN")}");
+
+string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
+`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -388,7 +421,7 @@ $var = json_decode(curl_exec($ch));`)
 				variableEditor.initNew()
 			}}
 		>
-			New Variable
+			New variable
 		</Button>
 	</div>
 </ItemPicker>
@@ -438,6 +471,18 @@ $var = json_decode(curl_exec($ch));`)
 curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer ' . getenv('WM_TOKEN')));
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 $res = json_decode(curl_exec($ch));`)
+		} else if (lang == 'csharp') {
+			if (!editor.getCode().includes(`using System.Text.Json.Nodes;`)) {
+				editor.insertAtBeginning(`using System.Text.Json.Nodes;\n`)
+			}
+			editor.insertAtCursor(`var baseUrl = Environment.GetEnvironmentVariable("BASE_INTERNAL_URL");
+var workspace = Environment.GetEnvironmentVariable("WM_WORKSPACE");
+var uri = $"{baseUrl}/api/w/{workspace}/resources/get_value_interpolated/${path}";
+using var client = new HttpClient();
+client.DefaultRequestHeaders.Add("Authorization", $"Bearer {Environment.GetEnvironmentVariable("WM_TOKEN")}");
+
+JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetStringAsync(uri));
+`)
 		}
 		sendUserToast(`${path} inserted at cursor`)
 	}}
@@ -459,7 +504,7 @@ $res = json_decode(curl_exec($ch));`)
 			size="sm"
 			href="{base}/resources?connect_app=undefined"
 		>
-			Add Resource
+			Add resource
 		</Button>
 	</div>
 </ItemPicker>
@@ -498,7 +543,7 @@ $res = json_decode(curl_exec($ch));`)
 					spacingSize="md"
 					startIcon={{ icon: DollarSign }}
 					{iconOnly}
-					>+Context Var
+					>+Context var
 				</Button>
 			{/if}
 			{#if showVarPicker && customUi?.variable != false}

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -168,8 +168,8 @@ $: handlerPath &&
 
 <div>
 	<Tabs bind:selected={handlerSelected} class="mt-2 mb-4">
-		<Tab value="slack">Slack</Tab>
-		<Tab value="custom">
+		<Tab value="slack" disabled={!isEditable}>Slack</Tab>
+		<Tab value="custom" disabled={!isEditable}>
 			Custom
 			<slot name="custom-tab-tooltip" />
 		</Tab>
@@ -185,7 +185,7 @@ $: handlerPath &&
 			allowFlow={true}
 			bind:scriptPath={handlerPath}
 			bind:itemKind={customHandlerKind}
-			allowRefresh
+			allowRefresh={isEditable}
 		/>
 
 		{#if handlerPath === undefined}
@@ -194,6 +194,7 @@ $: handlerPath &&
 				color="dark"
 				size="xs"
 				href={customScriptTemplate}
+				disabled={!isEditable}
 				target="_blank">Create from template</Button
 			>
 		{/if}

package/package/components/ExecutionDuration.svelte

@@ -1,4 +1,5 @@
 <script>import {} from '../gen';
+import { isScriptPreview } from '../utils';
 import { onDestroy } from 'svelte';
 export let job = undefined;
 /** Execution duration of current active job (in ms) */
@@ -19,7 +20,7 @@ let interval;
 $: if (!busy &&
     job &&
     'running' in job &&
-    (job.job_kind == 'script' || job?.job_kind == 'preview'))
+    (job.job_kind == 'script' || isScriptPreview(job?.job_kind)))
     start(job);
 function start(job) {
     busy = true;

package/package/components/FieldHeader.svelte

@@ -12,10 +12,18 @@ export let displayType = true;
 export let labelClass = '';
 export let prettify = false;
 export let simpleTooltip = undefined;
+export let lightHeader = false;
 </script>
 
 <div class="inline-flex flex-row items-baseline truncated">
-	<span class={twMerge(disabled ? 'text-tertiary' : '', 'font-semibold', labelClass)}>
+	<span
+		class={twMerge(
+			disabled ? 'text-tertiary' : '',
+			'font-semibold',
+			lightHeader ? 'text-secondary text-sm font-normal' : '',
+			labelClass
+		)}
+	>
 		{#if prettify}
 			{label.replace(/_/g, ' ').split(' ').map(capitalize).join(' ')}
 		{:else}

package/package/components/FieldHeader.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         labelClass?: string | undefined;
         prettify?: boolean | undefined;
         simpleTooltip?: string | undefined;
+        lightHeader?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowBuilder.svelte

@@ -431,13 +431,16 @@ setContext('FlowEditorContext', {
     initialPath,
     flowInputsStore: writable({}),
     customUi,
-    insertButtonOpen
+    insertButtonOpen,
+    executionCount: writable(0)
 });
 setContext('TriggerContext', {
     selectedTrigger: selectedTriggerStore,
     primarySchedule: primaryScheduleStore,
     triggersCount,
-    simplifiedPoll
+    simplifiedPoll,
+    defaultValues: writable(undefined),
+    captureOn: writable(undefined)
 });
 async function loadTriggers() {
     $triggersCount = await FlowService.getTriggersCountOfFlow({
@@ -986,6 +989,7 @@ function onCustomUiChange(customUi) {
 }
 let deploymentMsg = '';
 let msgInput = undefined;
+let flowPreviewButtons;
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -1197,7 +1201,7 @@ let msgInput = undefined;
 							{abortController}
 						/>
 					{/if}
-					<FlowPreviewButtons />
+					<FlowPreviewButtons bind:this={flowPreviewButtons} />
 					<Button
 						loading={loadingDraft}
 						size="xs"
@@ -1262,6 +1266,15 @@ let msgInput = undefined;
 						renderCount += 1
 					}}
 					{newFlow}
+					on:applyArgs={(ev) => {
+						if (ev.detail.kind === 'preprocessor') {
+							$testStepStore['preprocessor'] = ev.detail.args ?? {}
+							$selectedIdStore = 'preprocessor'
+						} else {
+							$previewArgsStore = ev.detail.args ?? {}
+							flowPreviewButtons?.openPreview()
+						}
+					}}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>

package/package/components/FlowGraphViewer.svelte

@@ -23,6 +23,8 @@ const dispatch = createEventDispatcher();
 		>
 			<FlowGraphV2
 				{triggerNode}
+				earlyStop={flow.value.skip_expr !== undefined}
+				cache={flow.value.cache_ttl !== undefined}
 				path={flow?.path}
 				{download}
 				minHeight={400}

package/package/components/FlowPreviewContent.svelte

@@ -6,14 +6,12 @@ import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import CapturePayload from './flows/content/CapturePayload.svelte';
 import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte';
 import { emptyString, sendUserToast } from '../utils';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import SavedInputs from './SavedInputs.svelte';
 import { dfs } from './flows/dfs';
 import { sliceModules } from './flows/flowStateUtils';
-let capturePayload;
 export let previewMode;
 export let open;
 export let jobId = undefined;
@@ -28,7 +26,7 @@ let jobProgressReset;
 export function test() {
     runPreview($previewArgs, undefined);
 }
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPath, customUi } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPath, customUi, executionCount } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 function extractFlow(previewMode) {
     if (previewMode === 'whole') {
@@ -101,8 +99,6 @@ let inputLibraryDrawer;
 let renderCount = 0;
 </script>
 
-<CapturePayload bind:this={capturePayload} />
-
 <svelte:window on:keydown={onKeyDown} />
 
 <Drawer bind:this={inputLibraryDrawer}>
@@ -267,18 +263,9 @@ let renderCount = 0;
 					variant="border"
 					on:click={() => {
 						inputLibraryDrawer?.openDrawer()
-					}}>Past Runs/Input library</Button
+					}}>Past runs/Input library</Button
 				>
 			{/if}
-
-			<Button
-				btnClasses="h-full truncate"
-				size="sm"
-				variant="border"
-				on:click={() => {
-					capturePayload.openDrawer()
-				}}>Fill args from a request</Button
-			>
 		</div>
 	</div>
 	<div class="w-full flex flex-col gap-y-1">
@@ -314,6 +301,10 @@ let renderCount = 0;
 					wideResults
 					{flowStateStore}
 					{jobId}
+					on:done={() => {
+						console.log('done')
+						$executionCount = $executionCount + 1
+					}}
 					on:jobsLoaded={({ detail }) => {
 						job = detail
 					}}

package/package/components/FlowStatusViewerInner.svelte

@@ -10,7 +10,7 @@ import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import {} from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { emptyString, msToSec, truncateRev } from '../utils';
+import { emptyString, isScriptPreview, msToSec, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
 import { ChevronDown, Hourglass, Loader2 } from 'lucide-svelte';
 import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
@@ -366,9 +366,7 @@ async function updateJobId() {
         if (flowJobIds) {
             let modId = flowJobIds?.moduleId ?? '';
             let common = {
-                iteration_from: 
-                // $localDurationStatuses?.[modId]?.iteration_from ??
-                Math.max(flowJobIds.flowJobs.length - 20, 0),
+                iteration_from: flowJobIds?.branchall ? 0 : Math.max(flowJobIds.flowJobs.length - 20, 0),
                 iteration_total: $localDurationStatuses?.[modId]?.iteration_total ?? flowJobIds?.length
             };
             $localDurationStatuses[modId] = {
@@ -496,7 +494,6 @@ async function setIteration(j, id, clicked, modId, isForloop) {
                 j != state?.selectedForloopIndex ||
                 setManually != state?.selectedForLoopSetManually;
             if (selectedNotEqual) {
-                console.log('not equal');
                 globalState?.update((topLevelModuleStates) => {
                     topLevelModuleStates[modId] = {
                         type: 'WaitingForPriorSteps',
@@ -581,9 +578,7 @@ function innerJobLoaded(jobLoaded, j, clicked, force) {
                 duration_ms: jobLoaded.duration_ms
             });
         }
-        if (jobLoaded.job_kind == 'script' ||
-            jobLoaded.job_kind == 'flowscript' ||
-            jobLoaded.job_kind == 'preview') {
+        if (jobLoaded.job_kind == 'script' || isScriptPreview(jobLoaded.job_kind)) {
             let id = undefined;
             if ((innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow') &&
                 innerModule.modules.length == 1) {
@@ -647,6 +642,7 @@ function allModulesForTimeline(modules, expandedSubflows) {
     }
     return rec(ids, undefined);
 }
+let subflowsSize = 500;
 </script>
 
 {#if notAnonynmous}
@@ -776,7 +772,12 @@ function allModulesForTimeline(modules, expandedSubflows) {
 				</h3>
 				<div class="overflow-auto max-h-1/2">
 					{#each flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
-						{#if render}
+						{#if render && j + subflowsSize + 1 == (flowJobIds?.flowJobs.length ?? 0)}
+							<Button variant="border" color="light" on:click={() => (subflowsSize += 500)}
+								>Load 500 more...</Button
+							>
+						{/if}
+						{#if render && j + subflowsSize + 1 > (flowJobIds?.flowJobs.length ?? 0)}
 							<Button
 								variant={forloop_selected === loopJobId ? 'contained' : 'border'}
 								color={flowJobIds?.flowJobsSuccess?.[j] === false
@@ -970,7 +971,8 @@ function allModulesForTimeline(modules, expandedSubflows) {
 													moduleId: mod.id,
 													flowJobs: mod.flow_jobs,
 													flowJobsSuccess: mod.flow_jobs_success,
-													length: mod.iterator?.itered?.length ?? mod.flow_jobs.length
+													length: mod.iterator?.itered?.length ?? mod.flow_jobs.length,
+													branchall: job?.raw_flow?.modules?.[i]?.value?.type == 'branchall'
 											  }
 											: undefined}
 										on:jobsLoaded={(e) => {
@@ -1073,6 +1075,8 @@ function allModulesForTimeline(modules, expandedSubflows) {
 									}
 								}
 							}}
+							earlyStop={job.raw_flow?.skip_expr !== undefined}
+							cache={job.raw_flow?.cache_ttl !== undefined}
 							modules={job.raw_flow?.modules ?? []}
 							failureModule={job.raw_flow?.failure_module}
 							preprocessorModule={job.raw_flow?.preprocessor_module}

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
             flowJobs: string[];
             flowJobsSuccess: (boolean | undefined)[];
             length: number;
+            branchall?: boolean;
         } | undefined;
         innerModule?: FlowModuleValue | undefined;
         globalRefreshes?: Record<string, (clear: any, root: any) => Promise<void>> | undefined;

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 csharp from 'svelte-highlight/languages/csharp';
 import yaml from 'svelte-highlight/languages/yaml';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
@@ -51,6 +52,8 @@ function getLang(lang) {
             return php;
         case 'rust':
             return rust;
+        case 'csharp':
+            return csharp;
         case 'ansible':
             return yaml;
         default:

package/package/components/InputTransformSchemaForm.svelte

@@ -126,7 +126,7 @@ $: {
 				variableEditor?.initNew?.()
 			}}
 		>
-			New Variable
+			New variable
 		</Button>
 	</div>
 </ItemPicker>