windmill-components 1.35.1 → 1.35.43

package/components/common/toggleButton/ToggleButton.svelte

@@ -0,0 +1,20 @@
+<script>import { classNames } from '../../../utils';
+import { getContext } from 'svelte';
+export let value;
+export let position;
+const { select, selected } = getContext('ToggleButtonGroup');
+</script>
+
+<button
+	type="button"
+	on:click={() => select(value)}
+	class={classNames(
+		'py-1 px-2 text-sm font-medium border-gray-200 ',
+		position === 'left' ? 'rounded-l-lg border' : '',
+		position === 'center' ? 'border-t border-b' : '',
+		position === 'right' ? 'rounded-r-md border border-l-0' : '',
+		$selected.includes(value) ? 'text-white bg-gray-900 ' : 'text-gray-900 bg-white '
+	)}
+>
+	<slot />
+</button>

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 FlowEditorHeader from './header/FlowEditorHeader.svelte';
+import FlowEditorPanel from './content/FlowEditorPanel.svelte';
+import FlowModuleSchemaMap from './map/FlowModuleSchemaMap.svelte';
+import { flowStore } from './flowStore';
+import { flowStateStore } from './flowState';
+</script>
+
+<FlowEditorHeader />
+
+<div class="h-full overflow-hidden">
+	<HSplitPane leftPaneSize="25%" rightPaneSize="75%" minLeftPaneSize="20%" minRightPaneSize="40%">
+		<left slot="left" class="h-full ">
+			<div class="h-full 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 />
+			</div>
+		</right>
+	</HSplitPane>
+</div>

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

@@ -1,13 +1,6 @@
 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;
-    };
+    props: {};
     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}
+		<span class="text-xs font-bold text-gray-900 flex flex-col">{title}</span>
+	{/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,26 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleWrapper from './FlowModuleWrapper.svelte';
+import FlowSettings from './FlowSettings.svelte';
+import FlowInput from './FlowInput.svelte';
+import FlowLoop from './FlowLoop.svelte';
+import FlowFailureModule from './FlowFailureModule.svelte';
+const { selectedId } = getContext('FlowEditorContext');
+</script>
+
+{#key $selectedId}
+	{#if $selectedId === 'settings'}
+		<FlowSettings />
+	{:else if $selectedId === 'settings-schedule'}
+		<FlowSettings defaultTab="schedule" />
+	{:else if $selectedId === 'settings-retries'}
+		<FlowSettings defaultTab="retries" />
+	{:else if $selectedId.includes('loop')}
+		<FlowLoop />
+	{: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,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    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,17 @@
+<script>import { getContext } from 'svelte';
+import { flowStateStore } from '../flowState';
+import { flowStore } from '../flowStore';
+import FlowModule from './FlowModule.svelte';
+const { previewArgs } = getContext('FlowEditorContext');
+</script>
+
+{#if $flowStore.value.failure_module}
+	<FlowModule
+		previewArgs={previewArgs}
+		bind:flowModule={$flowStore.value.failure_module}
+		bind:flowModuleState={$flowStateStore.failureModule}
+		on:delete={() => {
+			$flowStore.value.failure_module = undefined
+		}}
+	/>
+{/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,22 @@
+<script>import { flowStore } from '../flowStore';
+import SchemaEditor from '../../SchemaEditor.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
+				}}
+				schema={$flowStore?.schema ?? emptySchema()}
+			/>
+		</div>
+	</div>
+</FlowCard>

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

@@ -1,22 +1,22 @@
-<script>import { RawScript } from '../../gen';
+<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';
+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;
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="space-y-4">
+<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 on:pick />
-		<PickHubScript on:pick />
+		<PickScript kind={Script.kind.SCRIPT} on:pick />
+		<PickHubScript kind={Script.kind.SCRIPT} on:pick />
 
 		<FlowScriptPicker
 			label={`Create a for-loop here`}
@@ -30,21 +30,32 @@ const dispatch = createEventDispatcher();
 			label={`New PostgreSQL query`}
 			icon={faCode}
 			iconColor="text-blue-800"
-			on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'pgsql' })}
+			on:click={() =>
+				dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'pgsql' })}
 		/>
 
 		<FlowScriptPicker
 			label="New Python script (3.10)"
 			icon={faCode}
 			iconColor="text-green-500"
-			on:click={() => dispatch('new', { language: RawScript.language.PYTHON3, type: 'flow' })}
+			on:click={() =>
+				dispatch('new', { language: RawScript.language.PYTHON3, kind: 'script', subkind: 'flow' })}
 		/>
 
 		<FlowScriptPicker
 			label="New Typescript script (Deno)"
 			icon={faCode}
 			iconColor="text-blue-800"
-			on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'flow' })}
+			on:click={() =>
+				dispatch('new', { language: RawScript.language.DENO, kind: 'script', subkind: 'flow' })}
+		/>
+
+		<FlowScriptPicker
+			label="New Go script"
+			icon={faCode}
+			iconColor="text-blue-700"
+			on:click={() =>
+				dispatch('new', { language: RawScript.language.GO, kind: 'script', subkind: 'flow' })}
 		/>
 	</div>
 
@@ -52,13 +63,13 @@ const dispatch = createEventDispatcher();
 		<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 isTrigger={true} on:pick />
-			<PickHubScript isTrigger={true} on:pick />
+			<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, type: 'trigger' })}
+				on:click={() => dispatch('new', { language: RawScript.language.DENO, kind: 'trigger' })}
 			/>
 		</div>
 	{/if}

package/components/flows/content/FlowLoop.svelte

@@ -0,0 +1,38 @@
+<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';
+const { selectedId } = getContext('FlowEditorContext');
+const [prefix, index] = $selectedId.split('-');
+</script>
+
+<FlowCard title="For loop">
+	<div>
+		<div class="p-6 flex flex-col">
+			{#if $flowStore.value.modules[index].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>
+				<SimpleEditor
+					lang="javascript"
+					bind:code={$flowStore.value.modules[index].value.iterator.expr}
+					class="few-lines-editor"
+				/>
+				<span class="mb-2 text-sm font-bold">Skip failures</span>
+
+				<Toggle
+					bind:checked={$flowStore.value.modules[index].value.skip_failures}
+					options={{
+						right: 'Skip failures'
+					}}
+				/>
+			{/if}
+		</div>
+	</div>
+</FlowCard>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    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 {};