windmill-components 1.70.0 → 1.75.0

package/components/flows/common/FlowCardHeader.svelte

@@ -28,7 +28,7 @@ $: $workspaceStore &&
 </script>
 
 <div
-	class="flex items-center justify-between py-2 px-4 border-b border-gray-300 space-x-2  h-full max-h-12 flex-nowrap"
+	class="overflow-x-auto scrollbar-hidden flex items-center justify-between py-2 px-4 border-b border-gray-300 space-x-2  h-full max-h-12 flex-nowrap"
 >
 	{#if flowModule}
 		<span class="text-sm w-full mr-4">
@@ -55,6 +55,9 @@ $: $workspaceStore &&
 						>
 					{/if}
 					<input bind:value={flowModule.summary} placeholder="Summary" class="w-full grow" />
+				{:else if flowModule?.value.type === 'flow'}
+					<Badge color="indigo" capitalize>flow</Badge>
+					<input bind:value={flowModule.summary} placeholder="Summary" class="w-full grow" />
 				{/if}
 			</div>
 		</span>

package/components/flows/content/BranchPredicateEditor.svelte

@@ -1,15 +1,13 @@
 <script>import { getContext } from 'svelte';
-import { flowStore } from '../flowStore';
 import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
-import { flowStateStore } from '../flowState';
 import { getStepPropPicker } from '../previousResults';
 export let branch;
 export let parentModule;
 export let previousModule;
-const { previewArgs } = getContext('FlowEditorContext');
+const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 let editor = undefined;
-$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, $previewArgs, false, true);
+$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, $flowStore, $previewArgs, false);
 </script>
 
 <PropPickerWrapper
@@ -17,6 +15,7 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 	pickableProperties={stepPropPicker.pickableProperties}
 	on:select={({ detail }) => {
 		editor?.insertAtCursor(detail)
+		editor?.focus()
 	}}
 >
 	<div class="border border-gray-400">

package/components/flows/content/CapturePayload.svelte

