windmill-components 1.448.50 → 1.472.2

package/package/components/FolderEditor.svelte

@@ -158,9 +158,13 @@ async function updateFolder() {
 			</Alert>
 			<div class="flex items-center gap-1">
 				<div>
-					<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (ownerItem = '')}>
-						<ToggleButton value="user" size="xs" label="User" />
-						<ToggleButton value="group" size="xs" label="Group" />
+					<ToggleButtonGroup
+						bind:selected={ownerKind}
+						on:selected={() => (ownerItem = '')}
+						let:item
+					>
+						<ToggleButton value="user" label="User" {item} />
+						<ToggleButton value="group" label="Group" {item} />
 					</ToggleButtonGroup>
 				</div>
 
@@ -168,7 +172,9 @@ async function updateFolder() {
 					<AutoComplete
 						required
 						noInputStyles
-						items={ownerKind === 'user' ? usernames.filter((x) => !perms?.map((y) => y.owner_name).includes('u/'+x)) : groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/'+x))}
+						items={ownerKind === 'user'
+							? usernames.filter((x) => !perms?.map((y) => y.owner_name).includes('u/' + x))
+							: groups.filter((x) => !perms?.map((y) => y.owner_name).includes('g/' + x))}
 						bind:selectedItem={ownerItem}
 					/>
 					{#if ownerKind == 'group'}
@@ -245,6 +251,7 @@ async function updateFolder() {
 									<div>
 										<ToggleButtonGroup
 											selected={role}
+											let:item
 											on:selected={async (e) => {
 												const role = e.detail
 												// const wasInFolder = (folder?.owners ?? []).includes(folder)
@@ -283,25 +290,25 @@ async function updateFolder() {
 										>
 											<ToggleButton
 												value="viewer"
-												size="xs"
 												label="Viewer"
 												tooltip="A viewer of a folder has read-only access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+												{item}
 											/>
 
 											<ToggleButton
 												position="center"
 												value="writer"
-												size="xs"
 												label="Writer"
 												tooltip="A writer of a folder has read AND write access to all the elements (scripts/flows/apps/schedules/resources/variables) inside the folder"
+												{item}
 											/>
 
 											<ToggleButton
 												position="right"
 												value="admin"
-												size="xs"
 												label="Admin"
 												tooltip="An admin of a folder has read AND write access to all the elements inside the folders and can manage the permissions as well as add new admins"
+												{item}
 											/>
 										</ToggleButtonGroup>
 									</div>

package/package/components/GroupEditor.svelte

@@ -131,6 +131,7 @@ function getRole(x) {
 								<div>
 									<ToggleButtonGroup
 										selected={role}
+										let:item
 										on:selected={async (e) => {
 											const role = e.detail
 											// const wasInGroup = (group?.members ?? []).includes(group)
@@ -196,6 +197,7 @@ function getRole(x) {
 											size="xs"
 											label="Member"
 											tooltip="A Member of a group can see everything the group can see, write to everything the group can write, and generally act on behalf of the group"
+											{item}
 										/>
 										<ToggleButton
 											position="right"
@@ -203,6 +205,7 @@ function getRole(x) {
 											size="xs"
 											label="Admin"
 											tooltip="An admin of a group is a member of a group that can also add and remove members to the group, or make them admin."
+											{item}
 										/>
 										{#if role === 'manager'}
 											<ToggleButton
@@ -211,6 +214,7 @@ function getRole(x) {
 												label="Manager"
 												tooltip="A manager of a group can manage the group, adding and removing users and
 												change their roles. Being a manager does not make you a member"
+												{item}
 											/>
 										{/if}
 									</ToggleButtonGroup>

package/package/components/HistoricInputs.svelte

@@ -1,86 +1,39 @@
-<script>import { InputService } from '../gen/index.js';
-import { workspaceStore } from '../stores.js';
+<script>import {} from '../gen/index.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;
+import HistoricList from './HistoricList.svelte';
+export let runnableId = undefined;
+export let runnableType = undefined;
+export let loading = false;
+export let selected = undefined;
+let historicList = undefined;
 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) {
+async function handleSelected(data) {
     if (selected === data.id) {
-        selected = undefined;
-        dispatch('select', undefined);
+        resetSelected(true);
         return;
     }
     selected = data.id;
-    dispatch('select', data.payloadData);
+    if (data.payloadData === 'WINDMILL_TOO_BIG') {
+        const fullPayload = await data.getFullPayload?.();
+        dispatch('select', { args: fullPayload, jobId: data.id });
+    }
+    else {
+        dispatch('select', { args: structuredClone(data.payloadData), jobId: data.id });
+    }
 }
-let selected = undefined;
 onDestroy(() => {
-    selected = undefined;
-    dispatch('select', undefined);
+    resetSelected(true);
 });
-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);
+        resetSelected(true);
         event.stopPropagation();
         event.preventDefault();
     }
@@ -91,13 +44,27 @@ function handleError(e) {
     }
 }
 let jobHovered = undefined;
-function refresh() {
-    if (infiniteList) {
-        infiniteList.loadData('refresh');
+export function refresh() {
+    historicList?.refresh();
+}
+export function resetSelected(dispatchEvent) {
+    selected = undefined;
+    if (dispatchEvent) {
+        dispatch('select', undefined);
+    }
+}
+function getJobKinds(runnableType) {
+    if (runnableType === 'FlowPath') {
+        return 'flow,flowpreview';
+    }
+    else if (runnableType === 'ScriptPath') {
+        return 'script,preview';
     }
+    else if (runnableType === 'ScriptHash') {
+        return 'script,preview';
+    }
+    return 'all';
 }
-$: !loading && refresh();
-$: $workspaceStore && (scriptHash || scriptPath || flowPath) && infiniteList && initLoadInputs();
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -107,7 +74,7 @@ $: $workspaceStore && (scriptHash || scriptPath || flowPath) && infiniteList &&
 		bind:jobs
 		path={runnableId}
 		isSkipped={false}
-		jobKindsCat="all"
+		jobKinds={getJobKinds(runnableType)}
 		user={null}
 		label={null}
 		folder={null}
@@ -123,24 +90,15 @@ $: $workspaceStore && (scriptHash || scriptPath || flowPath) && infiniteList &&
 	/>
 {/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">
+<div class="h-full max-h-full min-h-0 w-full flex flex-col gap-4">
+	<div class="grow-0" data-schema-picker>
 		<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 class="w-16" />
 					<col />
 				</colgroup>
 
@@ -154,9 +112,9 @@ $: $workspaceStore && (scriptHash || scriptPath || flowPath) && infiniteList &&
 						/>
 					{/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
-						>
+						<tr class="text-left text-tertiary text-xs w-full">
+							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
+						</tr>
 					{/if}
 				</tbody>
 			{:else}
@@ -165,31 +123,14 @@ $: $workspaceStore && (scriptHash || scriptPath || flowPath) && infiniteList &&
 		</DataTable>
 	</div>
 
-	<div class="min-h-0 grow">
-		<InfiniteList
-			bind:this={infiniteList}
-			selectedItemId={selected}
+	<div class="min-h-0 grow" data-schema-picker>
+		<HistoricList
+			bind:this={historicList}
 			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>
+			{runnableId}
+			{runnableType}
+			{selected}
+		/>
 	</div>
 </div>

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

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
+import { type RunnableType } from '../gen/index.js';
 declare const __propDef: {
     props: {
-        scriptHash?: string | null | undefined;
-        scriptPath?: string | null | undefined;
-        flowPath?: string | null | undefined;
+        runnableId?: string | undefined;
+        runnableType?: RunnableType | undefined;
+        loading?: boolean | undefined;
+        selected?: string | undefined;
+        refresh?: (() => void) | undefined;
+        resetSelected?: ((dispatchEvent?: boolean) => void) | undefined;
     };
     events: {
         select: CustomEvent<any>;
@@ -16,5 +20,7 @@ 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> {
+    get refresh(): () => void;
+    get resetSelected(): (dispatchEvent?: boolean | undefined) => void;
 }
 export {};

package/package/components/HistoricList.svelte

@@ -0,0 +1,95 @@
+<script>import { InputService } from '../gen';
+import { workspaceStore } from '../stores';
+import { onDestroy } from 'svelte';
+import InfiniteList from './InfiniteList.svelte';
+import JobSchemaPicker from './schema/JobSchemaPicker.svelte';
+export let runnableId;
+export let runnableType;
+export let selected = undefined;
+let infiniteList = undefined;
+let loadInputsPageFn = undefined;
+export function refresh() {
+    if (infiniteList) {
+        infiniteList.loadData('refresh');
+    }
+}
+let cachedArgs = {};
+let interval = undefined;
+function initLoadInputs() {
+    interval && clearInterval(interval);
+    interval = setInterval(() => {
+        refresh();
+    }, 10000);
+    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) => {
+            if (cachedArgs[input.id]) {
+                return {
+                    ...input,
+                    payloadData: cachedArgs[input.id]
+                };
+            }
+            const payloadData = await loadArgsFromHistory(input.id, undefined, false);
+            if (payloadData === 'WINDMILL_TOO_BIG') {
+                return {
+                    ...input,
+                    payloadData: 'WINDMILL_TOO_BIG',
+                    getFullPayload: () => loadArgsFromHistory(input.id, undefined, true)
+                };
+            }
+            cachedArgs[input.id] = payloadData;
+            return {
+                ...input,
+                payloadData
+            };
+        }));
+        return inputsWithPayload;
+    };
+    infiniteList?.setLoader(loadInputsPageFn);
+}
+onDestroy(() => {
+    interval && clearInterval(interval);
+});
+async function loadArgsFromHistory(id, input, allowLarge) {
+    if (!id)
+        return;
+    const payloadData = await InputService.getArgsFromHistoryOrSavedInput({
+        jobOrInputId: id,
+        workspace: $workspaceStore,
+        input,
+        allowLarge
+    });
+    return payloadData;
+}
+$: $workspaceStore && runnableId && runnableType && infiniteList && initLoadInputs();
+</script>
+
+<InfiniteList bind:this={infiniteList} selectedItemId={selected} on:error on:select>
+	<svelte:fragment slot="columns">
+		<colgroup>
+			<col class="w-8" />
+			<col class="w-16" />
+			<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">
+			{runnableId ? 'No previous inputs' : 'Save draft to see previous runs'}
+		</div>
+	</svelte:fragment>
+</InfiniteList>

package/package/components/HistoricList.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type RunnableType } from '../gen';
+declare const __propDef: {
+    props: {
+        runnableId: string | undefined;
+        runnableType: RunnableType | undefined;
+        selected?: string | undefined;
+        refresh?: (() => void) | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HistoricListProps = typeof __propDef.props;
+export type HistoricListEvents = typeof __propDef.events;
+export type HistoricListSlots = typeof __propDef.slots;
+export default class HistoricList extends SvelteComponent<HistoricListProps, HistoricListEvents, HistoricListSlots> {
+    get refresh(): () => void;
+}
+export {};

package/package/components/IconedResourceType.svelte

@@ -9,7 +9,10 @@
 	export let center = false
 	export let isSelected = false
 	export let formatExtension = undefined
-	$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
+
+	$: iconComponent = name === "teams" 
+		? APP_TO_ICON_COMPONENT.ms_teams_webhook 
+		: APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
 </script>
 
 <div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">

package/package/components/InfiniteList.svelte

@@ -18,10 +18,11 @@ let initLoad = false;
 let loadInputs = undefined;
 let deleteItemFn = undefined;
 export async function loadData(loadOption = 'loadMore') {
+    // console.log('loadData', loadOption, length, items?.length)
     if (!loadInputs)
         return;
     loading = true;
-    hasMore = hasMore;
+    hasMore = length === perPage * page;
     if (hasMore && loadOption === 'loadMore') {
         page++;
     }
@@ -46,9 +47,13 @@ export async function loadData(loadOption = 'loadMore') {
                     isNew: false
                 }));
             }
-        }, 1000);
-        page = Math.floor(items.length / perPage) + 1;
-        hasMore = items.length === perPage * (page - 1);
+        }, 2000);
+        page = Math.ceil(items.length / perPage);
+        hasMore = items.length === perPage * page;
+        if (hasMore) {
+            const potentialNewItems = await loadInputs(page + 1, perPage);
+            hasMore = potentialNewItems.length > 0;
+        }
         initLoad = true;
         isEmpty = items.length === 0;
         length = items.length;
@@ -102,6 +107,7 @@ export async function setDeleteItemFn(fn) {
 			on:loadMore={() => {
 				loadData()
 			}}
+			{loading}
 		>
 			<slot name="columns" />
 
@@ -145,7 +151,7 @@ export async function setDeleteItemFn(fn) {
 
 	@keyframes greenHighlight {
 		0% {
-			background-color: rgba(70, 255, 138, 0.5);
+			background-color: rgba(70, 255, 138, 0.4);
 			box-shadow: 0 0 15px rgb(34 197 94 / 0.3);
 		}
 		100% {
@@ -155,7 +161,7 @@ export async function setDeleteItemFn(fn) {
 	}
 
 	:global(.animate-slideIn) {
-		animation: greenHighlight 2s ease-out forwards;
+		animation: greenHighlight 1s ease-out forwards;
 		will-change: transform, opacity, background-color, box-shadow;
 		position: relative;
 	}</style>

package/package/components/InputTransformForm.svelte

@@ -151,10 +151,27 @@ function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
 function connectProperty(rawValue) {
-    arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
-    arg.type = 'javascript';
-    propertyType = 'javascript';
-    monaco?.setCode(arg.expr);
+    // Extract path from variable('x') or resource('x') format
+    const varMatch = rawValue.match(/^variable\('([^']+)'\)$/);
+    const resourceMatch = rawValue.match(/^resource\('([^']+)'\)$/);
+    if (varMatch) {
+        arg.type = 'static';
+        propertyType = 'static';
+        arg.value = '$var:' + varMatch[1];
+        monacoTemplate?.setCode(arg.value);
+    }
+    else if (resourceMatch) {
+        arg.type = 'static';
+        propertyType = 'static';
+        arg.value = '$res:' + resourceMatch[1];
+        monacoTemplate?.setCode(arg.value);
+    }
+    else {
+        arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
+        arg.type = 'javascript';
+        propertyType = 'javascript';
+        monaco?.setCode(arg.expr);
+    }
 }
 function onFocus() {
     focused = true;
@@ -284,6 +301,7 @@ $: connecting =
 					<div>
 						<ToggleButtonGroup
 							selected={propertyType}
+							let:item
 							on:selected={(e) => {
 								if (e.detail == propertyType) return
 								const staticTemplate = isStaticTemplate(inputCat)
@@ -343,9 +361,10 @@ $: connecting =
 									value="static"
 									size="xs2"
 									label={'${}'}
+									{item}
 								/>
 							{:else}
-								<ToggleButton small label="Static" value="static" />
+								<ToggleButton small label="Static" value="static" {item} />
 							{/if}
 
 							{#if codeInjectionDetected && propertyType == 'static'}
@@ -367,6 +386,7 @@ $: connecting =
 									tooltip="JavaScript expression ('flow_input' or 'results')."
 									value="javascript"
 									icon={FunctionSquare}
+									{item}
 								/>
 							{/if}
 						</ToggleButtonGroup>