windmill-components 1.60.4 → 1.75.0

package/components/flows/content/FlowInputs.svelte

@@ -23,133 +23,143 @@ let filter = '';
 </script>
 
 <div class="p-4 h-full flex flex-col">
-	{#if !failureModule}
-		<div class="center-center">
-			<div class="max-w-min">
-				<ToggleButtonGroup bind:selected={kind}>
-					<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
-						Action &nbsp;<Tooltip>
-							An action script is simply a script that is neither a trigger nor an approval script.
-							Those are the majority of the scripts.
-						</Tooltip>
-					</ToggleButton>
-					{#if !shouldDisableTriggerScripts}
-						<ToggleButton position="center" value="trigger" size="sm" startIcon={{ icon: faBolt }}>
-							Trigger &nbsp;<Tooltip>
-								Used as a first step most commonly with a state and a schedule to watch for changes
-								on an external system, compute the diff since last time, set the new state. The
-								diffs are then treated one by one with a for-loop.
+	{#if summary == 'Terminate flow'}
+		<Alert role="info" title="The flow stops here"
+			>This is an identity step with an early stop that has 'true' for expression</Alert
+		>
+	{:else}{#if !failureModule}
+			<div class="center-center">
+				<div class="max-w-min">
+					<ToggleButtonGroup bind:selected={kind}>
+						<ToggleButton position="left" value="script" size="sm" startIcon={{ icon: faCode }}>
+							Action &nbsp;<Tooltip>
+								An action script is simply a script that is neither a trigger nor an approval
+								script. Those are the majority of the scripts.
 							</Tooltip>
 						</ToggleButton>
-					{/if}
-					<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
-						Approval &nbsp;<Tooltip>
-							An approval step will suspend the execution of a flow until it has been approved
-							through the resume endpoints or the approval page by and solely by the recipients of
-							those secret urls. Use `wmill.getResumeUrls()` in Typescript or
-							`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
-						</Tooltip>
-					</ToggleButton>
-				</ToggleButtonGroup>
+						{#if !shouldDisableTriggerScripts}
+							<ToggleButton
+								position="center"
+								value="trigger"
+								size="sm"
+								startIcon={{ icon: faBolt }}
+							>
+								Trigger &nbsp;<Tooltip>
+									Used as a first step most commonly with a state and a schedule to watch for
+									changes on an external system, compute the diff since last time, set the new
+									state. The diffs are then treated one by one with a for-loop.
+								</Tooltip>
+							</ToggleButton>
+						{/if}
+						<ToggleButton position="right" value="approval" size="sm" startIcon={{ icon: faCheck }}>
+							Approval &nbsp;<Tooltip>
+								An approval step will suspend the execution of a flow until it has been approved
+								through the resume endpoints or the approval page by and solely by the recipients of
+								those secret urls. Use `wmill.getResumeUrls()` in Typescript or
+								`wmill.get_resume_urls()` in Python from the wmill client to generate those URLs.
+							</Tooltip>
+						</ToggleButton>
+					</ToggleButtonGroup>
+				</div>
 			</div>
-		</div>
-	{/if}
-	{#if kind == 'trigger'}
-		<div class="mt-2" />
-		<Alert title="Trigger script automatic schedule" role="info">
-			A schedule will be automatically attached to this flow to run every 15 minutes. Adjust
-			frequency in 'Settings -> Schedule'</Alert
-		>
-	{/if}
-	<h3 class="pb-2 pt-4">
-		Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
-		<Tooltip>
-			Embed a 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>
-	<div class="flex flex-row">
-		<div class="flex flex-row flex-wrap gap-2">
-			<FlowScriptPicker
-				label="Typescript"
-				lang={Script.language.DENO}
-				on:click={() => {
-					dispatch('new', {
-						language: RawScript.language.DENO,
-						kind,
-						subkind: 'flow'
-					})
-				}}
-			/>
-
-			<FlowScriptPicker
-				label="Python"
-				lang={Script.language.PYTHON3}
-				on:click={() => {
-					dispatch('new', {
-						language: RawScript.language.PYTHON3,
-						kind,
-						subkind: 'flow'
-					})
-				}}
-			/>
-
-			{#if kind != 'approval'}
+		{/if}
+		{#if kind == 'trigger'}
+			<div class="mt-2" />
+			<Alert title="Trigger script automatic schedule" role="info">
+				A schedule will be automatically attached to this flow to run every 15 minutes. Adjust
+				frequency in 'Settings -> Schedule'</Alert
+			>
+		{/if}
+		<h3 class="pb-2 pt-4">
+			Inline new <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script
+			<Tooltip>
+				Embed a 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>
+		<div class="flex flex-row">
+			<div class="flex flex-row flex-wrap gap-2">
 				<FlowScriptPicker
-					label="Go"
-					lang={Script.language.GO}
+					label="Typescript"
+					lang={Script.language.DENO}
 					on:click={() => {
 						dispatch('new', {
-							language: RawScript.language.GO,
+							language: RawScript.language.DENO,
 							kind,
 							subkind: 'flow'
 						})
 					}}
 				/>
-			{/if}
 
-			{#if kind == 'script'}
 				<FlowScriptPicker
-					label="Bash"
-					lang={Script.language.BASH}
+					label="Python"
+					lang={Script.language.PYTHON3}
 					on:click={() => {
 						dispatch('new', {
-							language: RawScript.language.BASH,
+							language: RawScript.language.PYTHON3,
 							kind,
 							subkind: 'flow'
 						})
 					}}
 				/>
 
-				{#if !failureModule}
+				{#if kind != 'approval'}
 					<FlowScriptPicker
-						label={`PostgreSQL`}
-						lang="pgsql"
-						on:click={() =>
-							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+						label="Go"
+						lang={Script.language.GO}
+						on:click={() => {
+							dispatch('new', {
+								language: RawScript.language.GO,
+								kind,
+								subkind: 'flow'
+							})
+						}}
 					/>
+				{/if}
 
+				{#if kind == 'script'}
 					<FlowScriptPicker
-						label={`MySQL`}
-						lang="mysql"
-						on:click={() =>
-							dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
+						label="Bash"
+						lang={Script.language.BASH}
+						on:click={() => {
+							dispatch('new', {
+								language: RawScript.language.BASH,
+								kind,
+								subkind: 'flow'
+							})
+						}}
 					/>
+
+					{#if !failureModule}
+						<FlowScriptPicker
+							label={`PostgreSQL`}
+							lang="pgsql"
+							on:click={() =>
+								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
+						/>
+
+						<!-- <FlowScriptPicker
+							label={`MySQL`}
+							lang="mysql"
+							on:click={() =>
+								dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'mysql' })}
+						/> -->
+					{/if}
 				{/if}
-			{/if}
+			</div>
 		</div>
-	</div>
 
-	<h3 class="mb-2 mt-6"
-		>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script</h3
-	>
-	{#if pick_existing == 'hub'}
-		<PickHubScript bind:filter {kind} on:pick>
-			<ToggleHubWorkspace bind:selected={pick_existing} />
-		</PickHubScript>
-	{:else}
-		<WorkspaceScriptPicker displayLock bind:filter {kind} on:pick>
-			<ToggleHubWorkspace bind:selected={pick_existing} />
-		</WorkspaceScriptPicker>
+		<h3 class="mb-2 mt-6"
+			>Use pre-made <span class="text-blue-500">{kind == 'script' ? 'action' : kind}</span> script</h3
+		>
+		{#if pick_existing == 'hub'}
+			<PickHubScript bind:filter {kind} on:pick>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</PickHubScript>
+		{:else}
+			<WorkspaceScriptPicker displayLock bind:filter {kind} on:pick>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</WorkspaceScriptPicker>
+		{/if}
 	{/if}
 </div>

package/components/flows/content/FlowLoop.svelte

@@ -10,16 +10,14 @@ import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 import { Button, Tab, TabContent, Tabs } from '../../common';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getStepPropPicker } from '../previousResults';
-import { flowStateStore } from '../flowState';
-import { flowStore } from '../flowStore';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
-const { previewArgs } = getContext('FlowEditorContext');
+const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 export let mod;
 export let parentModule;
 export let previousModule;
 let editor = undefined;
 let selected = 'early-stop';
-$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, $previewArgs, false, true);
+$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, $flowStore, $previewArgs, false);
 </script>
 
 <div class="h-full flex flex-col">
@@ -34,7 +32,7 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 						Iterator expression
 						<Tooltip>
 							List to iterate over. For more information see the
-							<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
+							<a href="https://docs.windmill.dev/docs/getting_started/flows_quickstart">docs.</a>
 						</Tooltip>
 					</div>
 					{#if mod.value.iterator.type == 'javascript'}
@@ -44,6 +42,7 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 								pickableProperties={stepPropPicker.pickableProperties}
 								on:select={({ detail }) => {
 									editor?.insertAtCursor(detail)
+									editor?.focus()
 								}}
 							>
 								<SimpleEditor

package/components/flows/content/FlowModuleComponent.svelte

@@ -5,13 +5,10 @@ import Editor from '../../Editor.svelte';
 import EditorBar from '../../EditorBar.svelte';
 import ModulePreview from '../../ModulePreview.svelte';
 import { createScriptFromInlineScript, fork } from '../flowStateUtils';
-import { flowStore } from '../flowStore';
-import SchemaForm from '../../SchemaForm.svelte';
 import { RawScript } from '../../../gen';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowModuleHeader from './FlowModuleHeader.svelte';
-import { flowStateStore } from '../flowState';
-import { schemaToObject, scriptLangToEditorLang } from '../../../utils';
+import { getLatestHashForScript, schemaToObject, scriptLangToEditorLang } from '../../../utils';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import { afterUpdate, getContext } from 'svelte';
 import { loadSchemaFromModule } from '../utils';
@@ -20,11 +17,13 @@ import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 import FlowRetries from './FlowRetries.svelte';
 import { getStepPropPicker } from '../previousResults';
+import { deepEqual } from 'fast-equals';
 import Button from '../../common/button/Button.svelte';
 import Alert from '../../common/alert/Alert.svelte';
 import FlowModuleSleep from './FlowModuleSleep.svelte';
 import FlowPathViewer from './FlowPathViewer.svelte';
-const { selectedId, previewArgs } = getContext('FlowEditorContext');
+import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
+const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 export let flowModule;
 export let failureModule = false;
 export let parentModule = undefined;
@@ -52,7 +51,7 @@ $: stepPropPicker = failureModule
         },
         extraLib: ''
     }
-    : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false, true);
+    : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false);
 function onKeyDown(event) {
     if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
         event.preventDefault();
@@ -65,11 +64,11 @@ async function reload(flowModule) {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
         validCode = true;
         setTimeout(() => {
-            if (JSON.stringify(value.input_transforms) !== JSON.stringify(input_transforms)) {
+            if (!deepEqual(value.input_transforms, input_transforms)) {
                 inputTransforms = input_transforms;
             }
         });
-        if (JSON.stringify(schema) !== JSON.stringify($flowStateStore[flowModule.id]?.schema)) {
+        if (!deepEqual(schema, $flowStateStore[flowModule.id]?.schema)) {
             if (!$flowStateStore[flowModule.id]) {
                 $flowStateStore[flowModule.id] = { schema };
             }
@@ -92,6 +91,7 @@ afterUpdate(() => {
 });
 let isScript = true;
 $: isScript != (value.type === 'script') && (isScript = value.type === 'script');
+let forceReload = 0;
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -111,11 +111,22 @@ $: isScript != (value.type === 'script') && (isScript = value.type === 'script')
 						flowModule = module
 						$flowStateStore[module.id] = state
 					}}
+					on:reload={async () => {
+						if (flowModule.value.type == 'script') {
+							console.log('reload')
+							if (flowModule.value.hash != undefined) {
+								flowModule.value.hash = await getLatestHashForScript(flowModule.value.path)
+							}
+							forceReload++
+							await reload(flowModule)
+						}
+					}}
 					on:createScriptFromInlineScript={async () => {
 						const [module, state] = await createScriptFromInlineScript(
 							flowModule,
 							$selectedId,
-							$flowStateStore[flowModule.id].schema
+							$flowStateStore[flowModule.id].schema,
+							$flowStore
 						)
 						flowModule = module
 						$flowStateStore[module.id] = state
@@ -130,7 +141,7 @@ $: isScript != (value.type === 'script') && (isScript = value.type === 'script')
 						{editor}
 						lang={value['language'] ?? 'deno'}
 						{websocketAlive}
-						iconOnly={width < 768}
+						iconOnly={width < 850}
 					/>
 				</div>
 			{/if}
@@ -167,10 +178,13 @@ $: isScript != (value.type === 'script') && (isScript = value.type === 'script')
 										await reload(flowModule)
 									}}
 									formatAction={() => reload(flowModule)}
+									fixedOverflowWidgets
 								/>
 							</div>
 						{:else if value.type === 'script'}
-							<FlowModuleScript path={value.path} hash={value.hash} />
+							{#key forceReload}
+								<FlowModuleScript path={value.path} hash={value.hash} />
+							{/key}
 						{:else if value.type === 'flow'}
 							<FlowPathViewer path={value.path} />
 						{/if}
@@ -188,9 +202,8 @@ $: isScript != (value.type === 'script') && (isScript = value.type === 'script')
 										pickableProperties={stepPropPicker.pickableProperties}
 										error={failureModule}
 									>
-										<SchemaForm
+										<InputTransformSchemaForm
 											schema={$flowStateStore[$selectedId]?.schema ?? {}}
-											inputTransform={true}
 											previousModuleId={previousModule?.id}
 											bind:args={value.input_transforms}
 											bind:extraLib={stepPropPicker.extraLib}

package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -1,9 +1,10 @@
 <script>import SimpleEditor from '../../SimpleEditor.svelte';
 import Toggle from '../../Toggle.svelte';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
-import { flowStateStore } from '../flowState';
 import Tooltip from '../../Tooltip.svelte';
 import { NEVER_TESTED_THIS_FAR } from '../utils';
+import { getContext } from 'svelte';
+const { flowStateStore } = getContext('FlowEditorContext');
 export let flowModule;
 let editor = undefined;
 $: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
@@ -51,6 +52,7 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 					pickableProperties={undefined}
 					on:select={({ detail }) => {
 						editor?.insertAtCursor(detail)
+						editor?.focus()
 					}}
 				>
 					<SimpleEditor

package/components/flows/content/FlowModuleHeader.svelte

@@ -1,15 +1,17 @@
 <script>import Button from '../../common/button/Button.svelte';
-import { faCodeBranch, faSave } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
+import { faCodeBranch, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher, getContext } from 'svelte';
 import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
+import { getLatestHashForScript, sendUserToast } from '../../../utils';
 export let module;
+const { scriptEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 </script>
 
 <div class="flex flex-row space-x-2">
-	{#if module.value.type === 'script' || module.value.type === 'rawscript'}
+	{#if module.value.type === 'script' || module.value.type === 'rawscript' || module.value.type == 'flow'}
 		<Popover
 			placement="bottom"
 			class="center-center rounded border p-2 
@@ -57,6 +59,27 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 	{/if}
 	{#if module.value.type === 'script'}
 		<div class="w-2" />
+		{#if !module.value.path.startsWith('hub/')}
+			<Button
+				size="xs"
+				color="light"
+				variant="border"
+				on:click={async () => {
+					if (module.value.type == 'script') {
+						const hash = module.value.hash ?? (await getLatestHashForScript(module.value.path))
+						$scriptEditorDrawer?.openDrawer(hash, () => {
+							dispatch('reload')
+							sendUserToast('Script has been updated')
+						})
+					}
+				}}
+				startIcon={{ icon: faPen }}
+				iconOnly={false}
+				disabled={module.value.hash != undefined}
+			>
+				Edit {#if module.value.hash != undefined} (locked hash){/if}
+			</Button>
+		{/if}
 		<Button
 			size="xs"
 			color="light"

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         toggleStopAfterIf: CustomEvent<any>;
         toggleSuspend: CustomEvent<any>;
         toggleSleep: CustomEvent<any>;
+        reload: CustomEvent<any>;
         fork: CustomEvent<any>;
         createScriptFromInlineScript: CustomEvent<any>;
     } & {

package/components/flows/content/FlowModuleSleep.svelte

@@ -3,11 +3,10 @@ import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { emptySchema } from '../../../utils';
 import { getContext } from 'svelte';
-import { flowStateStore } from '../flowState';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 export let flowModule;
 export let previousModuleId;
-const { selectedId } = getContext('FlowEditorContext');
+const { selectedId, flowStateStore } = getContext('FlowEditorContext');
 let schema = emptySchema();
 schema.properties['sleep'] = {
     type: 'number',
@@ -53,6 +52,7 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 				pickableProperties={undefined}
 				on:select={({ detail }) => {
 					editor?.insertAtCursor(detail)
+					editor?.focus()
 				}}
 			>
 				<InputTransformForm

package/components/flows/content/FlowModuleWrapper.svelte

@@ -6,12 +6,11 @@ import FlowBranchAllWrapper from './FlowBranchAllWrapper.svelte';
 import FlowBranchOneWrapper from './FlowBranchOneWrapper.svelte';
 import { createInlineScriptModule, pickFlow, pickScript } from '../flowStateUtils';
 import FlowInputs from './FlowInputs.svelte';
-import { flowStateStore } from '../flowState';
 import { Alert } from '../../common';
 import FlowInputsFlow from './FlowInputsFlow.svelte';
 import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
 import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
-const { selectedId, schedule } = getContext('FlowEditorContext');
+const { selectedId, schedule, flowStateStore } = getContext('FlowEditorContext');
 export let flowModule;
 // These pointers are used to easily access previewArgs of parent module, and previous module
 // Pointer to parent module, only defined within Branches or Loops.
@@ -30,12 +29,7 @@ export let previousModule = undefined;
 	{:else if flowModule.value.type === 'identity'}
 		{#if $selectedId == 'failure'}
 			<Alert type="info" title="Error handlers are triggered upon non recovered errors">
-				If defined, the error handler will take as input, the result of the step that errored (which
-				has its error in the 'error field').
-				<br />
-				<br />
-				Steps are retried until they succeed, or until the maximum number of retries defined for that
-				spec is reached, at which point the error handler is called.
+				If defined, the error handler will take the error as input.
 			</Alert>
 		{/if}
 

package/components/flows/content/FlowRetries.svelte

@@ -29,9 +29,8 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 	<h2 class="mt-2"
 		>Retries <Tooltip>
 			If defined, upon error this step will be retried with a delay and a maximum number of attempts
-			as defined below. If none of the retries succeed, the step job is a failure and the error will
-			propagate up in the case of a branch, and the error handler will be called ultimately if not
-			handled prior.</Tooltip
+			as defined below. If both static and exponential delay is defined, the static delay attempts
+			are tried before the exponential ones.</Tooltip
 		></h2
 	>
 
@@ -70,22 +69,25 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 			}
 		}}
 		options={{
-			right: 'Exponential retry enabled'
+			right: 'Exponential backoff enabled'
 		}}
 	/>
 	{#if flowModule.retry?.exponential}
 		<span class="text-xs font-bold">Attempts</span>
 		<input bind:value={flowModule.retry.exponential.attempts} type="number" />
 		<span class="text-xs font-bold">Mulitplier</span>
+		<span class="text-xs text-gray-500">additional delay = multiplier * base ^ (# attempts)</span>
 		<input bind:value={flowModule.retry.exponential.multiplier} type="number" />
-		<span class="text-xs font-bold">Initial delay (seconds)</span>
+		<span class="text-xs font-bold">Base</span>
 		<input bind:value={flowModule.retry.exponential.seconds} type="number" />
 	{:else}
 		<span class="text-xs font-bold">Attempts</span>
 		<input type="number" disabled />
 		<span class="text-xs font-bold">Mulitplier</span>
+		<span class="text-xs text-gray-500">additional delay = multiplier * seconds ^ (# attempts)</span
+		>
 		<input type="number" disabled />
-		<span class="text-xs font-bold">Initial delay (seconds)</span>
+		<span class="text-xs font-bold">Base</span>
 		<input type="number" disabled />
 	{/if}
 </div>

package/components/flows/content/FlowSchedules.svelte

@@ -3,8 +3,7 @@ import SchemaForm from '../../SchemaForm.svelte';
 import Toggle from '../../Toggle.svelte';
 import { emptyString } from '../../../utils';
 import { getContext } from 'svelte';
-import { flowStore } from '../flowStore';
-const { schedule } = getContext('FlowEditorContext');
+const { schedule, flowStore } = getContext('FlowEditorContext');
 </script>
 
 <CronInput bind:schedule={$schedule.cron} />