windmill-components 1.52.0 → 1.55.1

package/components/InputTransformForm.svelte

@@ -78,11 +78,12 @@ function onFocus() {
             arg.expr = path;
             arg.type = 'javascript';
             propertyType = 'javascript';
+            monaco?.setCode(arg.expr);
             return true;
         });
     }
 }
-const { focusProp } = getContext('PropPickerWrapper');
+const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 </script>
 
 {#if arg != undefined}
@@ -108,22 +109,37 @@ const { focusProp } = getContext('PropPickerWrapper');
 				</span>
 			{/if}
 		</div>
-		<div class="flex flex-row gap-1 flex-wrap">
+		<div class="flex flex-row-reverse gap-x-4 gap-y-1 flex-wrap">
+			<div>
+				<Button
+					variant="contained"
+					color="blue"
+					size="xs"
+					on:click={() => {
+						focusProp(argName, 'connect', (path) => {
+							connectProperty(path)
+							return true
+						})
+					}}>Connect &rightarrow;</Button
+				>
+			</div>
 			<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)
-									: ''
-							)
+							if (arg.expr == undefined) {
+								arg.expr = getDefaultExpr(
+									argName,
+									previousModuleId,
+									staticTemplate
+										? `\`${arg.value ?? ''}\``
+										: arg.value
+										? JSON.stringify(arg.value, null, 4)
+										: ''
+								)
+							}
 
 							arg.value = undefined
 							propertyType = 'javascript'
@@ -160,74 +176,77 @@ const { focusProp } = getContext('PropPickerWrapper');
 					</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 || propertyType == 'static'}
-		<ArgInput
-			bind:this={argInput}
-			on:focus={onFocus}
-			label={argName}
-			bind:editor={monaco}
-			bind:description={schema.properties[argName].description}
-			bind:value={arg.value}
-			type={schema.properties[argName].type}
-			required={schema.required.includes(argName)}
-			bind:pattern={schema.properties[argName].pattern}
-			bind:valid={inputCheck}
-			defaultValue={schema.properties[argName].default}
-			bind:enum_={schema.properties[argName].enum}
-			bind:format={schema.properties[argName].format}
-			contentEncoding={schema.properties[argName].contentEncoding}
-			bind:itemsType={schema.properties[argName].items}
-			properties={schema.properties[argName].properties}
-			displayHeader={false}
-			bind:inputCat
-			on:input={(e) => {
-				if (isStaticTemplate(inputCat)) {
-					setPropertyType(e.detail.rawValue)
-				}
-			}}
-			{variableEditor}
-			{itemPicker}
-			bind:pickForField
-		/>
-	{: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
-					})
+	<div
+		class="relative {$propPickerConfig?.propName == argName
+			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
+			: ''}"
+	>
+		{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
+			<span
+				class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
+			>
+				Connect input &rightarrow;
+			</span>
+		{/if}
+		{#if propertyType === undefined || propertyType == 'static'}
+			<ArgInput
+				noMargin
+				compact
+				bind:this={argInput}
+				on:focus={onFocus}
+				label={argName}
+				bind:editor={monaco}
+				bind:description={schema.properties[argName].description}
+				bind:value={arg.value}
+				type={schema.properties[argName].type}
+				required={schema.required.includes(argName)}
+				bind:pattern={schema.properties[argName].pattern}
+				bind:valid={inputCheck}
+				defaultValue={schema.properties[argName].default}
+				bind:enum_={schema.properties[argName].enum}
+				bind:format={schema.properties[argName].format}
+				contentEncoding={schema.properties[argName].contentEncoding}
+				bind:itemsType={schema.properties[argName].items}
+				properties={schema.properties[argName].properties}
+				displayHeader={false}
+				bind:inputCat
+				on:input={(e) => {
+					if (isStaticTemplate(inputCat)) {
+						setPropertyType(e.detail.rawValue)
+					}
 				}}
-				autoHeight
+				{variableEditor}
+				{itemPicker}
+				bind:pickForField
 			/>
-		</div>
-		<DynamicInputHelpBox />
-		<div class="mb-2" />
-	{:else}
-		Not recognized input type {argName}
-	{/if}
+		{:else if arg.expr != undefined}
+			<div class="border rounded 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}
+			Not recognized input type {argName}
+		{/if}
+	</div>
+	<div class="mb-6" />
 {:else}
 	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>
 {/if}

package/components/InviteGlobalUser.svelte

@@ -26,7 +26,7 @@ async function addUser() {
             company
         }
     });
