windmill-components 1.309.6 → 1.339.2

package/package/components/SchemaModal.svelte

@@ -49,7 +49,11 @@ export function schemaToModal(schema, name, required) {
             }
             : undefined,
         showExpr: schema.showExpr,
-        password: schema.password
+        password: schema.password,
+        nullable: schema.nullable,
+        dateFormat: schema.format,
+        title: schema.title,
+        placeholder: schema.placeholder
     };
 }
 export const DEFAULT_PROPERTY = {
@@ -73,11 +77,19 @@ import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte';
 import LightweightSchemaForm from './LightweightSchemaForm.svelte';
 import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import Label from './Label.svelte';
+import { shouldDisplayPlaceholder } from '../utils';
+import ItemPicker from './ItemPicker.svelte';
+import { Plus } from 'lucide-svelte';
+import { VariableService } from '../gen';
+import { workspaceStore } from '../stores';
 export let error = '';
 export let editing = false;
 export let oldArgName = undefined;
 export let isFlowInput = false;
 export let propsNames = [];
+export let variableEditor = undefined;
+let itemPicker = undefined;
 const dispatch = createEventDispatcher();
 let drawer;
 let property = DEFAULT_PROPERTY;
@@ -89,6 +101,7 @@ function handleKeyUp(event) {
 }
 export function openDrawer(nproperty) {
     drawer.openDrawer();
+    error = '';
     property = nproperty;
 }
 export function closeDrawer() {
@@ -113,6 +126,10 @@ function clearModal() {
     property.items = undefined;
     property.showExpr = undefined;
     property.password = undefined;
+    property.nullable = false;
+    property.dateFormat = undefined;
+    property.title = undefined;
+    property.placeholder = undefined;
     drawer.closeDrawer();
 }
 $: if (property.name == '') {
@@ -129,6 +146,9 @@ function getResourceTypesFromFormat(format) {
     }
     return [];
 }
+function shouldDisplayPlaceholderForProperty(property) {
+    return shouldDisplayPlaceholder(property.selectedType, property.format, property.enum_, property.contentEncoding, property.pattern);
+}
 </script>
 
 <Drawer bind:this={drawer} placement="right">
@@ -164,6 +184,11 @@ function getResourceTypesFromFormat(format) {
 				</div>
 				<textarea placeholder="Enter a description" rows="3" bind:value={property.description} />
 			</label>
+
+			<label class="block">
+				<div class="mb-1 font-semibold text-secondary"> Custom Title </div>
+				<textarea placeholder="Enter a custom title" rows="1" bind:value={property.title} />
+			</label>
 			<div>
 				<div class="mb-1 font-semibold text-secondary">Type<Required required={true} /></div>
 				<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
@@ -197,6 +222,7 @@ function getResourceTypesFromFormat(format) {
 								property.currencyLocale = undefined
 								property.multiselect = undefined
 								property.password = undefined
+								property.dateFormat = undefined
 								if (argType == 'array') {
 									property.items = { type: 'string' }
 								} else {
@@ -225,22 +251,46 @@ function getResourceTypesFromFormat(format) {
 			<div>
 				<div class="flex flex-row gap-x-4 items-center">
 					<ArgInput
+						{itemPicker}
 						resourceTypes={getResourceTypesFromFormat(property.format)}
 						label="Default"
 						bind:value={property.default}
-						type={property.selectedType}
+						type={property.password ? 'string' : property.selectedType}
 						pattern={property.pattern}
 						customErrorMessage={property.customErrorMessage}
 						itemsType={property.items}
 						contentEncoding={property.contentEncoding}
 						format={property.format}
-						extra={property}
-					/>
-					<Toggle
-						options={{ right: 'Required' }}
-						class="!justify-start"
-						bind:checked={property.required}
+						extra={property.password ? {} : property}
+						nullable={property.nullable}
+						title={property.title}
+						placeholder={property.placeholder}
+						{variableEditor}
 					/>
+					<div>
+						<Toggle
+							options={{ right: 'Required' }}
+							size="xs"
+							bind:checked={property.required}
+							on:change={(event) => {
+								if (event?.detail) {
+									property.nullable = false
+								}
+							}}
+						/>
+						{#if property?.selectedType === 'string'}
+							<Toggle
+								options={{
+									right: 'Nullable',
+									rightTooltip:
+										'If enabled, the default value will be null and not an empty string.'
+								}}
+								size="xs"
+								bind:checked={property.nullable}
+								disabled={property?.required}
+							/>
+						{/if}
+					</div>
 				</div>
 				{#if isFlowInput}
 					<Alert type="info" title="Default not used by webhooks" size="xs" collapsible>
@@ -261,6 +311,7 @@ function getResourceTypesFromFormat(format) {
 						bind:enum_={property.enum_}
 						bind:contentEncoding={property.contentEncoding}
 						bind:password={property.password}
+						bind:dateFormat={property.dateFormat}
 						noExtra
 					/>
 				{:else if property.selectedType == 'array'}
@@ -290,6 +341,16 @@ function getResourceTypesFromFormat(format) {
 						</svelte:fragment>
 					</Tabs>
 				{/if}
+				{#if property && shouldDisplayPlaceholderForProperty(property)}
+					<Label label="Placeholder" class="pt-2">
+						<textarea
+							placeholder="Enter a placeholder"
+							rows="1"
+							bind:value={property.placeholder}
+						/>
+					</Label>
+				{/if}
+
 				<div class="pt-2">
 					<Toggle
 						options={{ right: 'Show this field only when conditions are met' }}
@@ -348,3 +409,35 @@ function getResourceTypesFromFormat(format) {
 		</svelte:fragment>
 	</DrawerContent>
 </Drawer>
+
+{#if isFlowInput}
+	<ItemPicker
+		bind:this={itemPicker}
+		pickCallback={(path, _) => {
+			if (property) {
+				property.default = '$var:' + path
+			}
+		}}
+		itemName="Variable"
+		tooltip="Variables are dynamic values that have a key associated to them and can be retrieved during the execution of a Script or Flow."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/variables_and_secrets"
+		extraField="path"
+		loadItems={async () =>
+			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+				name: x.path,
+				...x
+			}))}
+	>
+		<div slot="submission">
+			<Button
+				variant="border"
+				color="blue"
+				size="sm"
+				startIcon={{ icon: Plus }}
+				on:click={() => variableEditor?.initNew?.()}
+			>
+				New Variable
+			</Button>
+		</div>
+	</ItemPicker>
+{/if}

package/package/components/SchemaModal.svelte.d.ts

@@ -4,6 +4,7 @@ export declare const ARG_TYPES: readonly ["integer", "number", "string", "boolea
 export type ArgType = (typeof ARG_TYPES)[number];
 export declare function schemaToModal(schema: SchemaProperty, name: string, required: boolean): ModalSchemaProperty;
 export declare const DEFAULT_PROPERTY: ModalSchemaProperty;
+import type VariableEditor from './VariableEditor.svelte';
 declare const __propDef: {
     props: {
         error?: string | undefined;
@@ -11,6 +12,7 @@ declare const __propDef: {
         oldArgName?: string | undefined;
         isFlowInput?: boolean | undefined;
         propsNames?: string[] | undefined;
+        variableEditor?: VariableEditor | undefined;
         openDrawer?: ((nproperty: ModalSchemaProperty) => void) | undefined;
         closeDrawer?: (() => void) | undefined;
     };

package/package/components/ScriptBuilder.svelte

@@ -39,6 +39,7 @@ export let showMeta = false;
 export let diffDrawer = undefined;
 export let savedScript = undefined;
 export let searchParams = new URLSearchParams();
+export let disableHistoryChange = false;
 let metadataOpen = showMeta ||
     (initialPath == '' &&
         searchParams.get('state') == undefined &&
@@ -110,7 +111,7 @@ $: {
         }
     });
 }
-$: window.history.replaceState(null, '', '#' + encodeState(script));
+$: !disableHistoryChange && window.history.replaceState(null, '', '#' + encodeState(script));
 if (script.content == '') {
     initContent(script.language, script.kind, template);
 }
@@ -154,10 +155,11 @@ async function editScript(stay) {
         }
         script.schema = script.schema ?? emptySchema();
         try {
-            await inferArgs(script.language, script.content, script.schema);
+            const noMainFunc = await inferArgs(script.language, script.content, script.schema);
+            script.no_main_func = noMainFunc || undefined;
         }
         catch (error) {
-            sendUserToast(`The main signature was not parsable. This script is considered to be without main function`);
+            sendUserToast(`Could not parse code, are you sure it is valid?`, true);
         }
         const newHash = await ScriptService.createScript({
             workspace: $workspaceStore,
@@ -183,7 +185,8 @@ async function editScript(stay) {
                 delete_after_use: script.delete_after_use,
                 timeout: script.timeout,
                 concurrency_key: emptyString(script.concurrency_key) ? undefined : script.concurrency_key,
-                visible_to_runner_only: script.visible_to_runner_only
+                visible_to_runner_only: script.visible_to_runner_only,
+                no_main_func: script.no_main_func
             }
         });
         const { enabled, timezone, args, cron, summary } = $scheduleStore;
@@ -223,7 +226,9 @@ async function editScript(stay) {
             await createSchedule(script.path);
         }
         savedScript = cloneDeep(script);
-        history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
+        if (!disableHistoryChange) {
+            history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
+        }
         if (stay) {
             script.parent_hash = newHash;
         }
@@ -265,10 +270,11 @@ async function saveDraft(forceSave = false) {
         }
         script.schema = script.schema ?? emptySchema();
         try {
-            await inferArgs(script.language, script.content, script.schema);
+            const noMainFunc = await inferArgs(script.language, script.content, script.schema);
+            script.no_main_func = noMainFunc || undefined;
         }
         catch (error) {
-            sendUserToast(`The main signature was not parsable. This script is considered to be without main function`);
+            sendUserToast(`Could not parse code, are you sure it is valid?`, true);
         }
         if (initialPath == '' || savedScript?.draft_only) {
             if (savedScript?.draft_only) {
@@ -303,7 +309,8 @@ async function saveDraft(forceSave = false) {
                     concurrency_key: emptyString(script.concurrency_key)
                         ? undefined
                         : script.concurrency_key,
-                    visible_to_runner_only: script.visible_to_runner_only
+                    visible_to_runner_only: script.visible_to_runner_only,
+                    no_main_func: script.no_main_func
                 }
             });
         }

package/package/components/ScriptBuilder.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         diffDrawer?: DiffDrawer | undefined;
         savedScript?: NewScriptWithDraft | undefined;
         searchParams?: URLSearchParams | undefined;
+        disableHistoryChange?: boolean | undefined;
         setCode?: ((code: string) => void) | undefined;
     };
     events: {

package/package/components/ScriptEditor.svelte

@@ -39,7 +39,6 @@ export let noHistory = false;
 export let saveToWorkspace = false;
 let websocketAlive = {
     pyright: false,
-    black: false,
     deno: false,
     go: false,
     ruff: false,
@@ -239,7 +238,7 @@ function collabUrl() {
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane size={60} minSize={10} class="!overflow-visible">
-			<div class="pl-2 h-full !overflow-visible bg-gray-50 dark:bg-[#2F343F]">
+			<div class="pl-2 h-full !overflow-visible bg-gray-50 dark:bg-[#272D38]">
 				{#key lang}
 					<Editor
 						folding

package/package/components/ScriptEditor.svelte.d.ts

@@ -37,7 +37,7 @@ export type ScriptEditorProps = typeof __propDef.props;
 export type ScriptEditorEvents = typeof __propDef.events;
 export type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponent<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
-    get inferSchema(): (code: string, nlang?: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | undefined) => Promise<void>;
+    get inferSchema(): (code: string, nlang?: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | undefined) => Promise<void>;
     get setCollaborationMode(): () => Promise<void>;
     get disableCollaboration(): () => void;
 }

package/package/components/SimpleEditor.svelte

@@ -166,6 +166,10 @@ async function loadMonaco() {
         });
         disableTabCond = editor.createContextKey('disableTabCond', !code);
         editor.addCommand(KeyCode.Tab, function () { }, 'disableTabCond');
+        editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {
+            // CMD + slash (toggle comment) on some EU keyboards
+            editor?.trigger('keyboard', 'editor.action.commentLine', {});
+        });
     });
     if (autoHeight) {
         const updateHeight = () => {
@@ -275,7 +279,6 @@ function loadExtraLib() {
                 filePath: 'windmill.d.ts'
             });
         }
-        console.log(libs);
         languages.typescript.javascriptDefaults.setExtraLibs(libs);
     }
 }

package/package/components/StringTypeNarrowing.svelte

@@ -1,8 +1,12 @@
-<script>import RadioButton from './RadioButton.svelte';
+<script>import { computeKind } from '../utils';
+import Label from './Label.svelte';
+import RadioButton from './RadioButton.svelte';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
 import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
 import Alert from './common/alert/Alert.svelte';
+import ClearableInput from './common/clearableInput/ClearableInput.svelte';
 import RegexGen from './copilot/RegexGen.svelte';
 export let pattern;
 export let enum_;
@@ -14,7 +18,8 @@ export let disableCreate = false;
 export let disableVariablePicker = false;
 export let password = false;
 export let noExtra = false;
-let kind = computeKind();
+export let dateFormat;
+let kind = computeKind(enum_, contentEncoding, pattern, format);
 let patternStr = pattern ?? '';
 let resource;
 const FORMATS = [
@@ -26,7 +31,8 @@ const FORMATS = [
     'yaml',
     'sql',
     // 'time',
-    'date-time'
+    'date-time',
+    'date'
     // 'duration',
     // 'ipv6',
     // 'jsonpointer',
@@ -50,24 +56,11 @@ function remove(item) {
         enum_ = undefined;
     }
 }
-function computeKind() {
-    if (enum_ != undefined) {
-        return 'enum';
-    }
-    if (contentEncoding == 'base64') {
-        return 'base64';
-    }
-    if (pattern != undefined) {
-        return 'pattern';
-    }
-    if (format != undefined && format != '') {
-        if (format.startsWith('resource')) {
-            return 'resource';
-        }
-        return 'format';
-    }
-    return 'none';
-}
+const presetOptions = [
+    { label: 'ISO Format', format: 'yyyy-MM-dd' },
+    { label: 'US Format', format: 'MM/dd/yyyy' },
+    { label: 'EU Format', format: 'dd/MM/yyyy' }
+];
 </script>
 
 <RadioButton
@@ -100,12 +93,13 @@ function computeKind() {
 {#if kind == 'pattern'}
 	<label for="input" class="mb-2 text-secondary text-xs">
 		Pattern (Regex)
-		<div class="flex flex-row items-center gap-0.5">
+		<div class="flex flex-row gap-1">
 			<input
 				id="input"
 				type="text"
 				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
 				bind:value={patternStr}
+				class="text-sm"
 			/>
 			<RegexGen
 				on:gen={(e) => {
@@ -118,7 +112,6 @@ function computeKind() {
 				variant="border"
 				color="blue"
 				size="sm"
-				btnClasses="mx-2 mb-1"
 				on:click={() => {
 					patternStr = ''
 				}}
@@ -191,6 +184,32 @@ function computeKind() {
 			<option value={f}>{f}</option>
 		{/each}
 	</select>
+
+	{#if format == 'date'}
+		<div class="mt-1" />
+
+		<div class="grid grid-cols-3 gap-2">
+			<Label label="Date format passed to script" class="col-span-2">
+				<svelte:fragment slot="header">
+					<Tooltip light>
+						Setting the date output format will allow you to specify how the date will be passed to
+						the script.
+					</Tooltip>
+				</svelte:fragment>
+				<ClearableInput type="text" bind:value={dateFormat} placeholder="yyyy-MM-dd" />
+			</Label>
+			<Label label="Presets">
+				<select
+					bind:value={dateFormat}
+					disabled={dateFormat ? !presetOptions.map((f) => f.format).includes(dateFormat) : false}
+				>
+					{#each presetOptions as f}
+						<option value={f.format}>{f.label}</option>
+					{/each}
+				</select>
+			</Label>
+		</div>
+	{/if}
 {:else if kind == 'none'}
 	{#if !noExtra}
 		<label
@@ -204,7 +223,7 @@ function computeKind() {
 		title="S3 Object recommended"
 		collapsible
 		size="xs"
-		documentationLink="Pattern (Regex) https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio-azure-blob"
+		documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage/large_data_files"
 	>
 		For large files, we recommend using the S3 Object type instead of the base64 string type.
 	</Alert>

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         disableVariablePicker?: boolean | undefined;
         password?: boolean | undefined;
         noExtra?: boolean | undefined;
+        dateFormat: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/TemplateEditor.svelte

@@ -394,6 +394,7 @@ async function loadMonaco() {
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
         editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () { });
+        editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () { });
     });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {

package/package/components/TestJobLoader.svelte

@@ -74,7 +74,10 @@ export async function getLogs() {
             running: `running` in job && job.running,
             logOffset: job.logs?.length ?? 0
         });
-        job.logs = (job.logs ?? '').concat(getUpdate.new_logs ?? '');
+        if ((job.logs ?? '').length == 0) {
+            job.logs = getUpdate.new_logs ?? '';
+            logOffset = getUpdate.log_offset ?? 0;
+        }
     }
 }
 export async function runPreview(path, code, lang, args, tag, lock) {
@@ -131,18 +134,24 @@ async function loadTestJob(id) {
     if (currentId === id) {
         try {
             if (job && `running` in job) {
+                const offset = logOffset == 0 ? (job.logs?.length ? job.logs?.length + 1 : 0) : logOffset;
                 let previewJobUpdates = await JobService.getJobUpdates({
                     workspace: workspace,
                     id,
                     running: job.running,
-                    logOffset: logOffset == 0 ? (job.logs?.length ? job.logs?.length + 1 : 0) : logOffset
+                    logOffset: offset
                 });
+                if (previewJobUpdates.new_logs) {
+                    if (offset == 0) {
+                        job.logs = previewJobUpdates.new_logs ?? '';
+                    }
+                    else {
+                        job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
+                    }
+                }
                 if (previewJobUpdates.log_offset) {
                     logOffset = previewJobUpdates.log_offset ?? 0;
                 }
-                if (previewJobUpdates.new_logs) {
-                    job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
-                }
                 if (previewJobUpdates.flow_status) {
                     job.flow_status = previewJobUpdates.flow_status;
                 }

package/package/components/TestJobLoader.svelte.d.ts

@@ -51,7 +51,7 @@ export default class TestJobLoader extends SvelteComponent<TestJobLoaderProps, T
     get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
     get getLogs(): () => Promise<void>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | undefined, args: Record<string, any>, tag: string | undefined, lock?: string | undefined) => Promise<string>;
     get cancelJob(): () => Promise<void>;
     get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;

package/package/components/Toggle.svelte

@@ -55,7 +55,7 @@ const bothOptions = Boolean(options.left) && Boolean(options.right);
 		<div
 			class={classNames(
 				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all ",
-				color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600',
+				color == 'red' ? 'peer-checked:bg-red-600' : 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
 					: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'

package/package/components/Tooltip.svelte

@@ -8,12 +8,18 @@ export let placement = undefined;
 export let documentationLink = undefined;
 export let small = false;
 export let markdownTooltip = undefined;
+export let customSize = '100%';
 const plugins = [gfmPlugin()];
 </script>
 
-<Popover notClickable {placement} class={wrapperClass}>
+<Popover
+	notClickable
+	{placement}
+	class={wrapperClass}
+	style="transform: scale({parseFloat(customSize) / 100});"
+>
 	<div
-		class="inline-flex w-3 mx-0.5 {light
+		class="inline-flex w-3 mx-0.5 h-3 {light
 			? 'text-tertiary-inverse'
 			: 'text-tertiary'} {$$props.class} relative"
 	>

package/package/components/Tooltip.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         documentationLink?: string | undefined;
         small?: boolean | undefined;
         markdownTooltip?: string | undefined;
+        customSize?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;