windmill-components 1.623.1 → 1.642.0

package/package/components/RunsPage.svelte.d.ts

@@ -1,7 +1,7 @@
-export declare let DEFAULT_RUNS_PER_PAGE: number;
-type $$ComponentProps = {
-    perPage: number;
-};
-declare const RunsPage: import("svelte").Component<$$ComponentProps, {}, "perPage">;
+interface Props {
+    /** Initial path from route params (e.g., /runs/u/user/script) */
+    initialPath?: string;
+}
+declare const RunsPage: import("svelte").Component<Props, {}, "">;
 type RunsPage = ReturnType<typeof RunsPage>;
 export default RunsPage;

package/package/components/S3FilePicker.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">import { emptyString } from '../utils';
 import { Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { tick, untrack } from 'svelte';
+import { tick } from 'svelte';
 import S3FilePickerInner from './S3FilePickerInner.svelte';
 import Select from './select/Select.svelte';
 import { FileUp } from 'lucide-svelte';
-import { usePromise } from '../svelte5Utils.svelte';
 import { SettingService } from '../gen';
 import { workspaceStore } from '../stores';
+import { resource } from 'runed';
 let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, onClose, onSelectAndClose } = $props();
 let drawer = $state();
 let s3FilePickerInner = $state();
@@ -15,12 +15,9 @@ let workspaceSettingsInitialized = $state(true);
 let storage = $state(undefined);
 let uploadModalOpen = $state(false);
 let allFilesByKey = $state({});
