windmill-components 1.89.0 → 1.103.0

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

@@ -4,8 +4,9 @@ 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';
+import { sendUserToast } from '../../../utils';
 import { workerTags } from '../../../stores';
+import { getLatestHashForScript } from '../../../scripts';
 export let module;
 const { scriptEditorDrawer } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();

package/package/components/flows/content/FlowModuleScript.svelte

@@ -1,7 +1,7 @@
 <script>import HighlightCode from '../../HighlightCode.svelte';
 import { ScriptService } from '../../../gen';
+import { getScriptByPath } from '../../../scripts';
 import { workspaceStore } from '../../../stores';
-import { getScriptByPath } from '../../../utils';
 export let path;
 export let hash = undefined;
 let code;

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -19,10 +19,9 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 
 <h2>
 	Sleep
-	<Tooltip>
+	<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/sleep">
 		If defined, at the end of the step, the flow will sleep for a number of seconds before
-		scheduling the next job (if any, no effect if the step is the last one). Sleeping is passive and
-		does not consume any resources.
+		scheduling the next job (if any, no effect if the step is the last one).
 	</Tooltip>
 </h2>
 <Toggle

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -13,11 +13,10 @@ $: isSuspendEnabled = Boolean(flowModule.suspend);
 
 <h2>
 	Suspend
-	<Tooltip>
+	<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/flow_approval">
 		If defined, at the end of the step, the flow will be suspended until it receives external
 		requests to be resumed or canceled. This is most useful to implement approval steps but can be
-		used flexibly for other purpose. To get the resume urls, use `wmill.getResumeUrls()` in
-		Typescript, or `wmill.get_resume_urls()` in Python.
+		used flexibly for other purpose.
 	</Tooltip>
 </h2>
 <Toggle

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

