windmill-components 1.269.4 → 1.291.4

package/package/components/flows/content/FlowInputs.svelte

@@ -1,7 +1,7 @@
 <script>import { Alert } from '../../common';
 import ToggleHubWorkspace from '../../ToggleHubWorkspace.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import { RawScript, Script } from '../../../gen';
+import { Script } from '../../../gen';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
 import PickHubScript from '../pickers/PickHubScript.svelte';
@@ -12,6 +12,9 @@ import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.sv
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import { Check, Code, Zap } from 'lucide-svelte';
 import SuspendDrawer from './SuspendDrawer.svelte';
+import { defaultScripts } from '../../../stores';
+import { defaultScriptLanguages } from '../../../scripts';
+import DefaultScripts from '../../DefaultScripts.svelte';
 export let failureModule;
 export let shouldDisableTriggerScripts = false;
 export let noEditor;
@@ -26,6 +29,23 @@ let kind = failureModule
             : 'script';
 let pick_existing = 'hub';
 let filter = '';
+$: langs = ($defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+    .map((l) => [defaultScriptLanguages[l], l])
+    .filter((x) => $defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1]));
+function displayLang(lang, kind) {
+    if (lang == Script.language.BUN ||
+        lang == Script.language.PYTHON3 ||
+        lang == Script.language.DENO) {
+        return true;
+    }
+    if (lang == Script.language.GO) {
+        return kind == 'script' || kind == 'trigger' || failureModule;
+    }
+    if (lang == Script.language.BASH || lang == Script.language.NATIVETS) {
+        return kind == 'script';
+    }
+    return kind == 'script' && !failureModule;
+}
 </script>
 
 <div class="p-4 h-full flex flex-col" id="flow-editor-flow-inputs">
@@ -96,7 +116,7 @@ let filter = '';
 			</Alert>
 		{/if}
 
