windmill-components 1.46.3 → 1.52.0

package/components/InputTransformForm.svelte

@@ -4,16 +4,17 @@ import FieldHeader from './FieldHeader.svelte';
 import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
 import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils';
 import SimpleEditor from './SimpleEditor.svelte';
-import Toggle from './Toggle.svelte';
-import { Button } from './common';
-import Icon from 'svelte-awesome';
-import { faChain } from '@fortawesome/free-solid-svg-icons';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import { faCode } from '@fortawesome/free-solid-svg-icons';
 export let schema;
 export let arg;
 export let argName;
 export let extraLib = 'missing extraLib';
 export let inputCheck = true;
-export let importPath = undefined;
+export let previousModuleId;
+export let pickForField = undefined;
+export let variableEditor = undefined;
+export let itemPicker = undefined;
 export let monaco = undefined;
 let argInput = undefined;
 let inputCat = 'object';
@@ -21,8 +22,10 @@ let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';
     if (type == 'javascript') {
-        if (codeToStaticTemplate(arg.expr)) {
+        const newValue = codeToStaticTemplate(arg.expr);
+        if (newValue) {
             type = 'static';
+            arg.value = newValue;
         }
     }
     return type;
@@ -32,7 +35,7 @@ function setPropertyType(rawValue) {
         return;
     }
     if (isCodeInjection(rawValue)) {
-        arg.expr = getDefaultExpr(importPath, argName, `\`${rawValue}\``);
+        arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue}\``);
         arg.type = 'javascript';
         propertyType = 'static';
     }
@@ -54,12 +57,12 @@ function connectProperty(rawValue) {
         setPropertyType(arg.value);
     }
     else {
-        arg.expr = getDefaultExpr(importPath, undefined, rawValue);
+        arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
         arg.type = 'javascript';
         propertyType = 'javascript';
+        monaco?.setCode(arg.expr);
     }
 }
