windmill-components 1.70.0 → 1.75.0

package/components/InputTransformSchemaForm.svelte

@@ -0,0 +1,103 @@
+<script>import { VariableService } from '../gen';
+import { workspaceStore } from '../stores';
+import { allTrue } from '../utils';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Button } from './common';
+import InputTransformForm from './InputTransformForm.svelte';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
+export let schema;
+export let args = {};
+export let isValid = true;
+export let extraLib = 'missing extraLib';
+export let previousModuleId = undefined;
+export let filter = undefined;
+export let noDynamicToggle = false;
+let clazz = '';
+export { clazz as class };
+let inputCheck = {};
+$: isValid = allTrue(inputCheck) ?? false;
+$: if (args == undefined || typeof args !== 'object') {
+    args = {};
+}
+function removeExtraKey() {
+    const nargs = {};
+    Object.keys(args ?? {}).forEach((key) => {
+        if (keys.includes(key)) {
+            nargs[key] = args[key];
+        }
+    });
+    args = nargs;
+}
+let pickForField;
+let itemPicker = undefined;
+let variableEditor = undefined;
+let keys = [];
+$: {
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
+        keys = lkeys;
+        removeExtraKey();
+    }
+}
+</script>
+
+<div class="w-full {clazz}">
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
+			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
+				<div class="z-10">
+					<InputTransformForm
+						{previousModuleId}
+						bind:arg={args[argName]}
+						bind:schema
+						bind:argName
+						bind:inputCheck={inputCheck[argName]}
+						bind:extraLib
+						{variableEditor}
+						{itemPicker}
+						bind:pickForField
+						{noDynamicToggle}
+					/>
+				</div>
+			{/if}
+		{/each}
+	{:else}
+		<div class="text-gray-500 text-sm">No inputs</div>
+	{/if}
+</div>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		if (pickForField) {
+			args[pickForField].value = '$var:' + path
+		}
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} />

package/components/InputTransformSchemaForm.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        args?: Record<string, any> | undefined;
+        isValid?: boolean | undefined;
+        extraLib?: string | undefined;
+        previousModuleId?: string | undefined;
+        filter?: string[] | undefined;
+        noDynamicToggle?: boolean | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputTransformSchemaFormProps = typeof __propDef.props;
+export type InputTransformSchemaFormEvents = typeof __propDef.events;
+export type InputTransformSchemaFormSlots = typeof __propDef.slots;
+export default class InputTransformSchemaForm extends SvelteComponentTyped<InputTransformSchemaFormProps, InputTransformSchemaFormEvents, InputTransformSchemaFormSlots> {
+}
+export {};

package/components/LogViewer.svelte

@@ -35,7 +35,7 @@ let logViewer;
 				<button on:click={logViewer.openDrawer}>Expand</button>
 				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
 					Auto scroll
-					<input type="checkbox" bind:checked={scroll} />
+					<input class="windmillapp" type="checkbox" bind:checked={scroll} />
 				</div>
 			</div>
 		</div>

package/components/ModulePreview.svelte

@@ -6,12 +6,12 @@ import TestJobLoader from './TestJobLoader.svelte';
 import LogViewer from './LogViewer.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import Button from './common/button/Button.svelte';
-import { flowStateStore, testStepStore } from './flows/flowState';
-import { flowStore } from './flows/flowStore';
 import { workspaceStore } from '../stores';
 import { Loader2 } from 'lucide-svelte';
+import { getContext } from 'svelte';
 export let mod;
 export let schema;
+const { flowStore, flowStateStore, testStepStore } = getContext('FlowEditorContext');
 // Test
 let testJobLoader;
 let testIsLoading = false;
