windmill-components 1.504.6 → 1.511.0

package/package/components/common/fileUpload/FileUpload.svelte

@@ -5,15 +5,17 @@ import { sendUserToast } from '../../../toast';
 import { workspaceStore } from '../../../stores';
 import { AppService, HelpersService } from '../../../gen';
 import { writable } from 'svelte/store';
-import { Ban, CheckCheck, FileWarning, Files, RefreshCcw, Trash } from 'lucide-svelte';
+import { Ban, CheckCheck, FileWarning, Files, RefreshCcw, Trash, XIcon } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import { emptyString } from '../../../utils';
-let { acceptedFileTypes = ['*'], allowMultiple = true, allowDelete = true, folderOnly = false, containerText = folderOnly
-    ? 'Drag and drop a folder here or click to browse'
-    : allowMultiple
-        ? 'Drag and drop files here or click to browse'
-        : 'Drag and drop a file here or click to browse', customResourcePath = undefined, customResourceType = undefined, customClass = '', customStyle = '', randomFileKey = false, pathTransformer = undefined, forceDisplayUploads = $bindable(false), defaultValue = undefined, workspace = undefined, fileUploads = writable([]), appPath = undefined, disabled = false, iconSize = undefined, initialValue = undefined, computeForceViewerPolicies = undefined } = $props();
+let { acceptedFileTypes = ['*'], allowMultiple = true, allowDelete = true, folderOnly = false, containerText: customContainerText = undefined, customResourcePath = undefined, customResourceType = undefined, customClass = '', customStyle = '', randomFileKey = false, pathTransformer = undefined, forceDisplayUploads = $bindable(false), defaultValue = undefined, workspace = undefined, fileUploads = writable([]), appPath = undefined, disabled = false, iconSize = undefined, initialValue = undefined, computeForceViewerPolicies = undefined } = $props();
+const containerText = $derived(customContainerText ??
+    (folderOnly
+        ? 'Drag and drop a folder here or click to browse'
+        : allowMultiple
+            ? 'Drag and drop files here or click to browse'
+            : 'Drag and drop a file here or click to browse'));
 const dispatch = createEventDispatcher();
 let initialS3 = $derived(Array.isArray(initialValue)
     ? initialValue?.map((v) => v.s3)
@@ -21,16 +23,15 @@ let initialS3 = $derived(Array.isArray(initialValue)
         ? [initialValue?.s3]
         : undefined);
 init();
+function transform(initialValue) {
+    return {
+        name: initialValue?.filename ?? initialValue?.s3 ?? 'Unknown file',
+        path: initialValue?.s3,
+        fromBucket: true
+    };
+}
 function init() {
     if (initialS3) {
-        function transform(initialValue) {
-            return {
-                name: initialValue.filename,
-                size: 0,
-                progress: 100,
-                path: initialValue?.s3
-            };
-        }
         for (const s3 of initialS3) {
             if (!$fileUploads.find((fileUpload) => fileUpload.path === s3)) {
                 let initialFileUploads = initialValue
@@ -43,6 +44,12 @@ function init() {
         }
     }
 }
+export function addUpload(upload) {
+    $fileUploads = [...$fileUploads, transform(upload)];
+}
+export function setUpload(upload) {
+    $fileUploads = [transform(upload)];
+}
 async function handleChange(files) {
     if (folderOnly) {
         uniqueFolderPrefix = getRandomFolderPrefix();
@@ -278,8 +285,28 @@ onDestroy(() => {
 });
 </script>
 
+{#snippet fileInput()}
+	<FileInput
+		{folderOnly}
+		{disabled}
+		accept={acceptedFileTypes?.join(',')}
+		multiple={allowMultiple}
+		returnFileNames
+		{iconSize}
+		on:change={({ detail }) => {
+			forceDisplayUploads = false
+			handleChange(detail)
+		}}
+		class={twMerge('w-full h-full', customClass, 'wm-file-input')}
+		style={customStyle}
+		defaultFile={defaultValue}
+	>
+		{containerText}{#if disabled}<br />(Disabled){/if}
+	</FileInput>
+{/snippet}
+
 <div class="w-full h-full p-0 flex flex-col">
-	{#if $fileUploads.length > 0 && !forceDisplayUploads}
+	{#if $fileUploads.length > 0}
 		<div class="border rounded-md flex flex-col gap-1 divide-y h-full w-full p-1">
 			<div class="flex h-full overflow-y-auto flex-col">
 				{#each $fileUploads as fileUpload}
@@ -352,7 +379,7 @@ onDestroy(() => {
 										Remove from list
 									</Button>
 								{/if}
-								{#if fileUpload.progress < 100 && !fileUpload.cancelled && !fileUpload.errorMessage}
+								{#if fileUpload.progress !== undefined && fileUpload.progress < 100 && !fileUpload.cancelled && !fileUpload.errorMessage}
 									<Button
 										size="xs2"
 										color="light"
@@ -390,100 +417,115 @@ onDestroy(() => {
 									>
 										Delete
 									</Button>
+								{:else if fileUpload.fromBucket}
+									<Button
+										size="xs2"
+										color="red"
+										variant="border"
+										on:click={() => {
+											$fileUploads = $fileUploads.filter(
+												(_fileUpload) => _fileUpload.name !== fileUpload.name
+											)
+
+											if (fileUpload.path) {
+												dispatch('deletion', { path: fileUpload.path })
+											}
+										}}
+										startIcon={{
+											icon: XIcon
+										}}
+									>
+										Remove
+									</Button>
 								{/if}
 							</div>
 						</div>
-						<FileProgressBar
-							progress={fileUpload.progress}
-							color={fileUpload.errorMessage
-								? '#ef4444'
-								: fileUpload.cancelled
-									? '#eab308'
-									: fileUpload.progress === 100
-										? '#22c55e'
-										: '#3b82f6'}
-							ended={fileUpload.cancelled || fileUpload.errorMessage !== undefined}
-						>
-							{#if fileUpload.errorMessage}
-								<span class="text-xs text-red-600">{fileUpload.errorMessage}</span>
-							{:else if fileUpload.cancelled}
-								<span class="text-xs text-yellow-600">Upload cancelled</span>
-							{/if}
-						</FileProgressBar>
+						{#if !fileUpload.fromBucket}
+							<FileProgressBar
+								progress={fileUpload.progress}
+								color={fileUpload.errorMessage
+									? '#ef4444'
+									: fileUpload.cancelled
+										? '#eab308'
+										: fileUpload.progress === 100
+											? '#22c55e'
+											: '#3b82f6'}
+								ended={fileUpload.cancelled || fileUpload.errorMessage !== undefined}
+							>
+								{#if fileUpload.errorMessage}
+									<span class="text-xs text-red-600">{fileUpload.errorMessage}</span>
+								{:else if fileUpload.cancelled}
+									<span class="text-xs text-yellow-600">Upload cancelled</span>
+								{/if}
+							</FileProgressBar>
+						{/if}
 						{#if !(fileUpload.cancelled || fileUpload.errorMessage !== undefined)}
 							<span class="text-xs text-gray-500 dark:text-gray-200">
-								{fileUpload.progress === 100 ? 'Upload finished' : `Uploading`} to path: {fileUpload.path ??
-									'N/A'}
+								{#if fileUpload.fromBucket}
+									{fileUpload.path ?? 'N/A'}
+								{:else}
+									{fileUpload.progress === 100 ? 'Upload finished' : `Uploading`} to path: {fileUpload.path ??
+										'N/A'}
+								{/if}
 							</span>
 						{/if}
 					</div>
 				{/each}
 			</div>
-			{#if allowMultiple}
-				<div class="flex flex-row gap-1 items-center justify-end p-1">
-					{#if !$fileUploads.every((fileUpload) => fileUpload.progress === 100 || fileUpload.cancelled)}
+			<div class="flex flex-row gap-1 items-center justify-end p-1">
+				{#if !forceDisplayUploads && (allowMultiple || folderOnly) && !$fileUploads.every((fileUpload) => fileUpload.progress === 100 || fileUpload.cancelled || fileUpload.fromBucket)}
+					<Button
+						size="xs2"
+						color="light"
+						on:click={() => {
+							$fileUploads = $fileUploads.map((fileUpload) => {
+								if (fileUpload.progress === 100 || fileUpload.cancelled) {
+									return fileUpload
+								}
+
+								fileUpload.cancelled = true
+								fileUpload.progress = 0
+								return fileUpload
+							})
+						}}
+						startIcon={{
+							icon: Ban
+						}}
+					>
+						Cancel all uploads
+					</Button>
+				{/if}
+				{#if allowMultiple}
+					{#if forceDisplayUploads}
+						{@render fileInput()}
+					{:else}
 						<Button
 							size="xs2"
 							color="light"
 							on:click={() => {
-								$fileUploads = $fileUploads.map((fileUpload) => {
-									if (fileUpload.progress === 100 || fileUpload.cancelled) {
-										return fileUpload
-									}
-
-									fileUpload.cancelled = true
-									fileUpload.progress = 0
-									return fileUpload
-								})
+								forceDisplayUploads = true
 							}}
 							startIcon={{
-								icon: Ban
+								icon: Files
 							}}
+							disabled={$fileUploads.some(
+								(fileUpload) =>
+									fileUpload.progress !== 100 && !fileUpload.cancelled && !fileUpload.fromBucket
+							)}
 						>
-							Cancel all uploads
+							Upload more files
 						</Button>
 					{/if}
-					<Button
-						size="xs2"
-						color="light"
-						on:click={() => {
-							forceDisplayUploads = true
-						}}
-						startIcon={{
-							icon: Files
-						}}
-						disabled={$fileUploads.some(
-							(fileUpload) => fileUpload.progress !== 100 && !fileUpload.cancelled
-						)}
-					>
-						Upload more files
-					</Button>
-				</div>
-			{/if}
+				{/if}
+			</div>
 		</div>
 	{:else}
-		<FileInput
-			{folderOnly}
-			{disabled}
-			accept={acceptedFileTypes?.join(',')}
-			multiple={allowMultiple}
-			returnFileNames
-			{iconSize}
-			on:change={({ detail }) => {
-				forceDisplayUploads = false
-				handleChange(detail)
-			}}
-			class={twMerge('w-full h-full', customClass, 'wm-file-input')}
-			style={customStyle}
-			defaultFile={defaultValue}
-		>
-			{containerText}{#if disabled}<br />(Disabled){/if}
-		</FileInput>
+		{@render fileInput()}
 	{/if}
 	{#if initialS3 && initialS3.length > 0 && $fileUploads.length == 0}
 		<div class="flex flex-row gap-1 items-center p-1">
 			<span class="text-sm">
-				File currently selected: {initialS3?.join(', ')}
+				File{initialS3.length > 1 ? 's' : ''} currently selected: {initialS3?.join(', ')}
 			</span>
 		</div>
 	{/if}

package/package/components/common/fileUpload/FileUpload.svelte.d.ts

@@ -1,13 +1,14 @@
 import { type Writable } from 'svelte/store';
 type FileUploadData = {
     name: string;
-    size: number;
-    progress: number;
+    size?: number;
+    progress?: number;
     cancelled?: boolean;
     errorMessage?: string;
     path?: string;
     file?: File;
     deleteToken?: string;
+    fromBucket?: boolean;
 };
 interface Props {
     acceptedFileTypes?: string[] | undefined;
@@ -65,6 +66,15 @@ declare const FileUpload: $$__sveltets_2_IsomorphicComponent<Props, {
     }>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "forceDisplayUploads">;
+}, {}, {
+    addUpload: (upload: {
+        s3: string;
+        filename?: string;
+    }) => void;
+    setUpload: (upload: {
+        s3: string;
+        filename?: string;
+    }) => void;
+}, "forceDisplayUploads">;
 type FileUpload = InstanceType<typeof FileUpload>;
 export default FileUpload;

package/package/components/common/fileUpload/S3ArgInput.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">import S3FilePicker from '../../S3FilePicker.svelte';
+import Toggle from '../../Toggle.svelte';
+import { Loader2, Pipette } from 'lucide-svelte';
+import FileUpload from './FileUpload.svelte';
+import Button from '../button/Button.svelte';
+import { userStore } from '../../../stores';
+let { multiple, value = $bindable(), defaultValue, setNewValueFromCode, onFocus, onBlur, computeS3ForceViewerPolicies, workspace, editor = $bindable(), appPath } = $props();
+let s3FileUploadRawMode = $state(false);
+let s3FilePicker = $state(undefined);
+let fileUpload = $state(undefined);
+</script>
+
+{#if $userStore}
+	<S3FilePicker
+		bind:this={s3FilePicker}
+		on:selectAndClose={(ev) => {
+			if (multiple) {
+				if (Array.isArray(value)) {
+					value.push(ev.detail)
+				} else {
+					value = [ev.detail]
+				}
+				fileUpload?.addUpload(ev.detail)
+			} else {
+				value = ev.detail
+				fileUpload?.setUpload(value)
+			}
+			editor?.setCode(JSON.stringify(value))
+		}}
+		readOnlyMode={false}
+	/>
+{/if}
+
+<div class="flex flex-col w-full gap-1">
+	<Toggle
+		class="flex justify-end"
+		bind:checked={s3FileUploadRawMode}
+		size="xs"
+		options={{ left: `Raw S3 object${multiple ? 's' : ''} input` }}
+	/>
+	{#if s3FileUploadRawMode}
+		{#await import('../../JsonEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				bind:editor
+				on:focus={(e) => {
+					onFocus()
+				}}
+				on:blur={(e) => {
+					onBlur()
+				}}
+				code={JSON.stringify(value ?? defaultValue ?? (multiple ? [] : { s3: '' }), null, 2)}
+				on:changeValue={(e) => {
+					setNewValueFromCode(e.detail)
+				}}
+			/>
+		{/await}
+	{:else}
+		<FileUpload
+			bind:this={fileUpload}
+			{appPath}
+			computeForceViewerPolicies={computeS3ForceViewerPolicies}
+			{workspace}
+			allowMultiple={multiple}
+			randomFileKey={true}
+			on:addition={(evt) => {
+				const s3Object = {
+					s3: evt.detail?.path ?? '',
+					filename: evt.detail?.filename ?? ''
+				}
+				if (multiple) {
+					if (Array.isArray(value)) {
+						value.push(s3Object)
+					} else {
+						value = [s3Object]
+					}
+				} else {
+					value = s3Object
+				}
+			}}
+			on:deletion={(evt) => {
+				if (multiple) {
+					if (Array.isArray(value)) {
+						value = value.filter((v) => v.s3 !== evt.detail?.path)
+					}
+				} else {
+					value = {
+						s3: ''
+					}
+				}
+			}}
+			defaultValue={multiple ? defaultValue?.map((v) => v.s3) : defaultValue?.s3}
+			initialValue={value}
+		/>
+	{/if}
+	{#if $userStore}
+		<Button
+			variant="border"
+			color="light"
+			size="xs"
+			btnClasses="mt-1"
+			on:click={() => {
+				s3FilePicker?.open?.(value)
+			}}
+			startIcon={{ icon: Pipette }}
+		>
+			{multiple ? 'Add' : 'Choose'} an object from the catalog
+		</Button>
+	{/if}
+</div>

package/package/components/common/fileUpload/S3ArgInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import type SimpleEditor from '../../SimpleEditor.svelte';
+type $$ComponentProps = {
+    multiple: boolean;
+    value: any;
+    defaultValue: any;
+    setNewValueFromCode: (v: any) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    computeS3ForceViewerPolicies: (() => {
+        allowed_resources: string[];
+        allow_user_resources: boolean;
+        allow_workspace_resource: boolean;
+        file_key_regex: string;
+    } | undefined) | undefined;
+    workspace: string | undefined;
+    editor: SimpleEditor | undefined;
+    appPath: string | undefined;
+};
+declare const S3ArgInput: import("svelte").Component<$$ComponentProps, {}, "value" | "editor">;
+type S3ArgInput = ReturnType<typeof S3ArgInput>;
+export default S3ArgInput;

package/package/components/common/table/ScriptRow.svelte

@@ -84,7 +84,9 @@ let versionsDrawerOpen = $state(false);
 			<NoMainFuncBadge />
 		{/if}
 		{#if script.kind !== 'script'}
-			<Badge color="blue" baseClass="border">{capitalize(script.kind)}</Badge>
+			<Badge color="blue" baseClass="border"
+				>{script.kind === 'failure' ? 'Error handler' : capitalize(script.kind)}</Badge
+			>
 		{/if}
 		<SharedBadge canWrite={script.canWrite} extraPerms={script.extra_perms} />
 		<DraftBadge has_draft={script.has_draft} draft_only={script.draft_only} />

package/package/components/copilot/AIFormSettings.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import Label from '../Label.svelte';
 import Toggle from '../Toggle.svelte';
 import Tooltip from '../Tooltip.svelte';
-export let prompt = undefined;
-export let type = 'script';
+let { prompt = $bindable(undefined), type = 'script' } = $props();
 </script>
 
 <div class="flex flex-col gap-2">
@@ -22,13 +21,13 @@ export let type = 'script';
 	/>
 	{#if prompt !== undefined}
 		<Label label="Additional prompt for AI">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip>
 					AI will use script description and each field description to fill the inputs form. In
 					addition, any prompt passed here will be used by AI to guide it. You can mention specific
 					fields and interaction between fields here.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 			<textarea bind:value={prompt} placeholder="Instructions for the AI about how to fill the form"
 			></textarea>
 		</Label>

package/package/components/copilot/AIFormSettings.svelte.d.ts

@@ -1,21 +1,7 @@
-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;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AiFormSettings: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     prompt?: string | undefined;
-    type?: "flow" | "script";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AiFormSettings = InstanceType<typeof AiFormSettings>;
+    type?: 'flow' | 'script';
+}
+declare const AiFormSettings: import("svelte").Component<Props, {}, "prompt">;
+type AiFormSettings = ReturnType<typeof AiFormSettings>;
 export default AiFormSettings;

package/package/components/copilot/autocomplete/Autocompletor.d.ts

@@ -1,8 +1,10 @@
 import type { AIProviderModel, ScriptLang } from '../../../gen';
-import { type editor as meditor } from 'monaco-editor';
+import { editor as meditor } from 'monaco-editor';
+import type { MonacoLanguageClient } from 'monaco-languageclient';
 export declare class Autocompletor {
     #private;
     constructor(editor: meditor.IStandaloneCodeEditor, scriptLang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json');
     static isProviderModelSupported(providerModel: AIProviderModel | undefined): boolean | undefined;
     dispose(): void;
+    setLanguageClient(client: MonacoLanguageClient): void;
 }