windmill-components 1.408.2 → 1.430.3

package/package/components/triggers/WebsocketTriggersPanel.svelte

@@ -0,0 +1,92 @@
+<script>import { Button } from '../common';
+import { userStore, workspaceStore } from '../../stores';
+import { WebsocketTriggerService } from '../../gen';
+import { UnplugIcon } from 'lucide-svelte';
+import Skeleton from '../common/skeleton/Skeleton.svelte';
+import { canWrite } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import { getContext } from 'svelte';
+import WebsocketTriggerEditor from './WebsocketTriggerEditor.svelte';
+import { isCloudHosted } from '../../cloud';
+export let isFlow;
+export let path;
+export let newItem = false;
+let wsTriggerEditor;
+$: path && loadTriggers();
+const { triggersCount } = getContext('TriggerContext');
+let wsTriggers = undefined;
+export async function loadTriggers() {
+    try {
+        wsTriggers = (await WebsocketTriggerService.listWebsocketTriggers({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).map((x) => {
+            return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
+        });
+        $triggersCount = { ...($triggersCount ?? {}), websocket_count: wsTriggers?.length };
+    }
+    catch (e) {
+        console.error('impossible to load WS triggers', e);
+    }
+}
+</script>
+
+<WebsocketTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={wsTriggerEditor}
+/>
+
+{#if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		Websocket triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		{#if newItem}
+			<Alert title="Triggers disabled" type="warning" size="xs">
+				Deploy the {isFlow ? 'flow' : 'script'} to add WS triggers.
+			</Alert>
+		{:else if wsTriggers}
+			<Button
+				on:click={() => wsTriggerEditor?.openNew(isFlow, path)}
+				variant="border"
+				color="light"
+				size="xs"
+				startIcon={{ icon: UnplugIcon }}
+			>
+				New WS Trigger
+			</Button>
+			{#if wsTriggers.length == 0}
+				<div class="text-xs text-secondary"> No WS triggers </div>
+			{:else}
+				<div class="flex flex-col divide-y pt-2">
+					{#each wsTriggers as wsTriggers (wsTriggers.path)}
+						<div class="grid grid-cols-5 text-2xs items-center py-2">
+							<div class="col-span-2 truncate">{wsTriggers.path}</div>
+							<div class="col-span-2 truncate">
+								{wsTriggers.url}
+							</div>
+							<div class="flex justify-end">
+								<button
+									on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
+									class="px-2"
+								>
+									{#if wsTriggers.canWrite}
+										Edit
+									{:else}
+										View
+									{/if}
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		{:else}
+			<Skeleton layout={[[8]]} />
+		{/if}
+	</div>
+{/if}

package/package/components/triggers/WebsocketTriggersPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+        newItem?: boolean | undefined;
+        loadTriggers?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WebsocketTriggersPanelProps = typeof __propDef.props;
+export type WebsocketTriggersPanelEvents = typeof __propDef.events;
+export type WebsocketTriggersPanelSlots = typeof __propDef.slots;
+export default class WebsocketTriggersPanel extends SvelteComponent<WebsocketTriggersPanelProps, WebsocketTriggersPanelEvents, WebsocketTriggersPanelSlots> {
+    get loadTriggers(): () => Promise<void>;
+}
+export {};

package/package/components/triggers.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+import type { TriggersCount } from '../gen';
+import type { Writable } from 'svelte/store';
+export type ScheduleTrigger = {
+    summary: string | undefined;
+    args: Record<string, any>;
+    cron: string;
+    timezone: string;
+    enabled: boolean;
+};
+export type TriggerContext = {
+    selectedTrigger: Writable<'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll' | 'kafka'>;
+    primarySchedule: Writable<ScheduleTrigger | undefined | false>;
+    triggersCount: Writable<TriggersCount | undefined>;
+    simplifiedPoll: Writable<boolean | undefined>;
+};
+export declare function setScheduledPollSchedule(primarySchedule: Writable<ScheduleTrigger | undefined | false>, triggersCount: Writable<TriggersCount | undefined>): void;

package/package/components/triggers.js

@@ -0,0 +1,17 @@
+export function setScheduledPollSchedule(primarySchedule, triggersCount) {
+    const cron = '0 */5 * * * *';
+    primarySchedule.set({
+        enabled: true,
+        summary: 'Check for new events every 5 minutes',
+        cron: cron,
+        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        args: {}
+    });
+    triggersCount.update((triggersCount) => {
+        return {
+            ...(triggersCount ?? {}),
+            schedule_count: (triggersCount?.schedule_count ?? 0) + 1,
+            primary_schedule: { schedule: cron }
+        };
+    });
+}

package/package/components/tutorials/{FlowBranchAll.svelte → FlowBuilderTutorialBranchAll.svelte}

@@ -1,9 +1,8 @@
 <script>import { getContext } from 'svelte';
-import { triggerAddFlowStep, selectFlowStepKind } from './utils';
+import { triggerPointerDown } from './utils';
 import Tutorial from './Tutorial.svelte';
 import { updateProgress } from '../../tutorialUtils';
-import { nextId } from '../flows/flowModuleNextId';
-const { flowStore, flowStateStore } = getContext('FlowEditorContext');
+const { flowStore } = getContext('FlowEditorContext');
 let tutorial = undefined;
 export function runTutorial(indexToInsertAt) {
     tutorial?.runTutorial({ indexToInsertAt });
@@ -17,9 +16,7 @@ export function runTutorial(indexToInsertAt) {
 	on:error
 	on:skipAll
 	getSteps={(driver, options) => {
-		const id = nextId($flowStateStore, $flowStore)
 		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
-		const isFirst = id === 'a'
 
 		const steps = [
 			{
@@ -35,7 +32,7 @@ export function runTutorial(indexToInsertAt) {
 					title: 'Add a step',
 					description: 'Click here to add a step to your flow',
 					onNextClick: () => {
-						triggerAddFlowStep(index)
+						triggerPointerDown(`#flow-editor-add-step-${index}`)
 
 						setTimeout(() => {
 							driver.moveNext()
@@ -57,14 +54,14 @@ export function runTutorial(indexToInsertAt) {
 					title: 'Insert Branch all',
 					description: "Let's pick branch all",
 					onNextClick: () => {
-						selectFlowStepKind(isFirst ? 6 : 5)
+						triggerPointerDown('#flow-editor-flow-kind-branch-to-all')
 
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				},
-				element: `#flow-editor-insert-module > div > button:nth-child(${isFirst ? 6 : 5})`
+				element: '#flow-editor-flow-kind-branch-to-all'
 			},
 			{
 				element: '#flow-editor-branch-all-wrapper',

package/package/components/tutorials/{FlowBranchAll.svelte.d.ts → FlowBuilderTutorialBranchAll.svelte.d.ts}

@@ -11,10 +11,10 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type FlowBranchAllProps = typeof __propDef.props;
-export type FlowBranchAllEvents = typeof __propDef.events;
-export type FlowBranchAllSlots = typeof __propDef.slots;
-export default class FlowBranchAll extends SvelteComponent<FlowBranchAllProps, FlowBranchAllEvents, FlowBranchAllSlots> {
+export type FlowBuilderTutorialBranchAllProps = typeof __propDef.props;
+export type FlowBuilderTutorialBranchAllEvents = typeof __propDef.events;
+export type FlowBuilderTutorialBranchAllSlots = typeof __propDef.slots;
+export default class FlowBuilderTutorialBranchAll extends SvelteComponent<FlowBuilderTutorialBranchAllProps, FlowBuilderTutorialBranchAllEvents, FlowBuilderTutorialBranchAllSlots> {
     get runTutorial(): (indexToInsertAt?: number | undefined) => void;
 }
 export {};

package/package/components/tutorials/{FlowBranchOne.svelte → FlowBuilderTutorialBranchOne.svelte}

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
-import { clickButtonBySelector, triggerAddFlowStep, selectFlowStepKind, updateFlowModuleById } from './utils';
+import { clickButtonBySelector, updateFlowModuleById, triggerPointerDown } from './utils';
 import Tutorial from './Tutorial.svelte';
 import { updateProgress } from '../../tutorialUtils';
 import { nextId } from '../flows/flowModuleNextId';
@@ -20,7 +20,6 @@ export function runTutorial(indexToInsertAt) {
 	getSteps={(driver, options) => {
 		const id = nextId($flowStateStore, $flowStore)
 		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
-		const isFirst = id === 'a'
 
 		const steps = [
 			{
@@ -36,7 +35,7 @@ export function runTutorial(indexToInsertAt) {
 					title: 'Branch one',
 					description: 'Windmill supports branches, let us add one',
 					onNextClick: () => {
-						triggerAddFlowStep(index)
+						triggerPointerDown(`#flow-editor-add-step-${index}`)
 
 						setTimeout(() => {
 							driver.moveNext()
@@ -56,16 +55,15 @@ export function runTutorial(indexToInsertAt) {
 					title: 'Insert Branch one',
 					description: "Let's pick branch one",
 					onNextClick: () => {
-						selectFlowStepKind(isFirst ? 5 : 4)
+						triggerPointerDown('#flow-editor-flow-kind-branch-to-one')
 
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				},
-				element: `#flow-editor-insert-module > div > button:nth-child(${isFirst ? 5 : 4})`
+				element: '#flow-editor-flow-kind-branch-to-one'
 			},
-
 			{
 				element: '#flow-editor-edit-predicate',
 				popover: {
@@ -86,7 +84,6 @@ export function runTutorial(indexToInsertAt) {
 					}
 				}
 			},
-
 			{
 				element: '#flow-editor-branch-one-wrapper',
 				popover: {
@@ -101,16 +98,14 @@ export function runTutorial(indexToInsertAt) {
 					}
 				}
 			},
-
 			{
 				popover: {
 					title: 'Add steps',
-					description: 'You can now add step to one of the branches',
+					description: 'You can now add a step to one of the branches',
 					onNextClick: () => {
 						setTimeout(() => {
-							driver.moveNext()
-
 							updateProgress(2)
+							driver.moveNext()
 						})
 					}
 				}

package/package/components/tutorials/{FlowBuilderTutorialsForLoop.svelte.d.ts → FlowBuilderTutorialBranchOne.svelte.d.ts}

@@ -12,10 +12,10 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type FlowBuilderTutorialsForLoopProps = typeof __propDef.props;
-export type FlowBuilderTutorialsForLoopEvents = typeof __propDef.events;
-export type FlowBuilderTutorialsForLoopSlots = typeof __propDef.slots;
-export default class FlowBuilderTutorialsForLoop extends SvelteComponent<FlowBuilderTutorialsForLoopProps, FlowBuilderTutorialsForLoopEvents, FlowBuilderTutorialsForLoopSlots> {
+export type FlowBuilderTutorialBranchOneProps = typeof __propDef.props;
+export type FlowBuilderTutorialBranchOneEvents = typeof __propDef.events;
+export type FlowBuilderTutorialBranchOneSlots = typeof __propDef.slots;
+export default class FlowBuilderTutorialBranchOne extends SvelteComponent<FlowBuilderTutorialBranchOneProps, FlowBuilderTutorialBranchOneEvents, FlowBuilderTutorialBranchOneSlots> {
     get runTutorial(): (indexToInsertAt?: number | undefined) => void;
 }
 export {};

package/package/components/tutorials/{FlowErrorHandler.svelte → FlowBuilderTutorialErrorHandler.svelte}

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import Tutorial from './Tutorial.svelte';
-import { clickButtonBySelector } from './utils';
+import { clickButtonBySelector, triggerPointerDown } from './utils';
 import { updateProgress } from '../../tutorialUtils';
 const { flowStore } = getContext('FlowEditorContext');
 let tutorial = undefined;
@@ -46,14 +46,14 @@ export function runTutorial() {
 			}
 		},
 		{
-			element: '#error-handler-toggle',
+			element: '#flow-editor-error-handler',
 			popover: {
 				title: 'Error handler',
 				description:
 					'You can add an error handler to your flow. It will be executed if any of the steps in the flow fails.',
 
 				onNextClick: () => {
-					clickButtonBySelector('#error-handler-toggle')
+					triggerPointerDown('#flow-editor-error-handler button')
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -68,26 +68,26 @@ export function runTutorial() {
 			element: '#flow-editor-insert-module'
 		},
 		{
-			element: '#flow-editor-flow-inputs',
+			element: '#flow-editor-flow-providers',
 			popover: {
 				title: 'Action configuration',
 				description: 'An action can be inlined, imported from your workspace or the Hub.'
 			}
 		},
 		{
-			element: '#flow-editor-action-script',
+			element: '#flow-editor-flow-atoms',
 			popover: {
 				title: 'Supported languages',
 				description: 'Windmill support the following languages/runtimes.'
 			}
 		},
 		{
-			element: '#flow-editor-action-script > button:nth-child(1)',
+			element: '#flow-editor-new-bun',
 			popover: {
 				title: 'Typescript',
-				description: "Let's pick an action to add to your flow",
+				description: "Let's create a Typescript error handler for your flow",
 				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-action-script > button > div > button:nth-child(1)')
+					clickButtonBySelector('#flow-editor-new-bun')
 
 					setTimeout(() => {
 						driver.moveNext()

package/package/components/tutorials/FlowBuilderTutorialErrorHandler.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        runTutorial?: (() => void) | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+        skipAll: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowBuilderTutorialErrorHandlerProps = typeof __propDef.props;
+export type FlowBuilderTutorialErrorHandlerEvents = typeof __propDef.events;
+export type FlowBuilderTutorialErrorHandlerSlots = typeof __propDef.slots;
+export default class FlowBuilderTutorialErrorHandler extends SvelteComponent<FlowBuilderTutorialErrorHandlerProps, FlowBuilderTutorialErrorHandlerEvents, FlowBuilderTutorialErrorHandlerSlots> {
+    get runTutorial(): () => void;
+}
+export {};

package/package/components/tutorials/{FlowBuilderTutorialsForLoop.svelte → FlowBuilderTutorialForLoop.svelte}

@@ -1,6 +1,6 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import { emptyFlowModuleState } from '../flows/utils';
-import { clickButtonBySelector, triggerAddFlowStep, selectFlowStepKind, updateFlowModuleById } from './utils';
+import { clickButtonBySelector, updateFlowModuleById, triggerPointerDown } from './utils';
 import Tutorial from './Tutorial.svelte';
 import { updateProgress } from '../../tutorialUtils';
 import { nextId } from '../flows/flowModuleNextId';
@@ -22,7 +22,6 @@ export function runTutorial(indexToInsertAt) {
 	getSteps={(driver, options) => {
 		const id = nextId($flowStateStore, $flowStore)
 		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
-		const isFirst = id === 'a'
 
 		let tempId = ''
 
@@ -41,7 +40,7 @@ export function runTutorial(indexToInsertAt) {
 					title: 'Add a step',
 					description: 'Click here to add a step to your flow',
 					onNextClick: () => {
-						triggerAddFlowStep(index)
+						triggerPointerDown(`#flow-editor-add-step-${index}`)
 
 						setTimeout(() => {
 							driver.moveNext()
@@ -60,16 +59,16 @@ export function runTutorial(indexToInsertAt) {
 
 			{
 				popover: {
-					title: 'Insert loop',
-					description: "Let's pick forloop",
+					title: 'Insert a loop',
+					description: "Let's pick a for loop",
 					onNextClick: () => {
-						selectFlowStepKind(isFirst ? 4 : 3)
+						triggerPointerDown('#flow-editor-flow-kind-for-loop')
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				},
-				element: `#flow-editor-insert-module > div > button:nth-child(${isFirst ? 4 : 3})`
+				element: '#flow-editor-flow-kind-for-loop'
 			},
 
 			{

package/package/components/tutorials/{FlowBranchOne.svelte.d.ts → FlowBuilderTutorialForLoop.svelte.d.ts}

@@ -12,10 +12,10 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type FlowBranchOneProps = typeof __propDef.props;
-export type FlowBranchOneEvents = typeof __propDef.events;
-export type FlowBranchOneSlots = typeof __propDef.slots;
-export default class FlowBranchOne extends SvelteComponent<FlowBranchOneProps, FlowBranchOneEvents, FlowBranchOneSlots> {
+export type FlowBuilderTutorialForLoopProps = typeof __propDef.props;
+export type FlowBuilderTutorialForLoopEvents = typeof __propDef.events;
+export type FlowBuilderTutorialForLoopSlots = typeof __propDef.slots;
+export default class FlowBuilderTutorialForLoop extends SvelteComponent<FlowBuilderTutorialForLoopProps, FlowBuilderTutorialForLoopEvents, FlowBuilderTutorialForLoopSlots> {
     get runTutorial(): (indexToInsertAt?: number | undefined) => void;
 }
 export {};

package/package/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte

@@ -1,10 +1,9 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import { updateProgress } from '../../tutorialUtils';
-import { clickButtonBySelector, isFlowTainted, selectFlowStepKind, setInputBySelector, triggerAddFlowStep } from './utils';
+import { clickButtonBySelector, isFlowTainted, setInputBySelector, triggerPointerDown, waitForElementLoading } from './utils';
 import Tutorial from './Tutorial.svelte';
 const { flowStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
-const queue = [];
 let tutorial = undefined;
 export function runTutorial() {
     tutorial?.runTutorial();
@@ -40,13 +39,12 @@ export function runTutorial() {
 			element: '#svelvet-Input'
 		},
 		{
-			element: '#flow-editor-add-property',
+			element: 'input[placeholder="Field name"]',
 			popover: {
-				title: 'Add a property',
-				description: 'Click here to add a property to your schema',
+				title: 'Name your property',
+				description: 'Give a name to your property. Here we will call it firstname',
 				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-add-property')
-
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -54,27 +52,12 @@ export function runTutorial() {
 			}
 		},
 		{
-			element: '#schema-modal-name',
-			popover: {
-				title: 'Name your property',
-				description: 'Give a name to your property. Here we will call it firstname',
-				onNextClick: () => {
-					setInputBySelector('#schema-modal-name', 'firstname')
-
-					driver.moveNext()
-				}
-			}
-		},
-		{
-			element: '#schema-modal-save',
+			element: '#flow-editor-add-property',
 			popover: {
-				title: 'Save your property',
+				title: 'Add your property',
 				description: 'Click here to save your property',
 				onNextClick: () => {
-					queue.push(JSON.stringify($flowStore))
-
-					clickButtonBySelector('#schema-modal-save')
-
+					clickButtonBySelector('#flow-editor-add-property')
 					setTimeout(() => {
 						driver.moveNext()
 					})
@@ -87,21 +70,13 @@ export function runTutorial() {
 				title: 'Add a step',
 				description: 'Click here to add a step to your flow',
 				onNextClick: () => {
-					triggerAddFlowStep(0)
-
+					triggerPointerDown(`#flow-editor-add-step-0`)
 					setTimeout(() => {
 						driver.moveNext()
 					})
-				},
-
-				onPrevClick: () => {
-					driver.moveTo(1)
-					$flowStore = JSON.parse(queue.pop() || '{}')
-					dispatch('reload')
 				}
 			}
 		},
-
 		{
 			popover: {
 				title: 'Steps kind',
@@ -114,52 +89,55 @@ export function runTutorial() {
 				title: 'Pick an action',
 				description: 'Let’s pick an action to add to your flow',
 				onNextClick: () => {
-					selectFlowStepKind(1)
+					triggerPointerDown('#flow-editor-insert-module > div > div > button:nth-child(1)')
 
 					setTimeout(() => {
 						driver.moveNext()
 					})
 				}
 			},
-			element: '#flow-editor-insert-module > div > button:nth-child(1)'
+			element: '#flow-editor-insert-module > div > div > button:nth-child(1)'
 		},
 		{
-			element: '#flow-editor-flow-inputs',
+			element: '#flow-editor-flow-providers',
 			popover: {
 				title: 'Action configuration',
 				description: 'An action can be inlined, imported from your workspace or the Hub.'
 			}
 		},
 		{
-			element: '#flow-editor-action-script',
+			element: '#flow-editor-flow-atoms',
 			popover: {
 				title: 'Supported languages',
 				description: 'Windmill support the following languages/runtimes.'
 			}
 		},
 		{
-			element: '#flow-editor-action-script-bun',
+			element: '#flow-editor-new-bun',
 			popover: {
 				title: 'Typescript',
-				description: "Let's pick an action to add to your flow",
+				description: "Let's write a script for your flow",
 				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-action-script-bun')
-
-					setTimeout(() => {
+					clickButtonBySelector('#flow-editor-new-bun')
+					waitForElementLoading('#flow-editor-editor', () => {
 						driver.moveNext()
 					})
 				}
 			}
 		},
-
 		{
 			element: '#flow-editor-editor',
 			popover: {
 				title: 'Action editor',
-				description: 'Windmill provides a full code editor to write your actions'
+				description: 'Windmill provides a full code editor to write your actions',
+				onPrevClick: () => {
+					triggerPointerDown(`#flow-editor-add-step-0`)
+					setTimeout(() => {
+						driver.movePrevious()
+					})
+				}
 			}
 		},
-
 		{
 			element: '#flow-editor-step-input',
 			popover: {
@@ -167,7 +145,6 @@ export function runTutorial() {
 				description: 'The schema and the UI is autogenerated from your code'
 			}
 		},
-
 		{
 			element: '#flow-editor-plug',
 			popover: {
@@ -176,7 +153,6 @@ export function runTutorial() {
 					'You can provide static values or connect to other nodes result. Here we will connect to the firstname input',
 				onNextClick: () => {
 					clickButtonBySelector('#flow-editor-plug')
-
 					setTimeout(() => {
 						driver.moveNext()
 					})

package/package/components/tutorials/Tutorial.svelte

@@ -59,7 +59,19 @@ export function renderControls({ config, state }) {
         }
     });
     tutorialControls.$on('previous', () => {
-        tutorial?.movePrevious();
+        const step = tutorial?.getActiveStep();
+        if (step) {
+            if (tutorial?.getActiveStep()?.popover?.onPrevClick) {
+                const activeElement = tutorial?.getActiveElement();
+                tutorial?.getActiveStep()?.popover?.onPrevClick?.(activeElement, step, {
+                    config,
+                    state
+                });
+            }
+            else {
+                tutorial?.movePrevious();
+            }
+        }
     });
     if (popoverDescription) {
         popoverDescription.appendChild(controls);

package/package/components/tutorials/TutorialControls.svelte

@@ -15,10 +15,11 @@ const dispatch = createEventDispatcher();
 		</Alert>
 	{/if}
 	<div class="flex flex-row gap-2 justify-between w-full items-center">
-		<div class="text-xs">
-			Step {activeIndex} of {totalSteps}
-		</div>
-
+		{#if activeIndex !== undefined && totalSteps !== undefined}
+			<div class="text-xs">
+				Step {activeIndex + 1} of {totalSteps}
+			</div>
+		{/if}
 		<div class="flex flex-row gap-2">
 			<Button
 				size="xs2"

package/package/components/tutorials/utils.d.ts

@@ -3,8 +3,7 @@ import type { App } from '../apps/types';
 export declare function setInputBySelector(selector: string, value: string): void;
 export declare function clickButtonBySelector(selector: string): void;
 export declare function clickFirstButtonBySelector(selector: string): void;
-export declare function triggerAddFlowStep(index: number): void;
-export declare function selectFlowStepKind(index: number): void;
+export declare function triggerPointerDown(selector: string): void;
 export declare function selectOptionsBySelector(selector: string, value: string): void;
 export declare function isFlowTainted(flow: OpenFlow): boolean;
 export declare function isAppTainted(app: App): boolean;
@@ -13,3 +12,4 @@ export declare function updateBackgroundRunnableCode(app: App, index: number, ne
 export declare function updateInlineRunnableCode(app: App, componentId: string, newCode: string): void;
 export declare function connectComponentSourceToOutput(app: App, componentId: string, targetId: string): void;
 export declare function connectInlineRunnableInputToComponentOutput(app: App, sourceComponentId: string, sourceField: string, targetComponentId: string, targetField: string, fieldType?: string): void;
+export declare function waitForElementLoading(selector: string, callback: () => void, interval?: number, maxAttempts?: number): void;