-    sendUserToast(`Successfully added ${email}. Welcome to them!`);
+    sendUserToast(`Added ${email}`);
     dispatch('new');
 }
 </script>
@@ -34,7 +34,7 @@ async function addUser() {
 <div class="flex flex-row space-x-1">
 	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
 
-	<Toggle class="mx-2" bind:checked={is_super_admin} options={{ right: 'admin' }} />
+	<Toggle class="mx-2" bind:checked={is_super_admin} options={{ right: 'superadmin' }} />
 	<input on:keyup={handleKeyUp} type="password" placeholder="password" bind:value={password} />
 	<input type="text" on:keyup={handleKeyUp} placeholder="name" bind:value={name} />
 	<input type="text" on:keyup={handleKeyUp} placeholder="company" bind:value={company} />

package/components/InviteGlobalUser.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         new: CustomEvent<any>;
     } & {

package/components/InviteUser.svelte

@@ -2,8 +2,8 @@
 import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import { WorkspaceService } from '../gen';
-import { Button } from './common';
-import Toggle from './Toggle.svelte';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 let email;
 let is_admin = false;
@@ -19,18 +19,32 @@ async function inviteUser() {
         workspace: $workspaceStore,
         requestBody: {
             email,
-            is_admin
+            is_admin: selected == 'admin',
+            operator: selected == 'operator'
         }
     });
-    sendUserToast(`Successfully invited ${email}. Welcome to them!`);
+    sendUserToast(`Invited ${email}`);
     dispatch('new');
 }
+let selected = 'author';
 </script>
 
 <div class="flex flex-row">
 	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} class="mr-4" />
-
-	<Toggle bind:checked={is_admin} options={{ right: 'admin' }} />
+	<ToggleButtonGroup bind:selected>
+		<ToggleButton position="left" value="operator" size="sm"
+			>Operator <Tooltip
+				>An operator can only execute and view scripts/flows/apps from your workspace, and only
+				those that he has visibility on</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="center" value="author" size="sm"
+			>Author <Tooltip
+				>An Author can execute and view scripts/flows/apps, but he can also create new ones</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="right" value="admin" size="sm">Admin</ToggleButton>
+	</ToggleButtonGroup>
 	<Button
 		variant="contained"
 		color="blue"

package/components/InviteUser.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         new: CustomEvent<any>;
     } & {

package/components/ItemPicker.svelte

@@ -1,10 +1,11 @@
-<script>import Fuse from 'fuse.js';
-import { Drawer, Skeleton } from './common';
+<script>import { Drawer, Skeleton } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
+import SearchItems from './SearchItems.svelte';
 export let pickCallback;
 export let loadItems;
-export let extraField;
+export let extraField = 'path';
+export let extraField2 = undefined;
 export let itemName;
 export let closeOnClick = true;
 /** Displayed if the load function returns no items. */
@@ -15,28 +16,31 @@ export let buttons = {};
 let loading = false;
 let items = [];
 let filteredItems = [];
-let itemsFilter = '';
-const fuseOptions = {
-    includeScore: false,
-    keys: ['path', extraField]
-};
-const fuse = new Fuse(items, fuseOptions);
+let filter = '';
 export function openDrawer() {
     loading = true;
     loadItems().then((v) => {
         items = v;
-        if (items) {
-            fuse.setCollection(items);
-        }
         loading = false;
     });
-    drawer.openDrawer();
+    drawer.openDrawer?.();
 }
-$: filteredItems =
-    itemsFilter.length > 0 && items ? fuse.search(itemsFilter).map((value) => value.item) : items;
 let drawer;
 </script>
 
+<SearchItems
+	{filter}
+	{items}
+	bind:filteredItems
+	f={(x) =>
+		(extraField2 ? x[extraField2] + ' ' : '') +
+		(x[extraField] ?? '') +
+		' ' +
+		(x['path'] && x['path'] != x[extraField] ? '(' + x['path'] + ')' ?? '' : '') +
+		' ' +
+		(x['description'] != x[extraField] ? x['description'] ?? '' : '')}
+/>
+
 <Drawer bind:this={drawer} size="600px">
 	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
 		<div>
@@ -44,7 +48,7 @@ let drawer;
 				<input
 					type="text"
 					placeholder="Search {itemName}"
-					bind:value={itemsFilter}
+					bind:value={filter}
 					class="search-item"
 				/>
 			</div>
@@ -81,17 +85,24 @@ let drawer;
 									</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 obj.marked}