@@ -6,7 +6,6 @@ import WindmillIcon from '../../icons/WindmillIcon.svelte';
 import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import { CaptureService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
-import { flowStore } from '../flowStore';
 import { convert } from '@redocly/json-to-json-schema';
 import SchemaViewer from '../../SchemaViewer.svelte';
 import { getContext } from 'svelte';
@@ -14,7 +13,7 @@ import { copyToClipboard, sendUserToast } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 import SchemaForm from '../../SchemaForm.svelte';
-const { previewArgs } = getContext('FlowEditorContext');
+const { previewArgs, flowStore } = getContext('FlowEditorContext');
 let drawer;
 let interval = undefined;
 let captureInput = undefined;

package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -27,7 +27,7 @@ let selected = 'early-stop';
 					>
 					<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
 						{#each value.branches as branch, i}
-							<div class="flex flex-row gap-x-4 w-full">
+							<div class="flex flex-row gap-x-4 w-full items-center">
 								<div class="grow">
 									<input type="text" bind:value={branch.summary} placeholder="Summary" />
 								</div>

package/components/flows/content/FlowConstants.svelte

@@ -1,13 +1,12 @@
-<script>import { dfs, flowStore } from '../flowStore';
+<script>import { dfs } from '../flowStore';
 import FlowCard from '../common/FlowCard.svelte';
 import { Alert, Badge } from '../../common';
-import SchemaForm from '../../SchemaForm.svelte';
-import { flowStateStore } from '../flowState';
-import { setContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
-import { slide } from 'svelte/transition';
 import Toggle from '../../Toggle.svelte';
+import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
 let hideOptional = false;
+const { flowStateStore, flowStore } = getContext('FlowEditorContext');
 $: steps = dfs($flowStore.value.modules, (x) => x)
     .map((x) => [x.value, x])
     .filter((x) => x[0].type == 'script' || x[0].type == 'rawscript')
@@ -33,11 +32,7 @@ setContext('PropPickerWrapper', {
 
 <div class="min-h-full">
 	<FlowCard title="All Static Inputs">
-		<Toggle
-			slot="header"
-			bind:checked={hideOptional}
-			options={{left: 'Hide optional inputs'}}
-		/>
+		<Toggle slot="header" bind:checked={hideOptional} options={{ left: 'Hide optional inputs' }} />
 		<div class="min-h-full flex-1">
 			<Alert type="info" title="Static Inputs" class="m-4"
 				>This page centralizes the static inputs of every steps. It is akin to a file containing all
@@ -60,15 +55,14 @@ setContext('PropPickerWrapper', {
 			{/if}
 			{#each steps as [args, filter, m] (m.id)}
 				{#if filter.length > 0}
-					<div transition:slide class="relative h-full border-t p-4">
+					<div class="relative h-full border-t p-4">
 						<h2 class="sticky w-full top-0 z-10 inline-flex items-center bg-white py-2">
 							<span class="mr-4">{m.summary || m.value['path'] || 'Inline script'}</span>
 							<Badge large color="indigo">{m.id}</Badge>
 						</h2>
 
-						<SchemaForm
+						<InputTransformSchemaForm
 							noDynamicToggle
-							inputTransform
 							{filter}
 							class="mt-2"
 							schema={$flowStateStore[m.id]?.schema ?? {}}

package/components/flows/content/FlowEditorPanel.svelte

@@ -3,16 +3,17 @@ import FlowModuleWrapper from './FlowModuleWrapper.svelte';
 import FlowSettings from './FlowSettings.svelte';
 import FlowInput from './FlowInput.svelte';
 import FlowFailureModule from './FlowFailureModule.svelte';
-import { flowStore } from '../flowStore';
 import FlowConstants from './FlowConstants.svelte';
 export let initialPath;
-const { selectedId } = getContext('FlowEditorContext');
+const { selectedId, flowStore } = getContext('FlowEditorContext');
 </script>
 
 {#if $selectedId?.startsWith('settings')}
 	<FlowSettings {initialPath} />
-{:else if $selectedId === 'inputs'}
+{:else if $selectedId === 'Input'}
 	<FlowInput />
+{:else if $selectedId === 'Result'}
+	<p class="p-4 text-gray-600">Nothing to show about the result node. Happy flow building!</p>
 {:else if $selectedId === 'constants'}
 	<FlowConstants />
 {:else if $selectedId === 'failure'}

package/components/flows/content/FlowFailureModule.svelte

@@ -1,5 +1,6 @@
-<script>import { flowStore } from '../flowStore';
+<script>import { getContext } from 'svelte';
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
+const { flowStore } = getContext('FlowEditorContext');
 </script>
 
 {#if $flowStore.value.failure_module}

package/components/flows/content/FlowInput.svelte

@@ -1,9 +1,11 @@
 <script>import { Button } from '../../common';
 import SchemaEditor from '../../SchemaEditor.svelte';
 import SchemaForm from '../../SchemaForm.svelte';
+import { getContext } from 'svelte';
 import FlowCard from '../common/FlowCard.svelte';
-import { copyFirstStepSchema, flowStore } from '../flowStore';
+import { copyFirstStepSchema } from '../flowStore';
 import CapturePayload from './CapturePayload.svelte';
+const { flowStore, flowStateStore } = getContext('FlowEditorContext');
 let capturePayload;
 </script>
 
@@ -26,7 +28,7 @@ let capturePayload;
 				size="sm"
 				disabled={$flowStore.value.modules.length === 0 ||
 					$flowStore.value.modules[0].value.type == 'identity'}
-				on:click={copyFirstStepSchema}
+				on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
 			>
 				First step's inputs
 			</Button>

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">
@@ -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';
@@ -25,7 +22,8 @@ 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;
@@ -53,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();
@@ -93,6 +91,7 @@ afterUpdate(() => {
 });
 let isScript = true;
 $: isScript != (value.type === 'script') && (isScript = value.type === 'script');
+let forceReload = 0;
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -112,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
@@ -131,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}
@@ -168,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}
@@ -189,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/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} />

package/components/flows/content/FlowSettings.svelte

@@ -1,14 +1,12 @@
 <script>import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TabContent from '../../common/tabs/TabContent.svelte';
-import { flowStore } from '../flowStore';
 import Path from '../../Path.svelte';
 import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowSchedules from './FlowSchedules.svelte';
 import Toggle from '../../Toggle.svelte';
 import { Alert } from '../../common';
-import { FlowGraph } from '../../graph';
 import { getContext } from 'svelte';
 import autosize from 'svelte-autosize';
 import Slider from '../../Slider.svelte';
@@ -17,9 +15,8 @@ import { workspaceStore } from '../../../stores';
 import { copyToClipboard } from '../../../utils';
 import { Icon } from 'svelte-awesome';
 import { faClipboard } from '@fortawesome/free-solid-svg-icons';
-const { selectedId } = getContext('FlowEditorContext');
+const { selectedId, flowStore } = getContext('FlowEditorContext');
 export let initialPath;
-let topHeight = 0;
 $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
 </script>
 
@@ -30,7 +27,6 @@ $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore
 				<Tab value="settings-metadata">Metadata</Tab>
 				<Tab value="settings-schedule">Schedule</Tab>
 				<Tab value="settings-same-worker">Shared Directory</Tab>
-				<Tab value="settings-graph">Graph</Tab>
 
 				<svelte:fragment slot="content">
 					<TabContent value="settings-metadata" class="p-4 h-full">
@@ -82,18 +78,22 @@ $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore
 											</a>
 										</li>
 										<li class="mt-2">
-											<div class="flex flex-row gap-2">
-												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.
-												<img
-													class="shadow-lg border rounded"
-													alt="static button"
-													src="/trigger_button.png"
-												/>
+											<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>
 											</div>
 										</li></ul
 									>
@@ -125,26 +125,6 @@ $: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore
 							}}
 						/>
 					</TabContent>
-					<TabContent value="settings-graph">
-						<div
-							bind:clientHeight={topHeight}
-							class="max-w-full w-full overflow-hidden h-screen bg-gray-50"
-						>
-							{#if $flowStore.value.modules}
-								<FlowGraph
-									on:click={(e) => {
-										if (e.detail.id) {
-											$selectedId = e.detail.id
-										}
-									}}
-									minHeight={topHeight}
-									modules={$flowStore.value.modules}
-									failureModule={$flowStore.value.failure_module}
-									notSelectable
-								/>
-							{/if}
-						</div>
-					</TabContent>
 				</svelte:fragment>
 			</Tabs>
 		</div>

package/components/flows/content/ScriptEditorDrawer.svelte

@@ -0,0 +1,98 @@
+<script>import { Button, Drawer, DrawerContent } from '../../common';
+import ScriptEditor from '../../ScriptEditor.svelte';
+import { ScriptService } from '../../../gen';
+import { inferArgs } from '../../../infer';
+import { workspaceStore } from '../../../stores';
+import { emptySchema, getScriptByPath, sendUserToast } from '../../../utils';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import { Loader2 } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+let scriptEditorDrawer;
+const dispatch = createEventDispatcher();
+export async function openDrawer(hash, cb) {
+    script = undefined;
+    scriptEditorDrawer.openDrawer?.();
+    script = await ScriptService.getScriptByHash({
+        workspace: $workspaceStore,
+        hash
+    });
+    callback = cb;
+}
+let callback = undefined;
+let script = undefined;
+async function saveScript() {
+    if (script) {
+        try {
+            script.schema = script.schema ?? emptySchema();
+            try {
+                await inferArgs(script.language, script.content, script.schema);
+            }
+            catch (error) {
+                sendUserToast(`Impossible to infer the schema. Assuming this is a script without main function`, true);
+            }
+            await ScriptService.createScript({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: script.path,
+                    summary: script.summary,
+                    description: script.description ?? '',
+                    content: script.content,
+                    parent_hash: script.hash != '' ? script.hash : undefined,
+                    schema: script.schema,
+                    is_template: false,
+                    language: script.language,
+                    kind: script.kind
+                }
+            });
+            callback?.();
+        }
+        catch (error) {
+            sendUserToast(`Impossible to save the script: ${error.body}`, true);
+        }
+    }
+}
+</script>
+
+<Drawer bind:this={scriptEditorDrawer} size="1200px">
+	<DrawerContent
+		title="Script Editor"
+		noPadding
+		forceOverflowVisible
+		on:close={() => {
+			scriptEditorDrawer.closeDrawer()
+		}}
+	>
+		{#if script}
+			{#key script.hash}
+				<ScriptEditor
+					noSyncFromGithub
+					lang={script.language}
+					path={script.path}
+					fixedOverflowWidgets={false}
+					bind:code={script.content}
+					bind:schema={script.schema}
+				/>
+			{/key}
+		{:else}
+			<div
+				out:fade={{ duration: 200 }}
+				class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+			>
+				<Loader2 class="animate-spin" size={16} />
+				<span class="text-xs mt-1">Loading</span>
+			</div>
+		{/if}
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={async () => {
+					await saveScript()
+					dispatch('save')
+					scriptEditorDrawer.closeDrawer()
+				}}
+				disabled={!script}
+				startIcon={{ icon: faSave }}>Save</Button
+			>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: ((hash: string, cb: () => void) => Promise<void>) | undefined;
+    };
+    events: {
+        save: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptEditorDrawerProps = typeof __propDef.props;
+export type ScriptEditorDrawerEvents = typeof __propDef.events;
+export type ScriptEditorDrawerSlots = typeof __propDef.slots;
+export default class ScriptEditorDrawer extends SvelteComponentTyped<ScriptEditorDrawerProps, ScriptEditorDrawerEvents, ScriptEditorDrawerSlots> {
+    get openDrawer(): (hash: string, cb: () => void) => Promise<void>;
+}
+export {};