-$: checked = propertyType == 'javascript';
 function onFocus() {
     if (isStaticTemplate(inputCat)) {
         focusProp(argName, 'append', (path) => {
@@ -83,8 +86,8 @@ const { focusProp } = getContext('PropPickerWrapper');
 </script>
 
 {#if arg != undefined}
-	<div class="flex justify-between items-center mb-2">
-		<div class="flex items-center">
+	<div class="flex flex-row justify-between gap-1 mb-1">
+		<div class="flex items-center flex-wrap grow">
 			<FieldHeader
 				label={argName}
 				format={schema.properties[argName].format}
@@ -94,59 +97,87 @@ const { focusProp } = getContext('PropPickerWrapper');
 				itemsType={schema.properties[argName].items}
 			/>
 
-			{#if !checked && arg.type === 'javascript'}
-				<span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2">
+			{#if isStaticTemplate(inputCat)}
+				<span
+					class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2 {propertyType ==
+						'static' && arg.type === 'javascript'
+						? 'visible'
+						: 'invisible'}"
+				>
 					{'${...}'}
 				</span>
 			{/if}
 		</div>
-		<div class="flex flex-row space-x-2 items-center">
-			<Toggle
-				bind:checked
-				options={{
-					right: 'Raw Javascript Editor'
-				}}
-				on:change={(e) => {
-					const type = e.detail ? 'javascript' : 'static'
-					const staticTemplate = isStaticTemplate(inputCat)
-					if (type === 'javascript') {
-						arg.expr = getDefaultExpr(
-							importPath,
-							argName,
-							staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
-						)
-
-						arg.value = undefined
-						propertyType = 'javascript'
-					} else {
-						arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
-
-						arg.expr = undefined
-						propertyType = 'static'
-					}
+		<div class="flex flex-row gap-1 flex-wrap">
+			<div>
+				<ToggleButtonGroup
+					bind:selected={propertyType}
+					on:selected={(e) => {
+						const staticTemplate = isStaticTemplate(inputCat)
+						if (e.detail === 'javascript') {
+							arg.expr = getDefaultExpr(
+								argName,
+								previousModuleId,
+								staticTemplate
+									? `\`${arg.value ?? ''}\``
+									: arg.value
+									? JSON.stringify(arg.value, null, 4)
+									: ''
+							)
 
-					arg.type = type
-				}}
-			/>
+							arg.value = undefined
+							propertyType = 'javascript'
+							arg.type = 'javascript'
+						} else {
+							if (staticTemplate) {
+								arg.value = codeToStaticTemplate(arg.expr)
+								setPropertyType(arg.value)
+							} else {
+								arg.type = 'static'
+								arg.value = undefined
+								arg.expr = undefined
+							}
+							propertyType = 'static'
+						}
+					}}
+				>
+					{#if isStaticTemplate(inputCat)}
+						<ToggleButton light position="left" value="static" size="xs">
+							{'${} '}Templatable</ToggleButton
+						>
+					{:else}
+						<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
+					{/if}
 
-			<Button
-				variant="contained"
-				color="blue"
-				size="md"
-				on:click={() => {
-					focusProp(argName, 'connect', (path) => {
-						connectProperty(path)
-						return false
-					})
-				}}
-			>
-				<Icon data={faChain} />
-			</Button>
+					<ToggleButton
+						light
+						position="right"
+						value="javascript"
+						startIcon={{ icon: faCode }}
+						size="xs"
+					>
+						Dynamic (JS)
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</div>
+			<div>
+				<Button
+					variant="contained"
+					color="blue"
+					size="xs"
+					on:click={() => {
+						focusProp(argName, 'connect', (path) => {
+							connectProperty(path)
+							return false
+						})
+					}}>Connect &rightarrow;</Button
+				>
+			</div>
 		</div>
 	</div>
 	<div class="max-w-xs" />
 
-	{#if propertyType === undefined || !checked}
+	{#if propertyType === undefined || propertyType == 'static'}
 		<ArgInput
 			bind:this={argInput}
 			on:focus={onFocus}
@@ -171,31 +202,31 @@ const { focusProp } = getContext('PropPickerWrapper');
 					setPropertyType(e.detail.rawValue)
 				}
 			}}
+			{variableEditor}
+			{itemPicker}
+			bind:pickForField
 		/>
-	{:else if checked}
-		{#if arg.expr != undefined}
-			<div class="border rounded p-2 mt-2 border-gray-300">
-				<SimpleEditor
-					bind:this={monaco}
-					bind:code={arg.expr}
-					{extraLib}
-					lang="javascript"
-					class="few-lines-editor"
-					extraLibPath="file:///node_modules/@types/windmill@{importPath}/index.d.ts"
-					shouldBindKey={false}
-					on:focus={() => {
-						focusProp(argName, 'insert', (path) => {
-							monaco?.insertAtCursor(path)
-							return false
-						})
-					}}
-				/>
-			</div>
-			<DynamicInputHelpBox {importPath} />
-			<div class="mb-2" />
-		{/if}
+	{:else if arg.expr != undefined}
+		<div class="border rounded p-2 mt-2 border-gray-300">
+			<SimpleEditor
+				bind:this={monaco}
+				bind:code={arg.expr}
+				{extraLib}
+				lang="javascript"
+				shouldBindKey={false}
+				on:focus={() => {
+					focusProp(argName, 'insert', (path) => {
+						monaco?.insertAtCursor(path)
+						return false
+					})
+				}}
+				autoHeight
+			/>
+		</div>
+		<DynamicInputHelpBox />
+		<div class="mb-2" />
 	{:else}
-		<p>Not recognized arg type {arg.type}</p>
+		Not recognized input type {argName}
 	{/if}
 {:else}
 	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>

package/components/InputTransformForm.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import type { InputTransform } from '../gen';
 import SimpleEditor from './SimpleEditor.svelte';
+import type VariableEditor from './VariableEditor.svelte';
+import type ItemPicker from './ItemPicker.svelte';
+import type { InputTransform } from '../gen';
 declare const __propDef: {
     props: {
         schema: Schema;
@@ -9,7 +11,10 @@ declare const __propDef: {
         argName: string;
         extraLib?: string | undefined;
         inputCheck?: boolean | undefined;
-        importPath?: string | undefined;
+        previousModuleId: string | undefined;
+        pickForField?: string | undefined;
+        variableEditor?: VariableEditor | undefined;
+        itemPicker?: ItemPicker | undefined;
         monaco?: SimpleEditor | undefined;
     };
     events: {
@@ -17,9 +22,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InputTransformFormProps = typeof __propDef.props;
-export declare type InputTransformFormEvents = typeof __propDef.events;
-export declare type InputTransformFormSlots = typeof __propDef.slots;
+export type InputTransformFormProps = typeof __propDef.props;
+export type InputTransformFormEvents = typeof __propDef.events;
+export type InputTransformFormSlots = typeof __propDef.slots;
 export default class InputTransformForm extends SvelteComponentTyped<InputTransformFormProps, InputTransformFormEvents, InputTransformFormSlots> {
 }
 export {};

package/components/InputTransformsViewer.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InputTransformsViewerProps = typeof __propDef.props;
-export declare type InputTransformsViewerEvents = typeof __propDef.events;
-export declare type InputTransformsViewerSlots = typeof __propDef.slots;
+export type InputTransformsViewerProps = typeof __propDef.props;
+export type InputTransformsViewerEvents = typeof __propDef.events;
+export type InputTransformsViewerSlots = typeof __propDef.slots;
 export default class InputTransformsViewer extends SvelteComponentTyped<InputTransformsViewerProps, InputTransformsViewerEvents, InputTransformsViewerSlots> {
 }
 export {};

package/components/InviteGlobalUser.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InviteGlobalUserProps = typeof __propDef.props;
-export declare type InviteGlobalUserEvents = typeof __propDef.events;
-export declare type InviteGlobalUserSlots = typeof __propDef.slots;
+export type InviteGlobalUserProps = typeof __propDef.props;
+export type InviteGlobalUserEvents = typeof __propDef.events;
+export type InviteGlobalUserSlots = typeof __propDef.slots;
 export default class InviteGlobalUser extends SvelteComponentTyped<InviteGlobalUserProps, InviteGlobalUserEvents, InviteGlobalUserSlots> {
 }
 export {};

package/components/InviteUser.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InviteUserProps = typeof __propDef.props;
-export declare type InviteUserEvents = typeof __propDef.events;
-export declare type InviteUserSlots = typeof __propDef.slots;
+export type InviteUserProps = typeof __propDef.props;
+export type InviteUserEvents = typeof __propDef.events;
+export type InviteUserSlots = typeof __propDef.slots;
 export default class InviteUser extends SvelteComponentTyped<InviteUserProps, InviteUserEvents, InviteUserSlots> {
 }
 export {};

package/components/ItemPicker.svelte

@@ -1,5 +1,5 @@
 <script>import Fuse from 'fuse.js';
-import { Drawer } from './common';
+import { Drawer, Skeleton } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 export let pickCallback;
@@ -7,7 +7,12 @@ export let loadItems;
 export let extraField;
 export let itemName;
 export let closeOnClick = true;
-export let noItemMessage = '';
+/** Displayed if the load function returns no items. */
+export let noItemMessage = 'There are no items in the list';
+/** Displayed if the search returns no items. */
+export let emptySearchMessage = 'No items found';
+export let buttons = {};
+let loading = false;
 let items = [];
 let filteredItems = [];
 let itemsFilter = '';
@@ -17,11 +22,13 @@ const fuseOptions = {
 };
 const fuse = new Fuse(items, fuseOptions);
 export function openDrawer() {
+    loading = true;
     loadItems().then((v) => {
         items = v;
         if (items) {
             fuse.setCollection(items);
         }
+        loading = false;
     });
     drawer.openDrawer();
 }
@@ -33,44 +40,85 @@ let drawer;
 <Drawer bind:this={drawer} size="600px">
 	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
 		<div>
-			{#if filteredItems}
-				<div class="w-12/12 pb-4">
-					<input
-						type="text"
-						placeholder="Search {itemName}"
-						bind:value={itemsFilter}
-						class="search-item"
-					/>
+			<div class="w-12/12 pb-4">
+				<input
+					type="text"
+					placeholder="Search {itemName}"
+					bind:value={itemsFilter}
+					class="search-item"
+				/>
+			</div>
+			{#if loading}
+				{#each new Array(6) as _}
+					<Skeleton layout={[[2], 0.7]} />
+				{/each}
+			{:else if !items?.length}
+				<div class="text-center text-sm text-gray-600 mt-2">
+					{@html noItemMessage}
 				</div>
+			{:else if filteredItems?.length}
 				<ul class="divide-y divide-gray-200">
 					{#each filteredItems as obj}
-						<li
-							class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
-							on:click={() => {
-								if (closeOnClick) {
-									drawer.closeDrawer()
-								}
-								pickCallback(obj['path'], obj[extraField])
-							}}
-						>
-							<p class="text-sm font-semibold flex flex-row">
+						<li class="flex flex-row w-full">
+							<button
+								class="py-4 px-1 gap-1 flex flex-row grow border  border-gray-300 border-opacity-0 
+									hover:bg-white hover:border-opacity-100 text-black"
+								on:click={() => {
+									if (closeOnClick) {
+										drawer.closeDrawer()
+									}
+									pickCallback(obj['path'], obj[extraField])
+								}}
+							>
 								{#if `app` in obj}
-									<IconedResourceType silent={true} name={obj['app']} />
-									<span class="mr-2" />
+									<div class="mr-2 text-sm text-left truncate w-24">
+										<IconedResourceType after={true} silent={false} name={obj['app']} />
+									</div>
 								{/if}
-								<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-words"
-									>{obj['path'] ?? ''}</span
-								>
-							</p>
-							<p class="text-xs italic">{obj['description'] ?? ''}</p>
+								{#if `resource_type` in obj}
+									<div class="mr-2 truncate text-left w-24 text-sm">
+										<IconedResourceType after={true} name={obj['resource_type']} />
+									</div>
+								{/if}
+								<div class="flex flex-col">
+									<div class="text-sm font-semibold flex flex-col">
+										<span class="mr-2 text-left">{obj[extraField] ?? ''}</span>
+										{#if extraField != 'path'}
+											<span class="font-normal text-xs text-left italic overflow-hidden"
+												>{obj['path'] ?? ''}</span
+											>
+										{/if}
+									</div>
+									{#if extraField != 'description'}
+										<div class="text-xs font-light italic text-left">{obj['description'] ?? ''}</div
+										>
+									{/if}
+								</div>
+							</button>
+							{#if buttons}
+								<div class="flex flex-row">
+									{#each Object.entries(buttons) as [name, button]}
+										<button
+											class="py-4 px-1 gap-1 flex flex-row grow  text-black"
+											on:click={() => {
+												button(obj['path'] ?? '')
+											}}
+										>
+											{name}
+										</button>
+									{/each}
+								</div>
+							{/if}
 						</li>
 					{/each}
 				</ul>
 			{:else}
-				<span class="mt-2 text-sm text-red-400">{noItemMessage}</span>
+				<div class="text-center text-sm text-gray-600 mt-2">
+					{@html emptySearchMessage}
+				</div>
 			{/if}
 		</div>
-		<span slot="submission">
+		<span slot="submission" class="mr-2">
 			<slot name="submission" />
 		</span>
 	</DrawerContent>

package/components/ItemPicker.svelte.d.ts

@@ -6,7 +6,9 @@ declare const __propDef: {
         extraField: string;
         itemName: string;
         closeOnClick?: boolean | undefined;
-        noItemMessage?: string | undefined;
+        /** Displayed if the load function returns no items. */ noItemMessage?: string | undefined;
+        /** Displayed if the search returns no items. */ emptySearchMessage?: string | undefined;
+        buttons?: Record<string, (x: string) => void> | undefined;
         openDrawer?: (() => void) | undefined;
     };
     events: {
@@ -16,9 +18,9 @@ declare const __propDef: {
         submission: {};
     };
 };
-export declare type ItemPickerProps = typeof __propDef.props;
-export declare type ItemPickerEvents = typeof __propDef.events;
-export declare type ItemPickerSlots = typeof __propDef.slots;
+export type ItemPickerProps = typeof __propDef.props;
+export type ItemPickerEvents = typeof __propDef.events;
+export type ItemPickerSlots = typeof __propDef.slots;
 export default class ItemPicker extends SvelteComponentTyped<ItemPickerProps, ItemPickerEvents, ItemPickerSlots> {
     get openDrawer(): () => void;
 }

package/components/JobArgs.svelte

@@ -4,11 +4,11 @@ import TableCustom from './TableCustom.svelte';
 export let args;
 </script>
 
-<TableCustom class="px-10 py-2">
-	<tr slot="header-row"
-		><th>Argument</th>
-		<th>Value</th></tr
-	>
+<TableCustom class="py-2">
+	<tr slot="header-row">
+		<th>Argument</th>
+		<th>Value</th>
+	</tr>
 	<tbody slot="body">
 		{#if args && Object.keys(args).length > 0}
 			{#each Object.entries(args) as [arg, value]}

package/components/JobArgs.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type JobArgsProps = typeof __propDef.props;
-export declare type JobArgsEvents = typeof __propDef.events;
-export declare type JobArgsSlots = typeof __propDef.slots;
+export type JobArgsProps = typeof __propDef.props;
+export type JobArgsEvents = typeof __propDef.events;
+export type JobArgsSlots = typeof __propDef.slots;
 export default class JobArgs extends SvelteComponentTyped<JobArgsProps, JobArgsEvents, JobArgsSlots> {
 }
 export {};

package/components/JobStatus.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type JobStatusProps = typeof __propDef.props;
-export declare type JobStatusEvents = typeof __propDef.events;
-export declare type JobStatusSlots = typeof __propDef.slots;
+export type JobStatusProps = typeof __propDef.props;
+export type JobStatusEvents = typeof __propDef.events;
+export type JobStatusSlots = typeof __propDef.slots;
 export default class JobStatus extends SvelteComponentTyped<JobStatusProps, JobStatusEvents, JobStatusSlots> {
 }
 export {};

package/components/LogViewer.svelte

@@ -1,4 +1,5 @@
-<script>export let content;
+<script>import { Drawer, DrawerContent } from './common';
+export let content;
 export let isLoading;
 let scroll = true;
 let div = null;
@@ -9,16 +10,30 @@ $: content && scrollToBottom();
 export function scrollToBottom() {
     scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
 }
+let logViewer;
 </script>
 
+<Drawer bind:this={logViewer} size="900px">
+	<DrawerContent title={'Expanded Logs'} on:close={logViewer.closeDrawer}>
+		<div>
+			<pre class="bg-gray-50 text-xs w-full p-2"
+				>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+			>
+		</div>
+	</DrawerContent>
+</Drawer>
+
 <div class="relative w-full h-full">
 	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
 		<div
 			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
 		>
-			<div>
-				Auto scroll
-				<input type="checkbox" bind:checked={scroll} />
+			<div class="flex gap-1">
+				<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} />
+				</div>
 			</div>
 		</div>
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"

package/components/LogViewer.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type LogViewerProps = typeof __propDef.props;
-export declare type LogViewerEvents = typeof __propDef.events;
-export declare type LogViewerSlots = typeof __propDef.slots;
+export type LogViewerProps = typeof __propDef.props;
+export type LogViewerEvents = typeof __propDef.events;
+export type LogViewerSlots = typeof __propDef.slots;
 export default class LogViewer extends SvelteComponentTyped<LogViewerProps, LogViewerEvents, LogViewerSlots> {
     get scrollToBottom(): () => void;
 }

package/components/Modal.svelte.d.ts

@@ -18,9 +18,9 @@ declare const __propDef: {
         submission: {};
     };
 };
-export declare type ModalProps = typeof __propDef.props;
-export declare type ModalEvents = typeof __propDef.events;
-export declare type ModalSlots = typeof __propDef.slots;
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
 export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
     get closeDrawer(): () => void;
     get openDrawer(): () => void;

package/components/ModulePreview.svelte

@@ -7,6 +7,8 @@ import DisplayResult from './DisplayResult.svelte';
 import Button from './common/button/Button.svelte';
 import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import { flowStateStore } from './flows/flowState';
+import { flowStore } from './flows/flowStore';
+import { Alert } from './common';
 let testJobLoader;
 // Test
 let testIsLoading = false;
@@ -46,6 +48,12 @@ function jobDone() {
 />
 <Splitpanes>
 	<Pane size={50} minSize={20} class="p-4">
+		{#if $flowStore.value.same_worker}
+			<div class="mb-1 bg-yellow-100 text-yellow-700 p-1 text-xs"
+				>The `./shared` folder is not passed across individual "Test this step"</div
+			>
+		{/if}
+
 		<RunForm
 			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
 			runAction={(_, args) => runTest(args)}

package/components/ModulePreview.svelte.d.ts

@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ModulePreviewProps = typeof __propDef.props;
-export declare type ModulePreviewEvents = typeof __propDef.events;
-export declare type ModulePreviewSlots = typeof __propDef.slots;
+export type ModulePreviewProps = typeof __propDef.props;
+export type ModulePreviewEvents = typeof __propDef.events;
+export type ModulePreviewSlots = typeof __propDef.slots;
 export default class ModulePreview extends SvelteComponentTyped<ModulePreviewProps, ModulePreviewEvents, ModulePreviewSlots> {
     get runTestWithStepArgs(): () => void;
     get runTest(): (args: any) => Promise<void>;