windmill-components 1.22.42 → 1.28.3

package/components/ModuleStep.svelte

@@ -1,14 +1,16 @@
-<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;
@@ -18,73 +20,91 @@ 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>
-					{#if i == 0 && mode == 'pull'}
-						<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 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}
-					<div class="p-1 overflow-hidden">
+				{#if mod.value.type === 'rawscript'}
+					<div class="mb-2 overflow-hidden">
 						<EditorBar {editor} {websocketAlive} lang={mod.value.language ?? 'deno'} />
 					</div>
-					<Editor
-						bind:websocketAlive
-						bind:this={editor}
-						class="h-80 border p-2 rounded"
-						bind:code={mod.value.content}
-						deno={mod.value.language === FlowModuleValue.language.DENO}
-					/>
+					<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}
@@ -94,7 +114,7 @@ $: extraLib = buildExtraLib(i === 0 ? schemaToTsType($flowStore?.schema) : objec
 						{schema}
 						{extraLib}
 						{i}
-						{previousSchema}
+						bind:pickableProperties
 						bind:args={mod.input_transform}
 					/>
 				{/if}
@@ -110,29 +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>
-{#if i == 0 && mode == 'pull'}
-	<li class="relative m-20 ">
-		<div class="relative flex justify-center bg-white shadow p-2">
-			Starting from here, the flow for loop over items from step 1's result above &nbsp;<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
-				`previous_result._value`</Tooltip
-			>
-		</div>
-	</li>
-{/if}
+</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

@@ -155,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>;

package/components/ResourceEditor.svelte

@@ -16,8 +16,7 @@ let pathError = '';
 let step = 1;
 let resourceToEdit;
 let description = '';
-let DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description.
-A good way to make resources user friendly is to link to a default script for your resource [example](scripts/add?template=f2d1dc8df796d9e8)`;
+let DESCRIPTION_PLACEHOLDER = `You can use markdown to style your description`;
 let selectedResourceType;
 let resourceType;
 let resourceSchema;
@@ -28,8 +27,7 @@ let itemPicker;
 let variableEditor;
 let modal;
 const dispatch = createEventDispatcher();
-export async function initNew() {
-    selectedResourceType = undefined;
+export async function initNew(rt) {
     step = 1;
     args = {};
     path = '';
@@ -37,6 +35,7 @@ export async function initNew() {
     initialPath = '';
     resourceSchema = emptySchema();
     resourceToEdit = undefined;
+    selectedResourceType = rt;
     modal.openModal();
 }
 export async function initEdit(p) {
@@ -136,7 +135,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 					minRows={3}
 				/>
 				<div>
-					<div class="mb-1 font-semibold text-gray-700">
+					<div class="mb-2 font-semibold text-gray-700">
 						Resource type<Required required={true} />
 					</div>
 					<ResourceTypePicker

package/components/ResourceEditor.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        initNew?: (() => Promise<void>) | undefined;
+        initNew?: ((rt?: string) => Promise<void>) | undefined;
         initEdit?: ((p: string) => Promise<void>) | undefined;
     };
     events: {
@@ -16,7 +16,7 @@ export declare type ResourceEditorProps = typeof __propDef.props;
 export declare type ResourceEditorEvents = typeof __propDef.events;
 export declare type ResourceEditorSlots = typeof __propDef.slots;
 export default class ResourceEditor extends SvelteComponentTyped<ResourceEditorProps, ResourceEditorEvents, ResourceEditorSlots> {
-    get initNew(): () => Promise<void>;
+    get initNew(): (rt?: string | undefined) => Promise<void>;
     get initEdit(): (p: string) => Promise<void>;
 }
 export {};

package/components/ResourcePicker.svelte

@@ -1,21 +1,44 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
+import { createEventDispatcher } from 'svelte';
+import ResourceEditor from './ResourceEditor.svelte';
+const dispatch = createEventDispatcher();
 let resources = [];
-export let value = undefined;
+export let initialValue = undefined;
+export let value = initialValue;
 export let resourceType = undefined;
+let resourceEditor;
 async function loadResources(resourceType) {
+    const v = value;
     resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
+    value = v;
 }
 $: {
     if ($workspaceStore) {
         loadResources(resourceType);
     }
 }
+$: dispatch('change', value);
 </script>
 
-<select class="mt-1" bind:value placeholder="Pick a resource {resourceType}">
+<ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
+<select bind:value placeholder="Pick a resource {resourceType}">
 	<option value={undefined} />
 	{#each resources as r}
 		<option value={r.path}>{r.path}{r.description ? ' | ' + r.description : ''}</option>
 	{/each}
 </select>
+<div class="flex flex-row gap-4">
+	<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={() => {
+			resourceEditor.initNew(resourceType)
+		}}
+	>
+		+ Create a new {resourceType} resource manually
+	</button>
+</div>

package/components/ResourcePicker.svelte.d.ts

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        initialValue?: string | undefined;
         value?: string | undefined;
         resourceType?: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};