windmill-components 1.444.1 → 1.447.4

package/package/components/HistoricInputs.svelte

@@ -0,0 +1,193 @@
+<script>import { InputService } from '../gen/index.js';
+import { workspaceStore } from '../stores.js';
+import { sendUserToast } from '../utils.js';
+import JobSchemaPicker from './schema/JobSchemaPicker.svelte';
+import RunningJobSchemaPicker from './schema/RunningJobSchemaPicker.svelte';
+import { createEventDispatcher, onDestroy } from 'svelte';
+import JobLoader from './runs/JobLoader.svelte';
+import { DataTable } from './table';
+import { clickOutside } from '../utils';
+import InfiniteList from './InfiniteList.svelte';
+export let scriptHash = null;
+export let scriptPath = null;
+export let flowPath = null;
+const dispatch = createEventDispatcher();
+let jobs = [];
+let loading = false;
+let hasMoreCurrentRuns = false;
+let page = 1;
+let infiniteList = undefined;
+let loadInputsPageFn = undefined;
+let runnableType = undefined;
+$: runnableType = scriptHash
+    ? 'ScriptHash'
+    : scriptPath
+        ? 'ScriptPath'
+        : flowPath
+            ? 'FlowPath'
+            : undefined;
+let runnableId = undefined;
+function initLoadInputs() {
+    runnableId = scriptHash || scriptPath || flowPath || undefined;
+    loadInputsPageFn = async (page, perPage) => {
+        const inputs = await InputService.getInputHistory({
+            workspace: $workspaceStore,
+            runnableId,
+            runnableType,
+            page,
+            perPage,
+            includePreview: true
+        });
+        const inputsWithPayload = await Promise.all(inputs.map(async (input) => {
+            const payloadData = await loadArgsFromHistory(input.id, undefined, false);
+            return {
+                ...input,
+                payloadData
+            };
+        }));
+        return inputsWithPayload;
+    };
+    infiniteList?.setLoader(loadInputsPageFn);
+}
+function handleSelected(data) {
+    if (selected === data.id) {
+        selected = undefined;
+        dispatch('select', undefined);
+        return;
+    }
+    selected = data.id;
+    dispatch('select', data.payloadData);
+}
+let selected = undefined;
+onDestroy(() => {
+    selected = undefined;
+    dispatch('select', undefined);
+});
+async function getPropPickerElements() {
+    return Array.from(document.querySelectorAll('[data-schema-picker], [data-schema-picker] *'));
+}
+async function loadArgsFromHistory(id, input, allowLarge) {
+    if (!id)
+        return;
+    const payloadData = await InputService.getArgsFromHistoryOrSavedInput({
+        jobOrInputId: id,
+        workspace: $workspaceStore,
+        input,
+        allowLarge
+    });
+    return payloadData;
+}
+function handleKeydown(event) {
+    if (event.key === 'Escape' && selected) {
+        selected = undefined;
+        dispatch('select', undefined);
+    }
+}
+function handleError(e) {
+    if (e.type === 'load') {
+        sendUserToast(`Failed to load input history: ${e.error}`, true);
+    }
+}
+let jobHovered = undefined;
+function refresh() {
+    if (infiniteList) {
+        infiniteList.loadData('refresh');
+    }
+}
+$: !loading && refresh();
+$: $workspaceStore && (scriptHash || scriptPath || flowPath) && infiniteList && initLoadInputs();
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if runnableId}
+	<JobLoader
+		bind:jobs
+		path={runnableId}
+		isSkipped={false}
+		jobKindsCat="all"
+		user={null}
+		label={null}
+		folder={null}
+		concurrencyKey={null}
+		tag={null}
+		success="running"
+		argFilter={undefined}
+		bind:loading
+		syncQueuedRunsCount={false}
+		refreshRate={10000}
+		computeMinAndMax={undefined}
+		perPage={5}
+	/>
+{/if}
+
+<div
+	class="h-full w-full flex flex-col gap-4"
+	use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
+	on:click_outside={() => {
+		if (selected) {
+			selected = undefined
+			dispatch('select', undefined)
+		}
+	}}
+>
+	<div class="grow-0">
+		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
+			{#if loading && (jobs == undefined || jobs?.length == 0)}
+				<div class="text-center text-tertiary text-xs py-2">Loading current runs...</div>
+			{:else if jobs?.length > 0}
+				<colgroup>
+					<col class="w-8" />
+					<col class="w-20" />
+					<col />
+				</colgroup>
+
+				<tbody class="w-full overflow-y-auto">
+					{#each jobs as job (job.id)}
+						<RunningJobSchemaPicker
+							{job}
+							selected={selected === job.id}
+							hovering={jobHovered === job.id}
+							on:select={(e) => handleSelected(e.detail)}
+						/>
+					{/each}
+					{#if jobs?.length == 5}
+						<div class="text-left text-tertiary text-xs"
+							>... there may be more runs not displayed here as the limit is 5</div
+						>
+					{/if}
+				</tbody>
+			{:else}
+				<div class="text-center text-tertiary text-xs py-2">No job currently running</div>
+			{/if}
+		</DataTable>
+	</div>
+
+	<div class="min-h-0 grow">
+		<InfiniteList
+			bind:this={infiniteList}
+			selectedItemId={selected}
+			on:error={(e) => handleError(e.detail)}
+			on:select={(e) => handleSelected(e.detail)}
+		>
+			<svelte:fragment slot="columns">
+				<colgroup>
+					<col class="w-8" />
+					<col class="w-20" />
+					<col />
+				</colgroup>
+			</svelte:fragment>
+			<svelte:fragment let:item let:hover>
+				<JobSchemaPicker
+					job={item}
+					selected={selected === item.id}
+					hovering={hover}
+					payloadData={item.payloadData}
+				/>
+			</svelte:fragment>
+			<svelte:fragment slot="empty">
+				<div class="text-center text-tertiary text-xs py-2">No previous Runs</div>
+			</svelte:fragment>
+		</InfiniteList>
+	</div>
+</div>

package/package/components/HistoricInputs.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        scriptHash?: string | null | undefined;
+        scriptPath?: string | null | undefined;
+        flowPath?: string | null | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HistoricInputsProps = typeof __propDef.props;
+export type HistoricInputsEvents = typeof __propDef.events;
+export type HistoricInputsSlots = typeof __propDef.slots;
+export default class HistoricInputs extends SvelteComponent<HistoricInputsProps, HistoricInputsEvents, HistoricInputsSlots> {
+}
+export {};

package/package/components/InfiniteList.svelte

@@ -0,0 +1,161 @@
+<script>import DataTable from './table/DataTable.svelte';
+import Skeleton from './common/skeleton/Skeleton.svelte';
+import { createEventDispatcher } from 'svelte';
+import { Row } from './table/index';
+import { twMerge } from 'tailwind-merge';
+const dispatch = createEventDispatcher();
+export let loading = false;
+export let items = undefined;
+export let selectedItemId = undefined;
+export let isEmpty = true;
+export let length = 0;
+let hasMore = false;
+let page = 1;
+let perPage = 10;
+let hasAlreadyFailed = false;
+let hovered = undefined;
+let initLoad = false;
+let loadInputs = undefined;
+let deleteItemFn = undefined;
+export async function loadData(loadOption = 'loadMore') {
+    if (!loadInputs)
+        return;
+    loading = true;
+    hasMore = hasMore;
+    if (hasMore && loadOption === 'loadMore') {
+        page++;
+    }
+    try {
+        const newItems = await loadInputs(1, page * perPage);
+        if (loadOption === 'refresh' &&
+            items &&
+            items?.length > 0 &&
+            newItems.length === items?.length &&
+            newItems.every((i, index) => i.id === items?.[index]?.id)) {
+            return;
+        }
+        const existingIds = new Set(items?.map((i) => i.id) || []);
+        items = newItems.map((item) => ({
+            ...item,
+            isNew: initLoad && !existingIds.has(item.id)
+        }));
+        setTimeout(() => {
+            if (items) {
+                items = items.map((item) => ({
+                    ...item,
+                    isNew: false
+                }));
+            }
+        }, 1000);
+        page = Math.floor(items.length / perPage) + 1;
+        hasMore = items.length === perPage * (page - 1);
+        initLoad = true;
+        isEmpty = items.length === 0;
+        length = items.length;
+    }
+    catch (err) {
+        console.error(err);
+        if (hasAlreadyFailed)
+            return;
+        hasAlreadyFailed = true;
+        dispatch('error', { type: 'load', error: err });
+    }
+    finally {
+        loading = false;
+    }
+}
+export async function deleteItem(id) {
+    if (!deleteItemFn)
+        return;
+    try {
+        items = items?.map((i) => (i.id === id ? { ...i, isDeleting: true } : i)) ?? [];
+        setTimeout(async () => {
+            deleteItemFn ? await deleteItemFn(id) : null;
+            if (selectedItemId === id) {
+                selectedItemId = null;
+            }
+            loadData('refresh');
+        }, 100);
+    }
+    catch (err) {
+        dispatch('error', { type: 'delete', error: err });
+    }
+}
+export async function setLoader(loader) {
+    loadInputs = loader;
+    loadData('forceRefresh');
+}
+export async function setDeleteItemFn(fn) {
+    deleteItemFn = fn;
+}
+</script>
+
+<div class="h-full">
+	{#if items === undefined && loading}
+		<Skeleton layout={[[8]]} />
+	{:else if items && items.length > 0}
+		<DataTable
+			size="xs"
+			infiniteScroll
+			{hasMore}
+			tableFixed={true}
+			on:loadMore={() => {
+				loadData()
+			}}
+		>
+			<slot name="columns" />
+
+			<tbody class="h-full w-full">
+				{#each items ?? [] as item, index}
+					{@const hover = item.id === hovered}
+					<Row
+						on:click={() => dispatch('select', item)}
+						class={twMerge(
+							selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+							'cursor-pointer rounded-md',
+							item.isNew && index === 0 ? 'animate-slideIn' : 'group'
+						)}
+						on:hover={(e) => (hovered = e.detail ? item.id : undefined)}
+					>
+						<slot {item} {hover} />
+					</Row>
+				{/each}
+			</tbody>
+		</DataTable>
+	{:else}
+		<slot name="empty" {items} />
+	{/if}
+</div>
+
+<style>
+	@keyframes slideOut {
+		from {
+			opacity: 1;
+			transform: translateX(0);
+			max-height: 100px;
+		}
+		to {
+			opacity: 0;
+			transform: translateX(-100%);
+			max-height: 0;
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	@keyframes greenHighlight {
+		0% {
+			background-color: rgba(70, 255, 138, 0.5);
+			box-shadow: 0 0 15px rgb(34 197 94 / 0.3);
+		}
+		100% {
+			background-color: transparent;
+			box-shadow: none;
+		}
+	}
+
+	:global(.animate-slideIn) {
+		animation: greenHighlight 2s ease-out forwards;
+		will-change: transform, opacity, background-color, box-shadow;
+		position: relative;
+	}</style>

package/package/components/InfiniteList.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        loading?: boolean | undefined;
+        items?: any[] | undefined;
+        selectedItemId?: any | undefined;
+        isEmpty?: boolean | undefined;
+        length?: number | undefined;
+        loadData?: ((loadOption?: 'refresh' | 'forceRefresh' | 'loadMore') => Promise<void>) | undefined;
+        deleteItem?: ((id: string) => Promise<void>) | undefined;
+        setLoader?: ((loader: (page: number, perPage: number) => Promise<any[]>) => Promise<void>) | undefined;
+        setDeleteItemFn?: ((fn: (id: any) => Promise<any>) => Promise<void>) | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+        error: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        columns: {};
+        default: {
+            item: any;
+            hover: any;
+        };
+        empty: {
+            items: any[] | undefined;
+        };
+    };
+};
+export type InfiniteListProps = typeof __propDef.props;
+export type InfiniteListEvents = typeof __propDef.events;
+export type InfiniteListSlots = typeof __propDef.slots;
+export default class InfiniteList extends SvelteComponent<InfiniteListProps, InfiniteListEvents, InfiniteListSlots> {
+    get loadData(): (loadOption?: "refresh" | "loadMore" | "forceRefresh") => Promise<void>;
+    get deleteItem(): (id: string) => Promise<void>;
+    get setLoader(): (loader: (page: number, perPage: number) => Promise<any[]>) => Promise<void>;
+    get setDeleteItemFn(): (fn: (id: any) => Promise<any>) => Promise<void>;
+}
+export {};

package/package/components/LightweightArgInput.svelte

@@ -272,19 +272,21 @@ function addItemByItemsType() {
 						/>
 					{/if}
 				{:else if inputCat == 'boolean'}
-					<Toggle
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-						}}
-						class={valid && error == ''
-							? ''
-							: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
-						bind:checked={value}
-						{disabled}
-					/>
-					{#if type == 'boolean' && value == undefined}
-						<span>&nbsp; Not set</span>
-					{/if}
+					<div class="w-full">
+						<Toggle
+							on:pointerdown={(e) => {
+								e?.stopPropagation()
+							}}
+							class={valid && error == ''
+								? ''
+								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}
+							bind:checked={value}
+							{disabled}
+						/>
+						{#if type == 'boolean' && value == undefined}
+							<span>&nbsp; Not set</span>
+						{/if}
+					</div>
 				{:else if inputCat == 'list'}
 					<div class="w-full">
 						{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}
@@ -448,12 +450,14 @@ function addItemByItemsType() {
 									<div class="p-4 pl-8 border rounded w-full">
 										<LightweightSchemaForm
 											schema={{
+												...obj,
 												properties: Object.fromEntries(
 													Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
 												),
 												$schema: '',
 												required: obj.required ?? [],
-												type: 'object'
+												type: 'object',
+												order: obj.order ?? []
 											}}
 											bind:args={value}
 											{disabled}
@@ -485,7 +489,7 @@ function addItemByItemsType() {
 							}}
 							use:autosize
 							style="min-height: 5px;"
-							class="col-span-10 {valid && error == ''
+							class="col-span-10 !leading-tight !text-2xs {valid && error == ''
 								? ''
 								: 'border !border-red-700 !border-opacity-70 focus:!border-red-700 focus:!border-opacity-30'}"
 							placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}

package/package/components/MoveDrawer.svelte

@@ -41,7 +41,8 @@ async function updatePath() {
                 tag: flow.tag,
                 dedicated_worker: flow.dedicated_worker,
                 ws_error_handler_muted: flow.ws_error_handler_muted,
-                visible_to_runner_only: flow.visible_to_runner_only
+                visible_to_runner_only: flow.visible_to_runner_only,
+                on_behalf_of_email: flow.on_behalf_of_email
             }
         });
     }

package/package/components/Path.svelte

@@ -3,7 +3,7 @@ const lastMetaUsed = writable(undefined);
 </script>
 
 <script>import { pathToMeta } from '../common';
-import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, HttpTriggerService, VariableService, WebsocketTriggerService, KafkaTriggerService } from '../gen';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, HttpTriggerService, VariableService, WebsocketTriggerService, KafkaTriggerService, NatsTriggerService } from '../gen';
 import { superadmin, userStore, workspaceStore } from '../stores';
 import { createEventDispatcher, getContext } from 'svelte';
 import { writable } from 'svelte/store';
