windmill-components 1.60.4 → 1.75.0

package/components/common/table/FlowRow.svelte

@@ -5,9 +5,10 @@ import SharedBadge from '../../SharedBadge.svelte';
 import { FlowService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { 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';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 export let flow;
@@ -15,7 +16,8 @@ export let marked;
 export let starred;
 export let shareModal;
 export let moveDrawer;
-let { summary, path, extra_perms, canWrite, workspace_id } = flow;
+export let deleteConfirmedCallback;
+let { summary, path, extra_perms, canWrite, workspace_id, archived } = flow;
 const dispatch = createEventDispatcher();
 async function archiveFlow(path) {
     try {
@@ -27,6 +29,16 @@ async function archiveFlow(path) {
         sendUserToast(`Could not archive this flow ${err.body}`, true);
     }
 }
+async function deleteFlow(path) {
+    try {
+        await FlowService.deleteFlowByPath({ workspace: $workspaceStore, path });
+        dispatch('change');
+        sendUserToast(`Deleted flow ${path}`);
+    }
+    catch (err) {
+        sendUserToast(`Could not delete this flow ${err.body}`, true);
+    }
+}
 let scheduleEditor;
 </script>
 
@@ -43,11 +55,15 @@ let scheduleEditor;
 >
 	<svelte:fragment slot="badges">
 		<SharedBadge {canWrite} extraPerms={extra_perms} />
+
+		{#if archived}
+			<Badge color="red" baseClass="border">archived</Badge>
+		{/if}
 	</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"
@@ -75,7 +91,7 @@ let scheduleEditor;
 			{/if}
 
 			<Button
-				href="/flows/get/{path}"
+				href="/flows/get/{path}?workspace_id={$workspaceStore}"
 				color="light"
 				variant="border"
 				size="xs"
@@ -102,13 +118,13 @@ let scheduleEditor;
 				{
 					displayName: 'View flow',
 					icon: faEye,
-					href: `/flows/get/${path}`
+					href: `/flows/get/${path}?workspace_id=${$workspaceStore}`
 				},
 				{
 					displayName: 'Edit',
 					icon: faEdit,
 					href: `/flows/edit/${path}?nodraft=true`,
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Use as template/Fork',
@@ -126,14 +142,15 @@ let scheduleEditor;
 					action: () => {
 						moveDrawer.openDrawer(path, summary, 'flow')
 					},
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Schedule',
 					icon: faCalendarAlt,
 					action: () => {
 						scheduleEditor.openNew(true, path)
-					}
+					},
+					disabled: archived
 				},
 				{
 					displayName: canWrite ? 'Share' : 'See Permissions',
@@ -149,6 +166,21 @@ let scheduleEditor;
 						path ? archiveFlow(path) : null
 					},
 					type: 'delete',
+					disabled: !canWrite || archived
+				},
+				{
+					displayName: 'Delete',
+					icon: faTrashAlt,
+					action: (event) => {
+						if (event?.shiftKey) {
+							deleteFlow(path)
+						} else {
+							deleteConfirmedCallback = () => {
+								deleteFlow(path)
+							}
+						}
+					},
+					type: 'delete',
 					disabled: !canWrite
 				}
 			]}

package/components/common/table/FlowRow.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/table/LanguageBadge.svelte

@@ -2,6 +2,7 @@
 import { classNames } from '../../../utils';
 import Badge from '../badge/Badge.svelte';
 import { LanguageIcon } from '../languageIcons';
+import Popover from '../../Popover.svelte';
 export let language;
 const languageLabel = {
     [Script.language.PYTHON3]: 'Python',
@@ -27,8 +28,13 @@ const colorByLanguage = {
 	color={colorByLanguage}
 	baseClass={classNames(baseClassByLanguage, 'flex gap-1 items-center')}
 >
-	<LanguageIcon lang={language} width={12} height={12} />
-	<span class="hidden lg:inline">
-		{languageLabel}
-	</span>
+	<Popover notClickable>
+		<LanguageIcon lang={language} width={12} height={12} />
+		<span slot="text">
+			{languageLabel}
+		</span>
+	</Popover>
+
+	<!-- <span class="hidden xl:inline">
+	</span> -->
 </Badge>

package/components/common/table/Row.svelte

@@ -36,7 +36,7 @@ first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
 		</div>
 	</a>
 	{#if $$slots.badges}
-		<div class="hidden md:flex flex-row gap-1 items-start flex-wrap">
+		<div class="hidden lg:flex flex-row gap-1 items-start">
 			<slot name="badges" />
 		</div>
 	{/if}

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"
@@ -82,7 +93,7 @@ let scheduleEditor;
 			{/if}
 
 			<Button
-				href="/scripts/get/{hash}"
+				href="/scripts/get/{hash}?workspace_id={$workspaceStore}"
 				color="light"
 				variant="border"
 				size="xs"
@@ -108,20 +119,20 @@ let scheduleEditor;
 				{
 					displayName: 'View script',
 					icon: faEye,
-					href: `/scripts/get/${hash}`
+					href: `/scripts/get/${hash}?workspace_id=${$workspaceStore}`
 				},
 
 				{
 					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 +145,7 @@ let scheduleEditor;
 					action: () => {
 						moveDrawer.openDrawer(path, summary, 'script')
 					},
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'View runs',
@@ -146,14 +157,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,8 +175,27 @@ 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} />

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,14 +19,16 @@ 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)}
 >
 	<slot />

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

@@ -1,9 +1,12 @@
 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: {
         [evt: string]: CustomEvent<any>;

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,12 @@ function updateSelected() {
 }
 </script>
 
-<div
-	class={classNames(
-		'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
-		$$props.class
-	)}
->
-	<slot />
+<div class="overflow-x-auto {wrapperClass}">
+	<div
+		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
+		{style}
+	>
+		<slot {selected} />
+	</div>
 </div>
 <slot name="content" />

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>;
@@ -15,7 +17,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            selected: string;
+        };
         content: {};
     };
 };

package/components/flows/CreateActionsFlow.svelte

@@ -4,14 +4,13 @@ import { Button, ButtonPopup, ButtonPopupItem } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
-import { flowStore, initFlow } from './flowStore';
+import { importFlowStore } from './flowStore';
 import { Icon } from 'svelte-awesome';
 let drawer = undefined;
 let pendingJson;
 async function importJson() {
+    $importFlowStore = JSON.parse(pendingJson);
     await goto('/flows/add');
-    Object.assign($flowStore, JSON.parse(pendingJson));
-    initFlow($flowStore);
     drawer?.closeDrawer?.();
 }
 </script>

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,14 +15,17 @@ $: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousMod
 	pickableProperties={stepPropPicker.pickableProperties}
 	on:select={({ detail }) => {
 		editor?.insertAtCursor(detail)
+		editor?.focus()
 	}}
 >
-	<SimpleEditor
-		bind:this={editor}
-		lang="javascript"
-		bind:code={branch.expr}
-		class="small-editor"
-		shouldBindKey={false}
-		extraLib={stepPropPicker.extraLib}
-	/>
+	<div class="border border-gray-400">
+		<SimpleEditor
+			bind:this={editor}
+			lang="javascript"
+			bind:code={branch.expr}
+			class="small-editor border "
+			shouldBindKey={false}
+			extraLib={stepPropPicker.extraLib}
+		/>
+	</div>
 </PropPickerWrapper>

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>