@@ -78,6 +78,7 @@ function jobDone() {
 			detailed={false}
 			topButton
 			bind:args={stepArgs}
+			isFlow={false}
 		/>
 		{#if testIsLoading}
 			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">

package/components/Multiselect.svelte

@@ -167,7 +167,7 @@
 	{#if showOptions}
 		<ul
 			class="options"
-			transition:fly={{ duration: 200, y: 5 }}
+			transition:fly|local={{ duration: 200, y: 5 }}
 			on:mousedown|preventDefault={handleOptionMousedown}
 		>
 			{#each filtered as option}

package/components/Path.svelte

@@ -243,15 +243,19 @@ async function addGroup() {
 			folderCreated = undefined
 		}}
 	>
-		<div class="flex flex-row">
-			<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
-			<Button size="md" startIcon={{ icon: faPlus }} disabled={!newFolderName} on:click={addFolder}>
-				New&nbsp;folder
-			</Button>
-		</div>
-
-		{#if folderCreated}
-			<div class="mt-8" />
+		{#if !folderCreated}
+			<div class="flex flex-row">
+				<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
+				<Button
+					size="md"
+					startIcon={{ icon: faPlus }}
+					disabled={!newFolderName}
+					on:click={addFolder}
+				>
+					New&nbsp;folder
+				</Button>
+			</div>
+		{:else}
 			<FolderEditor name={folderCreated} />
 		{/if}
 	</DrawerContent>
@@ -371,8 +375,8 @@ async function addGroup() {
 		{/if}
 	</div>
 
-	<div class="flex-row flex justify-between">
-		<div><span class="font-mono text-sm">{path}</span></div>
+	<div class="flex-row flex justify-between w-full">
+		<div><span class="font-mono text-sm break-all">{path}</span></div>
 		<div class="text-red-600 text-2xs">{error}</div>
 	</div>
 </div>

package/components/Popover.svelte

@@ -42,22 +42,11 @@ function close() {
 </script>
 
 {#if notClickable}
-	<span
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class={$$props.class}
-	>
+	<span use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
 		<slot />
 	</span>
 {:else}
-	<button
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		on:click
-		class={$$props.class}
-	>
+	<button use:popperRef on:mouseenter={open} on:mouseleave={close} on:click class={$$props.class}>
 		<slot />
 	</button>
 {/if}

package/components/ResourcePicker.svelte

@@ -7,15 +7,30 @@ import { Button } from './common';
 import Select from 'svelte-select';
 import AppConnect from './AppConnect.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 const dispatch = createEventDispatcher();
-let resources = [];
 export let initialValue = undefined;
 export let value = initialValue;
 export let resourceType = undefined;
+let valueSelect = initialValue || value
+    ? {
+        value: value ?? initialValue,
+        label: value ?? initialValue
+    }
+    : undefined;
+let collection = [valueSelect];
 async function loadResources(resourceType) {
-    const v = value;
-    resources = await ResourceService.listResource({ workspace: $workspaceStore, resourceType });
-    value = v;
+    const nc = (await ResourceService.listResource({
+        workspace: $workspaceStore,
+        resourceType
+    })).map((x) => ({
+        value: x.path,
+        label: x.path
+    }));
+    if (!nc.find((x) => x.value == value) && (initialValue || value)) {
+        nc.push({ value: value ?? initialValue, label: value ?? initialValue });
+    }
+    collection = nc;
 }
 $: {
     if ($workspaceStore) {
@@ -23,10 +38,6 @@ $: {
     }
 }
 $: dispatch('change', value);
-$: collection = resources.map((x) => ({
-    value: x.path,
-    label: x.path
-}));
 let appConnect;
 let resourceEditor;
 </script>
@@ -35,6 +46,7 @@ let resourceEditor;
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
 		value = e.detail
+		valueSelect = { value: e.detail, label: e.detail }
 	}}
 	newPageOAuth
 	bind:this={appConnect}
@@ -44,22 +56,29 @@ let resourceEditor;
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
-		console.log(e)
 		if (e.detail) {
 			value = e.detail
+			valueSelect = { value: e.detail, label: e.detail }
 		}
 	}}
 />
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
-		listAutoWidth={false}
-		--height="34px"
-		value={collection.find((x) => x.value == value)}
-		bind:justValue={value}
+		value={valueSelect}
+		on:change={(e) => {
+			value = e.detail.value
+			valueSelect = e.detail
+		}}
+		on:clear={() => {
+			value = undefined
+			valueSelect = undefined
+		}}
 		items={collection}
 		class="text-clip grow min-w-0"
-		placeholder="{resourceType} resource"
+		placeholder="{resourceType ?? 'any'} resource"
+		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+		containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 	/>
 	{#if value && value != ''}
 		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>

package/components/RunChart.svelte

@@ -16,7 +16,7 @@ $: data = {
             backgroundColor: '#f87171',
             label: 'Failed',
             data: failed?.map((job) => ({
-                x: job.created_at,
+                x: job.started_at,
                 y: job.duration_ms,
                 id: job.id,
                 path: job.script_path
@@ -27,7 +27,7 @@ $: data = {
             backgroundColor: '#4ade80',
             label: 'Successful',
             data: success?.map((job) => ({
-                x: job.created_at,
+                x: job.started_at,
                 y: job.duration_ms,
                 id: job.id,
                 path: job.script_path
@@ -40,7 +40,10 @@ const zoomOptions = {
         enabled: true,
         modifierKey: 'ctrl',
         onPanComplete: ({ chart }) => {
-            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
         }
     },
     zoom: {
@@ -49,13 +52,28 @@ const zoomOptions = {
         },
         mode: 'x',
         onZoom: ({ chart }) => {
-            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
         }
     }
 };
 function getPath(x) {
     return x.path;
 }
+$: minTime = getMinTime(jobs);
+function addSeconds(date, seconds) {
+    date.setTime(date.getTime() + seconds * 1000);
+    return date;
+}
+function getMinTime(jobs) {
+    return addSeconds(new Date(jobs?.[jobs?.length - 1]?.started_at ?? new Date().toString()), -15);
+}
+$: maxTime = getMaxTime(jobs);
+function getMaxTime(jobs) {
+    return addSeconds(new Date(jobs?.[0]?.started_at ?? new Date().toString()), 15);
+}
 </script>
 
 <Scatter
@@ -83,7 +101,8 @@ function getPath(x) {
 					display: false
 				},
 				type: 'time',
-				min: jobs?.[jobs?.length - 1]?.created_at ?? new Date().toString()
+				min: minTime,
+				max: maxTime
 			},
 			y: {
 				grid: {

package/components/RunForm.svelte

@@ -20,6 +20,7 @@ export let topButton = false;
 export let loading = false;
 export let noVariablePicker = false;
 export let viewCliRun = false;
+export let isFlow;
 export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
 export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
@@ -29,9 +30,7 @@ let viewOptions = false;
 let viewCliOptions = false;
 let scheduledForStr;
 let invisible_to_owner;
-$: cliCommand = `wmill ${runnable?.kind} run ${runnable?.path} ${Object.entries(args)
-    .map(([k, v]) => `-i ${k}=${JSON.stringify(v)}`)
-    .join(' ')}`;
+$: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
 </script>
 
 <div class="max-w-6xl">
@@ -110,7 +109,7 @@ $: cliCommand = `wmill ${runnable?.kind} run ${runnable?.path} ${Object.entries(
 					</Button>
 				</div>
 				{#if viewOptions}
-					<div transition:slide class="mt-6">
+					<div transition:slide|local class="mt-6">
 						<div class="border rounded-md p-3 pt-4">
 							<div class="flex flex-row items-end">
 								<div class="w-max md:w-2/3 mt-2 mb-1">
@@ -178,14 +177,14 @@ $: cliCommand = `wmill ${runnable?.kind} run ${runnable?.path} ${Object.entries(
 		<div class="my-10" />
 		<Button
 			color="light"
-			size="sm"
+			size="xs"
 			endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
 			on:click={() => (viewCliOptions = !viewCliOptions)}
 		>
 			Run it from the CLI
 		</Button>
 		{#if viewCliOptions}
-			<div transition:slide class="mt-2 px-4 pt-2">
+			<div transition:slide|local class="mt-2 px-4 pt-2">
 				<InlineCodeCopy content={cliCommand} />
 				<CliHelpBox />
 			</div>

package/components/RunForm.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
         loading?: boolean | undefined;
         noVariablePicker?: boolean | undefined;
         viewCliRun?: boolean | undefined;
+        isFlow: boolean;
         args?: Record<string, any> | undefined;
         run?: (() => void) | undefined;
         isValid?: boolean | undefined;

package/components/SchemaForm.svelte

@@ -2,28 +2,21 @@
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { slide } from 'svelte/transition';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
-import InputTransformForm from './InputTransformForm.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
-export let inputTransform = false;
 export let schema;
 export let args = {};
 export let disabledArgs = [];
 export let disabled = false;
 export let editableSchema = false;
 export let isValid = true;
-export let extraLib = 'missing extraLib';
 export let autofocus = false;
-export let previousModuleId = undefined;
 export let shouldHideNoInputs = false;
 export let compact = false;
 export let password = undefined;
 export let noVariablePicker = false;
-export let filter = undefined;
-export let noDynamicToggle = false;
 export let flexWrap = false;
 export let noDelete = false;
 let clazz = '';
@@ -34,12 +27,13 @@ $: if (args == undefined || typeof args !== 'object') {
     args = {};
 }
 function removeExtraKey() {
+    const nargs = {};
     Object.keys(args ?? {}).forEach((key) => {
-        if (!keys.includes(key)) {
-            delete args[key];
-            delete inputCheck[key];
+        if (keys.includes(key)) {
+            nargs[key] = args[key];
         }
     });
+    args = nargs;
 }
 let pickForField;
 let itemPicker = undefined;
@@ -59,48 +53,60 @@ $: {
 <div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
 	{#if keys.length > 0}
 		{#each keys as argName, i (argName)}
-			{#if !filter || filter.includes(argName)}
-				<div transition:slide|local>
-					{#if inputTransform}
-						<InputTransformForm
-							{previousModuleId}
-							bind:arg={args[argName]}
-							bind:schema
-							bind:argName
-							bind:inputCheck={inputCheck[argName]}
-							bind:extraLib
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							{noDynamicToggle}
-						/>
-					{:else if typeof args == 'object'}
-						<ArgInput
-							autofocus={i == 0 && autofocus}
-							label={argName}
-							bind:description={schema.properties[argName].description}
-							bind:value={args[argName]}
-							type={schema.properties[argName].type}
-							required={schema.required.includes(argName)}
-							bind:pattern={schema.properties[argName].pattern}
-							bind:valid={inputCheck[argName]}
-							defaultValue={schema.properties[argName].default}
-							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}
-							disabled={disabledArgs.includes(argName) || disabled}
-							{editableSchema}
-							{compact}
-							password={argName == password}
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							bind:extra={schema.properties[argName]}
-						/>
-					{:else}
-						Expected argument to be an object, got {JSON.stringify(args)} instead
+			{#if Object.keys(schema.properties ?? {}).includes(argName)}
+				<div>
+					{#if typeof args == 'object' && schema?.properties[argName]}
+						{#if editableSchema}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								bind:description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								bind:pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								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}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								bind:extra={schema.properties[argName]}
+							/>
+						{:else}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								enum_={schema.properties[argName].enum}
+								format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								extra={schema.properties[argName]}
+							/>
+						{/if}
 					{/if}
 				</div>
 			{/if}
@@ -115,11 +121,7 @@ $: {
 		bind:this={itemPicker}
 		pickCallback={(path, _) => {
 			if (pickForField) {
-				if (inputTransform) {
-					args[pickForField].value = '$var:' + path
-				} else {
-					args[pickForField] = '$var:' + path
-				}
+				args[pickForField] = '$var:' + path
 			}
 		}}
 		itemName="Variable"

package/components/SchemaForm.svelte.d.ts

@@ -2,22 +2,17 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        inputTransform?: boolean | undefined;
         schema: Schema;
         args?: Record<string, any> | undefined;
         disabledArgs?: string[] | undefined;
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;
         isValid?: boolean | undefined;
-        extraLib?: string | undefined;
         autofocus?: boolean | undefined;
-        previousModuleId?: string | undefined;
         shouldHideNoInputs?: boolean | undefined;
         compact?: boolean | undefined;
         password?: string | undefined;
         noVariablePicker?: boolean | undefined;
-        filter?: string[] | undefined;
-        noDynamicToggle?: boolean | undefined;
         flexWrap?: boolean | undefined;
         noDelete?: boolean | undefined;
         class?: string | undefined;