feat: new live onboarding for flows (#7194)

* Start workspace onboarding

* Add pictures to tutorial steps

* Remove unecessary step

* Continue tutorial by creating a flow together

* Add image into the Create Flow tutorial pop up

* Generate flow from frontend

* Set pause between each node

* Add automatic scripts overview

* Simplify tutorial, and add step to show the code

* Add input step

* Autoremove last step after 5 seconds

* Add flow typing when opening code editor

* Remove lock field from json file

* Add Guides tab on left menu

* Add /guides page

* Add tutorial card in Guides tab

* Add step to show data connector

* Add second text input to show 2 types of inputs and fill them dynamically

* Improve tutorial chronology

* Add flow input connexion with first sctript

* Improve overlay

* Improve wording

* Add new tutorial step to show node b

* Add test step

* Add cursor to pick typescript

* Improve end of tutorial

* Refactor

* Highlight bottom right corner for 5 and 6

* Fix last step overlay

* change home tutorial button

* guidelines nits

* Automate onNext() trigger on step 3

* Improve fakr cursor for Test this step button

* Improve overlay transitions

* Merge data connectors and test step steps

* Improve live code writing in step 3

* Add a step to complete the flow

* Improve the step where we generate remaining scripts

* Refactor

* Add blocking behavior on step 3

* nit about delay

* Prevent clicking on Next while code not generated

* Sharpen wordings

* Remove Svelte 4 and migrate to Svelte 5

* Remove unecesary helper function

* Add toast if the user clicks on Next button before code finished generating

* Add toasts to each step

* Improve tutorial trigger timing

* Improve delays

* Add cursor movement to Test Flow button

* Block previous on certain steps to prevent bug

* Fix for github npm check

* Fix for github npm check

* Unlike workspace onboarding and flow tutorial

* Rename flow tutorial with better name

* Remove the automatic trigger for flow previous and broken tutorial

* Push tutorials to Help sectionof the sidebar

* Fix redirection t /tutorials page

* Add tutorials page and update workspace onboarding flow

- Rename guides to tutorials page (/tutorials)
- Add workspace onboarding tutorial to tutorials page
- Remove Tutorial button from homepage
- Add welcome cards for empty workspace with 3 tutorial options
- Update workspace onboarding to redirect to homepage before starting
- Clean up URL parameter after tutorial completion
- Move Tutorials to Help menu in sidebar
- Remove automatic "action" tutorial trigger for new flows
- Add flow-live-tutorial (renamed from workspace-onboarding-continue)
- Add Previous button blocking with toast notifications in flow tutorial

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Add tutorials to workspace homepage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Start tutorials for Run/logs section

* Fix data connector

* Add flow execution graph from Run drawer

* Add tabs highlighting in drawer

* Improve tutorial on run drawer

* Add mouse cursor moving from graph tab

* Add cursor click on script in Drawer Graph tabs

* Add troubleshooting flow in tutorial

* Add step to show logs of failed step

* add step 7 to invite the user to fix by himself and se the new results

* Improve wording

* Nit improvements

* Nits

* Refactor

* Refactor

* Rename the tutorial

* Remove deleted file

* Improve wording

* Improve first step of troubleshooting flow tutorial

* Add tutorials to /tutorials page and create component

* Remove previous Flow tutorials

* Fixes, and improve tutorial button design

* Improve status in Tutorial button

* Align tutorial button to brand guidelines

* Add skip all to onboarding workspace tutorial

* Add skipped_all to tutorial_progress

* Connect backend and frontend for tutorial progress

* Add store and helper to display or not Tutorials from left menu

* Add reminder at the end of each tutorial

* Add tutorial banner

* Remove tutorials from elpty workspace

* Improve Tutorials page

* Align banner to guidelines

* Add reset tutorials buttons

* Refactor

* Refactor to make it easy to add new tutorials and tabs

* Improve tutorial config to make it easy to add new tutorials

* Refactor and remove hardcoded indexes

* Add getTutorialIndex in tutorial config file

* Nit

* Add Mark all as complete button in tutorial page

* Add skip tutorial button in banner toast

* Replace if else in tutorials router by map to make it easier to maintain and scale

* Delete broken simple app tutorial

* Add Guide flow guide buttons inside the Create Flow page

* Add flow editor tutorials into flow builder page

* Update existing app tutorials with new tutorial system

* Create a dedicated tutorial category for app editor

* Add global progress bar

* Add Reset & Skip at tutorial category level

* Add progress to tab title

* Nits on design

* Make progress bar a props and design nits

* Add active props for Tutorial Category

* Display tutorials according to the user role

* Adapt progress bar to the user role

* Add roles array for each tutorial

* Add Tutorials tab in Operator menu

* Edge case if no Category and no Tutorial available for my role

* Allow the user to reset a single tutorial

* Allow a user to mark as completed a single tutorial

* Nit on hoovering tutorial status

* Allow admins to see which tutorials are available per role

* Create utils that allow admins to see which tutorials can access other roles of their organization

* Refactor resetSingleTutorial and completeSingleTutorial into one function

* Improve role system

* Remove hardcoded MAX_TUTORIAL_ID

* Fix type assertion

* Remove console log

* Reduce recalculations when unrelated state changes

* Add console.error

* Remove unused function

* Add tutorial wrapper and better router

* Nits to pass npm checks

* Fix typescripts and lint errors

* Add SQLx query cache for tutorial_progress queries

* Improve wording for workspace tutorial

---------

Co-authored-by: Diego Imbert <diego@windmill.dev>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

Author: 4 people

backend/.sqlx/query-04362a55081f7a98bca8fe4db0669939da8944711037957664cc2989b239c9d1.json

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

backend/.sqlx/query-f3b7ea04830022f918f9302b4d40f57c9c9c48192bc2293986c8abb54ae94446.json

@@ -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/migrations/20251203131741_add_skipped_all_to_tutorial_progress.down.sql

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

backend/migrations/20251203131741_add_skipped_all_to_tutorial_progress.up.sql

@@ -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?;

backend/windmill-api/openapi.yaml

@@ -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
+		}
+	]}
 />

backend/windmill-api/src/users.rs

@@ -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"