windmill-components 1.35.42 → 1.36.0

package/components/common/toggleButton/ToggleButton.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string;
+        position: 'left' | 'center' | 'right';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToggleButtonProps = typeof __propDef.props;
+export declare type ToggleButtonEvents = typeof __propDef.events;
+export declare type ToggleButtonSlots = typeof __propDef.slots;
+export default class ToggleButton extends SvelteComponentTyped<ToggleButtonProps, ToggleButtonEvents, ToggleButtonSlots> {
+}
+export {};

package/components/common/toggleButton/ToggleButtonGroup.svelte

@@ -0,0 +1,33 @@
+<script context="module">export {};
+</script>
+
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+export let exclusive = true;
+export let selected = [];
+const selectedContent = writable(selected);
+setContext('ToggleButtonGroup', {
+    selected: selectedContent,
+    select: (value) => {
+        if (exclusive) {
+            selectedContent.set([value]);
+        }
+        else {
+            selectedContent.update((selected) => {
+                const index = selected.findIndex((val) => val === value);
+                if (index !== -1) {
+                    selected.splice(index, 1);
+                    return selected;
+                }
+                else {
+                    return [value, ...selected];
+                }
+            });
+        }
+    }
+});
+</script>
+
+<div class="inline-flex rounded-md shadow-sm" role="group">
+	<slot />
+</div>

package/components/common/toggleButton/ToggleButtonGroup.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type ToggleButtonContext = {
+    selected: Writable<string[]>;
+    select: (value: string) => void;
+};
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        exclusive?: boolean | undefined;
+        selected?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ToggleButtonGroupProps = typeof __propDef.props;
+export declare type ToggleButtonGroupEvents = typeof __propDef.events;
+export declare type ToggleButtonGroupSlots = typeof __propDef.slots;
+export default class ToggleButtonGroup extends SvelteComponentTyped<ToggleButtonGroupProps, ToggleButtonGroupEvents, ToggleButtonGroupSlots> {
+}
+export {};

package/components/flows/FlowEditor.svelte

@@ -0,0 +1,30 @@
+<!-- Flow Editor: Top level component -->
+<script>import { HSplitPane } from 'svelte-split-pane';
+import FlowEditorPanel from './content/FlowEditorPanel.svelte';
+import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
+import { flowStore } from './flowStore';
+import { flowStateStore } from './flowState';
+import FlowPreviewButtons from './header/FlowPreviewButtons.svelte';
+export let initialPath;
+</script>
+
+<div class="h-full overflow-hidden border-t">
+	<HSplitPane leftPaneSize="25%" rightPaneSize="75%" minLeftPaneSize="20%" minRightPaneSize="40%">
+		<left slot="left" class="h-full flex flex-col ">
+			<FlowPreviewButtons />
+			<div class="grow overflow-auto p-4 bg-gray-50">
+				{#if $flowStore.value.modules && $flowStateStore.modules}
+					<FlowModuleSchemaMap
+						bind:modules={$flowStore.value.modules}
+						bind:moduleStates={$flowStateStore.modules}
+					/>
+				{/if}
+			</div>
+		</left>
+		<right slot="right" class="h-full">
+			<div class="h-full overflow-auto bg-white ">
+				<FlowEditorPanel {initialPath} />
+			</div>
+		</right>
+	</HSplitPane>
+</div>

package/components/{FlowEditor.svelte.d.ts → flows/FlowEditor.svelte.d.ts}

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

package/components/flows/common/FlowCard.svelte

@@ -0,0 +1,9 @@
+<script>import FlowCardHeader from './FlowCardHeader.svelte';
+export let title = undefined;
+export let flowModule = undefined;
+</script>
+
+<FlowCardHeader {title} bind:flowModule>
+	<slot name="header" />
+</FlowCardHeader>
+<slot />

package/components/flows/common/FlowCard.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        flowModule?: FlowModule | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+    };
+};
+export declare type FlowCardProps = typeof __propDef.props;
+export declare type FlowCardEvents = typeof __propDef.events;
+export declare type FlowCardSlots = typeof __propDef.slots;
+export default class FlowCard extends SvelteComponentTyped<FlowCardProps, FlowCardEvents, FlowCardSlots> {
+}
+export {};