@@ -28,9 +28,11 @@ export let previousModule = undefined;
 		<FlowBranchesAllWrapper {previousModule} bind:flowModule />
 	{: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 the error as input.
-			</Alert>
+			<div class="p-4">
+				<Alert type="info" title="Error handlers are triggered upon non recovered errors">
+					If defined, the error handler will take the error as input.
+				</Alert>
+			</div>
 		{/if}
 
 		{#if flowModule.value.flow}

package/package/components/flows/content/FlowRetries.svelte

@@ -1,5 +1,6 @@
 <script>import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
+import { SecondsInput } from '../../common';
 export let flowModule;
 function setConstantRetries() {
     flowModule.retry = {
@@ -24,18 +25,17 @@ $: isConstantRetryEnabled = Boolean(flowModule.retry?.constant);
 $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 </script>
 
-<div class={$$props.class}>
+<div class="h-full flex flex-col {$$props.class ?? ''}">
 	<h2>
 		Retries
-		<Tooltip>
+		<Tooltip documentationLink="https://docs.windmill.dev/docs/flows/retries">
 			If defined, upon error this step will be retried with a delay and a maximum number of attempts
-			as defined below. If both static and exponential delay is defined, the static delay attempts
-			are tried before the exponential ones.
+			as defined below.
 		</Tooltip>
 	</h2>
 
-	<div class="flex">
-		<div class="w-1/2 mr-2">
+	<div class="flex h-[calc(100%-22px)]">
+		<div class="w-1/2 h-full overflow-auto pr-2">
 			<div class="pt-4">
 				<Toggle
 					checked={isConstantRetryEnabled}
@@ -54,13 +54,13 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 			{#if flowModule.retry?.constant}
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input bind:value={flowModule.retry.constant.attempts} type="number" />
-				<div class="text-xs font-bold !mt-2">Delay (in seconds)</div>
-				<input bind:value={flowModule.retry.constant.seconds} type="number" />
+				<div class="text-xs font-bold !mt-2">Delay</div>
+				<SecondsInput bind:seconds={flowModule.retry.constant.seconds} />
 			{:else}
 				<div class="text-xs font-bold !mt-2">Attempts</div>
 				<input type="number" disabled />
-				<div class="text-xs font-bold !mt-2">Delay (in seconds)</div>
-				<input type="number" disabled />
+				<div class="text-xs font-bold !mt-2">Delay</div>
+				<SecondsInput disabled />
 			{/if}
 			<div class="pt-6">
 				<Toggle
@@ -95,7 +95,7 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 				<input type="number" disabled />
 			{/if}
 		</div>
-		<div class="w-1/2 ml-2">
+		<div class="w-1/2 h-full overflow-auto pl-2">
 			{#if true}
 				{@const { attempts: cAttempts, seconds: cSeconds } = flowModule.retry?.constant || {}}
 				{@const {
@@ -109,14 +109,12 @@ $: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential);
 					(_, i) => (multiplier || 0) * (eSeconds || 0) ** (i + cArray.length + 1)
 				)}
 				{@const array = [...cArray, ...eArray]}
-				<div
-					class="bg-gray-50 border border-gray-300 rounded max-h-[431px] overflow-auto px-4 py-2"
-				>
+				<div class="bg-gray-50 border border-gray-300 rounded px-4 py-2">
 					<div class="text-xs font-medium mb-2">Retry attempts</div>
 					{#if array.length > 0}
 						<table class="text-xs">
 							<tr>
-								<td class="font-semibold pr-1">1:</td>
+								<td class="font-semibold pr-1 pb-1">1:</td>
 								<td class="pb-1">After {array[0]} second{array[0] === 1 ? '' : 's'}</td>
 							</tr>
 							{#each array.slice(1) as delay, i}

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

@@ -1,6 +1,7 @@
 <script>import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
+import { BROWSER } from 'esm-env';
 import Path from '../../Path.svelte';
 import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
@@ -10,14 +11,15 @@ import { Alert } from '../../common';
 import { getContext } from 'svelte';
 import autosize from 'svelte-autosize';
 import Slider from '../../Slider.svelte';
-import { page } from '$app/stores';
 import { workspaceStore } from '../../../stores';
 import { copyToClipboard } from '../../../utils';
 import { Icon } from 'svelte-awesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
-const { selectedId, flowStore } = getContext('FlowEditorContext');
-export let initialPath;
-$: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
+import Tooltip from '../../Tooltip.svelte';
+const { selectedId, flowStore, initialPath } = getContext('FlowEditorContext');
+let hostname = BROWSER ? window.location.protocol + '//' + window.location.host : 'SSR';
+$: url = `${hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
+$: syncedUrl = `${hostname}/api/w/${$workspaceStore}/jobs/run_wait_result/f/${$flowStore?.path}`;
 </script>
 
 <div class="h-full overflow-hidden">
@@ -58,43 +60,92 @@ $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore
 									/>
 								</span>
 							</label>
-							<Slider text="How to trigger from external events?">
-								<div class="text-sm text-gray-600 border p-4">
-									There are 2 ways to trigger a flow based on external events:
+							<Slider text="How to trigger flows?">
+								<div class="text-sm text-gray-600 border p-4 mb-20">
+									On-demand:
 									<ul class="pt-4">
-										<li
-											>1. Send a webhook after each event: <a
-												on:click={(e) => {
-													e.preventDefault()
-													copyToClipboard(url)
-												}}
-												href={$page.url.protocol + '//' + url}
-												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+										<li>
+											1. <a
+												href="https://docs.windmill.dev/docs/core_concepts/auto_generated_uis"
+												target="_blank">Auto-generated UIs</a
 											>
-												{url}
-												<span class="text-gray-700 ml-2">
-													<Icon data={faClipboard} />
-												</span>
-											</a>
 										</li>
+										<li>
+											2. <a href="/apps/add?nodraft=true" target="_blank"> App Editor</a> for customized-UIs
+										</li>
+										<li>
+											3. <a href="/schedules" target="_blank">Scheduling</a>
+										</li>
+										<li>
+											4. <a href="https://docs.windmill.dev/docs/advanced/cli" target="_blank"
+												>Windmill CLI</a
+											>
+										</li>
+										<br />
 										<li class="mt-2">
 											<div class="flex flex-col gap-2">
-												<p>
-													2. Use a trigger script and schedule this flow to run as frequently as
-													needed and compare a state persisted in Windmill to the state of the
-													external system. If a difference is detected, then the rest of the flow is
-													triggered. Oftentimes, the second step of a flow is a for-loop that will
-													iterate over every elements. When using a trigger, a default schedule will
-													be created.
-												</p>
-												<div>
-													<img
-														class="shadow-lg border rounded"
-														alt="static button"
-														src="/trigger_button.png"
-													/>
-												</div>
+												<p> From external events: </p>
 											</div>
+										</li>
+										<li class="mt-2">
+											5. Send a <a
+												href="https://docs.windmill.dev/docs/core_concepts/webhooks"
+												target="_blank">webhook</a
+											>
+											after each event:
+											<ul class="list-disc pl-4"
+												><li
+													>Async <Tooltip
+														>Return an uuid instantly that you can use to fetch status and result</Tooltip
+													>:
+													<a
+														on:click={(e) => {
+															e.preventDefault()
+															copyToClipboard(url)
+														}}
+														href={url}
+														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+													>
+														{url}
+														<span class="text-gray-700 ml-2">
+															<Icon data={faClipboard} />
+														</span>
+													</a>
+												</li>
+												<li
+													>Sync <Tooltip>Wait for result within a timeout of 20s</Tooltip>:
+													<a
+														on:click={(e) => {
+															e.preventDefault()
+															copyToClipboard(syncedUrl)
+														}}
+														href={syncedUrl}
+														class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+													>
+														{syncedUrl}
+														<span class="text-gray-700 ml-2">
+															<Icon data={faClipboard} />
+														</span>
+													</a>
+												</li>
+											</ul></li
+										>
+										<br />
+										<li>
+											6. Use a <a
+												href="https://docs.windmill.dev/docs/flows/flow_trigger"
+												target="_blank">trigger script</a
+											>
+											and schedule this flow to run as frequently as needed and compare a state persisted
+											in Windmill to the state of the external system. If a difference is detected, then
+											the rest of the flow is triggered. Oftentimes, the second step of a flow is a for-loop
+											that will iterate over every elements. When using a trigger, a default schedule
+											will be created.
+											<img
+												class="shadow-lg border rounded"
+												alt="static button"
+												src="/trigger_button.png"
+											/>
 										</li></ul
 									>
 								</div>
@@ -102,7 +153,11 @@ $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore
 						</div>
 					</TabContent>
 					<TabContent value="settings-schedule" class="p-4">
-						<Alert type="info" title="Primary Schedule">
+						<Alert
+							type="info"
+							title="Primary Schedule"
+							documentationLink="https://docs.windmill.dev/docs/core_concepts/scheduling"
+						>
 							Flows can be triggered by any schedules, their webhooks or their UI but they only have
 							only one primary schedules with which they share the same path. The primary schedule
 							can be set here.

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

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        initialPath: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -1,6 +1,6 @@
 <script>import { Button, Drawer, DrawerContent } from '../../common';
 import ScriptEditor from '../../ScriptEditor.svelte';
-import { ScriptService } from '../../../gen';
+import { ScriptService, Script } from '../../../gen';
 import { inferArgs } from '../../../infer';
 import { workspaceStore } from '../../../stores';
 import { emptySchema, sendUserToast } from '../../../utils';
@@ -69,7 +69,7 @@ async function saveScript() {
 					noSyncFromGithub
 					lang={script.language}
 					path={script.path}
-					fixedOverflowWidgets={false}
+					fixedOverflowWidgets={true}
 					bind:code={script.content}
 					bind:schema={script.schema}
 					tag={undefined}

package/package/components/flows/flowStateUtils.js

@@ -1,10 +1,11 @@
 import { Script, ScriptService } from '../../gen';
 import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
-import { getScriptByPath } from '../../utils';
+import { getScriptByPath } from '../../scripts';
 import { get } from 'svelte/store';
 import { charsToNumber, numberToChars } from './idUtils';
-import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR } from './utils';
+import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule } from './utils';
+import { NEVER_TESTED_THIS_FAR } from './models';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
@@ -88,7 +89,7 @@ export async function createBranchAll(id) {
         id,
         value: {
             type: 'branchall',
-            branches: []
+            branches: [{ modules: [] }]
         },
         summary: ''
     };

package/package/components/flows/header/FlowImportExportMenu.svelte

@@ -18,7 +18,7 @@ let jsonViewerDrawer;
 	on:click={() => jsonViewerDrawer.toggleDrawer()}
 >
 	<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
-	Export JSON
+	JSON
 </Button>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -26,16 +26,6 @@ $: upToDisabled =
         $selectedId?.includes('branch');
 </script>
 
-<Button
-	size="xs"
-	on:click={() => {
-		previewMode = 'whole'
-		previewOpen = !previewOpen
-	}}
-	startIcon={{ icon: faPlay }}
->
-	Test flow
-</Button>
 {#if !upToDisabled}
 	<Button
 		size="xs"
@@ -55,6 +45,18 @@ $: upToDisabled =
 	</Button>
 {/if}
 
+<Button
+	color="dark"
+	size="xs"
+	on:click={() => {
+		previewMode = 'whole'
+		previewOpen = !previewOpen
+	}}
+	startIcon={{ icon: faPlay }}
+>
+	Test flow
+</Button>
+
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">
 	<FlowPreviewContent
 		open={previewOpen}

package/package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -3,7 +3,7 @@ import Icon from 'svelte-awesome';
 import { faBug } from '@fortawesome/free-solid-svg-icons';
 import { classNames, emptySchema } from '../../../utils';
 import Toggle from '../../Toggle.svelte';
-import { NEVER_TESTED_THIS_FAR } from '../utils';
+import { NEVER_TESTED_THIS_FAR } from '../models';
 const { selectedId, flowStateStore, flowStore } = getContext('FlowEditorContext');
 function onToggle() {
     if ($flowStore?.value?.failure_module) {

package/package/components/flows/map/VirtualItem.svelte

@@ -53,7 +53,7 @@ let openMenu = false;
 	}}
 >
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 			border border-gray-400 p-2 text-2xs module"
 	>
 		{#if $$slots.icon}
@@ -89,7 +89,7 @@ let openMenu = false;
 					}
 				}}
 				type="button"
-				class=" text-gray-900 bg-white border mx-0.5  border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class=" text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
 			>
 				<ClipboardCopy size={12} />
 			</button>

package/package/components/flows/models.d.ts

@@ -0,0 +1 @@
+export declare const NEVER_TESTED_THIS_FAR = "never tested this far";

package/package/components/flows/models.js

@@ -0,0 +1 @@
+export const NEVER_TESTED_THIS_FAR = 'never tested this far';

package/package/components/flows/pickers/FlowScriptPicker.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         label: string;
-        lang?: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | undefined;
+        lang?: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker' | undefined;
         icon?: IconDefinition | undefined;
         iconColor?: string | undefined;
     };

package/package/components/flows/pickers/PickHubApp.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher, onMount } from 'svelte';
 import { Badge, Skeleton } from '../../common';
 import SearchItems from '../../SearchItems.svelte';
-import { loadHubApps } from '../../../utils';
 import ListFilters from '../../home/ListFilters.svelte';
 import NoItemFound from '../../home/NoItemFound.svelte';
 import RowIcon from '../../common/table/RowIcon.svelte';
+import { loadHubApps } from '../../../hub';
 export let filter = '';
 let hubApps = undefined;
 let filteredItems = [];
@@ -45,7 +45,7 @@ onMount(async () => {
 						<div class="flex items-center gap-4">
 							<RowIcon kind="app" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}

package/package/components/flows/pickers/PickHubFlow.svelte

@@ -1,10 +1,10 @@
 <script>import { createEventDispatcher, onMount } from 'svelte';
 import { Badge, Skeleton } from '../../common';
 import SearchItems from '../../SearchItems.svelte';
-import { loadHubFlows } from '../../../utils';
 import ListFilters from '../../home/ListFilters.svelte';
 import NoItemFound from '../../home/NoItemFound.svelte';
 import RowIcon from '../../common/table/RowIcon.svelte';
+import { loadHubFlows } from '../../../hub';
 export let filter = '';
 let hubFlows = undefined;
 let filteredItems = [];
@@ -45,7 +45,7 @@ onMount(async () => {
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}

package/package/components/flows/pickers/PickHubScript.svelte

@@ -2,10 +2,11 @@
 import { createEventDispatcher, onMount } from 'svelte';
 import { Badge, Skeleton } from '../../common';
 import SearchItems from '../../SearchItems.svelte';
-import { capitalize, classNames, loadHubScripts } from '../../../utils';
+import { capitalize, classNames } from '../../../utils';
 import NoItemFound from '../../home/NoItemFound.svelte';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import ListFilters from '../../home/ListFilters.svelte';
+import { loadHubScripts } from '../../../scripts';
 export let kind = 'script';
 export let filter = '';
 const dispatch = createEventDispatcher();
@@ -54,7 +55,7 @@ const maxItems = 40;
 								/>
 							</div>
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
@@ -62,7 +63,7 @@ const maxItems = 40;
 										{item.summary ?? ''}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs ">
+								<div class="text-gray-600 text-xs">
 									{item.path}
 								</div>
 							</div>

package/package/components/flows/previousResults.js

@@ -1,4 +1,4 @@
-import { schemaToObject } from '../../utils';
+import { schemaToObject } from '../../schema';
 function getSubModules(flowModule) {
     if (flowModule.value.type === 'forloopflow') {
         return [flowModule.value.modules];
@@ -7,18 +7,17 @@ function getSubModules(flowModule) {
         return flowModule.value.branches.map((branch) => branch.modules);
     }
     else if (flowModule.value.type == 'branchone') {
-        return [
-            ...flowModule.value.branches.map((branch) => branch.modules),
-            flowModule.value.default
-        ];
+        return [...flowModule.value.branches.map((branch) => branch.modules), flowModule.value.default];
     }
     return [];
 }
 function getAllSubmodules(flowModule) {
     return getSubModules(flowModule).map((modules) => {
-        return modules.map((module) => {
+        return modules
+            .map((module) => {
             return [module, ...getAllSubmodules(module).flat()];
-        }).flat();
+        })
+            .flat();
     });
 }
 function dfs(id, flow, getParents = true) {
@@ -61,7 +60,7 @@ function getFlowInput(parentModules, flowState, args, schema) {
                         value: "Iteration's value",
                         index: "Iteration's index"
                     },
-                    ...parentFlowInput,
+                    ...parentFlowInput
                 };
             }
             else {
@@ -75,15 +74,19 @@ function getFlowInput(parentModules, flowState, args, schema) {
 }
 export function getStepPropPicker(flowState, parentModule, previousModule, id, flow, args, include_node) {
     const flowInput = getFlowInput(dfs(parentModule?.id, flow), flowState, args, flow.schema);
-    const previousIds = dfs(id, flow, false).map((x) => {
-        let submodules = getAllSubmodules(x).flat().map((x) => x.id);
+    const previousIds = dfs(id, flow, false)
+        .map((x) => {
+        let submodules = getAllSubmodules(x)
+            .flat()
+            .map((x) => x.id);
         if (submodules.includes(id)) {
             return [x.id];
         }
         else {
             return [x.id, ...submodules];
         }
-    }).flat();
+    })
+        .flat();
     if (!include_node) {
         previousIds.shift();
     }
@@ -92,10 +95,10 @@ export function getStepPropPicker(flowState, parentModule, previousModule, id, f
         flow_input: flowInput,
         priorIds: priorIds,
         previousId: previousIds[0],
-        hasResume: previousModule?.suspend != undefined,
+        hasResume: previousModule?.suspend != undefined
     };
     if (pickableProperties.hasResume) {
-        pickableProperties["approvers"] = "The list of approvers";
+        pickableProperties['approvers'] = 'The list of approvers';
     }
     return {
         extraLib: buildExtraLib(flowInput, priorIds, previousModule?.suspend != undefined),
@@ -112,7 +115,7 @@ declare function variable(path: string): string;
 
 /**
 * get resource at path
-* @param {string} path - path of the resource (e.g: g/all/my_resource)
+* @param {string} path - path of the resource (e.g: f/examples/my_resource)
 */
 declare function resource(path: string): any;
 
@@ -131,7 +134,8 @@ declare const params: any;
  */
 declare const results = ${JSON.stringify(results)};
 
-${resume ? `
+${resume
+        ? `
 /**
  * resume payload
  */
@@ -141,6 +145,7 @@ declare const resume: any
  * The list of approvers separated by ,
  */
 declare const approvers: string
-` : ''}
+`
+        : ''}
 `;
 }

package/package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -35,7 +35,7 @@ setContext('PropPickerWrapper', {
 	on:click_outside={() => propPickerConfig.set(undefined)}
 >
 	<Splitpanes>
-		<Pane minSize={20} size={60} class="relative p-4 !transition-none">
+		<Pane minSize={20} size={60} class="relative p-2 !transition-none">
 			<slot />
 		</Pane>
 		<Pane

package/package/components/flows/types.d.ts

@@ -17,4 +17,6 @@ export type FlowEditorContext = {
     flowStore: Writable<Flow>;
     flowStateStore: Writable<FlowState>;
     testStepStore: Writable<Record<string, any>>;
+    saveDraft: () => void;
+    initialPath: string;
 };