windmill-components 1.28.5 → 1.34.0

package/components/ModuleStep.svelte

@@ -1,7 +1,5 @@
 <script>import { RawScript } from '../gen';
-import { previewResults } from '../stores';
-import { buildExtraLib, objectToTsType, schemaToTsType } from '../utils';
-import { faChevronDown, faChevronUp, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import Editor from './Editor.svelte';
 import EditorBar from './EditorBar.svelte';
@@ -9,80 +7,81 @@ 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 { getPickableProperties, jobsToResults } from './flows/utils';
+import { flowStore } from './flows/flowStore';
+import { createInlineScriptModule, createLoop, fork, loadFlowModuleSchema, pickScript, createScriptFromInlineScript, isEmptyFlowModule, getStepPropPicker } from './flows/flowStateUtils';
 import SchemaForm from './SchemaForm.svelte';
-import Tooltip from './Tooltip.svelte';
-export let open;
-export let mode;
-export let i;
+import { flowStateStore } from './flows/flowState';
+import { stepOpened } from './flows/stepOpenedStore';
+export let indexes;
 export let mod;
 export let args = {};
+export let schema;
+export let childFlowModules = undefined;
 let editor;
 let websocketAlive = { pyright: false, black: false, deno: false };
-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);
-$: extraLib = buildExtraLib(schemaToTsType($flowStore?.schema), i === 0 ? schemaToTsType($flowStore?.schema) : objectToTsType($previewResults[i]));
-const isTrigger = mode === 'pull' && i === 0;
+const i = indexes[0];
+$: shouldPick = isEmptyFlowModule(mod);
+$: stepPropPicker = getStepPropPicker(indexes, $flowStore.schema, $flowStateStore, args);
+async function apply(fn, arg) {
+    const flowModuleSchema = await fn(arg);
+    mod = flowModuleSchema.flowModule;
+    schema = flowModuleSchema.schema;
+    if (flowModuleSchema.childFlowModules) {
+        childFlowModules = flowModuleSchema.childFlowModules;
+    }
+}
+async function reload(flowModule) {
+    apply(loadFlowModuleSchema, flowModule);
+}
+async function applyCreateLoop() {
+    await apply(createLoop, null);
+    stepOpened.update(() => `${indexes[0]}-0`);
+}
+$: opened = $stepOpened === String(indexes.join('-'));
 </script>
 
-<button
-	class="rounded-full h-10 w-10 bg-white border-2 border-gray-400"
-	on:click={() => {
-		addModule(i)
-		open = i
-	}}
+<FlowBox
+	headerClickable={true}
+	on:clickheader={() => ($stepOpened = !opened ? String(indexes.join('-')) : undefined)}
 >
