windmill-components 1.28.4 → 1.28.7

package/components/ArgInput.svelte

@@ -114,7 +114,7 @@ export let inputCat = 'string';
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 
-<div class="flex flex-col w-full">
+<div class="flex flex-col w-full mb-2">
 	<div>
 		{#if displayHeader}
 			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
@@ -158,13 +158,18 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 		{/if}
 
 		<div class="grid grid-cols-2">
-			<div class="text-sm italic pb-1">
-				{description}
-			</div>
-			<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
-				{error === '' ? '...' : error}
-			</div>
+			{#if description || error}
+				<div class="text-sm italic pb-1">
+					{description}
+				</div>
+				<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
+					{error === '' ? '...' : error}
+				</div>
+			{:else}
+				<div class="mt-1" />
+			{/if}
 		</div>
+
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				<input
@@ -266,6 +271,9 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						lang="sql"
 						bind:code={value}
 						class="two-lines-editor"
+						on:change={async () => {
+							dispatch('input', { rawValue: value, isRaw: false })
+						}}
 					/>
 				</div>
 			{:else if inputCat == 'base64'}

package/components/Editor.svelte

@@ -130,6 +130,8 @@ function format() {
         }
     }
 }
+let command = undefined;
+let monacoServices = undefined;
 export async function reloadWebsocket() {
     await closeWebsockets();
     if (lang == 'python' || deno) {
@@ -138,8 +140,9 @@ export async function reloadWebsocket() {
         const { toSocket, WebSocketMessageReader, WebSocketMessageWriter } = await import('vscode-ws-jsonrpc');
         const vscode = await import('vscode');
         const { RequestType } = await import('vscode-jsonrpc');
+        // install Monaco language client services
         const { MonacoServices } = await import('monaco-languageclient');
-        MonacoServices.install();
+        monacoServices = MonacoServices.install();
         function createLanguageClient(transports, name, initializationOptions) {
             const client = new MonacoLanguageClient({
                 name: name,
@@ -179,31 +182,17 @@ export async function reloadWebsocket() {
         async function connectToLanguageServer(url, name, options) {
             try {
                 const webSocket = new WebSocket(url);
-                webSocket.onopen = () => {
+                webSocket.onopen = async () => {
                     const socket = toSocket(webSocket);
                     const reader = new WebSocketMessageReader(socket);
                     const writer = new WebSocketMessageWriter(socket);
                     const languageClient = createLanguageClient({ reader, writer }, name, options);
                     websockets.push([languageClient, webSocket]);
-                    languageClient.start();
-                    lastWsAttempt = new Date();
-                    nbWsAttempt = 0;
-                    if (name == 'deno') {
-                        vscode.commands.getCommands().then((v) => {
-                            if (!v.includes('deno.cache')) {
-                                vscode.commands.registerCommand('deno.cache', (uris = []) => {
-                                    languageClient.sendRequest(new RequestType('deno/cache'), {
-                                        referrer: { uri },
-                                        uris: uris.map((uri) => ({ uri }))
-                                    });
-                                });
-                            }
-                        });
-                    }
-                    reader.onClose(() => {
+                    reader.onClose(async () => {
                         try {
                             console.log('CLOSE');
-                            languageClient.stop();
+                            websocketAlive[name] = false;
+                            await languageClient.stop();
                         }
                         catch (err) {
                             console.error(err);
@@ -212,6 +201,27 @@ export async function reloadWebsocket() {
                     socket.onClose((_code, _reason) => {
                         websocketAlive[name] = false;
                     });
+                    try {
+                        console.log('started client');
+                        await languageClient.start();
+                    }
+                    catch (err) {
+                        console.log('err at client');
+                        console.error(err);
+                        throw new Error(err);
+                    }
+                    lastWsAttempt = new Date();
+                    nbWsAttempt = 0;
+                    if (name == 'deno') {
+                        command && command.dispose();
+                        command = undefined;
+                        command = vscode.commands.registerCommand('deno.cache', (uris = []) => {
+                            languageClient.sendRequest(new RequestType('deno/cache'), {
+                                referrer: { uri },
+                                uris: uris.map((uri) => ({ uri }))
+                            });
+                        });
+                    }
                     websocketAlive[name] = true;
                 };
             }
@@ -297,12 +307,20 @@ export async function reloadWebsocket() {
     }
 }
 async function closeWebsockets() {
+    command && command.dispose();
+    command = undefined;
+    monacoServices && monacoServices.dispose();
+    monacoServices = undefined;
     for (const x of websockets) {
         try {
             await x[0].stop();
             x[1].close();
         }
         catch (err) {
+            try {
+                x[1].close();
+            }
+            catch (err) { }
             console.log('error disposing websocket', err);
         }
     }
@@ -329,9 +347,6 @@ async function loadMonaco() {
         minimap: {
             enabled: false
         },
-        scrollbar: {
-            alwaysConsumeMouseWheel: false
-        },
         lightbulb: {
             enabled: true
         }
@@ -392,18 +407,15 @@ async function loadMonaco() {
         }
     }
     if (lang == 'python' || deno) {
-        // install Monaco language client services
         reloadWebsocket();
     }
     return () => {
-        if (editor) {
-            try {
-                closeWebsockets();
-                editor.dispose();
-            }
-            catch (err) {
-                console.log('error disposing editor', err);
-            }
+        try {
+            closeWebsockets();
+            editor && editor.dispose();
+        }
+        catch (err) {
+            console.log('error disposing editor', err);
         }
     };
 }

package/components/FlowBuilder.svelte

@@ -16,6 +16,7 @@ import ScriptSchema from './ScriptSchema.svelte';
 export let initialPath = '';
 let pathError = '';
 let scheduleArgs;
+let previewArgs;
 let scheduleEnabled;
 let scheduleCron;
 let previewOpen = false;
@@ -123,7 +124,7 @@ onDestroy(() => {
 </script>
 
 <div class="flex flex-row w-full h-full justify-between">
-	<div class={`flex flex-col mb-96 m-auto w-1/2`}>
+	<div class={`flex flex-col mb-96 m-auto w-full sm:w-3/4 lg:w-2/3 xl:w-1/2`}>
 		<!-- Nav between steps-->
 		<div class="justify-between flex flex-row w-full my-4">
 			<Breadcrumb>
@@ -176,6 +177,7 @@ onDestroy(() => {
 					bind:scheduleEnabled
 					bind:scheduleCron
 					bind:scheduleArgs
+					bind:previewArgs
 				/>
 				<Button
 					disabled={pathIsEmpty($flowStore.path)}
@@ -205,9 +207,9 @@ onDestroy(() => {
 	<div class={`relative h-screen w-1/3 ${previewOpen ? '' : 'hidden'}`}>
 		<div class="absolute top-0 h-full">
 			{#if $flowStore && step === 1}
-				<div class="fixed border-l-2 right-0 h-screen w-1/3">
+				<div class="fixed border-l-2 right-0 h-screen w-1/2 sm:w-1/3">
 					<FlowPreviewContent
-						bind:args={scheduleArgs}
+						bind:args={previewArgs}
 						on:close={() => (previewOpen = !previewOpen)}
 						on:change={(e) => {
 							previewResults.set(jobsToResults(e.detail))

package/components/FlowEditor.svelte

@@ -14,6 +14,7 @@ export let initialPath = '';
 export let scheduleArgs = {};
 export let scheduleEnabled = false;
 export let scheduleCron = '0 */5 * * *';
+export let previewArgs = {};
 let scheduleLoaded = false;
 async function loadSchedule() {
     if (!scheduleLoaded) {
@@ -30,6 +31,7 @@ async function loadSchedule() {
             scheduleEnabled = schedule.enabled;
             scheduleCron = schedule.schedule;
             scheduleArgs = schedule.args ?? {};
+            previewArgs = JSON.parse(JSON.stringify(scheduleArgs));
         }
     }
 }
@@ -37,7 +39,6 @@ $: if ($flowStore && $workspaceStore && initialPath != '') {
     loadSchedule();
 }
 let open = 0;
-let args = {};
 </script>
 
 {#if $flowStore}
@@ -46,19 +47,21 @@ let args = {};
 			bind:pathError
 			bind:initialPath
 			bind:scheduleArgs
+			{previewArgs}
 			bind:scheduleCron
 			bind:scheduleEnabled
 			bind:open
 		/>
 		<FlowInput />
 		{#each $flowStore?.value.modules as mod, i}
-			<ModuleStep bind:open bind:mod bind:args {i} mode={$mode} />
+			<ModuleStep bind:open bind:mod bind:args={previewArgs} {i} />
 			{#if i == 0 && $mode == 'pull'}
 				<div class="flex justify-center bg-white shadow p-2">
 					<p>
-						Starting from here, the flow for loop over items from the 1rst step's result right above
-						&nbsp; <br />We do not support any other kind of for-loop at the moment but we will very
-						soon (See <a href="https://github.com/windmill-labs/windmill/issues/350">#350</a>)
+						Starting from here, the flow for loop over items from the 1st step's result right above.
+						&nbsp; <br />For-loops insertable at other points is not supported yet but coming soon
+						(See
+						<a href="https://github.com/windmill-labs/windmill/issues/350">#350</a>.)
 					</p>
 					<Tooltip>
 						This flow being in 'Pull' mode, the rest of the flow will for loop over the list of

package/components/FlowEditor.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         scheduleArgs?: Record<string, any> | undefined;
         scheduleEnabled?: boolean | undefined;
         scheduleCron?: string | undefined;
+        previewArgs?: Record<string, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowPreview.svelte

@@ -5,7 +5,7 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import Icon from 'svelte-awesome';
 import FlowJobResult from './FlowJobResult.svelte';
-import { flowToMode, runFlowPreview } from './flows/utils';
+import { runFlowPreview } from './flows/utils';
 import FlowStatusViewer from './FlowStatusViewer.svelte';
 import RunForm from './RunForm.svelte';
 import Tabs from './Tabs.svelte';
@@ -13,7 +13,6 @@ const dispatch = createEventDispatcher();
 export let i;
 export let flow;
 export let schemas = [];
-export let mode;
 export let args = {};
 let stepArgs = {};
 let tab = 'upto';
@@ -27,8 +26,7 @@ $: dispatch('change', jobs);
 export async function runPreview(args) {
     viewPreview = true;
     intervalId && clearInterval(intervalId);
-    let newFlow = flowToMode(flow, mode);
-    newFlow = tab == 'upto' ? truncateFlow(newFlow) : extractStep(newFlow);
+    let newFlow = tab == 'upto' ? truncateFlow(flow) : setInputTransformFromArgs(extractStep(flow), args);
     jobId = await runFlowPreview(args, newFlow);
     jobs = [];
     intervalId = setInterval(loadJob, 1000);
@@ -43,14 +41,19 @@ function extractStep(flow) {
     const localFlow = JSON.parse(JSON.stringify(flow));
     localFlow.value.modules = flow.value.modules.slice(i, i + 1);
     localFlow.schema = schemas[i];
-    stepArgs = {};
-    Object.entries(flow.value.modules[i].input_transform).forEach((x) => {
-        if (x[1].type == 'static') {
-            stepArgs[x[0]] = x[1].value;
-        }
-    });
     return localFlow;
 }
+function setInputTransformFromArgs(flow, args) {
+    let input_transform = {};
+    Object.entries(args).forEach(([key, value]) => {
+        input_transform[key] = {
+            type: 'static',
+            value: value
+        };
+    });
+    flow.value.modules[0].input_transform = input_transform;
+    return flow;
+}
 async function loadJob() {
     try {
         job = await JobService.getJob({ workspace: $workspaceStore, id: jobId });

package/components/FlowPreview.svelte.d.ts

@@ -1,13 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 import { type Flow } from '../gen';
-import type { FlowMode } from './flows/flowStore';
 declare const __propDef: {
     props: {
         i: number;
         flow: Flow;
         schemas?: Schema[] | undefined;
-        mode: FlowMode;
         args?: Record<string, any> | undefined;
         runPreview?: ((args: any) => Promise<void>) | undefined;
     };

package/components/FlowPreviewContent.svelte

@@ -41,8 +41,8 @@ onDestroy(() => {
 });
 </script>
 
-<div class="flex flex-col space-y-4 h-screen bg-white ">
-	<div class="flex flex-col space-y-4 p-6 border-b-2">
+<div class="flex flex-col space-y-4 h-screen bg-white">
+	<div class="flex flex-col space-y-4 p-6 border-b-2 overflow-y-auto grow">
 		<div class="flex justify-between">
 			<h3 class="text-lg leading-6 font-bold text-gray-900">Flow Preview</h3>
 
@@ -51,11 +51,11 @@ onDestroy(() => {
 			</Button>
 		</div>
 		<SchemaForm schema={$flowStore.schema} bind:isValid bind:args />
-		<Button disabled={!isValid} class="blue-button" on:click={() => runPreview(args)} size="md">
-			Preview
-		</Button>
 	</div>
-	<div class="h-full overflow-y-auto mb-16">
+	<Button disabled={!isValid} class="blue-button  mx-4" on:click={() => runPreview(args)} size="md">
+		Preview
+	</Button>
+	<div class="h-full overflow-y-auto mb-16 grow">
 		{#if job}
 			<div class="w-full">
 				<FlowStatusViewer {job} bind:jobs />

package/components/FlowStatusViewer.svelte

@@ -185,6 +185,9 @@ $: $workspaceStore && job && loadResults();
 									>
 									{#if forloop_selected == job.id}
 										<svelte:self {job} />
+										{#if `result` in job}
+											<FlowJobResult {job} />
+										{/if}
 									{/if}
 								{/each}
 							</div>

package/components/FlowViewer.svelte

@@ -41,7 +41,7 @@ function toAny(x) {
 {#if tab == 'ui'}
 	<div class="flow-root w-full pb-4">
 		{#if !embedded}
-			<h2 class="mt-4">{flow.summary}</h2>
+			<h2 class="my-4">{flow.summary}</h2>
 			<SvelteMarkdown source={flow.description ?? ''} />
 
 			<p class="font-black text-lg w-full my-4">
@@ -113,17 +113,19 @@ function toAny(x) {
 														View code and inputs {open[i] ? '(-)' : '(+)'}</button
 													>
 													{#if open[i]}
-														<InputTransformsViewer inputTransforms={mod?.input_transform} />
-														<div class="w-full h-full">
-															<iframe
-																style="height: 400px;"
-																class="w-full h-full  text-sm"
-																title="embedded script from hub"
-																frameborder="0"
-																src="https://hub.windmill.dev/embed/script/{mod?.value?.path?.substring(
-																	4
-																)}"
-															/>
+														<div class="border border-black p-2 bg-gray-50  divide-y">
+															<InputTransformsViewer inputTransforms={mod?.input_transform} />
+															<div class="w-full h-full mt-6">
+																<iframe
+																	style="height: 400px;"
+																	class="w-full h-full  text-sm"
+																	title="embedded script from hub"
+																	frameborder="0"
+																	src="https://hub.windmill.dev/embed/script/{mod?.value?.path?.substring(
+																		4
+																	)}"
+																/>
+															</div>
 														</div>
 													{/if}
 												</div>
@@ -173,5 +175,6 @@ function toAny(x) {
 		<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
 	</div>
 {:else if tab == 'schema'}
+	<div class="my-4" />
 	<SchemaViewer schema={flow.schema} />
 {/if}

package/components/InputTransformForm.svelte

@@ -78,7 +78,7 @@ $: checked = propertyType == 'javascript';
 </script>
 
 {#if arg != undefined}
-	<div class="flex justify-between items-center">
+	<div class="flex justify-between items-center mb-2">
 		<div class="flex items-center">
 			<FieldHeader
 				label={argName}
@@ -199,7 +199,7 @@ $: checked = propertyType == 'javascript';
 					/>
 				</div>
 			</OverlayPropertyPicker>
-			<DynamicInputHelpBox />
+			<DynamicInputHelpBox {i} />
 		{/if}
 	{:else}
 		<p>Not recognized arg type {arg.type}</p>

package/components/InputTransformsViewer.svelte

@@ -10,7 +10,7 @@ export let inputTransforms;
 			<span class="font-black text-gray-700">{key}</span>: {#if val.type == 'static'}<ObjectViewer
 					json={val.value}
 				/>{:else}
-				<span class="inline-block inline-highlight">
+				<span class="inline-highlight">
 					<Highlight offsetTop={0} language={typescript} code={val.expr} />
 				</span>
 			{/if}

package/components/ModuleStep.svelte

@@ -9,12 +9,11 @@ import FlowPreview from './FlowPreview.svelte';
 import FlowBox from './flows/FlowBox.svelte';
 import FlowInputs from './flows/FlowInputs.svelte';
 import FlowModuleHeader from './flows/FlowModuleHeader.svelte';
-import { addModule, createInlineScriptModule, flowStore, loadSchema, pickScript, schemasStore } from './flows/flowStore';
+import { addModule, createInlineScriptModule, flowStore, loadSchema, mode, pickScript, schemasStore } from './flows/flowStore';
 import { getPickableProperties, jobsToResults } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import Tooltip from './Tooltip.svelte';
 export let open;
-export let mode;
 export let i;
 export let mod;
 export let args = {};
@@ -24,9 +23,9 @@ let pickableProperties = undefined;
 let bigEditor = false;
 $: schema = $schemasStore[i];
 $: shouldPick = 'path' in mod.value && mod.value.path === '' && !('language' in mod.value);
-$: pickableProperties = getPickableProperties($flowStore?.schema, args, $previewResults, mode, i);
+$: pickableProperties = getPickableProperties($flowStore?.schema, args, $previewResults, $mode, i);
 $: extraLib = buildExtraLib(schemaToTsType($flowStore?.schema), i === 0 ? schemaToTsType($flowStore?.schema) : objectToTsType($previewResults[i]));
-const isTrigger = mode === 'pull' && i === 0;
+const isTrigger = $mode === 'pull' && i === 0;
 </script>
 
 <button
@@ -75,14 +74,14 @@ const isTrigger = mode === 'pull' && i === 0;
 					<FlowInputs
 						{isTrigger}
 						on:pick={(e) => pickScript(e.detail.path, i)}
-						on:new={(e) => createInlineScriptModule(e.detail.language, i, mode)}
+						on:new={(e) => createInlineScriptModule(e.detail.language, i, $mode)}
 					/>
 				{/if}
 				{#if mod.value.type === 'rawscript'}
 					<div class="mb-2 overflow-hidden">
 						<EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
 					</div>
-					<div>
+					<div on:mouseleave={() => loadSchema(i)}>
 						<Editor
 							bind:websocketAlive
 							bind:this={editor}
@@ -127,7 +126,6 @@ const isTrigger = mode === 'pull' && i === 0;
 						bind:args
 						flow={$flowStore}
 						{i}
-						{mode}
 						schemas={$schemasStore}
 						on:change={(e) => {
 							previewResults.set(jobsToResults(e.detail))

package/components/ModuleStep.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 import { type FlowModule } from '../gen';
-import { type FlowMode } from './flows/flowStore';
 declare const __propDef: {
     props: {
         open: number;
-        mode: FlowMode;
         i: number;
         mod: FlowModule;
         args?: Record<string, any> | undefined;

package/components/ObjectResourceInput.svelte

@@ -42,8 +42,8 @@ function valueToPath() {
 $: value && valueToPath();
 </script>
 
-<div class="flex flex-row w-full gap-2">
-	<div class="shrink w-40">
+<div class="flex flex-row w-full flex-wrap gap-x-2">
+	<div class="shrink">
 		<RadioButton
 			options={[
 				[`Resource (${resourceTypeName})`, 'resource'],

package/components/RadioButton.svelte

@@ -12,7 +12,7 @@ const dispatch = createEventDispatcher();
 		{#each options as [label, val]}
 			<label
 				class:item-button-selected={val == value}
-				class="item-button text-center text-sm h-full p-2 grow"
+				class="item-button text-center text-sm h-full p-2 grow whitespace-nowrap"
 			>
 				<input
 					type="radio"
@@ -23,7 +23,9 @@ const dispatch = createEventDispatcher();
 					on:click={() => dispatch('change', val)}
 				/>
 				<p>
-					{#if typeof label !== 'string'}{label.title} <Tooltip>{label.desc}</Tooltip>
+					{#if typeof label !== 'string'}
+						{label.title}
+						<Tooltip>{label.desc}</Tooltip>
 					{:else}{label}{/if}
 				</p>
 			</label>

package/components/SchemaEditor.svelte

@@ -126,7 +126,7 @@ function switchTab() {
 </script>
 
 <div class="flex flex-col">
-	<div class="flex justify-between">
+	<div class="flex justify-between gap-x-2">
 		<Button
 			on:click={() => {
 				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
@@ -176,8 +176,12 @@ function switchTab() {
 										<SchemaEditorProperty {property} />
 									</td>
 									<td>{property.description}</td>
-									<td>{JSON.stringify(property.default) ?? ''}</td>
-									<td>{schema.required.includes(name) ? 'Required' : 'Optional'}</td>
+									<td>{property.default ? JSON.stringify(property.default) : ''}</td>
+									<td
+										>{#if schema.required.includes(name)}
+											<span class="text-red-600 font-bold text-lg">*</span>
+										{/if}</td
+									>
 									<td class="justify-end flex">
 										<Button
 											color="red"

package/components/SchemaEditorProperty.svelte

@@ -2,10 +2,12 @@
 export let property;
 </script>
 
-<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
-{#if property.format}
-	<Badge color="green">{property.format?.toUpperCase()}</Badge>
-{/if}
-{#if property.contentEncoding}
-	<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
-{/if}
+<div class="flex flex-row flex-wrap gap-1">
+	<Badge color="blue">{property.type?.toUpperCase() ?? 'ANY'}</Badge>
+	{#if property.format}
+		<Badge color="green">{property.format?.toUpperCase()}</Badge>
+	{/if}
+	{#if property.contentEncoding}
+		<Badge color="indigo">{property.contentEncoding?.toUpperCase()}</Badge>
+	{/if}
+</div>

package/components/SchemaViewer.svelte

@@ -58,7 +58,11 @@ let viewJsonSchema = false;
 									>{property.format ?? ''}
 									{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}</td
 								>
-								<td>{schema.required.includes(name) ? 'required' : 'optional'}</td>
+								<td
+									>{#if schema.required.includes(name)}
+										<span class="text-red-600 font-bold text-lg">*</span>
+									{/if}</td
+								>
 							</tr>
 						{/each}
 					</tbody>

package/components/ScriptEditor.svelte

@@ -206,7 +206,13 @@ onDestroy(() => {
 			<div class="header">
 				<EditorBar {editor} {lang} {websocketAlive} />
 			</div>
-			<div class="flex-1 overflow-hidden border p-2 rounded">
+			<div
+				class="flex-1 overflow-hidden border p-2 rounded"
+				on:mouseleave={() => {
+					code = getEditor().getCode()
+					inferSchema()
+				}}
+			>
 				<Editor
 					{code}
 					bind:websocketAlive

package/components/flows/DynamicInputHelpBox.svelte

@@ -1,6 +1,7 @@
 <script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { slide } from 'svelte/transition';
+export let i = 1;
 $: opened = false;
 </script>
 
@@ -25,29 +26,29 @@ $: opened = false;
 	>
 		<p class="font-bold">Dynamic arg help</p>
 		<p>
-			When a field is "dynamic", its value is computed dynamically as the evaluation of its
-			corresponding typescript snippet.
+			When a field is using the "Raw Javascript Editor", its value is computed dynamically as the
+			evaluation of its corresponding javascript snippet.
 		</p>
-		That snippet can be single line:
+		That snippet can be a single line:
 		<pre><code>last_result.myarg</code></pre>
-		or multiline:
+		or a multiline:
 		<pre><code
 				>let x = 5;
 x + 2</code
 			></pre>
 		<p>
-			If it is multiline, the last statement before the final expression<b
+			If it is multiline, the statement before the final expression <b
 				>MUST END WITH ; and a newline</b
 			>
 		</p>
 		The snippet can also be a string template:
-		<pre><code
-				>`Hello $&#123;params.name&#125;, all your base $&#123;previous_result.base_name&#125;
-belong to us`</code
-			></pre>
+		<code
+			>`Hello $&#123;params.name&#125;, all your base $&#123;previous_result.base_name&#125; belong
+			to us`</code
+		>
 		However, the last line must always be the final expression.
 		<p>
-			The snippet can use any typescript primitives, and the following flow specific objects and
+			The snippet can use any javascript primitives, and the following flow specific objects and
 			functions:
 		</p>
 		<ul class="ml-4">
@@ -68,5 +69,9 @@ belong to us`</code
 				<b>resource(path)</b>: the function returning the resource at a given path as an object
 			</li>
 		</ul>
+		<p>To re-enable editor assistance, import the helper functions types using:</p>
+		<code
+			>{`import { previous_result, flow_input, step, variable, resource, params } from 'windmill@${i}'`}</code
+		>
 	</div>
 {/if}

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

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        i?: number | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/flows/FlowInputs.svelte

@@ -1,5 +1,5 @@
 <script>import { RawScript } from '../../gen';
-import { faCode } from '@fortawesome/free-solid-svg-icons';
+import { faCode, faRepeat } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from './pickers/FlowScriptPicker.svelte';
 import PickHubScript from './pickers/PickHubScript.svelte';
@@ -12,20 +12,34 @@ const dispatch = createEventDispatcher();
 	<PickScript {isTrigger} on:pick />
 	<PickHubScript {isTrigger} on:pick />
 	<FlowScriptPicker
-		label="New Typescript {isTrigger ? 'trigger ' : ''}script (Deno)"
+		label={`Create a for-loop here (coming soon)`}
+		disabled={true}
+		icon={faRepeat}
+		iconColor="text-blue-500"
+	/>
+
+	<FlowScriptPicker
+		label={`New Postgres SQL query`}
 		icon={faCode}
 		iconColor="text-blue-800"
-		on:click={() => dispatch('new', { language: RawScript.language.DENO })}
+		on:click={() => dispatch('pick', { path: 'hub/130/execute_custom_query_postgresql' })}
 	/>
 
 	<FlowScriptPicker
 		disabled={isTrigger}
 		label="New Python {isTrigger ? 'trigger ' : ''}script (3.10)"
 		icon={faCode}
-		iconColor="text-yellow-500"
+		iconColor="text-green-500"
 		on:click={() => dispatch('new', { language: RawScript.language.PYTHON3 })}
 		tooltip={isTrigger
 			? 'Python is not supported for trigger scripts yet but is supported for every other steps'
 			: undefined}
 	/>
+
+	<FlowScriptPicker
+		label="New Typescript {isTrigger ? 'trigger ' : ''}script (Deno)"
+		icon={faCode}
+		iconColor="text-blue-800"
+		on:click={() => dispatch('new', { language: RawScript.language.DENO })}
+	/>
 </div>

package/components/flows/FlowSettings.svelte

@@ -1,6 +1,6 @@
 <script>import { sendUserToast } from '../../utils';
 import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons';
-import { Dropdown, DropdownItem } from 'flowbite-svelte';
+import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
 import Icon from 'svelte-awesome';
 import Editor from '../Editor.svelte';
 import FlowViewer from '../FlowViewer.svelte';
@@ -19,6 +19,7 @@ import Tooltip from './../Tooltip.svelte';
 import FlowBoxHeader from './FlowBoxHeader.svelte';
 export let pathError = '';
 export let initialPath = '';
+export let previewArgs = {};
 export let scheduleArgs = {};
 export let scheduleEnabled = false;
 export let scheduleCron = '0 */5 * * *';
@@ -161,12 +162,21 @@ let jsonValue = '';
 						right: 'enabled'
 					}}
 				/>
-				<div class="p-2 mt-2 rounded" class:bg-gray-300={!scheduleEnabled}>
+				<div class="p-2 my-2 rounded" class:bg-gray-300={!scheduleEnabled}>
 					{#if !scheduleEnabled}
 						<span class="font-black">No next scheduled run when disabled</span>
 					{/if}
 					<CronInput bind:schedule={scheduleCron} />
 				</div>
+				<div class="flex flex-row-reverse">
+					<Button
+						color="alternative"
+						size="sm"
+						on:click={() => (scheduleArgs = JSON.parse(JSON.stringify(previewArgs)))}
+					>
+						Copy from preview arguments
+					</Button>
+				</div>
 				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
 			</CollapseLink>
 		{/if}

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         pathError?: string | undefined;
         initialPath?: string | undefined;
+        previewArgs?: Record<string, any> | undefined;
         scheduleArgs?: Record<string, any> | undefined;
         scheduleEnabled?: boolean | undefined;
         scheduleCron?: string | undefined;

package/logout.d.ts

@@ -1,2 +1,2 @@
 export declare function logoutWithRedirect(rd?: string): void;
-export declare function logout(logoutMessage?: string): Promise<void>;
+export declare function logout(): Promise<void>;

package/logout.js

@@ -6,22 +6,24 @@ function clearCookies() {
     document.cookie.split(";").forEach(function (c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
 }
 export function logoutWithRedirect(rd) {
-    const error = document.cookie.includes('token')
-        ? `error=${encodeURIComponent('You have been logged out because your session has expired.')}&`
-        : '';
-    clearCookies();
-    goto(`/user/login?${error}${rd ? 'rd=' + encodeURIComponent(rd) : ''}`);
+    if (rd?.split('?')[0] != '/user/login') {
+        const error = document.cookie.includes('token')
+            ? `error=${encodeURIComponent('You have been logged out because your session has expired.')}&`
+            : '';
+        clearCookies();
+        goto(`/user/login?${error}${rd ? 'rd=' + encodeURIComponent(rd) : ''}`);
+    }
 }
-export async function logout(logoutMessage) {
+export async function logout() {
     try {
         clearStores();
         await UserService.logout();
         clearCookies();
-        goto(`/user/login${logoutMessage ? '?error=' + encodeURIComponent(logoutMessage) : ''}`);
-        sendUserToast('you have been logged out');
     }
     catch (error) {
-        goto('/user/login');
         console.error(error);
+        clearCookies();
     }
+    goto(`/user/login`);
+    sendUserToast('you have been logged out');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.28.4",
+  "version": "1.28.7",
   "devDependencies": {
     "@playwright/test": "^1.24.2",
     "@sveltejs/adapter-static": "^1.0.0-next.37",