windmill-components 1.28.6 → 1.28.7

package/components/ArgInput.svelte

@@ -271,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,
@@ -199,24 +202,24 @@ export async function reloadWebsocket() {
                         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') {
-                        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 }))
-                                    });
-                                });
-                            }
+                        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;
@@ -304,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);
         }
     }
@@ -396,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;
@@ -176,6 +177,7 @@ onDestroy(() => {
 					bind:scheduleEnabled
 					bind:scheduleCron
 					bind:scheduleArgs
+					bind:previewArgs
 				/>
 				<Button
 					disabled={pathIsEmpty($flowStore.path)}
@@ -207,7 +209,7 @@ onDestroy(() => {
 			{#if $flowStore && step === 1}
 				<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';

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/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">
@@ -175,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/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,7 +74,7 @@ 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'}
@@ -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/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 * * *';
@@ -167,7 +168,15 @@ let jsonValue = '';
 					{/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/package.json

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