windmill-components 1.70.0 → 1.77.0

package/components/common/table/ScriptRow.svelte

@@ -5,7 +5,7 @@ import SharedBadge from '../../SharedBadge.svelte';
 import { ScriptService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { capitalize, sendUserToast } from '../../../utils';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Badge from '../badge/Badge.svelte';
@@ -17,14 +17,21 @@ export let marked;
 export let starred;
 export let shareModal;
 export let moveDrawer;
-let { summary, path, hash, language, extra_perms, canWrite, lock_error_logs, kind, workspace_id } = script;
+export let deleteConfirmedCallback;
+let { summary, path, hash, language, extra_perms, canWrite, lock_error_logs, kind, workspace_id, archived } = script;
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
     await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
     dispatch('change');
     sendUserToast(`Archived script ${path}`);
 }
+async function deleteScript(path) {
+    await ScriptService.deleteScriptByPath({ workspace: $workspaceStore, path });
+    dispatch('change');
+    sendUserToast(`Delete script ${path}`);
+}
 let scheduleEditor;
+const dlt = 'delete';
 </script>
 
 <ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
@@ -48,13 +55,17 @@ let scheduleEditor;
 			<Badge color="gray" baseClass="border">{capitalize(kind)}</Badge>
 		{/if}
 
+		{#if archived}
+			<Badge color="red" baseClass="border">archived</Badge>
+		{/if}
+
 		<LanguageBadge {language} />
 	</svelte:fragment>
 
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
-				{#if canWrite}
+				{#if canWrite && !archived}
 					<div>
 						<Button
 							color="light"
@@ -103,7 +114,6 @@ let scheduleEditor;
 		</span>
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View script',
@@ -115,13 +125,13 @@ let scheduleEditor;
 					displayName: 'Edit',
 					icon: faEdit,
 					href: `/scripts/edit/${hash}`,
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Edit code',
 					icon: faEdit,
 					href: `/scripts/edit/${hash}?step=2`,
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Use as template',
@@ -134,7 +144,7 @@ let scheduleEditor;
 					action: () => {
 						moveDrawer.openDrawer(path, summary, 'script')
 					},
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'View runs',
@@ -146,14 +156,16 @@ let scheduleEditor;
 					icon: faCalendarAlt,
 					action: () => {
 						scheduleEditor.openNew(false, path)
-					}
+					},
+					disabled: archived
 				},
 				{
 					displayName: canWrite ? 'Share' : 'See Permissions',
 					icon: faShare,
 					action: () => {
 						shareModal.openDrawer && shareModal.openDrawer(path, 'script')
-					}
+					},
+					disabled: archived
 				},
 				{
 					displayName: 'Archive',
@@ -162,11 +174,28 @@ let scheduleEditor;
 						path ? archiveScript(path) : null
 					},
 					type: 'delete',
-					disabled: !canWrite
-				}
+					disabled: !canWrite || archived
+				},
+				...($userStore?.is_admin || $userStore?.is_super_admin
+					? []
+					: [
+							{
+								displayName: 'Delete',
+								icon: faTrashAlt,
+								action: (event) => {
+									if (event?.shiftKey) {
+										deleteScript(path)
+									} else {
+										deleteConfirmedCallback = () => {
+											deleteScript(path)
+										}
+									}
+								},
+								type: dlt,
+								disabled: !canWrite
+							}
+					  ])
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 	</svelte:fragment>
 </Row>

package/components/common/table/ScriptRow.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         starred: boolean;
         shareModal: ShareModal;
         moveDrawer: MoveDrawer;
+        deleteConfirmedCallback: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/tabs/Tab.svelte

@@ -1,7 +1,12 @@
-<script>import { classNames } from '../../../utils';
-import { getContext } from 'svelte';
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 export let value;
 export let size = 'sm';
+let c = '';
+export { c as class };
+export let style = '';
+export let selectedClass = '';
+export let selectedStyle = '';
 const fontSizeClasses = {
     xs: 'text-xs',
     sm: 'text-sm',
@@ -14,15 +19,18 @@ const { selected, update } = getContext('Tabs');
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class={classNames(
+	class={twMerge(
+		'border-b-2 py-1 px-4 cursor-pointer transition-all z-10 ease-linear font-medium',
 		$selected?.startsWith(value)
 			? 'border-gray-600 text-gray-800 '
 			: 'border-gray-300 border-opacity-0 hover:border-opacity-100 text-gray-600',
-		'border-b-2 py-1 px-4 cursor-pointer transition-all ease-linear font-medium',
 		fontSizeClasses[size],
-		$$props.class
+		c,
+		$selected?.startsWith(value) ? selectedClass : ''
 	)}
+	style={`${style} ${$selected?.startsWith(value) ? selectedStyle : ''}`}
 	on:click={() => update(value)}
+	on:pointerdown|stopPropagation
 >
 	<slot />
 </div>

package/components/common/tabs/Tab.svelte.d.ts

@@ -1,11 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
         value: string;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        selectedClass?: string | undefined;
+        selectedStyle?: string | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/common/tabs/Tabs.svelte

@@ -4,9 +4,13 @@
 <script>import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { createEventDispatcher } from 'svelte';
-import { classNames } from '../../../utils';
+import { twMerge } from 'tailwind-merge';
 const dispatch = createEventDispatcher();
 export let selected;
+let c = '';
+export { c as class };
+export let wrapperClass = '';
+export let style = '';
 $: selected && updateSelected();
 const selectedStore = writable(selected);
 $: $selectedStore && dispatch('selected', $selectedStore);
@@ -22,12 +26,10 @@ function updateSelected() {
 }
 </script>
 
-<div class="overflow-x-auto">
+<div class="overflow-x-auto {wrapperClass}">
 	<div
-		class={classNames(
-			'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
-			$$props.class
-		)}
+		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
+		{style}
 	>
 		<slot {selected} />
 	</div>

package/components/common/tabs/Tabs.svelte.d.ts

@@ -6,8 +6,10 @@ export type TabsContext = {
 import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         selected: string;
+        class?: string | undefined;
+        wrapperClass?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         selected: CustomEvent<any>;

package/components/flows/FlowEditor.svelte

@@ -1,16 +1,18 @@
 <script>import { Pane, Splitpanes } from 'svelte-splitpanes';
 import FlowEditorPanel from './content/FlowEditorPanel.svelte';
 import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
-import { flowStore } from './flowStore';
 import WindmillIcon from '../icons/WindmillIcon.svelte';
 import { Skeleton } from '../common';
+import { getContext } from 'svelte';
 export let initialPath;
 export let loading;
+const { flowStore } = getContext('FlowEditorContext');
+let size = 50;
 </script>
 
 <div class="h-full overflow-hidden border-t">
 	<Splitpanes>
-		<Pane size={20} minSize={15} class="h-full">
+		<Pane {size} minSize={15} class="h-full">
 			<div class="grow overflow-auto bg-gray h-full bg-gray-50 relative">
 				{#if loading}
 					<div class="p-2 pt-10">
@@ -19,11 +21,11 @@ export let loading;
 						{/each}
 					</div>
 				{:else if $flowStore.value.modules}
-					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} root />
+					<FlowModuleSchemaMap bind:modules={$flowStore.value.modules} />
 				{/if}
 			</div>
 		</Pane>
-		<Pane size={80} minSize={40}>
+		<Pane class="drop-shadow-2xl" size={100 - size} minSize={40}>
 			{#if loading}
 				<div class="w-full h-full ">
 					<div class="block m-auto mt-40 w-10">

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>;
     } & {