windmill-components 1.35.1 → 1.35.43

package/components/flows/{FlowSettings.svelte.d.ts → content/FlowSettings.svelte.d.ts}

@@ -1,12 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        pathError?: string | undefined;
-        initialPath?: string | undefined;
-        previewArgs?: Record<string, any> | undefined;
-        scheduleArgs?: Record<string, any> | undefined;
-        scheduleEnabled?: boolean | undefined;
-        scheduleCron?: string | undefined;
+        defaultTab?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/content/RemoveStepConfirmationModal.svelte

@@ -0,0 +1,32 @@
+<script>import Alert from '../../common/alert/Alert.svelte';
+import Badge from '../../common/badge/Badge.svelte';
+import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
+import { createEventDispatcher } from 'svelte';
+export let open;
+const dispatch = createEventDispatcher();
+</script>
+
+<ConfirmationModal
+	{open}
+	title="Remove step"
+	confirmationText="Remove"
+	on:canceled={() => {
+		open = false
+		dispatch('canceled')
+	}}
+	on:confirmed={() => {
+		open = false
+		dispatch('confirmed')
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove this step?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing a step to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open: boolean;
+    };
+    events: {
+        canceled: CustomEvent<any>;
+        confirmed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RemoveStepConfirmationModalProps = typeof __propDef.props;
+export declare type RemoveStepConfirmationModalEvents = typeof __propDef.events;
+export declare type RemoveStepConfirmationModalSlots = typeof __propDef.slots;
+export default class RemoveStepConfirmationModal extends SvelteComponentTyped<RemoveStepConfirmationModalProps, RemoveStepConfirmationModalEvents, RemoveStepConfirmationModalSlots> {
+}
+export {};

package/components/flows/flowState.d.ts

@@ -1,14 +1,15 @@
 import type { Schema } from '../../common';
 import type { Flow, FlowModule } from '../../gen';
-export declare type FlowModuleSchema = {
-    flowModule: FlowModule;
+export declare type FlowModuleState = {
     schema: Schema;
-    childFlowModules?: FlowModuleSchema[];
+    childFlowModules?: FlowModuleState[];
+    previewArgs?: any;
     previewResult?: any;
 };
-export declare type FlowState = FlowModuleSchema[];
+export declare type FlowState = {
+    modules: FlowModuleState[];
+    failureModule: FlowModuleState;
+};
 export declare const flowStateStore: import("svelte/store").Writable<FlowState>;
 export declare function initFlowState(flow: Flow): Promise<void>;
-export declare const isCopyFirstStepSchemaDisabled: import("svelte/store").Readable<boolean>;
-export declare function flowModulesToFlowState(flowModules: FlowModule[]): Promise<FlowState>;
-export declare function flowStateToFlow(flowState: FlowState, flow: Flow): Flow;
+export declare function mapFlowModules(flowModules: FlowModule[]): Promise<FlowModuleState[]>;

package/components/flows/flowState.js

@@ -1,52 +1,31 @@
-import { derived, writable } from 'svelte/store';
-import { emptyFlowModuleSchema, isEmptyFlowModule, loadFlowModuleSchema } from './flowStateUtils';
-export const flowStateStore = writable(undefined);
+import { writable } from 'svelte/store';
+import { emptyFlowModuleState, isEmptyFlowModule, loadFlowModuleSchema } from './flowStateUtils';
+export const flowStateStore = writable({ modules: [], failureModule: emptyFlowModuleState() });
 export async function initFlowState(flow) {
-    const flowState = await flowModulesToFlowState(flow.value.modules);
-    flowStateStore.set(flowState);
+    const modules = await mapFlowModules(flow.value.modules);
+    const failureModule = flow.value.failure_module
+        ? await mapFlowModule(flow.value.failure_module)
+        : emptyFlowModuleState();
+    flowStateStore.set({
+        modules,
+        failureModule
+    });
 }
-export const isCopyFirstStepSchemaDisabled = derived(flowStateStore, (flowState) => {
-    if (flowState) {
-        const firstModule = flowState[0];
-        if (!firstModule) {
-            return true;
-        }
-        const fm = firstModule.flowModule;
-        return flowState.length === 0 || isEmptyFlowModule(fm);
+async function mapFlowModule(flowModule) {
+    const value = flowModule.value;
+    if (value.type === 'forloopflow') {
+        const childFlowModules = await Promise.all(value.modules.map(async (module) => loadFlowModuleSchema(module)));
+        const loopFlowModule = await loadFlowModuleSchema(flowModule);
+        return {
+            ...loopFlowModule,
+            childFlowModules
+        };
     }
-    else {
-        return true;
+    if (isEmptyFlowModule(flowModule)) {
+        return emptyFlowModuleState();
     }
-});
-export async function flowModulesToFlowState(flowModules) {
-    return Promise.all(flowModules.map(async (flowModule) => {
-        const value = flowModule.value;
-        if (value.type === 'forloopflow') {
-            const childFlowModules = await Promise.all(value.modules.map(async (module) => loadFlowModuleSchema(module)));
-            const loopFlowModule = await loadFlowModuleSchema(flowModule);
-            return {
-                ...loopFlowModule,
-                childFlowModules
-            };
-        }
-        if (isEmptyFlowModule(flowModule)) {
-            return emptyFlowModuleSchema();
-        }
-        return loadFlowModuleSchema(flowModule);
-    }));
+    return loadFlowModuleSchema(flowModule);
 }
-export function flowStateToFlow(flowState, flow) {
-    if (!flowState || !flow) {
-        return flow;
-    }
-    const modules = flowState.map(({ flowModule, childFlowModules }) => {
-        const fmv = flowModule.value;
-        if (fmv.type === 'forloopflow' && childFlowModules && Array.isArray(childFlowModules)) {
-            fmv.modules = childFlowModules.map((cfm) => cfm.flowModule);
-            flowModule.value = fmv;
-        }
-        return flowModule;
-    });
-    flow.value.modules = modules;
-    return flow;
+export async function mapFlowModules(flowModules) {
+    return Promise.all(flowModules.map(async (flowModule) => mapFlowModule(flowModule)));
 }

package/components/flows/flowStateUtils.d.ts

@@ -1,21 +1,22 @@
 import type { Schema } from '../../common';
-import { Job, type FlowModule, type RawScript } from '../../gen';
-import { type FlowModuleSchema, type FlowState } from './flowState';
-export declare function emptyFlowModuleSchema(): FlowModuleSchema;
-export declare function loadFlowModuleSchema(flowModule: FlowModule): Promise<FlowModuleSchema>;
-export declare function pickScript(path: string): Promise<FlowModuleSchema>;
-export declare function createInlineScriptModule({ language, type }: {
+import { Job, Script, type FlowModule, type RawScript } from '../../gen';
+import { type FlowModuleState, type FlowState } from './flowState';
+export declare function emptyFlowModuleState(): FlowModuleState;
+export declare function loadFlowModuleSchema(flowModule: FlowModule): Promise<FlowModuleState>;
+export declare function pickScript(path: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createInlineScriptModule({ language, kind, subkind }: {
     language: RawScript.language;
-    type: 'trigger' | 'flow' | 'pgsql';
-}): Promise<FlowModuleSchema>;
-export declare function createLoop(): Promise<FlowModuleSchema>;
-export declare function fork(flowModule: FlowModule): Promise<FlowModuleSchema>;
+    kind: Script.kind;
+    subkind: 'pgsql' | 'flow';
+}): Promise<[FlowModule, FlowModuleState]>;
+export declare function createLoop(): Promise<[FlowModule, FlowModuleState]>;
+export declare function fork(flowModule: FlowModule): Promise<[FlowModule, FlowModuleState]>;
 export declare function createInlineScriptModuleFromPath(path: string): Promise<FlowModule>;
 export declare function createScriptFromInlineScript({ flowModule, suffix, schema }: {
     flowModule: FlowModule;
     suffix: string;
     schema: Schema;
-}): Promise<FlowModuleSchema>;
+}): Promise<[FlowModule, FlowModuleState]>;
 export declare function isEmptyFlowModule(flowModule: FlowModule): boolean;
 declare type Result = any;
 declare type PickableProperties = {
@@ -27,11 +28,12 @@ declare type StepPropPicker = {
     pickableProperties: PickableProperties;
     extraLib: string;
 };
+export declare const NEVER_TESTED_THIS_FAR = "never tested this far";
 export declare function getStepPropPicker(indexes: number[], flowInputSchema: Schema, flowState: FlowState, args: Record<string, any>): StepPropPicker;
 export declare type JobResult = {
     job?: Job;
-    innerJobs?: JobResult[];
+    innerJobs: JobResult[];
     loopJobs?: JobResult[];
 };
-export declare function mapJobResultsToFlowState(jobs: JobResult, config: 'upto' | 'justthis', configIndex: number): void;
+export declare function mapJobResultsToFlowState(jobs: JobResult, upto: number): void;
 export {};

package/components/flows/flowStateUtils.js

@@ -1,14 +1,13 @@
-import { CompletedJob, Job, ScriptService } from '../../gen';
+import { CompletedJob, Job, Script, ScriptService } from '../../gen';
 import { initialCode } from '../../script_helpers';
 import { userStore, workspaceStore } from '../../stores';
-import { buildExtraLib, emptyModule, emptySchema, getScriptByPath, objectToTsType, schemaToObject, schemaToTsType } from '../../utils';
+import { buildExtraLib, emptySchema, getScriptByPath, objectToTsType, schemaToObject, schemaToTsType } from '../../utils';
 import { get } from 'svelte/store';
 import { flowStateStore } from './flowState';
 import { flowStore } from './flowStore';
-import { jobsToResults, loadSchemaFromModule } from './utils';
-export function emptyFlowModuleSchema() {
+import { loadSchemaFromModule } from './utils';
+export function emptyFlowModuleState() {
     return {
-        flowModule: emptyModule(),
         schema: emptySchema()
     };
 }
@@ -16,10 +15,10 @@ export async function loadFlowModuleSchema(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
         flowModule.input_transforms = input_transforms;
-        return { flowModule, schema };
+        return { schema, previewResult: NEVER_TESTED_THIS_FAR };
     }
     catch (e) {
-        return { flowModule, schema: emptySchema() };
+        return { schema: emptySchema(), previewResult: NEVER_TESTED_THIS_FAR };
     }
 }
 export async function pickScript(path) {
@@ -27,40 +26,42 @@ export async function pickScript(path) {
         value: { type: 'script', path },
         input_transforms: {}
     };
-    return await loadFlowModuleSchema(flowModule);
+    return [flowModule, await loadFlowModuleSchema(flowModule)];
 }
-export async function createInlineScriptModule({ language, type }) {
-    const code = initialCode(language, type);
+export async function createInlineScriptModule({ language, kind, subkind }) {
+    const code = initialCode(language, kind, subkind);
     const flowModule = {
         value: { type: 'rawscript', content: code, language },
         input_transforms: {}
     };
-    return await loadFlowModuleSchema(flowModule);
+    return [flowModule, await loadFlowModuleSchema(flowModule)];
 }
 export async function createLoop() {
     const loopFlowModule = {
         value: {
             type: 'forloopflow',
             modules: [],
-            iterator: { type: 'javascript', expr: 'result' },
+            iterator: { type: 'javascript', expr: 'previous_result' },
             skip_failures: true
         },
         input_transforms: {}
     };
-    const { flowModule, schema } = await loadFlowModuleSchema(loopFlowModule);
-    return {
-        flowModule,
-        schema,
-        childFlowModules: [emptyFlowModuleSchema()],
-        previewResult: undefined
-    };
+    const { schema } = await loadFlowModuleSchema(loopFlowModule);
+    return [
+        loopFlowModule,
+        {
+            schema,
+            childFlowModules: [emptyFlowModuleState()],
+            previewResult: NEVER_TESTED_THIS_FAR
+        }
+    ];
 }
 export async function fork(flowModule) {
     if (flowModule.value.type !== 'script') {
         throw new Error('Can only fork a script module');
     }
     const fm = await createInlineScriptModuleFromPath(flowModule.value.path ?? '');
-    return await loadFlowModuleSchema(fm);
+    return [fm, await loadFlowModuleSchema(fm)];
 }
 export async function createInlineScriptModuleFromPath(path) {
     const { content, language } = await getScriptByPath(path);
@@ -88,7 +89,7 @@ export async function createScriptFromInlineScript({ flowModule, suffix, schema
     }
     const path = `${flow.path}/${suffix}`;
     const forkedDescription = wasForked ? `as a fork of ${originalScriptPath}` : '';
-    const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}}.`;
+    const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}.`;
     const availablePath = await findNextAvailablePath(path);
     await ScriptService.createScript({
         workspace: get(workspaceStore),
@@ -126,34 +127,41 @@ async function findNextAvailablePath(path) {
 export function isEmptyFlowModule(flowModule) {
     return flowModule.value.type === 'script' && flowModule.value.path === '';
 }
+export const NEVER_TESTED_THIS_FAR = 'never tested this far';
 export function getStepPropPicker(indexes, flowInputSchema, flowState, args) {
-    const isInsideLoop = indexes.length > 1;
-    const [parentIndex] = indexes;
+    const [parentIndex, childIndex] = indexes;
+    const isInsideLoop = childIndex !== undefined;
     const flowInput = schemaToObject(flowInputSchema, args);
-    const results = getPreviousResults(flowState, parentIndex);
-    const lastResult = results.length > 0 ? results[results.length - 1] : undefined;
+    const results = getPreviousResults(flowState.modules, parentIndex);
+    const lastResult = parentIndex == 0
+        ? flowInput
+        : results.length > 0
+            ? results[results.length - 1]
+            : NEVER_TESTED_THIS_FAR;
     if (isInsideLoop) {
-        const forLoopFlowInput = {
+        let forLoopFlowInput = {
             ...flowInput,
             iter: {
                 value: "Iteration's value",
                 index: "Iteration's index"
             }
         };
-        if (Array.isArray(lastResult) && lastResult.length > 0) {
-            const last = lastResult[lastResult.length - 1];
-            forLoopFlowInput.iter = {
-                value: last,
-                index: `Iteration's index (0 to ${lastResult.length - 1})`
-            };
+        if (flowState.modules[parentIndex]?.previewArgs) {
+            forLoopFlowInput = flowState.modules[parentIndex]?.previewArgs;
         }
-        const extraLib = buildExtraLib(objectToTsType(forLoopFlowInput), undefined);
+        const innerResults = getPreviousResults(flowState.modules[parentIndex].childFlowModules, childIndex);
+        const innerLastResult = childIndex == 0
+            ? forLoopFlowInput
+            : innerResults.length > 0
+                ? innerResults[innerResults.length - 1]
+                : NEVER_TESTED_THIS_FAR;
+        const extraLib = buildExtraLib(objectToTsType(forLoopFlowInput), objectToTsType(innerLastResult));
         return {
             extraLib,
             pickableProperties: {
                 flow_input: forLoopFlowInput,
-                step: [],
-                previous_result: {}
+                previous_result: innerLastResult,
+                step: innerResults
             }
         };
     }
@@ -163,8 +171,8 @@ export function getStepPropPicker(indexes, flowInputSchema, flowState, args) {
             extraLib,
             pickableProperties: {
                 flow_input: flowInput,
-                step: results,
-                previous_result: lastResult
+                previous_result: lastResult,
+                step: results
             }
         };
     }
@@ -179,42 +187,42 @@ function getPreviousResults(flowModuleSchemas, target) {
 function extractPreviewResults(flowModuleSchemas) {
     return flowModuleSchemas.map((fms) => fms.previewResult);
 }
-export function mapJobResultsToFlowState(jobs, config, configIndex) {
-    if (!Array.isArray(jobs.innerJobs) || jobs.innerJobs.length === 0) {
-        return;
-    }
-    if (config === 'justthis') {
-        const job = jobs.job;
-        flowStateStore.update((flowState) => {
-            flowState[configIndex] = job.result;
-            return flowState;
-        });
+function getResult(job) {
+    if (job && 'result' in job) {
+        return job.result;
     }
-    else {
-        const results = jobs.innerJobs.map(({ job, loopJobs }) => {
-            if (Array.isArray(loopJobs) && loopJobs.length > 0) {
-                return loopJobs.map(({ job }) => {
-                    if (job && 'result' in job) {
-                        return job.result;
-                    }
+}
+export function mapJobResultsToFlowState(jobs, upto) {
+    const results = jobs.innerJobs.map(({ job, loopJobs }) => {
+        if (loopJobs && loopJobs.length > 0) {
+            return [
+                job?.args,
+                loopJobs.map(({ job }) => {
+                    return getResult(job);
+                })
+            ];
+        }
+        else {
+            return [job?.args, getResult(job)];
+        }
+    });
+    const old = get(flowStateStore);
+    const modules = old.modules.map((flowModuleState, index) => {
+        if (results[index] && index <= upto) {
+            if (results[index][1] != NEVER_TESTED_THIS_FAR ||
+                flowModuleState.previewResult == undefined) {
+                flowModuleState.previewArgs = results[index][0];
+                flowModuleState.previewResult = results[index][1];
+                flowModuleState.childFlowModules?.map((innerMod, j) => {
+                    const lastLoopJob = jobs.innerJobs[index].loopJobs?.length ?? 0;
+                    innerMod.previewResult = getResult(jobs.innerJobs[index].loopJobs?.[lastLoopJob - 1]?.innerJobs?.[j]?.job);
                 });
             }
-            else {
-                if (job && 'result' in job) {
-                    return job.result;
-                }
-            }
-        });
-        flowStateStore.update((flowState) => {
-            if (!Array.isArray(flowState)) {
-                return flowState;
-            }
-            return flowState.map((flowModuleSchema, index) => {
-                if (index <= configIndex) {
-                    flowModuleSchema.previewResult = results[index];
-                }
-                return flowModuleSchema;
-            });
-        });
-    }
+        }
+        return flowModuleState;
+    });
+    flowStateStore.set({
+        modules,
+        failureModule: old.failureModule
+    });
 }

package/components/flows/flowStore.js

@@ -1,6 +1,6 @@
 import { get, writable } from 'svelte/store';
 import { flowStateStore, initFlowState } from './flowState';
-export const flowStore = writable(undefined);
+export const flowStore = writable({ summary: "", value: { modules: [] }, path: "", edited_at: "", edited_by: "", archived: false, extra_perms: {} });
 export function initFlow(flow) {
     for (const mod of flow.value.modules) {
         migrateFlowModule(mod);
@@ -23,7 +23,10 @@ export function initFlow(flow) {
             delete modVal.input_transform;
         }
         if (modVal.stop_after_if_expr) {
-            modVal.stop_after_if = { expr: modVal.stop_after_if_expr, skip_if_stopped: modVal.skip_if_stopped };
+            modVal.stop_after_if = {
+                expr: modVal.stop_after_if_expr,
+                skip_if_stopped: modVal.skip_if_stopped
+            };
             delete modVal.stop_after_if_expr;
             delete modVal.skip_if_stopped;
         }
@@ -32,8 +35,8 @@ export function initFlow(flow) {
 export async function copyFirstStepSchema() {
     const flowState = get(flowStateStore);
     flowStore.update((flow) => {
-        if (flowState[0].schema) {
-            flow.schema = flowState[0].schema;
+        if (flowState.modules[0].schema) {
+            flow.schema = flowState.modules[0].schema;
         }
         return flow;
     });

package/components/flows/header/FlowEditorHeader.svelte

@@ -0,0 +1,23 @@
+<script>import { flowStore } from '../flowStore';
+import { faPen } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import FlowPreviewButtons from './FlowPreviewButtons.svelte';
+import FlowStatus from './FlowStatus.svelte';
+import { getContext } from 'svelte';
+const { select } = getContext('FlowEditorContext');
+</script>
+
+<div class="flex justify-between items-center border-y p-2 px-4">
+	<div id="flow_title" class="flex justify-between items-center">
+		<button on:click={() => select('settings')}>
+			<span class="font-mono text-sm"> {$flowStore.path}</span>
+			<Icon
+				data={faPen}
+				scale={0.8}
+				class="text-gray-500 ml-2 flex justify-center items-center mb-0.5"
+			/>
+		</button>
+	</div>
+	<FlowStatus />
+	<FlowPreviewButtons />
+</div>

package/components/flows/header/FlowEditorHeader.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowEditorHeaderProps = typeof __propDef.props;
+export declare type FlowEditorHeaderEvents = typeof __propDef.events;
+export declare type FlowEditorHeaderSlots = typeof __propDef.slots;
+export default class FlowEditorHeader extends SvelteComponentTyped<FlowEditorHeaderProps, FlowEditorHeaderEvents, FlowEditorHeaderSlots> {
+}
+export {};

package/components/flows/header/FlowImportExportMenu.svelte

@@ -0,0 +1,56 @@
+<script>import Drawer from '../../common/drawer/Drawer.svelte';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import Menu from '../../common/menu/Menu.svelte';
+import MenuItem from '../../common/menu/MenuItem.svelte';
+import FlowViewer from '../../FlowViewer.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import { sendUserToast } from '../../../utils';
+import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { flowStore, initFlow } from '../flowStore';
+import { cleanInputs } from '../utils';
+let jsonSetterDrawer;
+let jsonViewerDrawer;
+let pendingJson;
+function importJson() {
+    Object.assign($flowStore, JSON.parse(pendingJson));
+    initFlow($flowStore);
+    sendUserToast('OpenFlow imported from JSON');
+    jsonSetterDrawer.toggleDrawer();
+}
+</script>
+
+<Menu placement="bottom-end">
+	<button
+		slot="trigger"
+		class="flex items-center h-8 text-sm border focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
+	>
+		Import/Export flow
+	</button>
+	<div class="divide-y divide-gray-200">
+		<MenuItem on:click={() => jsonSetterDrawer.toggleDrawer()}>
+			<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
+			Import from a JSON OpenFlow
+		</MenuItem>
+		<MenuItem on:click={() => jsonViewerDrawer.toggleDrawer()}>
+			<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
+			Export to a JSON OpenFlow
+		</MenuItem>
+	</div>
+</Menu>
+
+<Drawer bind:this={jsonSetterDrawer} size="800px">
+	<DrawerContent title="Import JSON" on:close={() => jsonSetterDrawer.toggleDrawer()}>
+		<button class="default-button px-4 py-2 font-semibold" on:click={() => importJson()}>
+			Import
+		</button>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
+	</DrawerContent>
+</Drawer>
+<Drawer bind:this={jsonViewerDrawer} size="800px">
+	<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+		{#if $flowStore}
+			<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
+		{/if}
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowImportExportMenuProps = typeof __propDef.props;
+export declare type FlowImportExportMenuEvents = typeof __propDef.events;
+export declare type FlowImportExportMenuSlots = typeof __propDef.slots;
+export default class FlowImportExportMenu extends SvelteComponentTyped<FlowImportExportMenuProps, FlowImportExportMenuEvents, FlowImportExportMenuSlots> {
+}
+export {};

package/components/flows/header/FlowPreviewButtons.svelte

@@ -0,0 +1,49 @@
+<script>import Button from '../../common/button/Button.svelte';
+import Drawer from '../../common/drawer/Drawer.svelte';
+import FlowPreviewContent from '../../FlowPreviewContent.svelte';
+import { faPlay } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+const { selectedId } = getContext('FlowEditorContext');
+let previewOpen = false;
+let previewMode = 'whole';
+$: upToDisabled = [
+    'settings',
+    'settings-schedule',
+    'settings-retries',
+    'inputs',
+    'schedules'
+].includes($selectedId);
+</script>
+
+<span class="space-x-2 flex h-8">
+	<Button
+		size="sm"
+		disabled={upToDisabled}
+		color="light"
+		variant="border"
+		on:click={() => {
+			previewMode = 'upTo'
+
+			previewOpen = !previewOpen
+		}}
+	>
+		Test up to this step
+		<Icon data={faPlay} class="ml-2" scale={0.8} />
+	</Button>
+
+	<Button
+		on:click={() => {
+			previewMode = 'whole'
+			previewOpen = !previewOpen
+		}}
+		size="sm"
+	>
+		Test flow
+		<Icon data={faPlay} class="ml-2" scale={0.8} />
+	</Button>
+</span>
+
+<Drawer bind:open={previewOpen} size="800px">
+	<FlowPreviewContent bind:previewMode on:close={() => (previewOpen = !previewOpen)} />
+</Drawer>