-		{#if kind == 'script'}
+		{#if kind == 'script' && !noEditor}
 			<div class="mt-2" />
 			<Alert title="Action Scripts" role="info">
 				An action script is simply a script that is neither a trigger nor an approval script. Those
@@ -105,40 +125,51 @@ let filter = '';
 		{/if}
 
 		{#if kind == 'approval'}
-			<div class="mt-2" />
-			<Alert title="Approval/Prompt Step" role="info">
-				An approval/prompt step will suspend the execution of a flow until it has been approved
-				and/or the prompts have been filled in the UI or through the resume endpoints or the
-				approval page by and solely by the recipients of the secret urls. See details in 'Advanced'
-				-> 'Suspend' settings of the step. A prompt is a specialized approval step with payload that
-				can be self-approved by the caller.<br /><br />
-				For further details, visit
+			{#if !noEditor}
+				<div class="mt-2" />
+				<Alert title="Approval/Prompt Step" role="info">
+					An approval/prompt step will suspend the execution of a flow until it has been approved
+					and/or the prompts have been filled in the UI or through the resume endpoints or the
+					approval page by and solely by the recipients of the secret urls. See details in
+					'Advanced' -> 'Suspend' settings of the step. A prompt is a specialized approval step with
+					payload that can be self-approved by the caller.<br /><br />
+					For further details, visit
+					<a
+						href="https://www.windmill.dev/docs/flows/flow_approval"
+						target="_blank"
+						class="text-blue-500">Approval/Prompt Steps Documentation</a
+					>
+					or
+					<div class="inline-flex">
+						<SuspendDrawer text="Approval/Step prompt helpers" />
+					</div>
+				</Alert>
+			{:else}
 				<a
 					href="https://www.windmill.dev/docs/flows/flow_approval"
 					target="_blank"
 					class="text-blue-500">Approval/Prompt Steps Documentation</a
 				>
-				or
-				<div class="inline-flex">
-					<SuspendDrawer text="Approval/Step prompt helpers" />
-				</div>
-			</Alert>
+			{/if}
 		{/if}
-		<h3 class="pb-2 pt-4">
-			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-			<Tooltip
-				documentationLink={kind === 'script'
-					? 'https://www.windmill.dev/docs/flows/editor_components#flow-actions'
-					: kind === 'trigger'
-					? 'https://www.windmill.dev/docs/flows/flow_trigger'
-					: kind === 'approval'
-					? 'https://www.windmill.dev/docs/flows/flow_approval'
-					: 'https://www.windmill.dev/docs/getting_started/flows_quickstart#flow-editor'}
-			>
-				Embed <span>{kind == 'script' ? 'action' : kind}</span> script directly inside a flow instead
-				of saving the script into your workspace for reuse. You can always save an inline script to your
-				workspace later.
-			</Tooltip>
+		<h3 class="pb-2 pt-4 flex gap-x-8 flex-wrap">
+			<div>
+				Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
+				<Tooltip
+					documentationLink={kind === 'script'
+						? 'https://www.windmill.dev/docs/flows/editor_components#flow-actions'
+						: kind === 'trigger'
+						? 'https://www.windmill.dev/docs/flows/flow_trigger'
+						: kind === 'approval'
+						? 'https://www.windmill.dev/docs/flows/flow_approval'
+						: 'https://www.windmill.dev/docs/getting_started/flows_quickstart#flow-editor'}
+				>
+					Embed <span>{kind == 'script' ? 'action' : kind}</span> script directly inside a flow instead
+					of saving the script into your workspace for reuse. You can always save an inline script to
+					your workspace later.
+				</Tooltip>
+			</div>
+			<DefaultScripts />
 		</h3>
 		{#if noEditor}
 			<div
@@ -153,226 +184,41 @@ let filter = '';
 		{/if}
 		<div class="flex flex-row">
 			<div class="flex flex-row flex-wrap gap-2" id="flow-editor-action-script">
-				<FlowScriptPicker
-					disabled={noEditor && (summary == undefined || summary == '')}
-					label="TypeScript (Deno)"
-					lang={Script.language.DENO}
-					on:click={() => {
-						dispatch('new', {
-							language: RawScript.language.DENO,
-							kind,
-							subkind: 'flow',
-							summary
-						})
-					}}
-				/>
-
-				<FlowScriptPicker
-					disabled={noEditor && (summary == undefined || summary == '')}
-					label="Python"
-					lang={Script.language.PYTHON3}
-					on:click={() => {
-						dispatch('new', {
-							language: RawScript.language.PYTHON3,
-							kind,
-							subkind: 'flow',
-							summary
-						})
-					}}
-				/>
-
-				<FlowScriptPicker
-					disabled={noEditor && (summary == undefined || summary == '')}
-					label="TypeScript (Bun)"
-					lang={Script.language.BUN}
-					on:click={() => {
-						dispatch('new', {
-							language: RawScript.language.BUN,
-							kind,
-							subkind: 'flow',
-							summary
-						})
-					}}
-				/>
-
-				{#if kind != 'approval'}
-					<FlowScriptPicker
-						disabled={noEditor && (summary == undefined || summary == '')}
-						label="Go"
-						lang={Script.language.GO}
-						on:click={() => {
-							dispatch('new', {
-								language: RawScript.language.GO,
-								kind,
-								subkind: 'flow',
-								summary
-							})
-						}}
-					/>
-				{/if}
-
-				{#if kind == 'script'}
-					<FlowScriptPicker
-						disabled={noEditor && (summary == undefined || summary == '')}
-						label="Bash"
-						lang={Script.language.BASH}
-						on:click={() => {
-							dispatch('new', {
-								language: RawScript.language.BASH,
-								kind,
-								subkind: 'flow',
-								summary
-							})
-						}}
-					/>
-
-					<FlowScriptPicker
-						disabled={noEditor && (summary == undefined || summary == '')}
-						label="REST"
-						lang={Script.language.NATIVETS}
-						on:click={() => {
-							dispatch('new', {
-								language: RawScript.language.NATIVETS,
-								kind,
-								subkind: 'flow',
-								summary
-							})
-						}}
-					/>
-
-					{#if !failureModule}
-						<FlowScriptPicker
-							disabled={noEditor && (summary == undefined || summary == '')}
-							label="PostgreSQL"
-							lang={Script.language.POSTGRESQL}
-							on:click={() => {
-								dispatch('new', {
-									language: RawScript.language.POSTGRESQL,
-									kind,
-									subkind: 'flow',
-									summary
-								})
-							}}
-						/>
-						<FlowScriptPicker
-							disabled={noEditor && (summary == undefined || summary == '')}
-							label="MySQL"
-							lang={Script.language.MYSQL}
-							on:click={() => {
-								dispatch('new', {
-									language: RawScript.language.MYSQL,
-									kind,
-									subkind: 'flow',
-									summary
-								})
-							}}
-						/>
-						<FlowScriptPicker
-							disabled={noEditor && (summary == undefined || summary == '')}
-							label="BigQuery"
-							lang={Script.language.BIGQUERY}
-							on:click={() => {
-								dispatch('new', {
-									language: RawScript.language.BIGQUERY,
-									kind,
-									subkind: 'flow',
-									summary
-								})
-							}}
-						/>
-						<FlowScriptPicker
-							disabled={noEditor && (summary == undefined || summary == '')}
-							label="Snowflake"
-							lang={Script.language.SNOWFLAKE}
-							on:click={() => {
-								dispatch('new', {
-									language: RawScript.language.SNOWFLAKE,
-									kind,
-									subkind: 'flow',
-									summary
-								})
-							}}
-						/>
-
-						<FlowScriptPicker
-							disabled={noEditor && (summary == undefined || summary == '')}
-							label="MS SQL Server"
-							lang={Script.language.MSSQL}
-							on:click={() => {
-								dispatch('new', {
-									language: RawScript.language.MSSQL,
-									kind,
-									subkind: 'flow',
-									summary
-								})
-							}}
-						/>
-
-						<FlowScriptPicker
-							disabled={noEditor && (summary == undefined || summary == '')}
-							label="GraphQL"
-							lang={Script.language.GRAPHQL}
-							on:click={() => {
-								dispatch('new', {
-									language: RawScript.language.GRAPHQL,
-									kind,
-									subkind: 'flow',
-									summary
-								})
-							}}
-						/>
-
+				{#each langs as [label, lang] (lang)}
+					{#if displayLang(lang, kind)}
 						<FlowScriptPicker
 							disabled={noEditor && (summary == undefined || summary == '')}
-							label={`Docker`}
-							lang="docker"
+							{label}
+							lang={lang == 'docker' ? Script.language.BASH : lang}
 							on:click={() => {
-								if (isCloudHosted()) {
-									sendUserToast(
-										'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
-										true,
-										[
-											{
-												label: 'Learn more',
-												callback: () => {
-													window.open('https://www.windmill.dev/docs/advanced/docker', '_blank')
+								if (lang == 'docker') {
+									if (isCloudHosted()) {
+										sendUserToast(
+											'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+											true,
+											[
+												{
+													label: 'Learn more',
+													callback: () => {
+														window.open('https://www.windmill.dev/docs/advanced/docker', '_blank')
+													}
 												}
-											}
-										]
-									)
-									return
+											]
+										)
+										return
+									}
 								}
+								console.log(lang, kind)
 								dispatch('new', {
-									language: RawScript.language.BASH,
-									kind,
-									subkind: 'docker',
-									summary
-								})
-							}}
-						/>
-
-						<FlowScriptPicker
-							disabled={noEditor && (summary == undefined || summary == '')}
-							label="PowerShell"
-							lang={Script.language.POWERSHELL}
-							on:click={() => {
-								dispatch('new', {
-									language: RawScript.language.POWERSHELL,
+									language: lang == 'docker' ? Script.language.BASH : lang,
 									kind,
-									subkind: 'flow',
+									subkind: lang == 'docker' ? 'docker' : 'flow',
 									summary
 								})
 							}}
 						/>
-
-						<!-- <FlowScriptPicker
-							label={`MySQL`}
-							lang="mysql"
-							on:click={() =>
-								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
-						/> -->
 					{/if}
-				{/if}
+				{/each}
 			</div>
 		</div>
 

package/package/components/flows/content/FlowLoop.svelte

@@ -55,16 +55,20 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 
 		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
 			<Pane size={60} minSize={20} class="p-4">
-				<Alert
-					type="info"
-					title="For loops"
-					tooltip="For loops"
-					documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
-					class="mb-4"
-				>
-					Add steps inside the loop and specify an iterator expression that defines the sequence
-					over which your subsequent steps will iterate.
-				</Alert>
+				{#if !noEditor}
+					<Alert
+						type="info"
+						title="For loops"
+						tooltip="For loops"
+						documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
+						class="mb-4"
+						size="xs"
+					>
+						Add steps inside the loop and specify an iterator expression that defines the sequence
+						over which your subsequent steps will iterate.
+					</Alert>
+				{/if}
+
 				{#if mod.value.type === 'forloopflow'}
 					<div class="flex flex-row gap-8 mt-2 mb-6">
 						<div>
@@ -105,8 +109,9 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 							/>
 						</div>
 					</div>
+
 					<div class="my-2 flex flex-row gap-2 items-center">
-						<div class="text-sm font-bold">
+						<div class="text-sm font-bold whitespace-nowrap">
 							Iterator expression
 							<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
 								List to iterate over.
@@ -133,7 +138,16 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 								pickableProperties={stepPropPicker.pickableProperties}
 							/>
 						{/if}
+						<div class="flex w-full justify-end">
+							<Button
+								on:click={() => (previewOpen = true)}
+								startIcon={{ icon: Play }}
+								color="dark"
+								size="sm">Test an iteration</Button
+							>
+						</div>
 					</div>
+
 					{#if mod.value.iterator.type == 'javascript'}
 						<!-- svelte-ignore a11y-no-static-element-interactions -->
 						<div
@@ -175,11 +189,6 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 						/>
 					{/if}
 				{/if}
-				<div class="flex mt-4">
-					<Button on:click={() => (previewOpen = true)} startIcon={{ icon: Play }} color="dark"
-						>Test an iteration</Button
-					>
-				</div>
 			</Pane>
 			<Pane size={40} minSize={20} class="flex flex-col flex-1">
 				<Tabs bind:selected>

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -47,6 +47,7 @@ export let previousModule;
 export let scriptKind = 'script';
 export let scriptTemplate = 'script';
 export let noEditor;
+export let enableAi;
 let editor;
 let diffEditor;
 let modulePreview;
@@ -86,7 +87,14 @@ $: stepPropPicker = failureModule
             previousId: undefined,
             hasResume: false
         },
-        extraLib: ''
+        extraLib: `
+				declare const error: {
+					message: string
+					name: string
+					stack: string
+				}
+				
+				`
     }
     : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false);
 function onKeyDown(event) {
@@ -306,7 +314,7 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 											previousModuleId={previousModule?.id}
 											bind:args={flowModule.value.input_transforms}
 											extraLib={stepPropPicker.extraLib}
-											enableAi
+											{enableAi}
 										/>
 									</PropPickerWrapper>
 								</div>
@@ -317,6 +325,7 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 									mod={flowModule}
 									{editor}
 									{diffEditor}
+									{noEditor}
 									lang={flowModule.value['language'] ?? 'deno'}
 									schema={$flowStateStore[$selectedId]?.schema ?? {}}
 								/>
@@ -390,6 +399,12 @@ let editorSettingsPanelSize = 100 - editorPanelSize;
 														bind:seconds={flowModule.value.concurrency_time_window_s}
 													/>
 												</Label>
+												<Label label="Custom concurrency key">
+													<div class="text-tertiary text-xs"
+														>Custom concurrency keys can only be set as the setting of a workspace
+														script</div
+													>
+												</Label>
 											{:else}
 												<Alert type="warning" title="Limitation" size="xs">
 													The concurrency limit of a workspace script is only settable in the script

package/package/components/flows/content/FlowModuleComponent.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         scriptKind?: "script" | "trigger" | "approval" | undefined;
         scriptTemplate?: "script" | "powershell" | "mysql" | "pgsql" | "docker" | undefined;
         noEditor: boolean;
+        enableAi: boolean;
     };
     events: {
         focus: FocusEvent;

package/package/components/flows/content/FlowModuleWrapper.svelte

@@ -122,11 +122,13 @@ async function createModuleFromScript(path, summary, kind, hash) {
 			failureModule={$selectedId === 'failure'}
 			{scriptKind}
 			{scriptTemplate}
+			{enableAi}
 		/>
 	{/if}
 {:else if flowModule.value.type === 'forloopflow'}
 	{#each flowModule.value.modules as submodule, index (index)}
 		<svelte:self
+			{noEditor}
 			bind:flowModule={submodule}
 			bind:parentModule={flowModule}
 			previousModule={flowModule.value.modules[index - 1]}
@@ -142,6 +144,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 	{:else}
 		{#each flowModule.value.default as submodule, index}
 			<svelte:self
+				{noEditor}
 				bind:flowModule={submodule}
 				bind:parentModule={flowModule}
 				previousModule={flowModule.value.default[index - 1]}
@@ -161,6 +164,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 		{:else}
 			{#each branch.modules as submodule, index}
 				<svelte:self
+					{noEditor}
 					bind:flowModule={submodule}
 					bind:parentModule={flowModule}
 					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}
@@ -176,6 +180,7 @@ async function createModuleFromScript(path, summary, kind, hash) {
 		{:else}
 			{#each branch.modules as submodule, index}
 				<svelte:self
+					{noEditor}
 					bind:flowModule={submodule}
 					bind:parentModule={flowModule}
 					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}

package/package/components/flows/content/FlowSchedules.svelte

@@ -3,9 +3,40 @@ import SchemaForm from '../../SchemaForm.svelte';
 import Toggle from '../../Toggle.svelte';
 import { emptyString } from '../../../utils';
 import { getContext } from 'svelte';
-const { schedule, flowStore } = getContext('FlowEditorContext');
+import { Alert, Button, Skeleton } from '../../common';
+import ScheduleEditor from '../../ScheduleEditor.svelte';
+import { ScheduleService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+import { Calendar } from 'lucide-svelte';
+const { schedule, flowStore, initialPath } = getContext('FlowEditorContext');
+let schedules = undefined;
+async function loadSchedules() {
+    try {
+        schedules = (await ScheduleService.listSchedules({
+            workspace: $workspaceStore ?? '',
+            path: initialPath,
+            isFlow: true
+        })).filter((s) => s.path != initialPath);
+    }
+    catch (e) {
+        console.error('impossible to load schedules');
+    }
+}
+let scheduleEditor;
+$: initialPath && loadSchedules();
 </script>
 
+<div class="w-full py-2">
+	<!-- svelte-ignore a11y-autofocus -->
+	<input
+		autofocus
+		type="text"
+		placeholder="Schedule summary"
+		class="text-sm w-full font-semibold mb-4"
+		bind:value={$schedule.summary}
+	/>
+</div>
+
 <CronInput bind:schedule={$schedule.cron} bind:timezone={$schedule.timezone} />
 <div class="mt-10" />
 <SchemaForm schema={$flowStore.schema} bind:args={$schedule.args} />
@@ -20,3 +51,46 @@ const { schedule, flowStore } = getContext('FlowEditorContext');
 		right: 'Schedule enabled'
 	}}
 />
+<Alert bgClass="my-4" type="warning" title="Changes only applied upon deploy">
+	Changes to the primary schedule are only applied upon deploy. Other schedules' changes are applied
+	immediately.
+</Alert>
+
+{#if initialPath != ''}
+	<ScheduleEditor
+		on:update={() => {
+			loadSchedules()
+		}}
+		bind:this={scheduleEditor}
+	/>
+	<h2 class="pt-7">Other schedules</h2>
+	<div class="py-4 flex">
+		<Button
+			on:click={() => scheduleEditor?.openNew(true, initialPath)}
+			variant="border"
+			color="light"
+			size="xs"
+			startIcon={{ icon: Calendar }}
+		>
+			New Schedule
+		</Button>
+	</div>
+
+	{#if schedules}
+		{#if schedules.length == 0}
+			<div class="text-xs text-secondary px-2"> No other schedules </div>
+		{:else}
+			<div class="flex flex-col divide-y px-2 pt-2 max-w-lg">
+				{#each schedules as schedule (schedule.path)}
+					<div class="grid grid-cols-6 text-2xs items-center py-2"
+						><div class="col-span-3 truncate">{schedule.path}</div><div>{schedule.schedule}</div>
+						<div>{schedule.enabled ? 'on' : 'off'}</div>
+						<button on:click={() => scheduleEditor?.openEdit(schedule.path, true)}>Edit</button>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{:else}
+		<Skeleton layout={[[8]]} />
+	{/if}
+{/if}

package/package/components/flows/content/FlowSettings.svelte

@@ -483,6 +483,11 @@ let dirtyPath = false;
 										bind:seconds={$flowStore.value.concurrency_time_window_s}
 									/>
 								</Label>
+								<Label label="Custom concurrency key">
+									<div class="text-tertiary text-xs"
+										>Custom concurrency keys can only be set as the setting of a workspace script</div
+									>
+								</Label>
 							</div>
 						</Section>
 					</TabContent>

package/package/components/flows/content/SuspendDrawer.svelte

@@ -32,8 +32,8 @@ export let text = 'Approval Help';
 				resume url in the returned payload of the step. The UX will automatically adapt and show the
 				prompt to the operator when running the flow. e.g:
 				<Tabs selected="deno" class="pt-4">
-					<Tab value="deno">TypeScript (Deno)</Tab>
 					<Tab value="bun">TypeScript (Bun)</Tab>
+					<Tab value="deno">TypeScript (Deno)</Tab>
 					<Tab value="python">Python</Tab>
 
 					<svelte:fragment slot="content">

package/package/components/flows/flowStateUtils.d.ts

@@ -11,7 +11,7 @@ export declare function pickFlow(path: string, summary: string, id: string): Pro
     value: PathFlow;
 }, FlowModuleState]>;
 export declare function createInlineScriptModule(language: RawScript.language, kind: Script.kind, subkind: 'pgsql' | 'flow', id: string, summary?: string): Promise<[FlowModule, FlowModuleState]>;
-export declare function createLoop(id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createLoop(id: string, enabledAi: boolean): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranches(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranchAll(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createFlow(id: string): Promise<[FlowModule, FlowModuleState]>;