-	<Icon class="text-gray-400 mb-1" data={faPlus} />
-</button>
-<FlowBox>
-	<div id="module-{i}">
-		<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
-			<div>
-				<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
-				{#if isTrigger}
-					<h3 class="font-bold">
-						Trigger Script
-						<Tooltip>
-							When a flow is 'Pull', the first step is a trigger script. Trigger scripts are scripts
-							that must return a list which are the new items to be treated one by one by the rest
-							of the flow, usually the list of new items since last time the flow was run. One can
-							retrieve the item in the next step using `previous_result._value`. To easily compute
-							the diff, windmill provides some helpers under the form of `getInternalState` and
-							`setInternalState`.
-						</Tooltip>
-					</h3>
-				{/if}
-				<p>
-					{#if 'path' in mod.value && mod.value.path}
-						{mod.value.path}
-					{/if}
-					{#if 'language' in mod.value && mod.value.language}
-						Inline {mod.value.language}
-					{/if}
-					{#if !('path' in mod.value) && !('language' in mod.value)}
-						Select a script
-					{/if}
-				</p>
-			</div>
-		</FlowModuleHeader>
-		{#if open == i}
-			<div class="p-6">
+	<svelte:fragment slot="header">
+		<FlowModuleHeader
+			bind:mod
+			bind:indexes
+			on:delete
+			on:fork={() => apply(fork, mod)}
+			on:createScriptFromInlineScript={() => {
+				apply(createScriptFromInlineScript, {
+					flowModule: mod,
+					suffix: indexes.join('-'),
+					schema
+				})
+			}}
+		/>
+	</svelte:fragment>
+
+	<div slot="content">
+		{#if opened}
+			<div class="p-6 border-t border-gray-300">
 				{#if shouldPick}
 					<FlowInputs
-						{isTrigger}
-						on:pick={(e) => pickScript(e.detail.path, i)}
-						on:new={(e) => createInlineScriptModule(e.detail.language, i, mode)}
+						shouldDisableTriggerScripts={i != 0}
+						shouldDisableLoopCreation={indexes.length > 1 || i == 0}
+						on:pick={(e) => apply(pickScript, e.detail.path)}
+						on:new={(e) =>
+							apply(createInlineScriptModule, {
+								language: e.detail.language,
+								type: e.detail.type
+							})}
+						on:loop={() => applyCreateLoop()}
 					/>
 				{/if}
 				{#if mod.value.type === 'rawscript'}
 					<div class="mb-2 overflow-hidden">
 						<EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
 					</div>
-					<div on:mouseleave={() => loadSchema(i)}>
+					<div on:mouseleave={() => reload(mod)}>
 						<Editor
 							bind:websocketAlive
 							bind:this={editor}
@@ -90,15 +89,16 @@ const isTrigger = mode === 'pull' && i === 0;
 							bind:code={mod.value.content}
 							deno={mod.value.language === RawScript.language.DENO}
 							automaticLayout={true}
-							on:blur={() => loadSchema(i)}
-							formatAction={() => loadSchema(i)}
+							formatAction={() => reload(mod)}
 						/>
 						<button
 							class="w-full text-center"
 							on:click={() => {
 								bigEditor = !bigEditor
-							}}><Icon data={bigEditor ? faChevronUp : faChevronDown} scale={1.0} /></button
+							}}
 						>
+							<Icon data={bigEditor ? faChevronUp : faChevronDown} scale={1.0} />
+						</button>
 					</div>
 					<div class="mt-2 mb-8">
 						<p class="text-gray-500 italic">
@@ -110,43 +110,21 @@ const isTrigger = mode === 'pull' && i === 0;
 				{#if !shouldPick}
 					<p class="text-lg font-bold text-gray-900 mb-2">Step inputs</p>
 					<SchemaForm
-						inputTransform={true}
 						{schema}
-						{extraLib}
-						{i}
-						bind:pickableProperties
+						inputTransform={true}
+						importPath={String(indexes.join('-'))}
+						bind:pickableProperties={stepPropPicker.pickableProperties}
 						bind:args={mod.input_transform}
+						bind:extraLib={stepPropPicker.extraLib}
 					/>
 				{/if}
-			</div>
 
-			{#if !shouldPick}
-				<div class="border-b border-gray-200" />
-				<div class="p-3">
-					<FlowPreview
-						bind:args
-						flow={$flowStore}
-						{i}
-						{mode}
-						schemas={$schemasStore}
-						on:change={(e) => {
-							previewResults.set(jobsToResults(e.detail))
-						}}
-					/>
-				</div>
-			{/if}
-		{/if}
-		{#if open == i}
-			<div>
-				<button class="w-full h-full" on:click={() => (open = -1)}>
-					<Icon data={faChevronUp} scale={1.0} />
-				</button>
-			</div>
-		{:else}
-			<div>
-				<button class="w-full h-full" on:click={() => (open = i)}>
-					<Icon data={faChevronDown} scale={1.0} />
-				</button>
+				{#if !shouldPick}
+					<div class="border-b border-gray-200" />
+					<div class="pt-2">
+						<FlowPreview bind:args flow={$flowStore} {i} {schema} />
+					</div>
+				{/if}
 			</div>
 		{/if}
 	</div>

package/components/ModuleStep.svelte.d.ts

@@ -1,15 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 import { type FlowModule } from '../gen';
-import { type FlowMode } from './flows/flowStore';
+import type { Schema } from '../common';
+import { type FlowModuleSchema } from './flows/flowState';
 declare const __propDef: {
     props: {
-        open: number;
-        mode: FlowMode;
-        i: number;
+        indexes: number[];
         mod: FlowModule;
         args?: Record<string, any> | undefined;
+        schema: Schema;
+        childFlowModules?: FlowModuleSchema[] | undefined;
     };
     events: {
+        delete: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/Path.svelte

@@ -4,6 +4,7 @@ import { GroupService } from '../gen';
 import Tooltip from './Tooltip.svelte';
 import { userStore, workspaceStore } from '../stores';
 import { sleep } from '../utils';
+import { createEventDispatcher } from 'svelte';
 export let meta = {
     ownerKind: 'user',
     owner: '',
@@ -14,13 +15,22 @@ export let initialPath;
 export let path = '';
 export let error = '';
 export let kind;
+const dispatch = createEventDispatcher();
 let groups = [];
-$: {
-    path = [meta.ownerKind === 'group' ? 'g' : 'u', meta.owner, meta.name].join('/');
+$: path = metaToPath(meta);
+function metaToPath(meta) {
+    return [meta.ownerKind === 'group' ? 'g' : 'u', meta.owner, meta.name].join('/');
 }
 export function getPath() {
     return path;
 }
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        dispatch('enter');
+    }
+}
 export async function reset() {
     if (path == '' || path == 'u//') {
         meta.ownerKind = 'user';
@@ -28,7 +38,12 @@ export async function reset() {
             await sleep(500);
         }
         meta.owner = $userStore.username;
-        meta.name = '';
+        meta.name = namePlaceholder;
+        let i = 1;
+        while (await pathExists(metaToPath(meta), kind)) {
+            meta.name = `${namePlaceholder}_${i}`;
+            i += 1;
+        }
     }
     else {
         meta = pathToMeta(path);
@@ -40,55 +55,60 @@ async function loadGroups() {
     meta.owner = meta.owner;
 }
 async function validate(meta, path, kind) {
-    validateName(meta) && (await validatePath(path, kind));
+    error = '';
+    validateName(meta) && validatePath(path, kind);
 }
 let validateTimeout = undefined;
 async function validatePath(path, kind) {
-    if (initialPath != '' && initialPath != path) {
-        if (validateTimeout) {
-            clearTimeout(validateTimeout);
+    if (validateTimeout) {
+        clearTimeout(validateTimeout);
+    }
+    validateTimeout = setTimeout(async () => {
+        if ((path == '' || path != initialPath) && (await pathExists(path, kind))) {
+            error = 'path already used';
+        }
+        else if (validateName(meta)) {
+            error = '';
         }
-        validateTimeout = setTimeout(async () => {
-            if (initialPath != '' &&
-                initialPath != path &&
-                ((kind == 'flow' &&
-                    (await FlowService.existsFlowByPath({ workspace: $workspaceStore, path: path }))) ||
-                    (kind == 'script' &&
-                        (await ScriptService.existsScriptByPath({
-                            workspace: $workspaceStore,
-                            path: path
-                        }))) ||
-                    (kind == 'resource' &&
-                        (await ResourceService.existsResource({
-                            workspace: $workspaceStore,
-                            path: path
-                        }))) ||
-                    (kind == 'variable' &&
-                        (await VariableService.existsVariable({
-                            workspace: $workspaceStore,
-                            path: path
-                        }))) ||
-                    (kind == 'schedule' &&
-                        (await ScheduleService.existsSchedule({ workspace: $workspaceStore, path: path }))))) {
-                error = 'path already used';
-            }
-            else if (validateName(meta)) {
-                error = '';
-            }
-            validateTimeout = undefined;
-        }, 500);
+        validateTimeout = undefined;
+    }, 500);
+}
+async function pathExists(path, kind) {
+    if (kind == 'flow') {
+        return await FlowService.existsFlowByPath({ workspace: $workspaceStore, path: path });
+    }
+    else if (kind == 'script') {
+        return await ScriptService.existsScriptByPath({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
+    else if (kind == 'resource') {
+        return await ResourceService.existsResource({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
+    else if (kind == 'variable') {
+        return await VariableService.existsVariable({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
+    else if (kind == 'schedule') {
+        return await ScheduleService.existsSchedule({ workspace: $workspaceStore, path: path });
     }
     else {
-        error = '';
+        return false;
     }
 }
 function validateName(meta) {
     if (meta.name == undefined || meta.name == '') {
-        error = 'choose a name';
+        error = 'Choose a name';
         return false;
     }
     else if (!/^[\w-]+(\/[\w-]+)*$/.test(meta.name)) {
-        error = 'This name is not valid.';
+        error = 'This name is not valid';
         return false;
     }
     else {
@@ -156,6 +176,8 @@ $: {
 			<span class="text-gray-700 text-sm">Name<span class="text-red-600 text-sm">*</span></span>
 			<input
 				autofocus
+				autocomplete="off"
+				on:keyup={handleKeyUp}
 				bind:value={meta.name}
 				placeholder={namePlaceholder}
 				class={error === ''
@@ -165,7 +187,7 @@ $: {
 		</label>
 	</div>
 	<div class="pt-0 text-xs px-1 flex flex-col-reverse sm:grid sm:grid-cols-4 sm:gap-4 w-full">
-		<div class="col-span-2">Path: <span class="font-mono">{path}</span></div>
+		<div class="col-span-2"><span class="font-mono">{path}</span></div>
 		<div class="text-purple-500 text-2xs col-span-2">{error}</div>
 	</div>
 </div>

package/components/Path.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         reset?: (() => Promise<void>) | undefined;
     };
     events: {
+        enter: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/ProgressBar.svelte

@@ -0,0 +1,31 @@
+<script>import ProgressBarPart from './ProgressBarPart.svelte';
+export let i = -1;
+export let steps = 0;
+$: series = Array.from(Array(steps).keys()).map((x) => Math.floor(((100 / steps) * x) / 100));
+function toggle() {
+    toggled[i] = true;
+}
+$: toggled = series.map(() => false);
+$: text = i < series.length ? `Step ${i + 1}` : 'Done';
+$: toggled[i] === false && toggle();
+</script>
+
+<div>
+	<div class="flex justify-between mb-1">
+		<span class="text-base font-medium text-blue-700 dark:text-white">{text}</span>
+		<span class="text-sm font-medium text-blue-700 dark:text-white">
+			{series.slice(0, i).reduce((x, y) => y + x, 0)}%
+		</span>
+	</div>
+	<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 relative">
+		{#each series as serie, index}
+			<ProgressBarPart
+				isFirst={index === 0}
+				isLast={index === series.length - 1}
+				sumUpTo={series.slice(0, index).reduce((x, y) => y + x, 0)}
+				length={serie}
+				shouldToggle={toggled[index]}
+			/>
+		{/each}
+	</div>
+</div>

package/components/ProgressBar.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        i?: number | undefined;
+        steps?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarProps = typeof __propDef.props;
+export declare type ProgressBarEvents = typeof __propDef.events;
+export declare type ProgressBarSlots = typeof __propDef.slots;
+export default class ProgressBar extends SvelteComponentTyped<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
+}
+export {};

package/components/ProgressBarPart.svelte

@@ -0,0 +1,20 @@
+<script>import { tweened } from 'svelte/motion';
+import { cubicOut } from 'svelte/easing';
+const progress = tweened(0, {
+    duration: 400,
+    easing: cubicOut
+});
+export let isFirst;
+export let isLast;
+export let sumUpTo;
+export let length;
+export let shouldToggle;
+$: shouldToggle && progress.set(length);
+</script>
+
+<div
+	class={`bg-blue-200 h-2.5 absolute ${isFirst ? 'rounded-l-full' : ''} ${
+		isLast ? 'rounded-r-full' : ''
+	}`}
+	style={`${isFirst ? 'left:0%;' : `left:${sumUpTo}%;`} width: ${$progress}%`}
+/>

package/components/ProgressBarPart.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isFirst: boolean;
+        isLast: boolean;
+        sumUpTo: number;
+        length: number;
+        shouldToggle: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ProgressBarPartProps = typeof __propDef.props;
+export declare type ProgressBarPartEvents = typeof __propDef.events;
+export declare type ProgressBarPartSlots = typeof __propDef.slots;
+export default class ProgressBarPart extends SvelteComponentTyped<ProgressBarPartProps, ProgressBarPartEvents, ProgressBarPartSlots> {
+}
+export {};

package/components/ResourceEditor.svelte

@@ -114,7 +114,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 						bind:error={pathError}
 						bind:path
 						{initialPath}
-						namePlaceholder="my/resource"
+						namePlaceholder="my_resource"
 						kind="resource"
 					>
 						<div slot="ownerToolkit">
@@ -164,6 +164,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 								enum_={resourceSchema.properties[fieldName]?.enum}
 								contentEncoding={resourceSchema.properties[fieldName]?.contentEncoding}
 								itemsType={resourceSchema.properties[fieldName]?.items}
+								properties={resourceSchema.properties[fieldName]?.properties}
 								format={resourceSchema.properties[fieldName]?.format}
 							/>
 							<div class="pb-3 ml-2 relative">

package/components/ResourcePicker.svelte

@@ -32,6 +32,15 @@ $: dispatch('change', value);
 	<a class="text-xs hover:underline" target="_blank" href="/resources?connect_app={resourceType}"
 		>Connect the app {resourceType} to an account (if available)</a
 	>
+	<button
+		class="text-xs text-blue-500"
+		type="button"
+		on:click={() => {
+			loadResources(resourceType)
+		}}
+	>
+		refresh
+	</button>
 	<button
 		class="text-xs text-blue-500"
 		type="button"

package/components/SchemaForm.svelte

@@ -8,17 +8,21 @@ export let editableSchema = false;
 export let isValid = true;
 export let pickableProperties = undefined;
 export let extraLib = 'missing extraLib';
-export let i = undefined;
+export let importPath = undefined;
 let inputCheck = {};
 $: isValid = allTrue(inputCheck) ?? false;
+$: if (args == undefined) {
+    args = {};
+}
 function removeExtraKey() {
-    Object.keys(args).forEach((key) => {
+    Object.keys(args ?? {}).forEach((key) => {
         if (!Object.keys(schema?.properties ?? {}).includes(key)) {
             delete args[key];
+            delete inputCheck[key];
         }
     });
 }
-$: Object.keys(schema?.properties ?? {}).length > 0 && removeExtraKey();
+$: schema?.properties && removeExtraKey();
 </script>
 
 <div class="w-full">
@@ -32,7 +36,7 @@ $: Object.keys(schema?.properties ?? {}).length > 0 && removeExtraKey();
 					bind:inputCheck
 					bind:pickableProperties
 					bind:extraLib
-					bind:i
+					bind:importPath
 				/>
 			{:else}
 				<ArgInput
@@ -47,6 +51,7 @@ $: Object.keys(schema?.properties ?? {}).length > 0 && removeExtraKey();
 					bind:enum_={schema.properties[argName].enum}
 					bind:format={schema.properties[argName].format}
 					contentEncoding={schema.properties[argName].contentEncoding}
+					properties={schema.properties[argName].properties}
 					bind:itemsType={schema.properties[argName].items}
 					{editableSchema}
 				/>

package/components/SchemaForm.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         isValid?: boolean | undefined;
         pickableProperties?: Object | undefined;
         extraLib?: string | undefined;
-        i?: number | undefined;
+        importPath?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/SchemaModal.svelte

@@ -55,17 +55,33 @@ function clearModal() {
 $: if (property.selectedType == 'object' && resource_type) {
     property.format = resource_type ? `$res:${resource_type}` : undefined;
 }
+$: if (property.name == '') {
+    error = 'Name is required';
+}
+else {
+    error = '';
+}
 </script>
 
 <Modal bind:this={modal} on:close={clearModal}>
 	<div slot="title">Add an argument</div>
 	<div slot="content">
 		<div class="flex flex-col px-6 py-3 bg-gray-50">
-			<div class="text-purple-500 text-2xs grow">{error}</div>
-			<label class="mb-2 font-semibold text-gray-700"
+			<label class="font-semibold text-gray-700"
 				>Name<Required required={true} />
-				<input type="text" placeholder="Argument name" class="" bind:value={property.name} />
+				<input
+					autofocus
+					autocomplete="off"
+					type="text"
+					placeholder="name"
+					bind:value={property.name}
+					class={error === ''
+						? ''
+						: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+				/>
 			</label>
+			<div class="mb-2 text-purple-500 text-2xs">{error}</div>
+
 			<label class="mb-2 font-semibold text-gray-700">
 				Description
 				<textarea
@@ -136,6 +152,7 @@ $: if (property.selectedType == 'object' && resource_type) {
 	</div>
 
 	<button
+		disabled={!property.name || !property.selectedType || error != ''}
 		slot="submission"
 		class="px-4 py-2 text-white font-semibold bg-blue-500 rounded"
 		on:click={() => {