windmill-components 1.28.3 → 1.28.6

package/components/ArgInput.svelte

@@ -50,14 +50,16 @@ $: {
         evalValueToRaw();
         validateInput(pattern, value);
     }
-    if (defaultValue) {
-        let stringified = JSON.stringify(defaultValue, null, 4);
-        if (stringified.length > 50) {
-            minRows = 3;
-        }
-        if (type != 'string') {
-            minRows = Math.max(minRows, Math.min(stringified.split(/\r\n|\r|\n/).length + 1, maxRows));
-        }
+}
+$: {
+    defaultValue && recomputeRowSize(JSON.stringify(defaultValue, null, 4));
+}
+function recomputeRowSize(str) {
+    if (str.length > 50) {
+        minRows = 3;
+    }
+    if (type != 'string') {
+        minRows = Math.max(minRows, Math.min(str.split(/\r\n|\r|\n/).length + 1, maxRows));
     }
 }
 export function evalValueToRaw() {
@@ -112,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} />
@@ -156,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
@@ -240,6 +247,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<textarea
 					{disabled}
 					style="min-height: {minHeight}; max-height: {maxHeight}"
+					on:input={async () => recomputeRowSize(rawValue ?? '')}
 					class="col-span-10 {valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
@@ -290,7 +298,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
 					placeholder={defaultValue ?? ''}
 					bind:value
-					on:input={() => dispatch('input', { rawValue: value, isRaw: false })}
+					on:input={async () => {
+						recomputeRowSize(value)
+						dispatch('input', { rawValue: value, isRaw: false })
+					}}
 				/>
 			{/if}
 			{#if !required && inputCat != 'resource-object'}

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

@@ -94,6 +94,7 @@ function toAny(x) {
 							</div>
 							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 								<div class="w-full">
+									<span class="text-black">{mod?.summary ?? ''}</span>
 									<p class="text-sm text-gray-500">
 										{#if mod?.value?.type == 'script'}
 											Script at path <a
@@ -112,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>

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/components/flows/utils.js

@@ -123,18 +123,14 @@ export async function loadSchemaFromModule(module) {
         schema: emptySchema()
     };
 }
+const returnStatementRegex = new RegExp(/\$\{(.*)\}/);
 export function isCodeInjection(expr) {
     if (!expr) {
         return false;
     }
     const lines = expr.split('\n');
     const [returnStatement] = lines.reverse();
-    const returnStatementRegex = new RegExp(/\$\{(.*)\}/);
-    if (returnStatementRegex.test(returnStatement)) {
-        const [_, argName] = returnStatement.split(returnStatementRegex);
-        return Boolean(argName);
-    }
-    return false;
+    return returnStatementRegex.test(returnStatement);
 }
 export function getDefaultExpr(i, key = 'myfield', previousExpr) {
     const expr = previousExpr ?? `previous_result.${key}`;

package/gen/core/OpenAPI.js

@@ -1,6 +1,6 @@
 export const OpenAPI = {
     BASE: '/api',
-    VERSION: '1.27.2',
+    VERSION: '1.28.1',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',
     TOKEN: undefined,

package/gen/models/FlowModule.d.ts

@@ -5,4 +5,5 @@ export declare type FlowModule = {
     value: FlowModuleValue;
     stop_after_if_expr?: string;
     skip_if_stopped?: boolean;
+    summary?: string;
 };

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