-let wasOpen = $state(false);
-let secondaryStorageNames = usePromise(() => SettingService.getSecondaryStorageNames({ workspace: $workspaceStore }), { loadInit: false });
-$effect(() => {
-    wasOpen && $workspaceStore && untrack(() => secondaryStorageNames.refresh());
-});
+let secondaryStorageNames = resource(() => $workspaceStore, () => SettingService.getSecondaryStorageNames({ workspace: $workspaceStore }), { lazy: true });
 export async function open(_preSelectedFileKey = undefined) {
+    secondaryStorageNames.refetch();
     drawer?.openDrawer?.();
     await tick();
     s3FilePickerInner?.open?.(_preSelectedFileKey);
@@ -59,19 +56,18 @@ export async function open(_preSelectedFileKey = undefined) {
 			bind:workspaceSettingsInitialized
 			bind:storage
 			bind:allFilesByKey
-			bind:wasOpen
 			bind:uploadModalOpen
 			{folderOnly}
 			{regexFilter}
 		/>
 		{#snippet actions()}
 			<div class="flex gap-1">
-				{#if secondaryStorageNames.value?.length}
+				{#if secondaryStorageNames.current?.length}
 					<Select
 						inputClass="h-10 min-w-44 !placeholder-secondary"
 						items={[
 							{ value: undefined, label: 'Default storage' },
-							...secondaryStorageNames.value.map((value) => ({ value }))
+							...secondaryStorageNames.current.map((value) => ({ value }))
 						]}
 						placeholder="Default storage"
 						bind:value={
@@ -79,7 +75,7 @@ export async function open(_preSelectedFileKey = undefined) {
 							(v) => {
 								if (v === storage) return
 								storage = v
-								s3FilePickerInner?.reloadContent()
+								s3FilePickerInner?.reloadContent?.()
 							}
 						}
 					/>

package/package/components/S3FilePickerInner.svelte

@@ -20,7 +20,7 @@ let moveModalOpen = $state(false);
 let moveDestKey = $state(undefined);
 let fileMoveInProgress = $state(false);
 let initialFileKeyInternalCopy;
-let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, hideS3SpecificDetails = false, rootPath = '', workspaceSettingsInitialized = $bindable(true), storage = $bindable(undefined), uploadModalOpen = $bindable(false), allFilesByKey = $bindable({}), wasOpen = $bindable(false), replaceUnauthorizedWarning, listStoredFilesRequest = HelpersService.listStoredFiles, loadFilePreviewRequest = HelpersService.loadFilePreview, loadFileMetadataRequest = HelpersService.loadFileMetadata, deleteS3FileRequest = HelpersService.deleteS3File, moveS3FileRequest = HelpersService.moveS3File, testConnectionRequest = HelpersService.datasetStorageTestConnection } = $props();
+let { fromWorkspaceSettings = false, readOnlyMode, initialFileKey = $bindable(undefined), selectedFileKey = $bindable(undefined), folderOnly = false, regexFilter = undefined, hideS3SpecificDetails = false, rootPath = '', workspaceSettingsInitialized = $bindable(true), storage = $bindable(undefined), uploadModalOpen = $bindable(false), allFilesByKey = $bindable({}), replaceUnauthorizedWarning, listStoredFilesRequest = HelpersService.listStoredFiles, loadFilePreviewRequest = HelpersService.loadFilePreview, loadFileMetadataRequest = HelpersService.loadFileMetadata, deleteS3FileRequest = HelpersService.deleteS3File, moveS3FileRequest = HelpersService.moveS3File, testConnectionRequest = HelpersService.datasetStorageTestConnection } = $props();
 let rootPathNestingLevel = $derived(1 * (rootPath.split('/').length - 1));
 let csvSeparatorChar = $state(',');
 let csvHasHeader = $state(true);
@@ -283,7 +283,6 @@ async function moveS3File(srcFileKey, destFileKey) {
     await loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
 }
 export async function open(_preSelectedFileKey = undefined) {
-    wasOpen = true;
     const preSelectedFileKey = _preSelectedFileKey && parseS3Object(_preSelectedFileKey);
     storage = preSelectedFileKey?.storage;
     if (preSelectedFileKey !== undefined) {
@@ -300,7 +299,7 @@ export async function close() {
         }
         : undefined;
 }
-async function reloadContent() {
+export async function reloadContent() {
     if (initialFileKey !== undefined) {
         initialFileKeyInternalCopy = { ...initialFileKey };
     }

package/package/components/S3FilePickerInner.svelte.d.ts

@@ -28,7 +28,6 @@ interface Props {
         nestingLevel: number;
         count: number;
     }>;
-    wasOpen?: boolean;
     replaceUnauthorizedWarning?: Snippet;
     listStoredFilesRequest?: (d: ListStoredFilesData) => CancelablePromise<ListStoredFilesResponse>;
     loadFilePreviewRequest?: (d: LoadFilePreviewData) => CancelablePromise<LoadFilePreviewResponse>;
@@ -67,8 +66,9 @@ declare const S3FilePickerInner: $$__sveltets_2_IsomorphicComponent<Props, {
         s3: string;
         storage: string | undefined;
     } | undefined>;
+    reloadContent: () => Promise<void>;
     selectAndClose: () => Promise<void>;
     exit: () => Promise<void>;
-}, "storage" | "initialFileKey" | "selectedFileKey" | "workspaceSettingsInitialized" | "uploadModalOpen" | "allFilesByKey" | "wasOpen">;
+}, "storage" | "initialFileKey" | "selectedFileKey" | "workspaceSettingsInitialized" | "uploadModalOpen" | "allFilesByKey">;
 type S3FilePickerInner = InstanceType<typeof S3FilePickerInner>;
 export default S3FilePickerInner;

package/package/components/SaveButton.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">import { Button } from './common';
+import {} from './common/button/model';
+import { Save, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte';
+import { fly } from 'svelte/transition';
+let { onSave, disabled = false, label = 'Save settings', size = undefined, unifiedSize = undefined, variant = 'accent' } = $props();
+let isSaving = $state(false);
+let saveStatus = $state(null);
+let statusTimeout = null;
+function clearStatusTimeout() {
+    if (statusTimeout !== null) {
+        clearTimeout(statusTimeout);
+        statusTimeout = null;
+    }
+}
+function handleClick() {
+    if (isSaving)
+        return;
+    isSaving = true;
+    saveStatus = null;
+    clearStatusTimeout();
+    Promise.resolve(onSave())
+        .then(() => {
+        saveStatus = 'success';
+        statusTimeout = setTimeout(() => {
+            saveStatus = null;
+            statusTimeout = null;
+        }, 1500);
+    })
+        .catch((error) => {
+        console.error('Save failed:', error);
+        saveStatus = 'error';
+        statusTimeout = setTimeout(() => {
+            saveStatus = null;
+            statusTimeout = null;
+        }, 3000);
+    })
+        .finally(() => {
+        isSaving = false;
+    });
+}
+$effect(() => {
+    return () => {
+        clearStatusTimeout();
+    };
+});
+</script>
+
+<div class="relative overflow-hidden rounded-md">
+	<Button
+		{variant}
+		{size}
+		{unifiedSize}
+		startIcon={{
+			icon: isSaving ? Loader2 : Save,
+			classes: isSaving ? 'animate-spin' : ''
+		}}
+		disabled={disabled || isSaving}
+		onClick={handleClick}
+	>
+		{isSaving ? 'Saving...' : label}
+	</Button>
+
+	{#if saveStatus === 'success'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-green-200 dark:bg-green-800 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<CheckCircle2 class="w-5 h-5 text-green-700 dark:text-green-300" />
+		</div>
+	{:else if saveStatus === 'error'}
+		<div
+			class="absolute inset-0 flex items-center justify-center bg-red-500 dark:bg-red-700 rounded-md"
+			transition:fly={{ y: -10, duration: 300 }}
+		>
+			<AlertCircle class="w-5 h-5 text-white" />
+		</div>
+	{/if}
+</div>

package/package/components/SaveButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonType } from './common/button/model';
+type $$ComponentProps = {
+    onSave: () => void | Promise<void>;
+    disabled?: boolean;
+    label?: string;
+    size?: ButtonType.Size | undefined;
+    unifiedSize?: ButtonType.UnifiedSize | undefined;
+    variant?: ButtonType.Variant;
+};
+declare const SaveButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SaveButton = ReturnType<typeof SaveButton>;
+export default SaveButton;

package/package/components/SaveInputsButton.svelte

@@ -43,7 +43,7 @@ async function saveInput(args) {
 	loading={savingInputs}
 	startIcon={{ icon: Save }}
 	variant={small ? 'subtle' : 'default'}
-	unifiedSize="md"
+	unifiedSize="sm"
 >
 	<span>{small ? 'Save inputs' : 'Save current input'}</span>
 	{#if showTooltip}

package/package/components/SavedInputsPicker.svelte

@@ -161,7 +161,7 @@ $effect(() => {
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="w-full flex flex-col gap-1 h-full overflow-y-auto">
+<div class="w-full flex flex-col gap-1 h-full overflow-y-auto pb-4">
 	{#if !noButton}
 		<div>
 			<Popover class="w-full" placement="bottom" disablePopup={runnableId && previewArgs}>

package/package/components/SavedInputsV2.svelte

@@ -46,41 +46,7 @@ let filteredSchema = $derived({
 
 <div class="min-w-[300px] h-full flex flex-col">
 	<Splitpanes horizontal={true}>
-		<Pane class="px-4 py-2 h-full">
-			<Section
-				label="Saved Inputs"
-				tooltip="Shared inputs are available to anyone with access to the script"
-				wrapperClass="h-full"
-				small={true}
-			>
-				{#snippet action()}
-					<SaveInputsButton
-						{args}
-						disabled={!isValid || jsonView}
-						{runnableId}
-						{runnableType}
-						on:update={() => {
-							savedInputsPicker?.refresh()
-						}}
-					/>
-				{/snippet}
-
-				<SavedInputsPicker
-					bind:this={savedInputsPicker}
-					previewArgs={args}
-					{runnableId}
-					{runnableType}
-					{isValid}
-					on:select={(e) => {
-						if (e.detail) historicInputs?.resetSelected()
-						selectArgs(e.detail, e.detail ? 'saved' : undefined)
-					}}
-					noButton={true}
-				/>
-			</Section>
-		</Pane>
-
-		<Pane class="px-4 py-4 h-full">
+		<Pane class="px-4 py-4 h-full" size={65}>
 			<Section label="History" wrapperClass="h-full" small={true}>
 				{#snippet action()}
 					<div class="flex space-x-2">
@@ -108,7 +74,7 @@ let filteredSchema = $derived({
 							{/snippet}
 
 							{#snippet content()}
-								<div class="p-2 overflow-auto max-h-[400px] min-h-[300px] w-[400px]">
+								<div class="p-4 overflow-auto max-h-[400px] min-h-[300px] w-[400px]">
 									<div class="flex items-center flex-wrap gap-x-2 justify-between">
 										<div class="text-sm text-secondary">Search by args</div>
 										<div class="flex flex-wrap gap-x-2">
@@ -155,9 +121,7 @@ let filteredSchema = $derived({
 							{/snippet}
 						</Popover>
 						<Button
-							size="xs2"
-							color="light"
-							btnClasses="!text-primary"
+							unifiedSize="sm"
 							endIcon={{ icon: ExternalLink }}
 							on:click={() => {
 								window.open(`/runs/${runnableId}`, '_blank')
@@ -181,5 +145,38 @@ let filteredSchema = $derived({
 				/>
 			</Section>
 		</Pane>
+		<Pane>
+			<Section
+				label="Saved Inputs"
+				tooltip="Shared inputs are available to anyone with access to the script"
+				wrapperClass="h-full px-4 py-2 overflow-y-auto"
+				small={true}
+			>
+				{#snippet action()}
+					<SaveInputsButton
+						{args}
+						disabled={!isValid || jsonView}
+						{runnableId}
+						{runnableType}
+						on:update={() => {
+							savedInputsPicker?.refresh()
+						}}
+					/>
+				{/snippet}
+
+				<SavedInputsPicker
+					bind:this={savedInputsPicker}
+					previewArgs={args}
+					{runnableId}
+					{runnableType}
+					{isValid}
+					on:select={(e) => {
+						if (e.detail) historicInputs?.resetSelected()
+						selectArgs(e.detail, e.detail ? 'saved' : undefined)
+					}}
+					noButton={true}
+				/>
+			</Section>
+		</Pane>
 	</Splitpanes>
 </div>

package/package/components/SchemaForm.svelte

@@ -171,6 +171,7 @@ $effect.pre(() => {
 	{#if keys.length > 0 && args}
 		{#each fields as item, i (item.id)}
 			{@const argName = item.value}
+			{@const prop = schema?.properties?.[argName]}
 			<ResizeTransitionWrapper
 				vertical
 				class={twMerge(
@@ -243,7 +244,7 @@ $effect.pre(() => {
 							dispatch('click', argName)
 						}}
 					>
-						{#if args && typeof args == 'object' && schema?.properties[argName]}
+						{#if args && typeof args == 'object' && prop}
 							<!-- {argName}
 							{args == undefined}
 							{JSON.stringify(args?.[argName])} -->
@@ -264,38 +265,44 @@ $effect.pre(() => {
 									{prettifyHeader}
 									autofocus={i == 0 && autofocus ? true : null}
 									label={argName}
-									description={schema.properties[argName].description}
+									description={prop?.description}
 									bind:value={args[argName]}
-									type={schema.properties[argName].type}
-									oneOf={schema.properties[argName].oneOf}
+									type={prop?.type}
+									oneOf={prop?.oneOf}
 									required={schema?.required?.includes(argName)}
-									pattern={schema.properties[argName].pattern}
+									pattern={prop?.pattern}
 									bind:valid={inputCheck[argName]}
 									defaultValue={defaultValues?.[argName] ??
-										structuredClone($state.snapshot(schema.properties[argName].default))}
-									enum_={dynamicEnums?.[argName] ?? schema.properties[argName].enum}
-									format={schema.properties[argName].format}
-									contentEncoding={schema.properties[argName].contentEncoding}
-									customErrorMessage={schema.properties[argName].customErrorMessage}
-									bind:properties={schema.properties[argName].properties}
-									bind:order={schema.properties[argName].order}
-									nestedRequired={schema.properties[argName]?.required}
-									itemsType={schema.properties[argName].items}
+										structuredClone($state.snapshot(prop?.default))}
+									enum_={dynamicEnums?.[argName] ?? prop?.enum}
+									format={prop?.format}
+									contentEncoding={prop?.contentEncoding}
+									customErrorMessage={prop?.customErrorMessage}
+									bind:properties={
+										() => prop?.properties,
+										(v) => { if (prop) prop.properties = v }
+									}
+									bind:order={
+										() => prop?.order,
+										(v) => { if (prop) prop.order = v }
+									}
+									nestedRequired={prop?.required}
+									itemsType={prop?.items}
 									disabled={disabledArgs.includes(argName) ||
 										disabled ||
-										schema.properties[argName].disabled}
+										prop?.disabled}
 									{compact}
 									{variableEditor}
 									{itemPicker}
 									bind:pickForField
 									password={linkedSecret == argName}
-									extra={schema.properties[argName]}
+									extra={prop}
 									{showSchemaExplorer}
 									simpleTooltip={schemaFieldTooltip[argName]}
 									{onlyMaskPassword}
-									nullable={schema.properties[argName].nullable}
-									title={schema.properties[argName].title}
-									placeholder={schema.properties[argName].placeholder}
+									nullable={prop?.nullable}
+									title={prop?.title}
+									placeholder={prop?.placeholder}
 									orderEditable={dndConfig != undefined}
 									otherArgs={{ ...args, [argName]: undefined }}
 									{helperScript}

package/package/components/SchemaFormWithArgPicker.svelte

@@ -6,15 +6,10 @@ import { History, Save } from 'lucide-svelte';
 import CaptureIcon from './triggers/CaptureIcon.svelte';
 import CaptureButton from './triggers/CaptureButton.svelte';
 import SavedInputsPicker from './SavedInputsPicker.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import CaptureTable from './triggers/CaptureTable.svelte';
 import RefreshButton from './common/button/RefreshButton.svelte';
-export let runnableId = '';
-export let stablePathForCaptures = '';
-export let runnableType;
-export let previewArgs;
-export let isValid = true;
-export let jsonView = false;
+let { runnableId = '', stablePathForCaptures = '', runnableType, previewArgs, isValid = true, jsonView = false, children } = $props();
 const dispatch = createEventDispatcher();
 export function refreshHistory() {
     historicInputs?.refresh();
@@ -73,16 +68,20 @@ const getDropdownItems = () => {
         }
     ];
 };
-let rightHeight = 0;
-let selectedTab = undefined;
-let dropdownItems;
-let rightPanelOpen = false;
-let savedInputsPicker = undefined;
-let loading = false;
-let captureTable = undefined;
-let historicInputs = undefined;
-$: (selectedTab, (dropdownItems = getDropdownItems()));
-let inputPanelSize = 70;
+let rightHeight = $state(0);
+let selectedTab = $state(undefined);
+let dropdownItems = $state();
+let rightPanelOpen = $state(false);
+let savedInputsPicker = $state(undefined);
+let captureTable = $state(undefined);
+let historicInputs = $state(undefined);
+$effect(() => {
+    selectedTab;
+    untrack(() => {
+        dropdownItems = getDropdownItems();
+    });
+});
+let inputPanelSize = $state(70);
 </script>
 
 <div class="h-fit">
@@ -94,7 +93,7 @@ let inputPanelSize = 70;
 	<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>
 		<Pane bind:size={inputPanelSize} class="!overflow-visible" minSize={30}>
 			<div class="relative w-full h-fit pr-12 pb-4" bind:clientHeight={rightHeight}>
-				<slot />
+				{@render children?.()}
 			</div>
 		</Pane>
 
@@ -103,13 +102,17 @@ let inputPanelSize = 70;
 				<div style="height: {rightHeight}px" class="border-t border-r pb-2">
 					{#if selectedTab === 'history'}
 						<FlowInputEditor title="History">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<RefreshButton {loading} onClick={() => historicInputs?.refresh()} />
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<RefreshButton
+											loading={historicInputs?.loading() ?? false}
+											onClick={() => historicInputs?.refresh()}
+										/>
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<HistoricInputs
-								bind:loading
 								bind:this={historicInputs}
 								{runnableId}
 								{runnableType}
@@ -134,11 +137,13 @@ let inputPanelSize = 70;
 						</FlowInputEditor>
 					{:else if selectedTab === 'captures'}
 						<FlowInputEditor title="Trigger captures">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<CaptureButton on:openTriggers small={true} />
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<CaptureButton on:openTriggers small={true} />
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<div class="h-full">
 								<CaptureTable
 									path={stablePathForCaptures}

package/package/components/SchemaFormWithArgPicker.svelte.d.ts

@@ -1,3 +1,12 @@
+interface Props {
+    runnableId?: string;
+    stablePathForCaptures?: string;
+    runnableType: any;
+    previewArgs: any;
+    isValid?: boolean;
+    jsonView?: boolean;
+    children?: import('svelte').Snippet;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,32 +20,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SchemaFormWithArgPicker: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    runnableId?: string;
-    stablePathForCaptures?: string;
-    runnableType: any;
-    previewArgs: any;
-    isValid?: boolean;
-    jsonView?: boolean;
-    refreshHistory?: () => void;
-    resetSelected?: () => void;
-}, {
-    default: {};
-}>, {
+declare const SchemaFormWithArgPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     openTriggers: CustomEvent<any>;
     select: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+}, {}, {
     refreshHistory: () => void;
     resetSelected: () => void;
-}, string>;
+}, "">;
 type SchemaFormWithArgPicker = InstanceType<typeof SchemaFormWithArgPicker>;
 export default SchemaFormWithArgPicker;