@@ -195,6 +195,12 @@ async function pathExists(path, kind) {
             path: path
         });
     }
+    else if (kind == 'nats_trigger') {
+        return await NatsTriggerService.existsNatsTrigger({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
     else {
         return false;
     }

package/package/components/Path.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         checkInitialPathExistence?: boolean | undefined;
         autofocus?: boolean | undefined;
         dirty?: boolean | undefined;
-        kind: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger";
+        kind: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger";
         hideUser?: boolean | undefined;
         focus?: (() => void) | undefined;
         setName?: ((x: string) => void) | undefined;

package/package/components/ResourcePicker.svelte

@@ -21,6 +21,7 @@ export let showSchemaExplorer = false;
 export let selectFirst = false;
 export let expressOAuthSetup = false;
 export let defaultValues = undefined;
+export let placeholder = undefined;
 onMount(() => {
     setTimeout(() => {
         if (Object.keys(defaultValues ?? {}).length > 0 && resourceType) {
@@ -133,7 +134,7 @@ let darkMode = false;
 				}}
 				items={collection}
 				class="text-clip grow min-w-0"
-				placeholder="{resourceType ?? 'any'} resource"
+				placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
 				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
 				containerStyles={darkMode
 					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark

package/package/components/ResourcePicker.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         selectFirst?: boolean | undefined;
         expressOAuthSetup?: boolean | undefined;
         defaultValues?: Record<string, any> | undefined;
+        placeholder?: string | undefined;
         askNewResource?: (() => Promise<void>) | undefined;
     };
     events: {

package/package/components/ResultJobLoader.svelte.d.ts

@@ -81,7 +81,7 @@ export default class ResultJobLoader extends SvelteComponent<ResultJobLoaderProp
         cancel: () => void;
         error: (err: Error) => void;
     } | undefined) => Promise<string>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust" | "ansible" | "csharp", args: Record<string, any>, tag: string | undefined, callbacks?: {
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "bun" | "php" | "rust" | "ansible" | "csharp", args: Record<string, any>, tag: string | undefined, callbacks?: {
         done: (x: any) => void;
         cancel: () => void;
         error: (err: Error) => void;

package/package/components/SaveInputsButton.svelte

@@ -0,0 +1,53 @@
+<script>import { displayDate } from '../utils.js';
+import { InputService } from '../gen/index.js';
+import { workspaceStore } from '../stores.js';
+import { Button } from './common';
+import { Save } from 'lucide-svelte';
+import { sendUserToast } from '../utils.js';
+import { createEventDispatcher } from 'svelte';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
+export let runnableId;
+export let runnableType;
+export let args;
+export let disabled = false;
+export let small = undefined;
+export let showTooltip = undefined;
+let savingInputs = false;
+async function saveInput(args) {
+    savingInputs = true;
+    const requestBody = {
+        name: 'Saved ' + displayDate(new Date()),
+        args: args
+    };
+    try {
+        await InputService.createInput({
+            workspace: $workspaceStore,
+            runnableId,
+            runnableType,
+            requestBody
+        });
+    }
+    catch (err) {
+        console.error(err);
+        sendUserToast(`Failed to save Input: ${err}`, true);
+    }
+    savingInputs = false;
+    dispatch('update');
+}
+</script>
+
+<Button
+	on:click={() => saveInput(args)}
+	{disabled}
+	loading={savingInputs}
+	startIcon={{ icon: Save }}
+	variant={small ? 'border' : 'contained'}
+	color="light"
+	size="xs"
+>
+	<span>{small ? 'Save inputs' : 'Save current input'}</span>
+	{#if showTooltip}
+		<Tooltip>Shared inputs are available to anyone with access to the script</Tooltip>
+	{/if}
+</Button>

package/package/components/SaveInputsButton.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type RunnableType } from '../gen/index.js';
+declare const __propDef: {
+    props: {
+        runnableId: string | undefined;
+        runnableType: RunnableType | undefined;
+        args: object;
+        disabled?: boolean | undefined;
+        small?: boolean | undefined;
+        showTooltip?: boolean | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SaveInputsButtonProps = typeof __propDef.props;
+export type SaveInputsButtonEvents = typeof __propDef.events;
+export type SaveInputsButtonSlots = typeof __propDef.slots;
+export default class SaveInputsButton extends SvelteComponent<SaveInputsButtonProps, SaveInputsButtonEvents, SaveInputsButtonSlots> {
+}
+export {};