package/components/flows/common/FlowCardHeader.svelte

@@ -0,0 +1,39 @@
+<script>import Badge from '../../common/badge/Badge.svelte';
+import IconedPath from '../../IconedPath.svelte';
+import { RawScript } from '../../../gen';
+import { isEmptyFlowModule } from '../flowStateUtils';
+export let flowModule = undefined;
+export let title = undefined;
+$: shouldPick = flowModule && isEmptyFlowModule(flowModule);
+const languageColors = {
+    [RawScript.language.GO]: 'dark-indigo',
+    [RawScript.language.DENO]: 'dark-blue',
+    [RawScript.language.PYTHON3]: 'dark-green'
+};
+</script>
+
+<div
+	class="flex items-center justify-between py-2 px-4 border-b bg-gray-50 shadow-sm space-x-2 h-12 flex-nowrap"
+>
+	{#if flowModule}
+		<span class="text-sm w-full">
+			<div class="flex items-center space-x-2">
+				{#if shouldPick}
+					<span class="font-bold text-xs">Select a script</span>
+				{:else if flowModule?.value.type === 'rawscript'}
+					<Badge color={languageColors[flowModule?.value.language] ?? 'gray'} capitalize>
+						{flowModule?.value.language}
+					</Badge>
+					<input bind:value={flowModule.summary} placeholder={'Summary'} />
+				{:else if flowModule?.value.type === 'script' && 'path' in flowModule.value && flowModule.value.path}
+					<IconedPath path={flowModule.value.path} />
+					<input bind:value={flowModule.summary} placeholder="Summary" class="ml-2" />
+				{/if}
+			</div>
+		</span>
+	{/if}
+	{#if title}
+		<div class="text-sm font-bold text-gray-900">{title}</div>
+	{/if}
+	<slot />
+</div>

package/components/flows/common/FlowCardHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        flowModule?: FlowModule | undefined;
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FlowCardHeaderProps = typeof __propDef.props;
+export declare type FlowCardHeaderEvents = typeof __propDef.events;
+export declare type FlowCardHeaderSlots = typeof __propDef.slots;
+export default class FlowCardHeader extends SvelteComponentTyped<FlowCardHeaderProps, FlowCardHeaderEvents, FlowCardHeaderSlots> {
+}
+export {};

package/components/flows/content/CopyFirstStepSchema.svelte

@@ -0,0 +1,13 @@
+<script>import { Button } from 'flowbite-svelte';
+import { isEmptyFlowModule } from '../flowStateUtils';
+import { copyFirstStepSchema, flowStore } from '../flowStore';
+</script>
+
+<Button
+	color="light"
+	size="xs"
+	disabled={$flowStore.value.modules.length === 0 || isEmptyFlowModule($flowStore.value.modules[0])}
+	on:click={copyFirstStepSchema}
+>
+	Copy from first step schema
+</Button>

package/components/flows/content/FlowEditorPanel.svelte

@@ -0,0 +1,25 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleWrapper from './FlowModuleWrapper.svelte';
+import FlowSettings from './FlowSettings.svelte';
+import FlowInput from './FlowInput.svelte';
+import FlowFailureModule from './FlowFailureModule.svelte';
+import FlowLoopWrapper from './FlowLoopWrapper.svelte';
+export let initialPath;
+const { selectedId } = getContext('FlowEditorContext');
+</script>
+
+{#key $selectedId}
+	{#if $selectedId === 'settings'}
+		<FlowSettings {initialPath} />
+	{:else if $selectedId === 'settings-schedule'}
+		<FlowSettings {initialPath} defaultTab="schedule" />
+	{:else if $selectedId.includes('loop')}
+		<FlowLoopWrapper />
+	{:else if $selectedId === 'inputs'}
+		<FlowInput />
+	{:else if $selectedId === 'failure'}
+		<FlowFailureModule />
+	{:else}
+		<FlowModuleWrapper />
+	{/if}
+{/key}

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        initialPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowEditorPanelProps = typeof __propDef.props;
+export declare type FlowEditorPanelEvents = typeof __propDef.events;
+export declare type FlowEditorPanelSlots = typeof __propDef.slots;
+export default class FlowEditorPanel extends SvelteComponentTyped<FlowEditorPanelProps, FlowEditorPanelEvents, FlowEditorPanelSlots> {
+}
+export {};

package/components/flows/content/FlowFailureModule.svelte

@@ -0,0 +1,15 @@
+<script>import { flowStateStore } from '../flowState';
+import { flowStore } from '../flowStore';
+import FlowModule from './FlowModule.svelte';
+</script>
+
+{#if $flowStore.value.failure_module}
+	<FlowModule
+		bind:flowModule={$flowStore.value.failure_module}
+		bind:flowModuleState={$flowStateStore.failureModule}
+		on:delete={() => {
+			$flowStore.value.failure_module = undefined
+		}}
+		failureModule={true}
+	/>
+{/if}

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

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

package/components/flows/content/FlowInput.svelte

@@ -0,0 +1,26 @@
+<script>import { flowStore } from '../flowStore';
+import SchemaEditor from '../../SchemaEditor.svelte';
+import SchemaForm from '../../SchemaForm.svelte';
+import { emptySchema } from '../../../utils';
+import FlowCard from '../common/FlowCard.svelte';
+import CopyFirstStepSchema from './CopyFirstStepSchema.svelte';
+</script>
+
+<FlowCard title="Flow Inputs">
+	<div slot="header">
+		<CopyFirstStepSchema />
+	</div>
+	<div>
+		<div class="p-6">
+			<SchemaEditor
+				on:change={() => {
+					$flowStore = $flowStore
+				}}
+				bind:schema={$flowStore.schema}
+			/>
+		</div>
+	</div>
+	<div class="p-6">
+		<SchemaForm bind:schema={$flowStore.schema} editableSchema={true} />
+	</div>
+</FlowCard>

package/components/flows/content/FlowInputs.svelte

@@ -0,0 +1,91 @@
+<script>import { RawScript, Script } from '../../../gen';
+import { faCode, faRepeat } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte';
+import PickHubScript from '../pickers/PickHubScript.svelte';
+import PickScript from '../pickers/PickScript.svelte';
+export let shouldDisableLoopCreation = false;
+export let shouldDisableTriggerScripts = false;
+export let failureModule;
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="space-y-4 p-4">
+	{#if !shouldDisableTriggerScripts}
+		<div class="text-sm font-bold">Scripts</div>
+	{/if}
+
+	<div class="grid sm:grid-col-2 lg:grid-cols-3 gap-4">
+		<PickScript kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT} on:pick />
+		<PickHubScript kind={failureModule ? Script.kind.FAILURE : Script.kind.SCRIPT} on:pick />
+
+		<FlowScriptPicker
+			label={`Create a for-loop here`}
+			disabled={shouldDisableLoopCreation}
+			icon={faRepeat}
+			iconColor="text-blue-500"
+			on:click={() => dispatch('loop')}
+		/>
+
+		{#if !failureModule}
+			<FlowScriptPicker
+				label={`New PostgreSQL query`}
+				icon={faCode}
+				iconColor="text-blue-800"
+				on:click={() =>
+					dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
+			/>
+		{/if}
+
+		<FlowScriptPicker
+			label="New Python script (3.10)"
+			icon={faCode}
+			iconColor="text-green-500"
+			on:click={() =>
+				dispatch('new', {
+					language: RawScript.language.PYTHON3,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
+		/>
+
+		<FlowScriptPicker
+			label="New Typescript script (Deno)"
+			icon={faCode}
+			iconColor="text-blue-800"
+			on:click={() =>
+				dispatch('new', {
+					language: RawScript.language.DENO,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
+		/>
+
+		<FlowScriptPicker
+			label="New Go script"
+			icon={faCode}
+			iconColor="text-blue-700"
+			on:click={() =>
+				dispatch('new', {
+					language: RawScript.language.GO,
+					kind: 'script',
+					subkind: failureModule ? 'failure' : 'flow'
+				})}
+		/>
+	</div>
+
+	{#if !shouldDisableTriggerScripts}
+		<div class="text-sm font-bold">Trigger scripts</div>
+
+		<div class="grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 gap-4">
+			<PickScript kind={Script.kind.TRIGGER} on:pick />
+			<PickHubScript kind={Script.kind.TRIGGER} on:pick />
+			<FlowScriptPicker
+				label="New Typescript script (Deno)"
+				icon={faCode}
+				iconColor="text-blue-800"
+				on:click={() => dispatch('new', { language: RawScript.language.DENO, kind: 'trigger' })}
+			/>
+		</div>
+	{/if}
+</div>

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         shouldDisableLoopCreation?: boolean | undefined;
         shouldDisableTriggerScripts?: boolean | undefined;
+        failureModule: boolean;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/content/FlowLoop.svelte

@@ -0,0 +1,168 @@
+<script>import { getContext } from 'svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import Toggle from '../../Toggle.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { flowStore } from '../flowStore';
+import { getStepPropPicker } from '../flowStateUtils';
+import { flowStateStore } from '../flowState';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { VSplitPane } from 'svelte-split-pane';
+import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
+import FlowModuleSuspend from './FlowModuleSuspend.svelte';
+import FlowRetries from './FlowRetries.svelte';
+import { Button, Tab, TabContent, Tabs } from '../../common';
+const { previewArgs } = getContext('FlowEditorContext');
+export let mod;
+export let index;
+let editor = undefined;
+let monacos = {};
+let selected = 'retries';
+let inputTransformName = '';
+$: mod = $flowStore.value.modules[index];
+$: pickableProperties = getStepPropPicker([Number(index)], $flowStore.schema, $flowStateStore, $previewArgs).pickableProperties;
+</script>
+
+<FlowCard title="For loop">
+	<div slot="header" class="grow">
+		<input bind:value={mod.summary} placeholder={'Summary'} />
+	</div>
+	<div>
+		<div class="overflow-hidden flex-grow">
+			<VSplitPane topPanelSize="50%" downPanelSize="40%" minTopPaneSize="20%" minDownPaneSize="20%">
+				<top slot="top">
+					<div class="p-6 flex flex-col">
+						{#if mod.value.type === 'forloopflow'}
+							<span class="mb-2 text-sm font-bold"
+								>Iterator expression
+								<Tooltip>
+									List to iterate over. For more information see the
+									<a href="https://docs.windmill.dev/docs/getting_started/flows#for-loops">docs.</a>
+								</Tooltip>
+							</span>
+
+							{#if mod.value.iterator.type == 'javascript'}
+								<div class="border w-full">
+									<PropPickerWrapper
+										{pickableProperties}
+										on:select={({ detail }) => {
+											editor?.insertAtCursor(detail)
+										}}
+									>
+										<SimpleEditor
+											bind:this={editor}
+											lang="javascript"
+											bind:code={mod.value.iterator.expr}
+											class="small-editor"
+											shouldBindKey={false}
+										/>
+									</PropPickerWrapper>
+								</div>
+							{:else}
+								<Button
+									on:click={() => {
+										if (mod.value.type === 'forloopflow') mod.value.iterator.type = 'javascript'
+									}}
+								/>
+							{/if}
+
+							<span class="my-2 text-sm font-bold">Skip failures</span>
+
+							<Toggle
+								bind:checked={mod.value.skip_failures}
+								options={{
+									right: 'Skip failures'
+								}}
+							/>
+							<span class="my-2 text-sm font-bold"
+								>Pass specific flow context as loop flow input</span
+							>
+							<div class="flex flex-row mt-4 w-80 max-w-full"
+								><input
+									bind:value={inputTransformName}
+									placeholder="Argument name"
+									type="text"
+									class="w-20"
+								/><Button
+									disabled={inputTransformName == ''}
+									btnClasses="ml-2"
+									on:click={() =>
+										(mod.input_transforms[inputTransformName] = { type: 'javascript', expr: '' })}
+									>+</Button
+								></div
+							>
+
+							{#each Object.keys(mod.input_transforms) as key}
+								<div class="flex flex-row my-2">
+									<span class="my-2 text-sm font-bold">{key}</span>
+
+									<Button
+										btnClasses="ml-4"
+										on:click={() => {
+											delete mod.input_transforms[key]
+											mod.input_transforms = mod.input_transforms
+										}}>-</Button
+									>
+								</div>
+								<div class="border w-full">
+									{#if mod.input_transforms[key].type == 'javascript'}
+										<PropPickerWrapper
+											{pickableProperties}
+											on:select={({ detail }) => {
+												monacos[key]?.insertAtCursor(detail)
+											}}
+										>
+											<SimpleEditor
+												bind:this={monacos[key]}
+												lang="javascript"
+												bind:code={mod.input_transforms[key]['expr']}
+												class="small-editor"
+												shouldBindKey={false}
+											/>
+										</PropPickerWrapper>
+									{:else}
+										<Button
+											on:click={() => {
+												mod.input_transforms[key].type = 'javascript'
+												mod.input_transforms[key]['expr'] = ''
+											}}
+										/>
+									{/if}
+								</div>
+							{/each}
+						{/if}
+					</div></top
+				>
+				<down slot="down" class="flex flex-col flex-1 h-full">
+					<Tabs bind:selected>
+						<Tab value="retries">Retries</Tab>
+						<Tab value="early-stop">Early Stop</Tab>
+						<Tab value="suspend">Suspend</Tab>
+
+						<svelte:fragment slot="content">
+							<div class="overflow-hidden bg-white" style="height:calc(100% - 32px);">
+								<TabContent value="retries" class="flex flex-col flex-1 h-full">
+									<div class="p-4 overflow-y-auto">
+										<FlowRetries bind:flowModule={mod} />
+									</div>
+								</TabContent>
+
+								<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+									<div class="p-4 overflow-y-auto">
+										<FlowModuleEarlyStop bind:flowModule={mod} />
+									</div>
+								</TabContent>
+
+								<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+									<div class="p-4 overflow-y-auto">
+										<FlowModuleSuspend bind:flowModule={mod} />
+									</div>
+								</TabContent>
+							</div>
+						</svelte:fragment>
+					</Tabs>
+				</down>
+			</VSplitPane>
+		</div>
+	</div>
+</FlowCard>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen/models/FlowModule';
+declare const __propDef: {
+    props: {
+        mod: FlowModule;
+        index: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowLoopProps = typeof __propDef.props;
+export declare type FlowLoopEvents = typeof __propDef.events;
+export declare type FlowLoopSlots = typeof __propDef.slots;
+export default class FlowLoop extends SvelteComponentTyped<FlowLoopProps, FlowLoopEvents, FlowLoopSlots> {
+}
+export {};

package/components/flows/content/FlowLoopWrapper.svelte

@@ -0,0 +1,9 @@
+<script>import { getContext } from 'svelte';
+import { flowStore } from '../flowStore';
+import { selectedIdToIndexes } from '../utils';
+import FlowLoop from './FlowLoop.svelte';
+const { selectedId } = getContext('FlowEditorContext');
+$: index = selectedIdToIndexes($selectedId)[0];
+</script>
+
+<FlowLoop bind:mod={$flowStore.value.modules[index]} {index} />

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

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