feat: new live onboarding for flows

backend/migrations/20251203131741_add_skipped_all_to_tutorial_progress.down.sql

@@ -0,0 +1,3 @@
+-- Remove skipped_all column from tutorial_progress table
+ALTER TABLE tutorial_progress 
+DROP COLUMN skipped_all;

backend/migrations/20251203131741_add_skipped_all_to_tutorial_progress.up.sql

@@ -0,0 +1,5 @@
+-- Add skipped_all column to tutorial_progress table
+ALTER TABLE tutorial_progress 
+ADD COLUMN skipped_all BOOLEAN NOT NULL DEFAULT FALSE;
+
+COMMENT ON COLUMN tutorial_progress.skipped_all IS 'Indicates if the user has skipped all tutorials (vs completing them all)';

backend/windmill-api/openapi.yaml

@@ -1335,6 +1335,8 @@ paths:
                 properties:
                   progress:
                     type: integer
+                  skipped_all:
+                    type: boolean
     post:
       summary: update tutorial progress
       operationId: updateTutorialProgress
@@ -1350,6 +1352,8 @@ paths:
               properties:
                 progress:
                   type: integer
+                skipped_all:
+                  type: boolean
       responses:
         "200":
           description: tutorial progress

backend/windmill-api/src/users.rs

@@ -562,31 +562,42 @@ async fn list_users_as_super_admin(
 #[derive(Serialize, Deserialize)]
 struct Progress {
     progress: u64,
+    skipped_all: bool,
 }
 async fn get_tutorial_progress(
     authed: ApiAuthed,
     Extension(db): Extension<DB>,
 ) -> JsonResult<Progress> {
-    let res = sqlx::query_scalar!(
-        "SELECT progress::bigint FROM tutorial_progress WHERE email = $1",
+    let row = sqlx::query!(
+        "SELECT progress::bigint as progress, skipped_all FROM tutorial_progress WHERE email = $1",
         authed.email
     )
     .fetch_optional(&db)
-    .await?
-    .flatten()
-    .unwrap_or_default() as u64;
-    Ok(Json(Progress { progress: res }))
+    .await?;
+
+    if let Some(row) = row {
+        Ok(Json(Progress {
+            progress: row.progress.unwrap_or_default() as u64,
+            skipped_all: row.skipped_all,
+        }))
+    } else {
+        Ok(Json(Progress {
+            progress: 0,
+            skipped_all: false,
+        }))
+    }
 }
 
 async fn update_tutorial_progress(
     authed: ApiAuthed,
     Extension(db): Extension<DB>,
     Json(progress): Json<Progress>,
 ) -> Result<String> {
-    sqlx::query_scalar!(
-        "INSERT INTO tutorial_progress VALUES ($2, $1::bigint::bit(64)) ON CONFLICT (email) DO UPDATE SET progress = EXCLUDED.progress",
+    sqlx::query!(
+        "INSERT INTO tutorial_progress (email, progress, skipped_all) VALUES ($2, $1::bigint::bit(64), $3) ON CONFLICT (email) DO UPDATE SET progress = EXCLUDED.progress, skipped_all = EXCLUDED.skipped_all",
         progress.progress as i64,
-        authed.email
+        authed.email,
+        progress.skipped_all
     )
     .execute(&db)
     .await?;

frontend/src/lib/components/AppTutorials.svelte

@@ -1,51 +1,29 @@
 <script lang="ts">
-	import { skipAllTodos } from '$lib/tutorialUtils'
-	import AppTutorial from './tutorials/app/AppTutorial.svelte'
+	import TutorialRouter from './tutorials/TutorialRouter.svelte'
 	import BackgroundRunnablesTutorial from './tutorials/app/BackgroundRunnablesTutorial.svelte'
 	import ConnectionTutorial from './tutorials/app/ConnectionTutorial.svelte'
 
-	let backgroundRunnablesTutorial: BackgroundRunnablesTutorial | undefined = undefined
-	let connectionTutorial: ConnectionTutorial | undefined = undefined
-	let appTutorial: AppTutorial | undefined = undefined
+	let tutorialRouter: TutorialRouter | undefined = $state(undefined)
 
 	export function runTutorialById(id: string, options?: { skipStepsCount?: number }) {
-		if (id === 'backgroundrunnables') {
-			backgroundRunnablesTutorial?.runTutorial(options?.skipStepsCount)
-		} else if (id === 'connection') {
-			connectionTutorial?.runTutorial()
-		} else if (id === 'simpleapptutorial') {
-			appTutorial?.runTutorial()
-		}
-	}
-
-	function skipAll() {
-		skipAllTodos()
+		tutorialRouter?.runTutorialById(id, options)
 	}
 </script>
 
-<AppTutorial
-	bind:this={appTutorial}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-	index={7}
-	name="simpleapptutorial"
-/>
-
-<BackgroundRunnablesTutorial
-	bind:this={backgroundRunnablesTutorial}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-	index={5}
-	name="backgroundrunnables"
-/>
-
-<ConnectionTutorial
-	bind:this={connectionTutorial}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-	index={6}
-	name="connection"
+<TutorialRouter
+	bind:this={tutorialRouter}
+	tutorials={[
+		{
+			id: 'backgroundrunnables',
+			component: BackgroundRunnablesTutorial,
+			name: 'backgroundrunnables',
+			supportsSkipSteps: true
+		},
+		{
+			id: 'connection',
+			component: ConnectionTutorial,
+			name: 'connection',
+			supportsSkipSteps: true
+		}
+	]}
 />

frontend/src/lib/components/FlowBuilder.svelte

@@ -13,7 +13,6 @@
 	import { initHistory, redo, undo } from '$lib/history.svelte'
 	import {
 		enterpriseLicense,
-		tutorialsToDo,
 		userStore,
 		workspaceStore,
 		usedTriggerKinds
@@ -61,11 +60,10 @@
 	import { getAllModules } from './flows/flowExplorer'
 	import { type FlowCopilotContext } from './copilot/flow'
 	import { loadFlowModuleState } from './flows/flowStateUtils.svelte'
-	import FlowBuilderTutorials from './FlowBuilderTutorials.svelte'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
 	import FlowTutorials from './FlowTutorials.svelte'
-	import { ignoredTutorials } from './tutorials/ignoredTutorials'
 	import FlowHistory from './flows/FlowHistory.svelte'
+	import FlowEditorTutorial from './flows/FlowEditorTutorial.svelte'
 	import Summary from './Summary.svelte'
 	import type { FlowBuilderWhitelabelCustomUi } from './custom_ui'
 	import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte'
@@ -805,8 +803,6 @@
 
 		if (tutorial) {
 			flowTutorials?.runTutorialById(tutorial)
-		} else if ($tutorialsToDo.includes(0) && !$ignoredTutorials.includes(0)) {
-			flowTutorials?.runTutorialById('action')
 		}
 	}
 
@@ -1110,13 +1106,7 @@
 							<Dropdown items={moreItems} />
 						{/if}
 					</div>
-					{#if customUi?.topBar?.tutorials != false}
-						<FlowBuilderTutorials
-							on:reload={() => {
-								renderCount += 1
-							}}
-						/>
-					{/if}
+					<FlowEditorTutorial />
 					{#if customUi?.topBar?.diff != false}
 						<Button
 							variant="default"