windmill-components 1.21.0 → 1.28.1

package/components/Modal.svelte

@@ -3,16 +3,18 @@ export let open = false;
 export let z = 'z-30';
 const dispatch = createEventDispatcher();
 export function closeModal() {
+    document.body.style.overflow = 'auto';
     open = false;
     dispatch('close');
 }
 export function openModal() {
+    document.body.style.overflow = 'hidden';
     open = true;
     dispatch('open');
 }
 function handleKeyUp(event) {
-    const key = event.key || event.keyCode;
-    if (key === 27 || key === 'Escape' || key === 'Esc') {
+    const key = event.key;
+    if (key === 'Escape' || key === 'Esc') {
         if (open) {
             event.preventDefault();
             closeModal();
@@ -23,45 +25,18 @@ function handleKeyUp(event) {
 
 <svelte:window on:keyup={handleKeyUp} />
 
-<div class="blurred-background z-0  {open ? '' : 'hidden'}" />
+{#if open}
+	<div class="blurred-background" />
 
-<div class="fixed top-0 w-screen h-screen  {open ? '' : 'hidden'} {z}">
-	<div
-		class="fixed right-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
-	>
-		{#if open}
-			<div class="flex flex-row justify-between p-2  bg-white border-b border-gray-200">
-				<button
-					on:click={() => {
-						open = false
-						closeModal()
-					}}
-				>
-					<svg
-						class="w-6 h-6"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
-				</button>
-				<p class="font-semibold text-gray-800"><slot name="title" /></p>
-				<div />
-			</div>
-			<div class="flex flex-col  bg-gray-50 pt-3 px-6 grow overflow-y-auto">
-				<slot name="content" />
-			</div>
-			<div class="flex flex-col bg-white border-gray-200 p-2">
-				<div class="flex flex-row justify-between p-2 ">
+	<div class="fixed top-0 w-screen h-screen {z}">
+		<div
+			class="fixed right-0 top-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
+		>
+			{#if open}
+				<div class="flex flex-row justify-between p-2 bg-white border-b border-gray-200">
 					<button
 						on:click={() => {
+							open = false
 							closeModal()
 						}}
 					>
@@ -80,15 +55,44 @@ function handleKeyUp(event) {
 							/>
 						</svg>
 					</button>
-					<span class="mr-4"><slot name="submission">&nbsp;</slot></span>
+					<p class="font-semibold text-gray-800"><slot name="title" /></p>
+					<div />
+				</div>
+				<div class="flex flex-col  bg-gray-50 pt-3 px-6 grow overflow-y-auto">
+					<slot name="content" />
+				</div>
+				<div class="flex flex-col bg-white border-gray-200 p-2">
+					<div class="flex flex-row justify-between p-2 ">
+						<button
+							on:click={() => {
+								closeModal()
+							}}
+						>
+							<svg
+								class="w-6 h-6"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						</button>
+						<span class="mr-4"><slot name="submission">&nbsp;</slot></span>
+					</div>
 				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.blurred-background {
 		/* @apply absolute sm:top-6 lg:top-8 left-28 sm:left-40 md:left-48; */ /* If we wanted to make the navbars visible */ position: fixed; top: 0px; left: 0px; --tw-bg-opacity: 1; background-color: rgb(156 163 175 / var(--tw-bg-opacity)); opacity: 0.75; width: 100vw; height: 100vh;
-		z-index: 1;
+		z-index: 10;
 	}</style>

package/components/ModuleStep.svelte

@@ -1,70 +1,110 @@
-<script>import { FlowModuleValue } from '../gen';
-import { addPreviewResult, previewResults } from '../stores';
-import { buildExtraLib, objectToTsType, schemaToObject, schemaToTsType } from '../utils';
-import { faRobot } from '@fortawesome/free-solid-svg-icons';
+<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 Icon from 'svelte-awesome';
 import Editor from './Editor.svelte';
+import EditorBar from './EditorBar.svelte';
 import FlowPreview from './FlowPreview.svelte';
+import FlowBox from './flows/FlowBox.svelte';
 import FlowInputs from './flows/FlowInputs.svelte';
 import FlowModuleHeader from './flows/FlowModuleHeader.svelte';
-import { createInlineScriptModule, flowStore, loadSchema, pickScript, schemasStore } from './flows/flowStore';
+import { addModule, createInlineScriptModule, flowStore, loadSchema, 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 = {};
+let editor;
+let websocketAlive = { pyright: false, black: false, deno: false };
+let pickableProperties = undefined;
+let bigEditor = false;
 $: schema = $schemasStore[i];
-$: shouldPick = mod.value.path === '' && mod.value.language === undefined;
-$: previousSchema = i === 0 ? schemaToObject($flowStore?.schema) : $previewResults[i];
-$: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objectToTsType($previewResults[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;
 </script>
 
-<li class="flex flex-row flex-shrink max-w-full mx-auto mt-16">
-	<div
-		class="bg-white border border-gray xl-rounded shadow-lg w-full max-w-4xl mx-4 md:mx-auto"
-		id="module-{i}"
-	>
-		<div class="flex items-center justify-between flex-wra p-4 sm:px-6 z-10">
-			<FlowModuleHeader bind:open {mod} {i} {shouldPick}>
-				<div>
-					<h3 class="text-lg font-bold text-gray-900">Step {i + 1}</h3>
-					<p>
-						{#if mod.value.path}
-							{mod.value.path}
-						{/if}
-						{#if mod.value.language}
-							Inline {mod.value.language}
-						{/if}
-						{#if !mod.value.path && !mod.value.language}
-							Select a script
-						{/if}
-					</p>
-				</div>
-			</FlowModuleHeader>
-		</div>
-		<div class="border-b border-gray-200" />
+<button
+	class="rounded-full h-10 w-10 bg-white border-2 border-gray-400"
+	on:click={() => {
+		addModule(i)
+		open = i
+	}}
+>
+	<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">
 				{#if shouldPick}
 					<FlowInputs
-						isTrigger={mode == 'pull' && i == 0}
+						{isTrigger}
 						on:pick={(e) => pickScript(e.detail.path, i)}
 						on:new={(e) => createInlineScriptModule(e.detail.language, i, mode)}
 					/>
 				{/if}
-				{#if mod.value.type === FlowModuleValue.type.RAWSCRIPT}
-					<Editor
-						class="h-80 border p-2 rounded"
-						bind:code={mod.value.content}
-						deno={mod.value.language === FlowModuleValue.language.DENO}
-					/>
+				{#if mod.value.type === 'rawscript'}
+					<div class="mb-2 overflow-hidden">
+						<EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
+					</div>
+					<div>
+						<Editor
+							bind:websocketAlive
+							bind:this={editor}
+							class="{bigEditor ? 'h-2/3' : 'h-80'} border p-2 rounded"
+							bind:code={mod.value.content}
+							deno={mod.value.language === RawScript.language.DENO}
+							automaticLayout={true}
+							on:blur={() => loadSchema(i)}
+							formatAction={() => loadSchema(i)}
+						/>
+						<button
+							class="w-full text-center"
+							on:click={() => {
+								bigEditor = !bigEditor
+							}}><Icon data={bigEditor ? faChevronUp : faChevronDown} scale={1.0} /></button
+						>
+					</div>
 					<div class="mt-2 mb-8">
-						<button class="default-primary-button-v2" on:click={() => loadSchema(i)}>
-							<Icon data={faRobot} class="w-4 h-4 mr-2 -ml-2" />
-
-							Infer step inputs from code
-						</button>
+						<p class="text-gray-500 italic">
+							Move the focus outside of the text editor to recompute the input schema or press
+							Ctrl/Cmd+S
+						</p>
 					</div>
 				{/if}
 				{#if !shouldPick}
@@ -74,7 +114,7 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 						{schema}
 						{extraLib}
 						{i}
-						{previousSchema}
+						bind:pickableProperties
 						bind:args={mod.input_transform}
 					/>
 				{/if}
@@ -90,18 +130,24 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 						{mode}
 						schemas={$schemasStore}
 						on:change={(e) => {
-							addPreviewResult(e.detail.result, i + 1)
+							previewResults.set(jobsToResults(e.detail))
 						}}
 					/>
 				</div>
-				<div>
-					<button class="w-full h-full" on:click={() => (open = -1)}>(-)</button>
-				</div>
-			{:else}
-				<div>
-					<button class="w-full h-full" on:click={() => (open = i)}>(+)</button>
-				</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>
+			</div>
+		{/if}
 	</div>
-</li>
+</FlowBox>

package/components/ObjectResourceInput.svelte

@@ -1,61 +1,81 @@
 <script>import { ResourceService } from '../gen';
-import ResourcePicker from './ResourcePicker.svelte';
 import { workspaceStore } from '../stores';
-import SchemaForm from './SchemaForm.svelte';
 import RadioButton from './RadioButton.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+import SchemaForm from './SchemaForm.svelte';
 export let format;
 export let value;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
-let path = isString(value) && value.length >= '$res:'.length ? value.substr('$res:'.length) : undefined;
+let path = '';
 let args = {};
-if (!isString(value) && value) {
-    args = value;
-}
 let schema = undefined;
 let isValid = true;
 let resourceTypeName = '';
+let option = isString(value) || value == undefined ? 'resource' : 'raw';
+$: format.startsWith('resource-') && loadSchema(format);
 async function loadSchema(format) {
     resourceTypeName = format.substring('resource-'.length);
     schema = (await ResourceService.getResourceType({ workspace: $workspaceStore, path: resourceTypeName })).schema;
 }
-let option = isString(value) || value == undefined ? 'resource' : 'raw';
-$: {
-    if (option == 'resource') {
-        value = `$res:${path}`;
+function argToValue() {
+    value = args;
+}
+function resourceToValue() {
+    value = `$res:${path}`;
+}
+function isResource() {
+    return isString(value) && value.length >= '$res:'.length;
+}
+function valueToPath() {
+    if (!isString(value) && value) {
+        args = value;
+    }
+    if (isResource()) {
+        path = value.substr('$res:'.length);
     }
-    else {
-        value = args;
+    else if (value !== undefined && value !== '') {
+        option = 'raw';
     }
 }
-$: format.startsWith('resource-') && loadSchema(format);
+$: value && valueToPath();
 </script>
 
-<div class="max-w-lg">
-	<RadioButton
-		options={[
-			[`Resource (${resourceTypeName})`, 'resource'],
-			[`Raw object value`, 'raw']
-		]}
-		small={true}
-		bind:value={option}
-	/>
-</div>
-<div class="mt-1" />
-{#if option == 'resource'}
-	<ResourcePicker
-		bind:value={path}
-		resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
-	/>
-{:else}
-	<div class="border rounded p-5">
-		<h2 class="mb-5">
-			Object of <a target="_blank" href="/resources">resource type</a>
-			{resourceTypeName}
-		</h2>
-		{#if !isString(args)}
-			<SchemaForm {schema} bind:isValid bind:args />
+<div class="flex flex-row w-full gap-2">
+	<div class="shrink w-40">
+		<RadioButton
+			options={[
+				[`Resource (${resourceTypeName})`, 'resource'],
+				[`Raw object value`, 'raw']
+			]}
+			on:change={argToValue}
+			bind:value={option}
+		/>
+	</div>
+	<div class="grow">
+		{#if option == 'resource'}
+			<ResourcePicker
+				on:refresh={() => loadSchema(format)}
+				on:change={(e) => {
+					path = e.detail
+					resourceToValue()
+				}}
+				bind:value={path}
+				resourceType={format.split('-').length > 1
+					? format.substring('resource-'.length)
+					: undefined}
+			/>
+		{:else}
+			<div class="border rounded p-5 w-full">
+				<h2 class="mb-5">
+					Object of <a target="_blank" href="/resources">resource type</a>
+					{resourceTypeName}
+				</h2>
+				{#if !isString(args)}
+					<SchemaForm {schema} bind:isValid bind:args />
+				{/if}
+			</div>
 		{/if}
 	</div>
-{/if}
+</div>

package/components/ObjectTypeNarrowing.svelte

@@ -1,25 +1,10 @@
-<script>import RadioButton from './RadioButton.svelte';
-import ResourceTypePicker from './ResourceTypePicker.svelte';
+<script>import ResourceTypePicker from './ResourceTypePicker.svelte';
 export let format;
-let kind = format?.startsWith('resource') ? 'resource' : 'none';
 let resource = format?.startsWith('resource-')
     ? format.substring('resource-'.length)
     : undefined;
-$: format =
-    kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
+$: format = resource != undefined ? `resource-${resource}` : undefined;
 </script>
 
-<RadioButton
-	label="Kind"
-	small={true}
-	options={[
-		['None', 'none'],
-		['Resource Type', 'resource']
-	]}
-	bind:value={kind}
-/>
-
-{#if kind == 'resource'}
-	<div class="mt-1" />
-	<ResourceTypePicker bind:value={resource} />
-{/if}
+<div class="mt-2" />
+<ResourceTypePicker bind:value={resource} nonePickable={true} />

package/components/Path.svelte

@@ -4,7 +4,6 @@ import { GroupService } from '../gen';
 import Tooltip from './Tooltip.svelte';
 import { userStore, workspaceStore } from '../stores';
 import { sleep } from '../utils';
-import { workspace } from 'vscode';
 export let meta = {
     ownerKind: 'user',
     owner: '',
@@ -114,8 +113,8 @@ $: {
 <div>
 	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
 		<label class="block">
-			<span class="text-gray-700 text-sm">
-				Owner Kind<Tooltip class="mx-1">
+			<span class="text-gray-700 text-sm whitespace-nowrap">
+				Owner Kind <Tooltip>
 					<slot name="ownerToolkit" />
 				</Tooltip>
 			</span>
@@ -156,6 +155,7 @@ $: {
 		<label class="block col-span-2">
 			<span class="text-gray-700 text-sm">Name<span class="text-red-600 text-sm">*</span></span>
 			<input
+				autofocus
 				bind:value={meta.name}
 				placeholder={namePlaceholder}
 				class={error === ''

package/components/Path.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         initialPath: string;
         path?: string | undefined;
         error?: string | undefined;
-        kind: "resource" | "script" | "schedule" | "variable" | "flow";
+        kind: "flow" | "script" | "resource" | "schedule" | "variable";
         getPath?: (() => string) | undefined;
         reset?: (() => Promise<void>) | undefined;
     };

package/components/RadioButton.svelte

@@ -1,16 +1,19 @@
 <script>export let label = '';
 export let options;
 export let value;
-export let small = false;
 import { createEventDispatcher } from 'svelte';
+import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 </script>
 
-<fieldset>
+<fieldset class="w-full">
 	<legend class="sr-only">{label}</legend>
-	<div class="flex flex-row gap-2">
+	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
 		{#each options as [label, val]}
-			<label class:selected={val == value} class={small ? 'py-0' : 'py-3'}>
+			<label
+				class:item-button-selected={val == value}
+				class="item-button text-center text-sm h-full p-2 grow"
+			>
 				<input
 					type="radio"
 					value={val}
@@ -19,99 +22,11 @@ const dispatch = createEventDispatcher();
 					aria-labelledby="memory-option-0-label"
 					on:click={() => dispatch('change', val)}
 				/>
-				<p>{label}</p>
+				<p>
+					{#if typeof label !== 'string'}{label.title} <Tooltip>{label.desc}</Tooltip>
+					{:else}{label}{/if}
+				</p>
 			</label>
 		{/each}
 	</div>
 </fieldset>
-
-<style>
-	label {
-
-    display: flex;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 0.375rem;
-
-    border-width: 1px;
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    font-weight: 500;
-
-    text-transform: uppercase
-}
-
-label:focus {
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
-}
-
-@media (min-width: 640px) {
-
-    label {
-
-        flex: 1 1 0%
-    }
-}
-
-	label.selected {
-
-    display: flex;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 0.375rem;
-
-    border-width: 1px;
-
-    background-color: rgb(59 130 246 / 0.7);
-
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    font-weight: 500;
-
-    text-transform: uppercase;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(255 255 255 / var(--tw-text-opacity))
-}
-
-	label.selected:focus {
-
-    outline: 2px solid transparent;
-
-    outline-offset: 2px
-}
-
-	@media (min-width: 640px) {
-
-    label.selected {
-
-        flex: 1 1 0%
-    }
-}</style>

package/components/RadioButton.svelte.d.ts

@@ -2,9 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string | undefined;
-        options: [string, any][];
+        options: [string | {
+            title: string;
+            desc: string;
+        }, any][];
         value: any;
-        small?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;