windmill-components 1.35.42 → 1.36.0

package/components/flows/content/FlowModule.svelte

@@ -0,0 +1,211 @@
+<script context="module">export {};
+</script>
+
+<script>import { VSplitPane } from 'svelte-split-pane';
+import Tab from '../../common/tabs/Tab.svelte';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import Editor from '../../Editor.svelte';
+import EditorBar from '../../EditorBar.svelte';
+import ModulePreview from '../../ModulePreview.svelte';
+import FlowInputs from './FlowInputs.svelte';
+import { createInlineScriptModule, createLoop, createScriptFromInlineScript, fork, getStepPropPicker, isEmptyFlowModule, pickScript } 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 { scriptLangToEditorLang } from '../../../utils';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { getContext, setContext } from 'svelte';
+import { loadSchemaFromModule, selectedIdToIndexes } from '../utils';
+import { writable } from 'svelte/store';
+import FlowModuleScript from './FlowModuleScript.svelte';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+import FlowRetries from './FlowRetries.svelte';
+const { selectedId, select, previewArgs } = getContext('FlowEditorContext');
+export let flowModule;
+export let flowModuleState;
+export let failureModule;
+$: [parentIndex, childIndex] = selectedIdToIndexes($selectedId);
+let editor;
+let modulePreview;
+let websocketAlive = { pyright: false, black: false, deno: false };
+let selected = 'inputs';
+$: shouldPick = isEmptyFlowModule(flowModule);
+$: stepPropPicker = failureModule
+    ? { pickableProperties: { previous_result: { error: 'the error message' } }, extraLib: '' }
+    : getStepPropPicker([parentIndex, childIndex], $flowStore.schema, $flowStateStore, $previewArgs);
+function onKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
+        event.preventDefault();
+        selected = 'test';
+        modulePreview?.runTestWithStepArgs();
+    }
+}
+async function apply(fn, arg) {
+    const [module, moduleState] = await fn(arg);
+    if (JSON.stringify(flowModule) != JSON.stringify(module) ||
+        JSON.stringify(flowModuleState) != JSON.stringify(moduleState)) {
+        flowModule = module;
+        flowModuleState = moduleState;
+    }
+}
+async function reload(flowModule) {
+    const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
+    flowModuleState.schema = schema;
+    flowModule.input_transforms = input_transforms;
+}
+async function applyCreateLoop() {
+    await apply(createLoop, null);
+}
+export const FLOW_MODULE_WIDTH_THRESHOLD = 768;
+const width = writable(0);
+setContext('FlowModuleWidth', {
+    width,
+    threshold: FLOW_MODULE_WIDTH_THRESHOLD
+});
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<div class="flex flex-col h-full" bind:clientWidth={$width}>
+	<FlowCard bind:flowModule>
+		<svelte:fragment slot="header">
+			<FlowModuleHeader
+				bind:module={flowModule}
+				on:delete
+				on:toggleRetry={() => (selected = 'retries')}
+				on:toggleStopAfterIf={() => (selected = 'early-stop')}
+				on:fork={() => apply(fork, flowModule)}
+				on:createScriptFromInlineScript={() => {
+					apply(createScriptFromInlineScript, {
+						flowModule: flowModule,
+						suffix: $selectedId,
+						schema: flowModuleState.schema
+					})
+				}}
+			/>
+		</svelte:fragment>
+		{#if shouldPick}
+			<FlowInputs
+				shouldDisableTriggerScripts={parentIndex != 0}
+				shouldDisableLoopCreation={childIndex !== undefined ||
+					parentIndex === 0 ||
+					$selectedId.includes('failure')}
+				on:loop={() => {
+					applyCreateLoop()
+					select(['loop', $selectedId].join('-'))
+				}}
+				on:pick={(e) => apply(pickScript, e.detail.path)}
+				on:new={(e) =>
+					apply(createInlineScriptModule, {
+						language: e.detail.language,
+						kind: e.detail.kind,
+						subkind: e.detail.subkind
+					})}
+				{failureModule}
+			/>
+		{:else}
+			{#if flowModule.value.type === 'rawscript'}
+				<div class="flex-shrink-0 border-b p-1">
+					<EditorBar
+						{editor}
+						lang={flowModule.value['language'] ?? 'deno'}
+						{websocketAlive}
+						iconOnly={$width < FLOW_MODULE_WIDTH_THRESHOLD}
+					/>
+				</div>
+			{/if}
+
+			<div class="overflow-hidden flex-grow">
+				<VSplitPane
+					topPanelSize={flowModule.value.type === 'rawscript' ? '50%' : '0%'}
+					downPanelSize={flowModule.value.type === 'rawscript' ? '50%' : '100%'}
+					minTopPaneSize="20%"
+					minDownPaneSize="20%"
+				>
+					<top slot="top">
+						{#if flowModule.value.type === 'rawscript'}
+							<div on:mouseleave={() => reload(flowModule)} class="h-full overflow-auto">
+								<Editor
+									bind:websocketAlive
+									bind:this={editor}
+									class="h-full px-2"
+									bind:code={flowModule.value.content}
+									deno={flowModule.value.language === RawScript.language.DENO}
+									lang={scriptLangToEditorLang(flowModule.value.language)}
+									automaticLayout={true}
+									cmdEnterAction={() => {
+										selected = 'test'
+										modulePreview?.runTestWithStepArgs()
+									}}
+									formatAction={() => reload(flowModule)}
+								/>
+							</div>
+						{:else if flowModule.value.type === 'script'}
+							<FlowModuleScript {flowModule} />
+						{/if}
+					</top>
+
+					<down slot="down" class="flex flex-col flex-1 h-full">
+						<Tabs bind:selected>
+							<Tab value="inputs">Inputs</Tab>
+							<Tab value="test">Test</Tab>
+							<Tab value="retries">Retries</Tab>
+							{#if !$selectedId.includes('failure')}
+								<Tab value="early-stop">Early Stop</Tab>
+								<Tab value="suspend">Suspend</Tab>
+							{/if}
+
+							<svelte:fragment slot="content">
+								<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+									<TabContent value="inputs" class="flex flex-col flex-1 h-full">
+										<PropPickerWrapper pickableProperties={stepPropPicker.pickableProperties}>
+											<!-- <pre class="text-xs">{JSON.stringify($flowStateStore, null, 4)}</pre> -->
+											<SchemaForm
+												schema={flowModuleState.schema}
+												inputTransform={true}
+												importPath={$selectedId}
+												bind:args={flowModule.input_transforms}
+												bind:extraLib={stepPropPicker.extraLib}
+											/>
+										</PropPickerWrapper>
+									</TabContent>
+									<TabContent value="test" class="flex flex-col flex-1 h-full" alwaysMounted={true}>
+										<ModulePreview
+											bind:this={modulePreview}
+											mod={flowModule}
+											schema={flowModuleState.schema}
+											indices={[parentIndex, childIndex]}
+										/>
+									</TabContent>
+
+									<TabContent value="retries" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowRetries bind:flowModule />
+										</div>
+									</TabContent>
+
+									<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleEarlyStop bind:flowModule />
+										</div>
+									</TabContent>
+
+									<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+										<div class="p-4 overflow-y-auto">
+											<FlowModuleSuspend bind:flowModule />
+										</div>
+									</TabContent>
+								</div>
+							</svelte:fragment>
+						</Tabs>
+					</down>
+				</VSplitPane>
+			</div>
+		{/if}
+	</FlowCard>
+</div>

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

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type FlowModuleWidthContext = {
+    width: Writable<number>;
+    threshold: number;
+};
+import { type FlowModule } from '../../../gen';
+import { type FlowModuleState } from '../flowState';
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+        flowModuleState: FlowModuleState;
+        failureModule: boolean;
+        FLOW_MODULE_WIDTH_THRESHOLD?: 768 | undefined;
+    };
+    events: {
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleProps = typeof __propDef.props;
+export declare type FlowModuleEvents = typeof __propDef.events;
+export declare type FlowModuleSlots = typeof __propDef.slots;
+export default class FlowModule extends SvelteComponentTyped<FlowModuleProps, FlowModuleEvents, FlowModuleSlots> {
+    get FLOW_MODULE_WIDTH_THRESHOLD(): number;
+}
+export {};

package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -0,0 +1,76 @@
+<script>import SimpleEditor from '../../SimpleEditor.svelte';
+import Toggle from '../../Toggle.svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { getStepPropPicker } from '../flowStateUtils';
+import { flowStore } from '../flowStore';
+import { flowStateStore } from '../flowState';
+import { getContext } from 'svelte';
+import { selectedIdToIndexes } from '../utils';
+const { selectedId, previewArgs } = getContext('FlowEditorContext');
+export let flowModule;
+let editor = undefined;
+$: isStopAfterIfEnabled = Boolean(flowModule.stop_after_if);
+let pickableProperties = {};
+$: {
+    let indices = selectedIdToIndexes($selectedId);
+    if (indices[1]) {
+        indices[1] += 1;
+    }
+    else {
+        indices[0] += 1;
+    }
+    const props = getStepPropPicker(indices, $flowStore.schema, $flowStateStore, $previewArgs).pickableProperties;
+    props['result'] = props['previous_result'];
+    delete props['previous_result'];
+    props.step = props.step?.slice(0, props.step.length - 1);
+    pickableProperties = props;
+}
+</script>
+
+<div class="flex flex-col items-start space-y-2">
+	<Toggle
+		checked={isStopAfterIfEnabled}
+		on:change={() => {
+			if (isStopAfterIfEnabled && flowModule.stop_after_if) {
+				flowModule.stop_after_if = undefined
+			} else {
+				flowModule.stop_after_if = {
+					expr: 'result == undefined',
+					skip_if_stopped: false
+				}
+			}
+		}}
+		options={{
+			right: 'Early stop if condition met'
+		}}
+	/>
+
+	{#if flowModule.stop_after_if}
+		<span class="text-xs font-bold">Should skip if stopped</span>
+
+		<input type="checkbox" bind:checked={flowModule.stop_after_if.skip_if_stopped} />
+
+		<span class="text-xs font-bold">Stop condition expression</span>
+
+		<div class="border w-full">
+			<PropPickerWrapper
+				{pickableProperties}
+				on:select={({ detail }) => {
+					editor?.insertAtCursor(detail)
+				}}
+			>
+				<SimpleEditor
+					bind:this={editor}
+					lang="javascript"
+					bind:code={flowModule.stop_after_if.expr}
+					class="small-editor"
+				/>
+			</PropPickerWrapper>
+		</div>
+	{:else}
+		<span class="text-xs font-bold">Should skip if stopped</span>
+		<input type="checkbox" disabled />
+		<span class="text-xs font-bold">Stop condition expression</span>
+		<textarea disabled rows="3" />
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleEarlyStopProps = typeof __propDef.props;
+export declare type FlowModuleEarlyStopEvents = typeof __propDef.events;
+export declare type FlowModuleEarlyStopSlots = typeof __propDef.slots;
+export default class FlowModuleEarlyStop extends SvelteComponentTyped<FlowModuleEarlyStopProps, FlowModuleEarlyStopEvents, FlowModuleEarlyStopSlots> {
+}
+export {};

package/components/flows/content/FlowModuleHeader.svelte

@@ -0,0 +1,157 @@
+<script>import Button from '../../common/button/Button.svelte';
+import { isEmptyFlowModule } from '../flowStateUtils';
+import { classNames } from '../../../utils';
+import { faArrowRotateBack, faArrowRotateForward, faBed, faCodeBranch, faSave, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher, getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import RemoveStepConfirmationModal from './RemoveStepConfirmationModal.svelte';
+export let module;
+let confirmationModalOpen = false;
+$: shouldPick = isEmptyFlowModule(module);
+const dispatch = createEventDispatcher();
+const { selectedId, select } = getContext('FlowEditorContext');
+const { width, threshold } = getContext('FlowModuleWidth');
+$: iconOnly = $width < threshold;
+$: moduleRetry = module.retry?.constant || module.retry?.exponential;
+</script>
+
+<div class="flex flex-row space-x-2">
+	{#if !shouldPick}
+		<span
+			class={classNames('badge', module.stop_after_if ? 'badge-on' : 'badge-off')}
+			on:click={() => dispatch('toggleStopAfterIf')}
+		>
+			<Icon data={faStop} scale={0.8} />
+		</span>
+		<span
+			class={classNames('badge', moduleRetry ? 'badge-on' : 'badge-off')}
+			on:click={() => dispatch('toggleRetry')}
+		>
+			<Icon data={faArrowRotateForward} scale={0.8} />
+		</span>
+		<span
+			class={classNames('badge', Boolean(module.suspend) ? 'badge-on' : 'badge-off')}
+			on:click={() => dispatch('toggleSuspend')}
+		>
+			<Icon data={faBed} scale={0.8} />
+		</span>
+	{/if}
+	{#if module.value.type === 'script' && !shouldPick}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			on:click={() => dispatch('fork')}
+			startIcon={{ icon: faCodeBranch }}
+			{iconOnly}
+		>
+			Fork
+		</Button>
+	{/if}
+
+	{#if module.value.type === 'rawscript' && !shouldPick}
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faSave }}
+			on:click={() => dispatch('createScriptFromInlineScript')}
+			{iconOnly}
+		>
+			Save to workspace
+		</Button>
+	{/if}
+	<Button
+		size="xs"
+		color="light"
+		variant="border"
+		startIcon={{ icon: faTrashAlt }}
+		{iconOnly}
+		on:click={(event) => {
+			if (event.shiftKey || shouldPick) {
+				dispatch('delete')
+				select('settings')
+			} else {
+				confirmationModalOpen = true
+			}
+		}}
+	>
+		{$selectedId.includes('failure') ? 'Delete error handler' : 'Remove step'}
+	</Button>
+</div>
+
+<RemoveStepConfirmationModal
+	bind:open={confirmationModalOpen}
+	on:confirmed={() => {
+		dispatch('delete')
+		setTimeout(() => {
+			select('settings')
+		})
+	}}
+/>
+
+<style>
+	.badge {
+
+    display: flex;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    white-space: nowrap;
+
+    border-radius: 0.25rem;
+
+    border-width: 1px;
+
+    padding-left: 0.625rem;
+
+    padding-right: 0.625rem;
+
+    padding-top: 0.125rem;
+
+    padding-bottom: 0.125rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    font-weight: 500
+}
+
+	.badge-on {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(30 66 159 / var(--tw-text-opacity))
+}
+
+	.badge-on:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(195 221 253 / var(--tw-bg-opacity))
+}
+
+	.badge-off {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(31 41 55 / var(--tw-text-opacity))
+}
+
+	.badge-off:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
+}</style>

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

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { FlowModule } from '../../gen';
+import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
-        indexes: number[];
-        mod: FlowModule;
+        module: FlowModule;
     };
     events: {
+        toggleStopAfterIf: CustomEvent<any>;
+        toggleRetry: CustomEvent<any>;
+        toggleSuspend: CustomEvent<any>;
         fork: CustomEvent<any>;
         createScriptFromInlineScript: CustomEvent<any>;
         delete: CustomEvent<any>;

package/components/flows/content/FlowModuleScript.svelte

@@ -0,0 +1,21 @@
+<script>import HighlightCode from '../../HighlightCode.svelte';
+import { getScriptByPath } from '../../../utils';
+export let flowModule;
+let code;
+let language;
+async function loadCode(module) {
+    if (module.value.type == 'script') {
+        const script = await getScriptByPath(module.value.path);
+        code = script.content;
+        language = script.language;
+    }
+    else {
+        throw Error('Not a script');
+    }
+}
+$: flowModule && loadCode(flowModule);
+</script>
+
+<div class="flex flex-col flex-1 h-full overflow-auto">
+	<HighlightCode {language} {code} />
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleScriptProps = typeof __propDef.props;
+export declare type FlowModuleScriptEvents = typeof __propDef.events;
+export declare type FlowModuleScriptSlots = typeof __propDef.slots;
+export default class FlowModuleScript extends SvelteComponentTyped<FlowModuleScriptProps, FlowModuleScriptEvents, FlowModuleScriptSlots> {
+}
+export {};

package/components/flows/content/FlowModuleSuspend.svelte

@@ -0,0 +1,27 @@
+<script>import Toggle from '../../Toggle.svelte';
+export let flowModule;
+$: isSuspendEnabled = Boolean(flowModule.suspend);
+</script>
+
+<Toggle
+	checked={isSuspendEnabled}
+	on:change={() => {
+		if (isSuspendEnabled && flowModule.suspend != undefined) {
+			flowModule.suspend = undefined
+		} else {
+			flowModule.suspend = 1
+		}
+	}}
+	options={{
+		right: 'Suspend flow execution until events received'
+	}}
+/>
+<div>
+	<span class="text-xs font-bold">Number of events to wait for</span>
+
+	{#if flowModule.suspend}
+		<input bind:value={flowModule.suspend} type="number" min="1" placeholder="1" />
+	{:else}
+		<input type="number" disabled />
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleSuspendProps = typeof __propDef.props;
+export declare type FlowModuleSuspendEvents = typeof __propDef.events;
+export declare type FlowModuleSuspendSlots = typeof __propDef.slots;
+export default class FlowModuleSuspend extends SvelteComponentTyped<FlowModuleSuspendProps, FlowModuleSuspendEvents, FlowModuleSuspendSlots> {
+}
+export {};

package/components/flows/content/FlowModuleWrapper.svelte

@@ -0,0 +1,45 @@
+<script>import { getContext } from 'svelte';
+import { flowStateStore } from '../flowState';
+import { flowStore } from '../flowStore';
+import { selectedIdToIndexes } from '../utils';
+import FlowModule from './FlowModule.svelte';
+const { selectedId } = getContext('FlowEditorContext');
+$: [parentIndex, childIndex] = selectedIdToIndexes($selectedId);
+</script>
+
+{#if childIndex != undefined}
+	{#each [$flowStore.value.modules[parentIndex].value] as mod, index (index)}
+		{#each [$flowStateStore.modules[parentIndex].childFlowModules] as state}
+			{#if mod.type == 'forloopflow' && state != undefined}
+				<FlowModule
+					failureModule={false}
+					bind:flowModule={mod.modules[childIndex]}
+					bind:flowModuleState={state[childIndex]}
+					on:delete={() => {
+						$flowStateStore.modules[parentIndex].childFlowModules?.splice(childIndex, 1)
+						let mod = $flowStore.value.modules[parentIndex].value
+						if (mod.type === 'forloopflow') {
+							mod.modules.splice(childIndex, 1)
+						} else {
+							throw new Error('Expected forloop')
+						}
+					}}
+				/>
+			{:else}
+				<span>Incorrect state</span>
+			{/if}
+		{/each}
+	{/each}
+{:else if $flowStore.value.modules[parentIndex]}
+	<FlowModule
+		failureModule={false}
+		bind:flowModule={$flowStore.value.modules[parentIndex]}
+		bind:flowModuleState={$flowStateStore.modules[parentIndex]}
+		on:delete={() => {
+			$flowStateStore.modules.splice(parentIndex, 1)
+			$flowStateStore = $flowStateStore
+			$flowStore.value.modules.splice(parentIndex, 1)
+			$flowStore = $flowStore
+		}}
+	/>
+{/if}

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

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