+										<div class="text-sm font-semibold">
+											{@html obj.marked}
+										</div>
+									{:else}
+										<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>
-									{#if extraField != 'description'}
-										<div class="text-xs font-light italic text-left">{obj['description'] ?? ''}</div
-										>
 									{/if}
 								</div>
 							</button>
@@ -118,8 +129,8 @@ let drawer;
 				</div>
 			{/if}
 		</div>
-		<span slot="submission" class="mr-2">
+		<svelte:fragment slot="actions">
 			<slot name="submission" />
-		</span>
+		</svelte:fragment>
 	</DrawerContent>
 </Drawer>

package/components/ItemPicker.svelte.d.ts

@@ -3,7 +3,8 @@ declare const __propDef: {
     props: {
         pickCallback: (path: string, f: string) => void;
         loadItems: () => Promise<Record<string, any>[] | undefined>;
-        extraField: string;
+        extraField?: string | undefined;
+        extraField2?: string | undefined;
         itemName: string;
         closeOnClick?: boolean | undefined;
         /** Displayed if the load function returns no items. */ noItemMessage?: string | undefined;

package/components/JobStatus.svelte

@@ -30,21 +30,27 @@ export let job;
 		</Badge>
 	</div>
 {:else if job && 'running' in job && job.running}
-	<Badge large color="yellow">
-		<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Running {#if job.flow_status}({job.flow_status?.step ?? ''} of {job.raw_flow?.modules?.length ??
-				'?'}){/if}
-	</Badge>
+	<div>
+		<Badge large color="yellow">
+			<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Running {#if job.flow_status}({job.flow_status?.step ?? ''} of {job.raw_flow?.modules
+					?.length ?? '?'}){/if}
+		</Badge>
+	</div>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
-	<Badge>
-		<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Scheduled for {displayDate(job.scheduled_for)}
-	</Badge>
+	<div>
+		<Badge>
+			<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Scheduled for {displayDate(job.scheduled_for)}
+		</Badge>
+	</div>
 {:else if job && 'running' in job}
-	<Badge>
-		<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Queued
-	</Badge>
+	<div>
+		<Badge>
+			<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Queued
+		</Badge>
+	</div>
 {:else}
 	<Icon class="text-gray-200" data={faCircle} scale={SMALL_ICON_SCALE} />
 {/if}

package/components/LogViewer.svelte

@@ -1,6 +1,8 @@
-<script>import { Drawer, DrawerContent } from './common';
+<script>import { fade } from 'svelte/transition';
+import { Drawer, DrawerContent } from './common';
 export let content;
 export let isLoading;
+export let duration = undefined;
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
@@ -14,7 +16,7 @@ let logViewer;
 </script>
 
 <Drawer bind:this={logViewer} size="900px">
-	<DrawerContent title={'Expanded Logs'} on:close={logViewer.closeDrawer}>
+	<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
@@ -36,8 +38,14 @@ let logViewer;
 				</div>
 			</div>
 		</div>
+		{#if duration}
+			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
+		{/if}
+
 		<pre class="whitespace-pre-wrap break-words 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
+			>{#if content}<span transition:fade={{ duration: 50 }}>{content}</span
+				>{:else if isLoading}{:else}<span class="text-gray-600">No logs are available yet</span
+				>{/if}</pre
 		>
 	</div>
 </div>

package/components/LogViewer.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         content: string | undefined;
         isLoading: boolean;
+        duration?: number | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/components/ModuleStatus.svelte

@@ -0,0 +1,38 @@
+<script>import { FlowStatusModule } from '../gen';
+import { displayDate } from '../utils';
+import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from 'svelte-awesome';
+import { Badge } from './common';
+export let type;
+export let scheduled_for;
+</script>
+
+{#if type == FlowStatusModule.type.WAITING_FOR_EVENTS}
+	<span class="italic text-waiting">
+		<Icon class=" mr-2" data={faHourglassHalf} />
+		Waiting to be resumed by resume events such as approvals
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_PRIOR_STEPS}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		Waiting for prior steps to complete
+	</span>
+{:else if type == FlowStatusModule.type.WAITING_FOR_EXECUTOR}
+	<span class="italic text-gray-600">
+		<Icon data={faHourglassHalf} class="mr-2" />
+		{#if scheduled_for}
+			Job has been {scheduled_for} and will be executed after that time
+		{:else}
+			Job is waiting to be executed
+		{/if}
+	</span>
+{:else if type == FlowStatusModule.type.SUCCESS}
+	<Badge color="green">Success</Badge>
+{:else if type == FlowStatusModule.type.FAILURE}
+	<Badge color="red">Failure</Badge>
+{/if}
+
+<style>
+	.text-waiting {
+		color: #c76bf2;
+	}</style>

package/components/ModuleStatus.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import { FlowStatusModule } from '../gen';
+declare const __propDef: {
+    props: {
+        type: FlowStatusModule.type;
+        scheduled_for: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModuleStatusProps = typeof __propDef.props;
+export type ModuleStatusEvents = typeof __propDef.events;
+export type ModuleStatusSlots = typeof __propDef.slots;
+export default class ModuleStatus extends SvelteComponentTyped<ModuleStatusProps, ModuleStatusEvents, ModuleStatusSlots> {
+}
+export {};

package/components/ObjectResourceInput.svelte

@@ -1,22 +1,15 @@
 <script>import { ResourceService } from '../gen';
-import { logout } from '../logout';
 import { workspaceStore } from '../stores';
-import { ToggleButton, ToggleButtonGroup } from './common';
 import ResourcePicker from './ResourcePicker.svelte';
-import SchemaForm from './SchemaForm.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
 export let format;
 export let value;
-export let compact;
 function isString(value) {
     return typeof value === 'string' || value instanceof String;
 }
 let path = '';
 let args = {};
 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);
@@ -30,9 +23,6 @@ async function loadSchema(format) {
         schema = undefined;
     }
 }
-function argToValue() {
-    value = args;
-}
 function resourceToValue() {
     value = `$res:${path}`;
 }
@@ -46,52 +36,18 @@ function valueToPath() {
     if (isResource()) {
         path = value.substr('$res:'.length);
     }
-    else if (value !== undefined && value !== '') {
-        option = 'raw';
-    }
 }
 $: value && valueToPath();
 </script>
 
 <div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
-	<ToggleButtonGroup
-		col
-		bind:selected={option}
-		on:selected={(e) => {
-			if (e.detail === 'resource') {
-				resourceToValue()
-			} else {
-				argToValue()
-			}
+	<ResourcePicker
+		on:refresh={() => loadSchema(format)}
+		on:change={(e) => {
+			path = e.detail
+			resourceToValue()
 		}}
-	>
-		<ToggleButton light position="center" value="resource" size="xs">Resource</ToggleButton>
-		<ToggleButton light position="center" value="raw" size="xs">Raw</ToggleButton>
-	</ToggleButtonGroup>
-
-	<div class="grow flex items-center">
-		{#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-2 w-full">
-				{#if schema != undefined}
-					{#if !isString(args)}
-						<SchemaForm {compact} {schema} bind:isValid bind:args />
-					{/if}
-				{:else}
-					<SimpleEditor autoHeight lang="json" bind:value={args} />
-				{/if}
-			</div>
-		{/if}
-	</div>
+		bind:value={path}
+		resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
+	/>
 </div>

package/components/ObjectResourceInput.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         format: string;
         value: any;
-        compact: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;