windmill-components 1.550.0 → 1.555.0

package/package/components/ArrayTypeNarrowing.svelte

@@ -8,6 +8,7 @@ import Alert from './common/alert/Alert.svelte';
 import EditableSchemaDrawer from './schema/EditableSchemaDrawer.svelte';
 import Toggle from './Toggle.svelte';
 import { tick } from 'svelte';
+import Select from './select/Select.svelte';
 let { canEditResourceType = false, originalType = undefined, itemsType = $bindable() } = $props();
 let selected = $state(itemsType?.type != 'string'
     ? itemsType?.type == 'object' && itemsType?.resourceType == 's3object'
@@ -22,39 +23,44 @@ let selected = $state(itemsType?.type != 'string'
 
 {#if canEditResourceType || originalType == 'string[]' || originalType == 'object[]'}
 	<Label label="Items type">
-		<select
-			bind:value={selected}
-			onchange={() => {
-				if (selected == 'enum') {
-					itemsType = { type: 'string', enum: [] }
-				} else if (selected == 'string') {
-					itemsType = { type: 'string' }
-				} else if (selected == 'number') {
-					itemsType = { type: 'number' }
-				} else if (selected == 'object') {
-					itemsType = { ...itemsType, type: 'object' }
-				} else if (selected == 'bytes') {
-					itemsType = { type: 'string', contentEncoding: 'base64' }
-				} else if (selected == 'resource') {
-					itemsType = { type: 'resource', resourceType: itemsType?.resourceType }
-				} else if (selected == 's3object') {
-					itemsType = { type: 'object', resourceType: 's3object' }
-				} else {
-					itemsType = undefined
+		<Select
+			bind:value={
+				() => selected,
+				(v) => {
+					selected = v
+					if (selected == 'enum') {
+						itemsType = { type: 'string', enum: [] }
+					} else if (selected == 'string') {
+						itemsType = { type: 'string' }
+					} else if (selected == 'number') {
+						itemsType = { type: 'number' }
+					} else if (selected == 'object') {
+						itemsType = { ...itemsType, type: 'object' }
+					} else if (selected == 'bytes') {
+						itemsType = { type: 'string', contentEncoding: 'base64' }
+					} else if (selected == 'resource') {
+						itemsType = { type: 'resource', resourceType: itemsType?.resourceType }
+					} else if (selected == 's3object') {
+						itemsType = { type: 'object', resourceType: 's3object' }
+					} else {
+						itemsType = undefined
+					}
 				}
-			}}
-			id="array-type-narrowing"
-		>
-			<option value="string"> Items are strings</option>
-			<option value="enum">Items are strings from an enum</option>
-			{#if originalType != 'string[]'}
-				<option value="s3object">Items are S3 objects</option>
-				<option value="object"> Items are objects (JSON)</option>
-				<option value="resource"> Items are resources</option>
-				<option value="number">Items are numbers</option>
-				<option value="bytes">Items are bytes</option>
-			{/if}
-		</select>
+			}
+			items={[
+				{ value: 'string', label: "Items are strings or objects with a 'label/value' field" },
+				{ value: 'enum', label: 'Items are strings from an enum' },
+				...(originalType != 'string[]'
+					? [
+							{ value: 's3object', label: 'Items are S3 objects' },
+							{ value: 'object', label: 'Items are objects (JSON)' },
+							{ value: 'resource', label: 'Items are resources' },
+							{ value: 'number', label: 'Items are numbers' },
+							{ value: 'bytes', label: 'Items are bytes' }
+						]
+					: [])
+			] as { value: string; label: string }[]}
+		/>
 	</Label>
 {:else if itemsType?.resourceType}
 	<Label label="Resource type">

package/package/components/AutoscalingEvents.svelte

@@ -4,14 +4,18 @@ import { Button, Skeleton } from './common';
 import { twMerge } from 'tailwind-merge';
 import TimeAgo from './TimeAgo.svelte';
 import { enterpriseLicense } from '../stores';
-export let worker_group;
-let loading = true;
-let events = undefined;
-$: worker_group && loadEvents();
+import { untrack } from 'svelte';
+let { worker_group } = $props();
+let loading = $state(true);
+let events = $state(undefined);
+let limit = $state(5);
 async function loadEvents() {
     loading = true;
     try {
-        events = await ConfigService.listAutoscalingEvents({ workerGroup: worker_group });
+        events = await ConfigService.listAutoscalingEvents({
+            workerGroup: worker_group,
+            perPage: limit
+        });
     }
     catch (e) {
         events = [];
@@ -21,6 +25,10 @@ async function loadEvents() {
         loading = false;
     }
 }
+$effect(() => {
+    limit;
+    worker_group && untrack(() => loadEvents());
+});
 </script>
 
 <div>
@@ -66,5 +74,13 @@ async function loadEvents() {
 				{/each}
 			</div>
 		{/if}
+		<div class="mt-4 flex">
+			<Button color="light" size="xs2" on:click={() => (limit = limit + 25)}>Show more</Button>
+		</div>
+		{#if limit > 50}
+			<div class="mt-4 flex text-xs text-tertiary">
+				Note that autoscaling events are only stored for the last 30 days.
+			</div>
+		{/if}
 	{/if}
 </div>

package/package/components/AutoscalingEvents.svelte.d.ts

@@ -1,20 +1,6 @@
-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 AutoscalingEvents: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     worker_group: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AutoscalingEvents = InstanceType<typeof AutoscalingEvents>;
+}
+declare const AutoscalingEvents: import("svelte").Component<Props, {}, "">;
+type AutoscalingEvents = ReturnType<typeof AutoscalingEvents>;
 export default AutoscalingEvents;

package/package/components/DateTimeInput.svelte

@@ -5,6 +5,7 @@ import { Button } from './common';
 import { Clock, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
+import { inputBaseClass, inputBorderClass } from './text_input/TextInput.svelte';
 let { value = $bindable(undefined), clearable = false, autofocus = false, useDropdown = false, minDate = undefined, maxDate = undefined, disabled = undefined, inputClass = undefined } = $props();
 let date = $state(undefined);
 let time = $state(undefined);
@@ -36,7 +37,7 @@ function parseDateAndTime(date, time) {
         let newDate = new Date(`${date}T${time}`);
         if (newDate.toString() === 'Invalid Date')
             return;
-        if (newDate.getFullYear() < 2000)
+        if (newDate.getFullYear() < 1900)
             return;
         value = newDate.toISOString();
         dispatchIfMounted('change', value);
@@ -75,20 +76,21 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 		bind:value={date}
 		{autofocus}
 		{disabled}
-		class={twMerge('h-8 text-sm !w-3/4 ', inputClass)}
+		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-3/4 ', inputClass)}
 		min={minDate}
 		max={maxDate}
 	/>
 	<input
 		type="time"
 		bind:value={time}
-		class={twMerge('h-8 text-sm !w-1/4 min-w-[100px] ', inputClass)}
+		class={twMerge(inputBaseClass, inputBorderClass(), 'text-sm !w-1/4 min-w-[100px] ', inputClass)}
 		{disabled}
 	/>
 	<Button
-		variant="border"
+		variant="contained"
 		color="light"
-		wrapperClasses="h-8"
+		wrapperClasses="h-full"
+		btnClasses="bg-surface-secondary"
 		startIcon={{
 			icon: Clock
 		}}
@@ -133,7 +135,7 @@ let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 		<Button
 			variant="border"
 			color="light"
-			wrapperClasses="h-8"
+			wrapperClasses="h-full"
 			{disabled}
 			on:click={() => {
 				value = undefined

package/package/components/DeployButton.svelte

@@ -53,7 +53,7 @@ let dropdownOpen = $state(false);
 				bind:this={msgInput}
 			/>
 			<Button
-				size="xs"
+				size="sm"
 				on:click={async () => dispatch('save', deploymentMsg)}
 				endIcon={{ icon: CornerDownLeft }}
 				loading={loadingSave}

package/package/components/Dev.svelte

@@ -5,7 +5,7 @@ import { WindmillIcon } from './icons';
 import LogPanel from './scriptEditor/LogPanel.svelte';
 import { JobService, OpenAPI, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
-import { setCopilotInfo, userStore, workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import { emptySchema, readFieldsRecursively, sendUserToast } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { onDestroy, onMount, setContext, untrack } from 'svelte';
@@ -29,6 +29,7 @@ import { workspaceAIClients } from './copilot/lib';
 import { Triggers } from './triggers/triggers.svelte';
 import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
+import { setCopilotInfo } from '../aiStore';
 let { initial = undefined } = $props();
 let flowCopilotContext = {
     shouldUpdatePropertyType: writable({}),
@@ -117,7 +118,7 @@ const el = (event) => {
     }
     else if (event.data.type == 'testBundle') {
         if (event.data.id == lastCommandId) {
-            testBundle(event.data.file, event.data.isTar);
+            testBundle(event.data.file, event.data.isTar, event.data.format);
         }
         else {
             sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
@@ -179,7 +180,7 @@ onMount(() => {
     });
     window.parent?.postMessage({ type: 'refresh' }, '*');
 });
-async function testBundle(file, isTar) {
+async function testBundle(file, isTar, format) {
     jobLoader?.abstractRun(async () => {
         try {
             const form = new FormData();
@@ -189,7 +190,8 @@ async function testBundle(file, isTar) {
                 path: currentScript?.path,
                 args,
                 language: currentScript?.language,
-                tag: currentScript?.tag
+                tag: currentScript?.tag,
+                format
             }));
             // sendUserToast(JSON.stringify(file))
             if (isTar) {

package/package/components/EditableSchemaForm.svelte

@@ -234,11 +234,11 @@ let typeOptions = $state([
     ['String', 'string'],
     ['Number', 'number'],
     ['Integer', 'integer'],
-    ['Object', 'object'],
+    ['Boolean', 'boolean'],
     ['Resource', 'resource'],
+    ['Object', 'object'],
     ['OneOf', 'oneOf'],
     ['Array', 'array'],
-    ['Boolean', 'boolean'],
     ['S3', 'S3']
 ]);
 function initDynFn(lang) {
@@ -400,7 +400,7 @@ let dndType = $state(generateRandomString());
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
-						<div class="w-full p-3 flex gap-4 justify-end items-center">
+						<div class="w-full px-3 flex gap-4 justify-end items-center">
 							{#if addPropertyInEditorTab}
 								<AddPropertyV2
 									bind:schema
@@ -419,8 +419,8 @@ let dndType = $state(generateRandomString());
 									label="JSON View"
 									size="xs"
 									options={{
-										right: 'JSON editor',
-										rightTooltip:
+										left: 'JSON editor',
+										leftTooltip:
 											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 									}}
 									lightMode
@@ -513,7 +513,8 @@ let dndType = $state(generateRandomString());
 
 											{#if !uiOnly}
 												<button
-													class="rounded-full p-1 text-gray-500 bg-white
+													class="delete-schema-field-button
+													rounded-full p-1 text-gray-500 bg-white
 				duration-200 hover:bg-gray-600 focus:bg-gray-600 hover:text-white dark:bg-gray-700 dark:text-white dark:hover:bg-gray-800"
 													aria-label="Clear"
 													onclick={() => {

package/package/components/Editor.svelte

@@ -17,7 +17,7 @@ import { MonacoLanguageClient } from 'monaco-languageclient';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
 import { MonacoBinding } from 'y-monaco';
-import { dbSchemas, copilotInfo, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode, relativeLineNumbers } from '../stores';
+import { dbSchemas, codeCompletionSessionEnabled, lspTokenStore, formatOnSave, vimMode, relativeLineNumbers } from '../stores';
 import { editorConfig, updateOptions } from '../editorUtils';
 import { createHash as randomHash } from '../editorLangUtils';
 import { workspaceStore } from '../stores';
@@ -47,6 +47,7 @@ import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { getDbSchemas } from './apps/components/display/dbtable/utils';
 import { PYTHON_PREPROCESSOR_MODULE_CODE, TS_PREPROCESSOR_MODULE_CODE } from '../script_helpers';
 import { setMonacoTypescriptOptions } from './monacoLanguagesOptions';
+import { copilotInfo } from '../aiStore';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = $state(null);
 let editor = $state(null);

package/package/components/EditorSettings.svelte

@@ -5,7 +5,7 @@ import RelativeLineNumbers from './RelativeLineNumbers.svelte';
 import { Button } from './common';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './meltComponents/Popover.svelte';
-export let customUi = {};
+let { customUi = {} } = $props();
 </script>
 
 {#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
@@ -14,7 +14,7 @@ export let customUi = {};
 		usePointerDownOutside
 		contentClasses="flex flex-col gap-y-2 p-4"
 	>
-		<svelte:fragment slot="trigger">
+		{#snippet trigger()}
 			{#if customUi.editorSettings != false}
 				<Button
 					btnClasses="text-tertiary"
@@ -26,9 +26,9 @@ export let customUi = {};
 					title="Editor settings"
 				/>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			{#if customUi?.autoformatting != false}
 				<div>
 					<FormatOnSave />
@@ -49,6 +49,6 @@ export let customUi = {};
 					<CodeCompletionStatus />
 				</div>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</Popover>
 {/if}

package/package/components/EditorSettings.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { EditorBarUi } from './custom_ui';
-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 EditorSettings: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     customUi?: EditorBarUi;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type EditorSettings = InstanceType<typeof EditorSettings>;
+}
+declare const EditorSettings: import("svelte").Component<Props, {}, "">;
+type EditorSettings = ReturnType<typeof EditorSettings>;
 export default EditorSettings;

package/package/components/FakeMonacoPlaceHolder.svelte

@@ -1,7 +1,7 @@
 <!-- Used to avoid height jitter when loading monaco asynchronously -->
 
 <script lang="ts">import { getOS } from '../utils';
-let { code, autoheight = false, lineNumbersWidth = 51, lineNumbersOffset = 0, class: className = '', fontSize = 14 } = $props();
+let { code, autoheight = false, lineNumbersWidth = 51, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 14 } = $props();
 // https://github.com/microsoft/vscode/blob/baa2dad3cdacd97ac02eff0604984faf1167ff1e/src/vs/editor/common/config/editorOptions.ts#L5421
 const DEFAULT_WINDOWS_FONT_FAMILY = "Consolas, 'Courier New', monospace";
 const DEFAULT_MAC_FONT_FAMILY = "Menlo, Monaco, 'Courier New', monospace";
@@ -48,7 +48,9 @@ let [editorWidth, editorHeight] = $derived([
 					class="margin-view-overlays"
 					role="presentation"
 					aria-hidden="true"
-					style="position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: {lineNumbersWidth}px; height: 4893px;"
+					style="position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: {lineNumbersWidth}px; height: 4893px; display: {!showNumbers
+						? 'none'
+						: 'block'};"
 				>
 					{#each lines as _, i}
 						<div style="top:{lineHeight * i}px;height:{lineHeight}px;">

package/package/components/FakeMonacoPlaceHolder.svelte.d.ts

@@ -3,6 +3,7 @@ type Props = {
     autoheight?: boolean;
     lineNumbersWidth?: number;
     lineNumbersOffset?: number;
+    showNumbers?: boolean;
     class?: string;
     fontSize?: number;
 };

package/package/components/FieldHeader.svelte

@@ -38,17 +38,15 @@ export let simpleTooltipIconClass = '';
 	{/if}
 
 	{#if displayType}
-		{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
-			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
+		<span class="text-xs italic ml-2 text-hint">
+			{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
 				{format}
-			</span>
-		{:else}
-			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
+			{:else}
 				{type ?? 'any'}{contentEncoding && contentEncoding != ''
 					? `, encoding: ${contentEncoding}`
 					: ''}
-			</span>
-		{/if}
+			{/if}
+		</span>
 	{/if}
 
 	{#if !emptyString(simpleTooltip)}

package/package/components/FirstStepInputs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { createEventDispatcher, onDestroy, getContext, untrack } from 'svelte';
-import { getFirstStepSchema } from './flows/flowStore';
+import { getFirstStepSchema } from './flows/flowStore.svelte';
 import { twMerge } from 'tailwind-merge';
 import { Alert } from './common';
 import FlowModuleSchemaItemViewer from './flows/map/FlowModuleSchemaItemViewer.svelte';

package/package/components/FlowLoopIterationPreview.svelte.d.ts

@@ -30,6 +30,6 @@ declare const FlowLoopIterationPreview: $$__sveltets_2_IsomorphicComponent<Props
     whileLoopSchema: Schema;
     test: () => void;
     runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
-}, "job" | "previewArgs" | "jobId">;
+}, "job" | "jobId" | "previewArgs">;
 type FlowLoopIterationPreview = InstanceType<typeof FlowLoopIterationPreview>;
 export default FlowLoopIterationPreview;

package/package/components/FlowPlugConnect.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">import { Plug } from 'lucide-svelte';
 import { Button } from './common';
 import AnimatedButton from './common/button/AnimatedButton.svelte';
+import { twMerge } from 'tailwind-merge';
 export let connecting;
 export let id = undefined;
+export let wrapperClasses = '';
 </script>
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
@@ -10,10 +12,14 @@ export let id = undefined;
 		variant="border"
 		color="light"
 		size="xs2"
-		btnClasses={connecting ? 'text-blue-500' : 'text-primary'}
+		btnClasses={twMerge(
+			connecting ? 'text-blue-500' : 'text-tertiary',
+			'group/plug-btn overflow-clip flex p-0'
+		)}
 		on:click
 		{...id ? { id } : {}}
+		{wrapperClasses}
 	>
-		<Plug size={16} /> &rightarrow;
+		<Plug size={14} />
 	</Button>
 </AnimatedButton>

package/package/components/FlowPlugConnect.svelte.d.ts

@@ -14,6 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const FlowPlugConnect: $$__sveltets_2_IsomorphicComponent<{
     connecting: boolean;
     id?: undefined | string;
+    wrapperClasses?: string;
 }, {
     click: CustomEvent<any>;
 } & {