windmill-components 1.28.4 → 1.28.5

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

package/components/Editor.svelte

@@ -179,13 +179,32 @@ 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();
+                    reader.onClose(async () => {
+                        try {
+                            console.log('CLOSE');
+                            websocketAlive[name] = false;
+                            await languageClient.stop();
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    });
+                    socket.onClose((_code, _reason) => {
+                        websocketAlive[name] = false;
+                    });
+                    try {
+                        await languageClient.start();
+                    }
+                    catch (err) {
+                        console.error(err);
+                        throw new Error(err);
+                    }
                     lastWsAttempt = new Date();
                     nbWsAttempt = 0;
                     if (name == 'deno') {
@@ -200,18 +219,6 @@ export async function reloadWebsocket() {
                             }
                         });
                     }
-                    reader.onClose(() => {
-                        try {
-                            console.log('CLOSE');
-                            languageClient.stop();
-                        }
-                        catch (err) {
-                            console.error(err);
-                        }
-                    });
-                    socket.onClose((_code, _reason) => {
-                        websocketAlive[name] = false;
-                    });
                     websocketAlive[name] = true;
                 };
             }
@@ -329,9 +336,6 @@ async function loadMonaco() {
         minimap: {
             enabled: false
         },
-        scrollbar: {
-            alwaysConsumeMouseWheel: false
-        },
         lightbulb: {
             enabled: true
         }

package/components/FlowBuilder.svelte

@@ -123,7 +123,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>
@@ -205,7 +205,7 @@ 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}
 						on:close={() => (previewOpen = !previewOpen)}

package/components/FlowPreview.svelte

@@ -27,8 +27,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 +42,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/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/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

@@ -82,7 +82,7 @@ const isTrigger = mode === 'pull' && i === 0;
 					<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}

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/FlowSettings.svelte

@@ -161,12 +161,13 @@ 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>
+
 				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
 			</CollapseLink>
 		{/if}

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.5",
   "devDependencies": {
     "@playwright/test": "^1.24.2",
     "@sveltejs/adapter-static": "^1.0.0-next.37",