windmill-components 1.28.1 → 1.28.4

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() {
@@ -240,6 +242,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 +293,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/DisplayResult.svelte

@@ -4,15 +4,12 @@ import TableCustom from './TableCustom.svelte';
 import { truncate } from '../utils';
 export let result;
 let resultKind = inferResultKind(result);
-function isArray(obj) {
-    return Object.prototype.toString.call(obj) === '[object Array]';
-}
 function isRectangularArray(obj) {
-    if (!isArray(obj) || obj.length == 0) {
+    if (!Array.isArray(obj) || obj.length == 0) {
         return false;
     }
     if (!Object.values(obj)
-        .map(isArray)
+        .map(Array.isArray)
         .reduce((a, b) => a && b)) {
         return false;
     }
@@ -28,10 +25,10 @@ function inferResultKind(result) {
     if (result) {
         try {
             let keys = Object.keys(result);
-            if (keys.length == 1 && isRectangularArray(result[keys[0]])) {
+            if (isRectangularArray(result)) {
                 return 'table-row';
             }
-            else if (keys.map((k) => isArray(result[k])).reduce((a, b) => a && b)) {
+            else if (keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b)) {
                 return 'table-col';
             }
             else if (keys.length == 1 && keys[0] == 'png') {
@@ -51,7 +48,7 @@ function inferResultKind(result) {
 </script>
 
 {#if result}
-	{#if Object.keys(result).length > 0}<div>
+	{#if typeof result == 'object' && Object.keys(result).length > 0}<div>
 			The result keys are: <b>{Object.keys(result).join(', ')}</b>
 		</div>
 	{/if}

package/components/FlowBuilder.svelte

@@ -102,6 +102,9 @@ async function saveFlow() {
     goto(`/flows/get/${$flowStore.path}`);
 }
 async function changeStep(step) {
+    if (step === 2 && previewOpen) {
+        previewOpen = false;
+    }
     goto(`?step=${step}`);
 }
 flowStore.subscribe((flow) => {
@@ -120,7 +123,7 @@ onDestroy(() => {
 </script>
 
 <div class="flex flex-row w-full h-full justify-between">
-	<div class="flex flex-col max-w-screen-md mb-96 m-auto">
+	<div class={`flex flex-col mb-96 m-auto w-1/2`}>
 		<!-- Nav between steps-->
 		<div class="justify-between flex flex-row w-full my-4">
 			<Breadcrumb>
@@ -186,19 +189,6 @@ onDestroy(() => {
 
 					<Icon data={faPlay} class="ml-2" />
 				</Button>
-				<div class={`relative h-screen w-1/3 ${previewOpen ? '' : 'hidden'}`}>
-					<div class="absolute top-0 h-full">
-						<div class="fixed border-l-2 right-0 h-screen w-1/3">
-							<FlowPreviewContent
-								bind:args={scheduleArgs}
-								on:close={() => (previewOpen = !previewOpen)}
-								on:change={(e) => {
-									previewResults.set(jobsToResults(e.detail))
-								}}
-							/>
-						</div>
-					</div>
-				</div>
 			{:else if step === 2}
 				<ScriptSchema
 					synchronizedHeader={false}
@@ -211,4 +201,20 @@ onDestroy(() => {
 			<p>Loading</p>
 		{/if}
 	</div>
+
+	<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">
+					<FlowPreviewContent
+						bind:args={scheduleArgs}
+						on:close={() => (previewOpen = !previewOpen)}
+						on:change={(e) => {
+							previewResults.set(jobsToResults(e.detail))
+						}}
+					/>
+				</div>
+			{/if}
+		</div>
+	</div>
 </div>

package/components/FlowEditor.svelte

@@ -55,7 +55,11 @@ let args = {};
 			<ModuleStep bind:open bind:mod bind:args {i} mode={$mode} />
 			{#if i == 0 && $mode == 'pull'}
 				<div class="flex justify-center bg-white shadow p-2">
-					Starting from here, the flow for loop over items from step 1's result above &nbsp;
+					<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>)
+					</p>
 					<Tooltip>
 						This flow being in 'Pull' mode, the rest of the flow will for loop over the list of
 						items returned by the trigger script right above. Retrieve the item value using

package/components/FlowViewer.svelte

@@ -7,7 +7,10 @@ import { slide } from 'svelte/transition';
 import Tabs from './Tabs.svelte';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import SvelteMarkdown from 'svelte-markdown';
 export let flow;
+export let initialOpen = undefined;
 let flowFiltered = {
     summary: flow.summary,
     description: flow.description,
@@ -17,7 +20,9 @@ let flowFiltered = {
 export let embedded = false;
 export let tab = 'ui';
 let open = {};
-let hubCode = {};
+if (initialOpen) {
+    open[initialOpen] = true;
+}
 function toAny(x) {
     return x;
 }
@@ -37,7 +42,7 @@ function toAny(x) {
 	<div class="flow-root w-full pb-4">
 		{#if !embedded}
 			<h2 class="mt-4">{flow.summary}</h2>
-			<h3 class="mt-4">{flow.description}</h3>
+			<SvelteMarkdown source={flow.description ?? ''} />
 
 			<p class="font-black text-lg w-full my-4">
 				<span>Inputs</span>
@@ -89,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
@@ -104,9 +110,10 @@ function toAny(x) {
 														}}
 														class="mb-2 underline text-black"
 													>
-														View code {open[i] ? '(-)' : '(+)'}</button
+														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;"
@@ -131,6 +138,8 @@ function toAny(x) {
 
 											{#if open[i]}
 												<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
+													<InputTransformsViewer inputTransforms={mod?.input_transform} />
+
 													<Highlight
 														language={mod?.value?.language == 'deno' ? typescript : python}
 														code={mod?.value?.content}

package/components/FlowViewer.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
             value: FlowValue;
             schema?: any;
         };
+        initialOpen?: number | undefined;
         embedded?: boolean | undefined;
         tab?: "json" | "schema" | "ui" | undefined;
     };

package/components/InputTransformsViewer.svelte

@@ -0,0 +1,19 @@
+<script>import { Highlight } from 'svelte-highlight';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import typescript from 'svelte-highlight/languages/typescript';
+export let inputTransforms;
+</script>
+
+<ul class="mb-1">
+	{#each Object.entries(inputTransforms) as [key, val]}
+		<li>
+			<span class="font-black text-gray-700">{key}</span>: {#if val.type == 'static'}<ObjectViewer
+					json={val.value}
+				/>{:else}
+				<span class="inline-block inline-highlight">
+					<Highlight offsetTop={0} language={typescript} code={val.expr} />
+				</span>
+			{/if}
+		</li>
+	{/each}
+</ul>

package/components/InputTransformsViewer.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputTransform } from '../gen';
+declare const __propDef: {
+    props: {
+        inputTransforms: Record<string, InputTransform>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputTransformsViewerProps = typeof __propDef.props;
+export declare type InputTransformsViewerEvents = typeof __propDef.events;
+export declare type InputTransformsViewerSlots = typeof __propDef.slots;
+export default class InputTransformsViewer extends SvelteComponentTyped<InputTransformsViewerProps, InputTransformsViewerEvents, InputTransformsViewerSlots> {
+}
+export {};

package/components/flows/utils.js

@@ -13,6 +13,9 @@ export function flowToMode(flow, mode) {
             if (inp.type == 'javascript') {
                 //@ts-ignore
                 inp.value = undefined;
+                inp.expr = inp.expr.split('\n')
+                    .filter((x) => x != '' && !x.startsWith(`import { previous_result, flow_input, step, variable, resource, params } from 'windmill@`))
+                    .join('\n');
             }
             else {
                 //@ts-ignore
@@ -24,16 +27,17 @@ export function flowToMode(flow, mode) {
         const triggerModule = newFlow.value.modules[0];
         const oldModules = newFlow.value.modules.slice(1);
         if (triggerModule) {
-            triggerModule.stop_after_if_expr = 'result.res1.length == 0';
+            triggerModule.stop_after_if_expr = 'result.length == 0';
             triggerModule.skip_if_stopped = true;
         }
         newFlow.value.modules = newFlow.value.modules.slice(0, 1);
         if (oldModules.length > 0) {
             newFlow.value.modules.push({
-                input_transform: oldModules[0].input_transform,
+                //TODO: once we allow arbitrary for loop, we will also allow arbitrary input transform here
+                input_transform: {},
                 value: {
                     type: 'forloopflow',
-                    iterator: { type: 'javascript', expr: 'result.res1' },
+                    iterator: { type: 'javascript', expr: 'result' },
                     value: {
                         modules: oldModules
                     },
@@ -119,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}`;
@@ -192,13 +192,17 @@ export async function runFlowPreview(args, flow) {
     });
 }
 function computeFlowInputPull(previewResult, flowInputAsObject) {
-    const iteratorValues = (previewResult?.res1 && Array.isArray(previewResult.res1)) ?
+    const iteratorValues = (previewResult && Array.isArray(previewResult)) ?
         {
-            _value: previewResult.res1[0],
-            _index: `The current index of the iteration as a number (here from 0 to ${previewResult.res1.length - 1})`
+            iter: {
+                value: previewResult[0],
+                index: `The current index of the iteration as a number (here from 0 to ${previewResult.length - 1})`
+            }
         } : {
-        _value: 'The current value of the iteration as an object',
-        _index: 'The current index of the iteration as a number'
+        iter: {
+            value: 'The current value of the iteration as an object',
+            index: 'The current index of the iteration as a number'
+        }
     };
-    return Object.assign(Object.assign(flowInputAsObject, previewResult), iteratorValues);
+    return Object.assign(flowInputAsObject, iteratorValues);
 }

package/components/propertyPicker/ObjectViewer.svelte

@@ -7,6 +7,7 @@ export let level = 0;
 export let isLast = true;
 export let currentPath = '';
 export let pureViewer = false;
+export let collapsed = level == 3 || Array.isArray(json);
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -18,7 +19,6 @@ $: {
     openBracket = isArray ? '[' : '{';
     closeBracket = isArray ? ']' : '}';
 }
-$: collapsed = level == 2;
 function collapse() {
     collapsed = !collapsed;
 }

package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         isLast?: boolean | undefined;
         currentPath?: string | undefined;
         pureViewer?: boolean | undefined;
+        collapsed?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.28.1",
+  "version": "1.28.4",
   "devDependencies": {
     "@playwright/test": "^1.24.2",
     "@sveltejs/adapter-static": "^1.0.0-next.37",
@@ -82,6 +82,7 @@
     "./components/GroupModal.svelte": "./components/GroupModal.svelte",
     "./components/IconedResourceType.svelte": "./components/IconedResourceType.svelte",
     "./components/InputTransformForm.svelte": "./components/InputTransformForm.svelte",
+    "./components/InputTransformsViewer.svelte": "./components/InputTransformsViewer.svelte",
     "./components/InviteGlobalUser.svelte": "./components/InviteGlobalUser.svelte",
     "./components/InviteUser.svelte": "./components/InviteUser.svelte",
     "./components/ItemPicker.svelte": "./components/ItemPicker.svelte",
@@ -273,4 +274,4 @@
     "./user": "./user.js",
     "./utils": "./utils.js"
   }
-}
+}

package/script_helpers.d.ts

@@ -1,4 +1,4 @@
-export declare const PYTHON_INIT_CODE = "import os\nimport wmill\nfrom datetime import datetime\n# Our webeditor includes a syntax, type checker through a language server running pyright\n# and the autoformatter Black in our servers. Use Cmd/Ctrl + S to autoformat the code.\n# Beware that the code is only saved when you click Save and not across reload.\n# You can however navigate to any steps safely.\n\"\"\"\nThe client is used to interact with windmill itself through its standard API.\nOne can explore the methods available through autocompletion of `client.XXX`.\nOnly the most common methods are included for ease of use. Request more as\nfeedback if you feel you are missing important ones.\n\"\"\"\ndef main(name: str = \"Nicolas Bourbaki\",\n         age: int = 42,\n         obj: dict = {\"even\": \"dicts\"},\n         l: list = [\"or\", \"lists!\"],\n         file_: bytes = bytes(0),\n         dtime: datetime = datetime.now()):\n    \"\"\"A main function is required for the script to be able to accept arguments.\n    Types are recommended.\"\"\"\n    print(f\"Hello World and a warm welcome especially to {name}\")\n    print(\"and its acolytes..\", age, obj, l, len(file_), dtime)\n    # retrieve variables, including secrets by querying the windmill platform.\n    # secret fetching is audited by windmill.\n    secret = wmill.get_variable(\"g/all/pretty_secret\")\n    print(f\"The env variable at `g/all/pretty_secret`: {secret}\")\n    # interact with the windmill platform to get the version\n    version = wmill.get_version()\n    # fetch reserved variables as environment variables\n    user = os.environ.get(\"WM_USERNAME\")\n    # the return value is then parsed and can be retrieved by other scripts conveniently\n    return {\"version\": version, \"splitted\": name.split(), \"user\": user}\n";
+export declare const PYTHON_INIT_CODE = "import os\nimport wmill\nfrom datetime import datetime\n\n\"\"\"\nUse Cmd/Ctrl + S to autoformat the code.\nThe client is used to interact with windmill itself through its standard API.\nOne can explore the methods available through autocompletion of `wmill.XXX`.\n\"\"\"\n\ndef main(name: str = \"Nicolas Bourbaki\",\n         age: int = 42,\n         obj: dict = {\"even\": \"dicts\"},\n         l: list = [\"or\", \"lists!\"],\n         file_: bytes = bytes(0),\n         dtime: datetime = datetime.now()):\n    \"\"\"A main function is required for the script to be able to accept arguments.\n    Types are recommended.\"\"\"\n    print(f\"Hello World and a warm welcome especially to {name}\")\n    print(\"and its acolytes..\", age, obj, l, len(file_), dtime)\n    # retrieve variables, including secrets by querying the windmill platform.\n    # secret fetching is audited by windmill.\n    secret = wmill.get_variable(\"g/all/pretty_secret\")\n    print(f\"The env variable at `g/all/pretty_secret`: {secret}\")\n    # interact with the windmill platform to get the version\n    version = wmill.get_version()\n    # fetch reserved variables as environment variables\n    user = os.environ.get(\"WM_USERNAME\")\n    # the return value is then parsed and can be retrieved by other scripts conveniently\n    return {\"version\": version, \"splitted\": name.split(), \"user\": user}\n";
 export declare const DENO_INIT_CODE: string;
 export declare const DENO_INIT_CODE_TRIGGER: string;
 export declare function initialCode(language: 'deno' | 'python3', is_trigger: boolean): string;

package/script_helpers.js

@@ -1,16 +1,13 @@
 export const PYTHON_INIT_CODE = `import os
 import wmill
 from datetime import datetime
-# Our webeditor includes a syntax, type checker through a language server running pyright
-# and the autoformatter Black in our servers. Use Cmd/Ctrl + S to autoformat the code.
-# Beware that the code is only saved when you click Save and not across reload.
-# You can however navigate to any steps safely.
+
 """
+Use Cmd/Ctrl + S to autoformat the code.
 The client is used to interact with windmill itself through its standard API.
-One can explore the methods available through autocompletion of \`client.XXX\`.
-Only the most common methods are included for ease of use. Request more as
-feedback if you feel you are missing important ones.
+One can explore the methods available through autocompletion of \`wmill.XXX\`.
 """
+
 def main(name: str = "Nicolas Bourbaki",
          age: int = 42,
          obj: dict = {"even": "dicts"},