windmill-components 1.623.1 → 1.642.0

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -1,31 +1,40 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
-import Toggle from '../Toggle.svelte';
 import { emptySchema, validateFileExtension } from '../../utils';
 import { Alert } from '../common';
 import AddPropertyV2 from './AddPropertyV2.svelte';
 import { Plus } from 'lucide-svelte';
 import Select from '../select/Select.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
-let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), customUi } = $props();
-let resourceIsTextFile = $state(false);
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), isFileset = $bindable(undefined), customUi } = $props();
+let resourceMode = $state('schema');
 let addPropertyComponent = $state(undefined);
 let editableSchemaForm = $state(undefined);
 $effect(() => {
-    if (!resourceIsTextFile && formatExtension !== undefined) {
-        formatExtension = undefined;
+    if (resourceMode === 'schema') {
+        if (formatExtension !== undefined) {
+            formatExtension = undefined;
+        }
+        if (isFileset) {
+            isFileset = undefined;
+        }
     }
 });
 let invalidExtension = $derived(formatExtension && formatExtension != ''
     ? !validateFileExtension(formatExtension ?? 'txt')
     : false);
-function switchResourceIsFile() {
-    if (!resourceIsTextFile) {
+function switchResourceMode(mode) {
+    resourceMode = mode;
+    if (mode === 'schema') {
         schema = emptySchema();
         formatExtension = undefined;
+        isFileset = undefined;
     }
-    else {
+    else if (mode === 'file') {
         formatExtension = '';
+        isFileset = undefined;
         schema = emptySchema();
         schema.order = ['content'];
         schema.properties = {
@@ -35,6 +44,11 @@ function switchResourceIsFile() {
             }
         };
     }
+    else if (mode === 'fileset') {
+        formatExtension = undefined;
+        isFileset = true;
+        schema = emptySchema();
+    }
 }
 let suggestedFileExtensions = $state([
     'json',
@@ -50,7 +64,7 @@ let suggestedFileExtensions = $state([
 ]);
 </script>
 
-{#if !resourceIsTextFile}
+{#if resourceMode === 'schema'}
 	<div
 		class={twMerge(
 			fullHeight ? 'h-full' : 'h-80',
@@ -108,12 +122,12 @@ let suggestedFileExtensions = $state([
 		</EditableSchemaForm>
 	</div>
 {/if}
-{#if resourceIsTextFile}
+{#if resourceMode === 'file'}
 	<label
 		for="format-extension"
-		class="text-base font-medium whitespace-nowrap flex items-center gap-4"
+		class="text-xs font-semibold text-emphasis whitespace-nowrap flex items-center gap-4"
 	>
-		File extension :
+		File extension:
 		<Select
 			autofocus
 			items={safeSelectItems(suggestedFileExtensions)}
@@ -130,19 +144,26 @@ let suggestedFileExtensions = $state([
 		</Alert>
 	{:else if formatExtension && formatExtension !== ''}
 		<Alert title={`Example: my_file.${formatExtension}`} type="info">
-			The <span class="font-bold font-mono"> .{formatExtension} </span> extension will be used to infer
-			the format when displaying the content and this is also how the resource will appear when pulling
-			via the CLI.
+			The <span class="font-bold font-mono"> .{formatExtension} </span> extension will be used to
+			infer the format when displaying the content and this is also how the resource will appear
+			when pulling via the CLI.
 		</Alert>
 		<div></div>
 	{/if}
 {/if}
-<Toggle
-	bind:checked={resourceIsTextFile}
-	options={{
-		right: 'This resource type represents a plain text file (clears current schema)',
-		rightTooltip:
-			'A text file such as a config file, template, or any other file format that contains plain text'
-	}}
-	on:change={() => switchResourceIsFile()}
-/>
+{#if resourceMode === 'fileset'}
+	<Alert title="Fileset resource type" type="info">
+		This resource type represents a collection of files. Each file is identified by its relative
+		path and contains text content. In the CLI, filesets are stored as directories.
+	</Alert>
+{/if}
+<ToggleButtonGroup
+	selected={resourceMode}
+	onSelected={(mode) => switchResourceMode(mode)}
+>
+	{#snippet children({ item })}
+		<ToggleButton value="schema" label="JSON" {item} size="sm" />
+		<ToggleButton value="file" label="File" {item} size="sm" />
+		<ToggleButton value="fileset" label="Fileset" {item} size="sm" />
+	{/snippet}
+</ToggleButtonGroup>

package/package/components/schema/EditableSchemaWrapper.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { EditableSchemaWrapperProps } from './editable_schema_wrapper';
-declare const EditableSchemaWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "schema" | "formatExtension">;
+declare const EditableSchemaWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "schema" | "formatExtension" | "isFileset">;
 type EditableSchemaWrapper = ReturnType<typeof EditableSchemaWrapper>;
 export default EditableSchemaWrapper;

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -47,6 +47,6 @@ declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "format" | "order" | "properties" | "oneOf" | "defaultValue" | "nullable" | "showExpr" | "requiredProperty">;
+}, {}, {}, "disabled" | "format" | "order" | "defaultValue" | "properties" | "oneOf" | "nullable" | "showExpr" | "requiredProperty">;
 type FlowPropertyEditor = InstanceType<typeof FlowPropertyEditor>;
 export default FlowPropertyEditor;

package/package/components/schema/PropertyEditor.svelte

@@ -180,6 +180,7 @@ $effect(() => {
 								bind:max={extra['max']}
 								bind:currency={extra['currency']}
 								bind:currencyLocale={extra['currencyLocale']}
+								bind:seconds={extra['seconds']}
 							/>
 						{/if}
 					</div>

package/package/components/schema/RunningJobSchemaPicker.svelte

@@ -44,7 +44,7 @@ async function loadArgsFromRunningJob(id) {
 		)}
 		on:hover={(e) => (hovering = e.detail ? true : false)}
 	>
-		<SchemaPickerRow {payloadData} date={job.created_at} {hovering}>
+		<SchemaPickerRow {payloadData} date={job.started_at} {hovering}>
 			<svelte:fragment slot="start">
 				<div class="center-center">
 					<div

package/package/components/schema/editable_schema_wrapper.d.ts

@@ -5,6 +5,7 @@ export type EditableSchemaWrapperProps = {
     noPreview?: boolean;
     fullHeight?: boolean;
     formatExtension?: string | undefined;
+    isFileset?: boolean | undefined;
     customUi?: {
         noAddPopover?: boolean;
     };

package/package/components/scriptEditor/LogPanel.svelte

@@ -14,13 +14,14 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import { CheckCircle2, Loader2, XCircle } from 'lucide-svelte';
 import ScriptFix from '../copilot/ScriptFix.svelte';
+import JobOtelTraces from '../JobOtelTraces.svelte';
 import Cell from '../table/Cell.svelte';
 import DataTable from '../table/DataTable.svelte';
 import Head from '../table/Head.svelte';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
 import Tooltip from '../Tooltip.svelte';
 import { getStringError } from '../copilot/chat/utils';
-let { lang, previewIsLoading = false, previewJob, pastPreviews = [], editor = undefined, diffEditor = undefined, args = undefined, workspace = undefined, showCaptures = false, customUi = undefined, children, capturesTab } = $props();
+let { lang, previewIsLoading = false, previewJob, pastPreviews = [], editor = undefined, diffEditor = undefined, args = undefined, workspace = undefined, showCaptures = false, customUi = undefined, children, capturesTab, customResultPanel, showCustomResultPanel = false } = $props();
 let selectedTab = $state('logs');
 let drawerOpen = $state(false);
 let drawerContent = $state(undefined);
@@ -70,6 +71,7 @@ let forceJson = $state(false);
 		{#if showCaptures && customUi?.disableTriggerCaptures !== true}
 			<Tab value="captures" label="Trigger captures" />
 		{/if}
+		<Tab value="tracing" label="Tracing" />
 
 		{#snippet content()}
 			<div class="grow min-h-0">
@@ -98,7 +100,11 @@ let forceJson = $state(false);
 							</Pane>
 							<Pane>
 								{@render children?.()}
-								{#if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
+								{#if showCustomResultPanel && customResultPanel}
+									<div class="h-full">
+										{@render customResultPanel()}
+									</div>
+								{:else if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
 									<div class="relative w-full h-full p-2">
 										<div class="relative h-full">
 											<DisplayResult
@@ -237,6 +243,15 @@ let forceJson = $state(false);
 				{#if selectedTab === 'captures'}
 					{@render capturesTab?.()}
 				{/if}
+				{#if selectedTab === 'tracing'}
+					{#if previewJob?.id}
+						<JobOtelTraces jobId={previewJob.id} />
+					{:else}
+						<div class="p-4 text-secondary">
+							Run a preview to see HTTP request traces
+						</div>
+					{/if}
+				{/if}
 			</div>
 		{/snippet}
 	</Tabs>

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -19,6 +19,8 @@ interface Props {
     customUi?: PreviewPanelUi | undefined;
     children?: import('svelte').Snippet;
     capturesTab?: import('svelte').Snippet;
+    customResultPanel?: import('svelte').Snippet;
+    showCustomResultPanel?: boolean;
 }
 declare const LogPanel: import("svelte").Component<Props, {
     setFocusToLogs: () => void;

package/package/components/scripts/CreateActionsScript.svelte

@@ -4,7 +4,6 @@ import { base } from '../../base';
 let { aiId, aiDescription } = $props();
 </script>
 
-<!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
 		id="create-script-button"

package/package/components/search/GlobalSearchModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { onDestroy, onMount, tick, untrack } from 'svelte';
-import { AppService, FlowService, RawAppService, ScriptService } from '../../gen';
+import { AppService, FlowService, ScriptService } from '../../gen';
 import { clickOutside, isMac, scroll_into_view_if_needed_polyfill } from '../../utils';
 import { AlertTriangle, BoxesIcon, CalendarIcon, Code2Icon, Database, DollarSignIcon, HomeIcon, LayoutDashboardIcon, MailIcon, PlayIcon, Route, Search, SearchCode, Unplug, WandSparkles } from 'lucide-svelte';
 import Portal from '../Portal.svelte';
@@ -389,7 +389,6 @@ async function fetchCombinedItems() {
         withoutDescription: true
     });
     const apps = await AppService.listApps({ workspace: $workspaceStore });
-    const raw_apps = await RawAppService.listRawApps({ workspace: $workspaceStore });
     let combinedItems = [
         ...flows.map((x) => ({
             ...x,
@@ -408,12 +407,6 @@ async function fetchCombinedItems() {
             type: 'app',
             time: new Date(x.edited_at).getTime(),
             search_id: x.path
-        })),
-        ...raw_apps.map((x) => ({
-            ...x,
-            type: 'raw_app',
-            time: new Date(x.edited_at).getTime(),
-            search_id: x.path
         }))
     ].sort((a, b) => (a.starred != b.starred ? (a.starred ? -1 : 1) : a.time - b.time > 0 ? -1 : 1));
     return combinedItems;

package/package/components/select/GenericDropdown.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" generics="T">import { deepEqual } from 'fast-equals';
+import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
+import { untrack } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { useReducedMotion } from '../../svelte5Utils.svelte';
+import { watch } from 'runed';
+let { listAutoWidth = true, strictWidth = false, disablePortal = false, open, disabled = false, class: className = '', innerClass = '', maxHeight = 256, getInputRect, children } = $props();
+let listEl = $state();
+let dropdownPos = $state(computeDropdownPos());
+let reducedMotion = useReducedMotion();
+function computeDropdownPos() {
+    if (!getInputRect || !listEl)
+        return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
+    let inputR = getInputRect();
+    const listR = listEl.getBoundingClientRect();
+    const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
+    let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
+    if (isBelow)
+        return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
+    else {
+        return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow };
+    }
+}
+$effect(() => {
+    function updateDropdownPos() {
+        let nPos = computeDropdownPos();
+        if (!deepEqual(nPos, dropdownPos))
+            dropdownPos = nPos;
+        if (open)
+            requestAnimationFrame(updateDropdownPos);
+    }
+    if (open)
+        untrack(() => updateDropdownPos());
+});
+// We do not want to render the dropdown when it is closed for performance reasons
+// but we want to keep it in the DOM for a short time to allow for transitions to finish
+//
+// We do not use Svelte transitions because they can not animate in the opposite direction
+// when the dropdown is opens above the input
+// Also CSS transitions are smoother because they do not rely on JS / animation frames
+let uiState = $state({ domExists: open, visible: open, timeout: null });
+let initial = true;
+watch(() => open && !disabled, (isOpen) => {
+    untrack(() => {
+        if (initial) {
+            initial = false;
+            return;
+        }
+        if (reducedMotion.val) {
+            uiState = {
+                domExists: open && !disabled,
+                visible: open && !disabled,
+                timeout: null
+            };
+            return;
+        }
+        if (uiState.timeout)
+            clearTimeout(uiState.timeout);
+        uiState = {
+            domExists: true,
+            visible: !isOpen,
+            timeout: setTimeout(() => {
+                if (isOpen) {
+                    uiState.visible = true;
+                    uiState.timeout = null;
+                }
+                else if (!isOpen) {
+                    uiState.visible = false;
+                    uiState.timeout = setTimeout(() => {
+                        uiState.domExists = false;
+                        uiState.timeout = null;
+                    }, 500); // leave time for transition to finish
+                }
+            }, 0) // We need the height to be 0 then change immediately for the transition to play
+        };
+    });
+});
+</script>
+
+<ConditionalPortal condition={!disablePortal} name="dropdown-portal">
+	{#if uiState.domExists}
+		<div
+			class={twMerge(
+				open ? 'dropdown-open' : 'dropdown-closed',
+				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
+				'text-primary text-sm select-none',
+				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
+				uiState.visible ? '' : 'pointer-events-none',
+				className
+			)}
+			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
+				? `${strictWidth ? 'width' : 'min-width'}: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
+				: ''}"
+		>
+			<div
+				class={twMerge(
+					'overflow-clip rounded-md drop-shadow-base',
+					!reducedMotion.val ? 'transition-height' : '',
+					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
+				)}
+				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
+			>
+				<div
+					bind:this={listEl}
+					class="flex flex-col rounded-md bg-surface-input {innerClass}"
+					style="max-height: {maxHeight}px;"
+				>
+					{@render children?.()}
+				</div>
+			</div>
+		</div>
+	{/if}
+</ConditionalPortal>

package/package/components/select/GenericDropdown.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    listAutoWidth?: boolean;
+    strictWidth?: boolean;
+    disablePortal?: boolean;
+    open: boolean;
+    disabled?: boolean;
+    class?: string;
+    innerClass?: string;
+    maxHeight?: number;
+    getInputRect?: () => DOMRect;
+    children?: Snippet;
+};
+declare function $$render<T>(): {
+    props: $$ComponentProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const GenericDropdown: $$IsomorphicComponent;
+type GenericDropdown<T> = InstanceType<typeof GenericDropdown<T>>;
+export default GenericDropdown;

package/package/components/select/MultiSelect.svelte

@@ -90,7 +90,7 @@ export function getFilteredInputText() {
 	{#if allowClear && !hideMainClearBtn && !!value?.length}
 		<CloseButton
 			noBg
-			class="mr-1 remove-all bg-transparent text-hint"
+			class="ml-2 remove-all bg-transparent text-hint"
 			small
 			on:close={(e) => (clearValue(), e.stopPropagation())}
 		/>

package/package/components/select/Select.svelte

@@ -11,7 +11,8 @@ import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
 import { inputBaseClass, inputBorderClass, inputSizeClasses } from '../text_input/TextInput.svelte';
 import { ButtonType } from '../common/button/model';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, size = 'md', showPlaceholderOnOpen = false, transformInputSelectedText, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
+import Tooltip from '../Tooltip.svelte';
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, tooltip, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, size = 'md', showPlaceholderOnOpen = false, transformInputSelectedText, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
 let iconSize = $derived(ButtonType.UnifiedIconSizes[size]);
 let inputEl = $state();
@@ -27,7 +28,7 @@ $effect(() => {
     if (!open)
         filterText = '';
 });
-let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)));
+let valueEntry = $derived(value != null ? processedItems?.find((item) => deepEqual(item.value, value)) : undefined);
 function setValue(item) {
     if (item.__is_create && onCreateItem) {
         onCreateItem(item.value);
@@ -47,12 +48,12 @@ function clearValue() {
 }
 let inputText = $derived.by(() => {
     let text = valueEntry?.label ?? getLabel({ value }) ?? '';
-    return transformInputSelectedText?.(text) ?? text;
+    return transformInputSelectedText?.(text, value) ?? text;
 });
 </script>
 
 <div
-	class={`relative ${className}`}
+	class={`relative h-fit ${className}`}
 	use:clickOutside={{ onClickOutside: () => (open = false) }}
 	onpointerdown={() => onFocus?.()}
 	onfocus={() => onFocus?.()}
@@ -76,6 +77,13 @@ let inputText = $derived.by(() => {
 			<RightIcon size={iconSize} class="text-secondary" />
 		</div>
 	{/if}
+
+	{#if tooltip}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<Tooltip>{tooltip}</Tooltip>
+		</div>
+	{/if}
+
 	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		{autofocus}
@@ -101,6 +109,11 @@ let inputText = $derived.by(() => {
 			inputClass ?? ''
 		)}
 		autocomplete="off"
+		oninput={(e) => {
+			// Explicitly open dropdown if closed and update filterText
+			if (!open) open = true
+			filterText = e.currentTarget.value
+		}}
 		onpointerdown={() => (open = true)}
 		bind:this={inputEl}
 		{id}

package/package/components/select/Select.svelte.d.ts

@@ -25,12 +25,13 @@ declare function $$render<Item extends {
         createText?: string;
         noItemsMsg?: string;
         open?: boolean;
+        tooltip?: string;
         id?: string;
         itemLabelWrapperClasses?: string;
         itemButtonWrapperClasses?: string;
         size?: "sm" | "md" | "lg";
         showPlaceholderOnOpen?: boolean;
-        transformInputSelectedText?: (text: string) => string;
+        transformInputSelectedText?: (text: string, value: Item["value"]) => string;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onFocus?: () => void;