From aaf83859bd268e8bf8ecb382c2b39a92ddb40967 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 17 Oct 2023 22:44:47 +0200
Subject: [PATCH] feat(frontend): app editor tutorials (#2443)

* feat(frontend): wip

* feat(frontend): skeleton done

* feat(frontend): background runnables

* feat(frontend): fix build

* feat(frontend): finish background runnable tuto

* feat(frontend): connection output

* feat(frontend): add simple app tutorial

* feat(frontend): add simple app trigger

* feat(frontend): fix wording

* feat(frontend): remove duplicate code

* feat(frontend): wip tutorial rework

* feat(frontend): Tutorial done

* feat(frontend): Fix build
---
 .../src/lib/components/AppTutorials.svelte    |  51 ++++
 .../components/apps/editor/AppEditor.svelte   |   9 +-
 .../apps/editor/AppEditorHeader.svelte        |   8 +
 .../apps/editor/AppEditorTutorial.svelte      | 127 ++++++++
 .../apps/editor/ComponentHeader.svelte        |   3 +-
 .../components/apps/editor/GridEditor.svelte  |   4 +-
 .../apps/editor/PreviewToggle.svelte          |   1 +
 .../componentsPanel/ComponentList.svelte      |   8 +-
 .../components/OutputHeader.svelte            |   1 +
 .../EmptyInlineScript.svelte                  |  13 +-
 .../InlineScriptsPanelList.svelte             |  15 +-
 .../ComponentInputTypeEditor.svelte           |  10 +-
 .../settingsPanel/ComponentPanel.svelte       |  11 +-
 .../settingsPanel/InputsSpecEditor.svelte     |   1 +
 .../settingsPanel/common/PanelSection.svelte  |   2 +
 .../mainInput/RunnableSelector.svelte         |   1 +
 .../script/shared/ScriptTransformer.svelte    |   5 +-
 .../src/lib/components/common/tabs/Tab.svelte |   2 +
 .../toggleButton-v2/ToggleButton.svelte       |  55 ++--
 .../flows/map/FlowModuleSchemaMap.svelte      |   7 +-
 .../flows/pickers/FlowScriptPicker.svelte     |   3 +
 .../components/tutorials/FlowBranchAll.svelte |   6 +-
 .../components/tutorials/FlowBranchOne.svelte |   6 +-
 .../FlowBuilderTutorialsForLoop.svelte        |   6 +-
 .../lib/components/tutorials/Tutorial.svelte  |  14 +-
 .../components/tutorials/TutorialItem.svelte  |  11 +-
 .../tutorials/app/AppTutorial.svelte          | 283 ++++++++++++++++++
 .../app/BackgroundRunnablesTutorial.svelte    |  89 ++++++
 .../tutorials/app/ConnectionTutorial.svelte   | 127 ++++++++
 .../app/ExpressionEvaluationTutorial.svelte   |  29 ++
 .../src/lib/components/tutorials/utils.ts     |  88 ++++++
 frontend/src/lib/tutorialUtils.ts             |   8 +-
 32 files changed, 937 insertions(+), 67 deletions(-)
 create mode 100644 frontend/src/lib/components/AppTutorials.svelte
 create mode 100644 frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
 create mode 100644 frontend/src/lib/components/tutorials/app/AppTutorial.svelte
 create mode 100644 frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
 create mode 100644 frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
 create mode 100644 frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte

diff --git a/frontend/src/lib/components/AppTutorials.svelte b/frontend/src/lib/components/AppTutorials.svelte
new file mode 100644
index 0000000000..f32c613bb3
--- /dev/null
+++ b/frontend/src/lib/components/AppTutorials.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { skipAllTodos } from '$lib/tutorialUtils'
+	import AppTutorial from './tutorials/app/AppTutorial.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
+
+	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()
+	}
+</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"
+/>
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index ff42c37e03..cc36fd217f 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -396,6 +396,12 @@
 			existingElement.innerHTML = theme
 		}
 	}
+
+	let appEditorHeader: AppEditorHeader | undefined = undefined
+
+	export function triggerTutorial() {
+		appEditorHeader?.toggleTutorial()
+	}
 </script>
 
 <DarkModeObserver on:change={onThemeChange} />
@@ -404,7 +410,7 @@
 
 {#if !$userStore?.operator}
 	{#if $appStore}
-		<AppEditorHeader on:restore {versions} {policy} {fromHub} />
+		<AppEditorHeader on:restore {versions} {policy} {fromHub} bind:this={appEditorHeader} />
 
 		{#if $mode === 'preview'}
 			<SplitPanesWrapper>
@@ -530,6 +536,7 @@
 												selectedTab = 'insert'
 											}
 										}}
+										id="app-editor-component-library-tab"
 									>
 										<div class="m-1 center-center">
 											<Plus size={18} />
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index fda5dfed57..eba2e20182 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -62,6 +62,7 @@
 	import { secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel/secondaryMenu'
 	import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte'
 	import { MenuItem } from '@rgossiaux/svelte-headlessui'
+	import AppEditorTutorial from './AppEditorTutorial.svelte'
 
 	async function hash(message) {
 		try {
@@ -432,6 +433,12 @@
 			}
 		}
 	]
+
+	let appEditorTutorial: AppEditorTutorial | undefined = undefined
+
+	export function toggleTutorial() {
+		appEditorTutorial?.toggleTutorial()
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -835,6 +842,7 @@
 		<Awareness />
 	{/if}
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
+		<AppEditorTutorial bind:this={appEditorTutorial} />
 		<ButtonDropdown hasPadding={false}>
 			<svelte:fragment slot="buttonReplacement">
 				<Button nonCaptureEvent size="xs" color="light">
diff --git a/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
new file mode 100644
index 0000000000..5ea89e58ec
--- /dev/null
+++ b/frontend/src/lib/components/apps/editor/AppEditorTutorial.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import Button from '$lib/components/common/button/Button.svelte'
+	import AppTutorials from '../../AppTutorials.svelte'
+	import { BookOpen } from 'lucide-svelte'
+
+	import ButtonDropdown from '$lib/components/common/button/ButtonDropdown.svelte'
+	import TutorialItem from '$lib/components/tutorials/TutorialItem.svelte'
+	import MenuItem from '$lib/components/common/menu/MenuItem.svelte'
+	import { classNames } from '$lib/utils'
+	import { resetAllTodos, skipAllTodos } from '$lib/tutorialUtils'
+	import { getContext, onMount } from 'svelte'
+	import type { AppViewerContext } from '../types'
+	import { ignoredTutorials } from '$lib/components/tutorials/ignoredTutorials'
+	import { tutorialsToDo } from '$lib/stores'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import { isAppTainted } from '$lib/components/tutorials/utils'
+
+	let appTutorials: AppTutorials | undefined = undefined
+	let targetTutorial: string | undefined = undefined
+
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
+
+	onMount(() => {
+		if (!isAppTainted($app) && !$ignoredTutorials.includes(7) && $tutorialsToDo.includes(7)) {
+			appTutorials?.runTutorialById('simpleapptutorial')
+		}
+	})
+
+	export function toggleTutorial() {
+		const urlParams = new URLSearchParams(window.location.search)
+		const tutorial = urlParams.get('tutorial')
+
+		if (tutorial === 'simpleapptutorial') {
+			appTutorials?.runTutorialById('simpleapptutorial')
+		}
+	}
+</script>
+
+<ButtonDropdown hasPadding={false}>
+	<svelte:fragment slot="buttonReplacement">
+		<Button nonCaptureEvent size="xs" color="light" variant="border">
+			<div class="flex flex-row items-center gap-2">
+				<BookOpen size={16} />
+				Tutorials
+			</div>
+		</Button>
+	</svelte:fragment>
+	<svelte:fragment slot="items">
+		<TutorialItem
+			on:click={() => appTutorials?.runTutorialById('simpleapptutorial')}
+			label="App tutorial"
+			index={7}
+		/>
+		<TutorialItem
+			on:click={() => appTutorials?.runTutorialById('backgroundrunnables')}
+			label="Background runnables"
+			index={5}
+		/>
+		<TutorialItem
+			on:click={() => appTutorials?.runTutorialById('connection')}
+			label="Connection"
+			index={6}
+		/>
+
+		<div class="border-t border-surface-hover" />
+		<MenuItem
+			on:click={() => {
+				resetAllTodos()
+			}}
+		>
+			<div
+				class={classNames(
+					'text-primary flex flex-row items-center text-left gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
+				)}
+			>
+				Reset tutorials
+			</div>
+		</MenuItem>
+		<MenuItem on:click={() => skipAllTodos()}>
+			<div
+				class={classNames(
+					'text-primary flex flex-row items-center text-left gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
+				)}
+			>
+				Skip tutorials
+			</div>
+		</MenuItem>
+	</svelte:fragment>
+</ButtonDropdown>
+
+<AppTutorials
+	bind:this={appTutorials}
+	on:reload
+	on:error={({ detail }) => {
+		targetTutorial = detail.detail
+	}}
+/>
+
+<ConfirmationModal
+	open={targetTutorial !== undefined}
+	title="Tutorial error"
+	confirmationText="Open new tab"
+	on:canceled={() => {
+		targetTutorial = undefined
+	}}
+	on:confirmed={async () => {
+		window.open(`/apps/add?tutorial=${targetTutorial}&nodraft=true`, '_blank')
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span> This tutorial can only be run on a new app.</span>
+	</div>
+</ConfirmationModal>
+
+<style global>
+	.driver-popover-title {
+		@apply leading-6 text-primary text-base;
+	}
+
+	.driver-popover-description {
+		@apply text-secondary text-sm;
+	}
+
+	.driver-popover {
+		@apply p-6 bg-surface max-w-2xl;
+	}
+</style>
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index fe561c68ee..2cf4fab52f 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -37,9 +37,10 @@
 
 {#if connecting}
 	<div class="absolute z-50 left-6 -top-[11px]">
-		<Popup floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}>
+		<Popup floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}>
 			<svelte:fragment slot="button">
 				<button
+					id={`connect-output-${component.id}`}
 					class="bg-red-500/70 border border-red-600 px-1 py-0.5"
 					title="Outputs"
 					aria-label="Open output"><Plug2 size={12} /></button
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index ac4a47adee..0ca4f67e71 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -81,9 +81,9 @@
 	>
 		<div
 			class={twMerge(
-				!$focusedGrid && $mode !== 'preview' ? 'border-dashed' : '',
+				!$focusedGrid && $mode !== 'preview' ? 'outline-dashed' : '',
 				'subgrid',
-				'border-[#999999] dark:border-[#aaaaaa] border '
+				'outline-[#999999] dark:outline-[#aaaaaa] outline-dotted outline-offset-2 outline-1'
 			)}
 			style={`transform: scale(${$scale / 100})`}
 		>
diff --git a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
index ff5dc6dea4..974c1352a1 100644
--- a/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
+++ b/frontend/src/lib/components/apps/editor/PreviewToggle.svelte
@@ -19,5 +19,6 @@
 		icon={Eye}
 		tooltip="Preview mode"
 		disabled={loading}
+		id="app-editor-preview-toggle"
 	/>
 </ToggleButtonGroup>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 4d5537b846..40b596ba34 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -51,7 +51,6 @@
 		if (!$workspaceStore) return
 		const res = await getGroup($workspaceStore, group.path)
 
-		console.log(res)
 		if (!res) return
 
 		push(history, $app)
@@ -108,21 +107,22 @@
 	<ClearableInput bind:value={search} placeholder="Search components..." />
 </section>
 
-<div class="relative">
-	{#if componentsFiltered.reduce((acc, { components }) => acc + components.length, 0) === 0}
+<div class="relative" id="app-editor-component-list">
+	{#if componentsFiltered.reduce((acc, { components, presets }) => acc + components.length + (Array.isArray(presets) ? presets.length : 0), 0) === 0}
 		<div class="absolute left-0 top-0 w-full text-sm text-tertiary text-center py-6 px-2">
 			No components found
 		</div>
 	{:else}
 		<div>
 			{#each componentsFiltered as { title, components, presets }, index (index)}
-				{#if components.length}
+				{#if components.length || presets?.length}
 					<div>
 						<ListItem title={`${title} (${components.length})`}>
 							<div class="flex flex-wrap gap-3 py-2">
 								{#each components as item (item)}
 									<div class="w-20">
 										<button
+											id={item}
 											on:click={() => addComponent(item)}
 											title={componentsRecord[item].name}
 											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
index b0a3863df5..a5f10e849e 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/components/OutputHeader.svelte
@@ -186,6 +186,7 @@
 				$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
 			}
 		}}
+		id={`output-${id}`}
 	>
 		<div class="flex">
 			<button
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index fcc667f9af..107e23bd8e 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -156,8 +156,12 @@
 	</DrawerContent>
 </Drawer>
 
-<div class="flex flex-col px-4 gap-2 text-sm" in:fly={{ duration: 50 }}>
-	<div class="mt-2 flex justify-between gap-4">
+<div
+	class="flex flex-col px-4 gap-2 text-sm"
+	in:fly={{ duration: 50 }}
+	id="app-editor-empty-runnable"
+>
+	<div class="mt-2 flex justify-between gap-4" id="app-editor-runnable-header">
 		<div class="font-bold items-baseline truncate">Choose a language</div>
 		<div class="flex gap-2">
 			{#if showScriptPicker}
@@ -187,7 +191,7 @@
 	</div>
 
 	<div class="flex flex-row w-full gap-8">
-		<div class="">
+		<div id="app-editor-backend-runnables">
 			<div class="mb-1 text-sm font-semibold">Backend</div>
 
 			<div class="flex flex-row flex-wrap gap-2">
@@ -198,11 +202,12 @@
 						on:click={() => {
 							createInlineScriptByLanguage(lang, name)
 						}}
+						id={`create-${lang}-script`}
 					/>
 				{/each}
 			</div>
 		</div>
-		<div class="">
+		<div id="app-editor-frontend-runnables">
 			<div class="mb-1 text-sm font-semibold">
 				Frontend
 				<Tooltip
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 460d6e6832..6cb3c966ff 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -7,6 +7,10 @@
 	import { BG_PREFIX, getAllScriptNames } from '../../utils'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
 	import { getAppScripts } from './utils'
+	import AppTutorials from '$lib/components/AppTutorials.svelte'
+	import { tutorialsToDo } from '$lib/stores'
+	import { ignoredTutorials } from '$lib/components/tutorials/ignoredTutorials'
+	import { tutorialInProgress } from '$lib/tutorialUtils'
 
 	const PREFIX = 'script-selector-' as const
 
@@ -35,6 +39,10 @@
 	}
 
 	function createBackgroundScript() {
+		if ($tutorialsToDo.includes(5) && !$ignoredTutorials?.includes(5) && !tutorialInProgress()) {
+			appTutorials?.runTutorialById('backgroundrunnables', { skipStepsCount: 2 })
+		}
+
 		for (const [index, script] of $app.hiddenInlineScripts.entries()) {
 			if (script.hidden) {
 				delete script.hidden
@@ -68,9 +76,11 @@
 		$app.hiddenInlineScripts = $app.hiddenInlineScripts
 		selectScript(`${BG_PREFIX}${$app.hiddenInlineScripts.length - 1}`)
 	}
+
+	let appTutorials: AppTutorials | undefined = undefined
 </script>
 
-<PanelSection title="Runnables">
+<PanelSection title="Runnables" id="app-editor-runnable-panel">
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>
 			<div class="flex flex-col gap-2 w-full">
@@ -178,6 +188,7 @@
 					title="Create a new background runnable"
 					aria-label="Create a new background runnable"
 					on:click={createBackgroundScript}
+					id="create-background-runnable"
 				>
 					<Plus size={14} class="!text-primary" />
 				</Button>
@@ -222,6 +233,8 @@
 	</div>
 </PanelSection>
 
+<AppTutorials bind:this={appTutorials} on:reload />
+
 <style lang="postcss">
 	.panel-item {
 		@apply border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200;
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
index 77055383d4..139bf5014b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
@@ -12,6 +12,7 @@
 	export let componentInput: AppInput
 	export let disableStatic: boolean = false
 	export let evalV2editor: EvalV2InputEditor | undefined
+	export let id: string
 
 	const { onchange, connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -90,7 +91,13 @@
 					label="Eval"
 				/>
 
-				<ToggleButton value="runnable" icon={Code} iconOnly={clientWidth < 250} label="Compute" />
+				<ToggleButton
+					value="runnable"
+					icon={Code}
+					iconOnly={clientWidth < 250}
+					label="Compute"
+					id="data-source-compute"
+				/>
 			</ToggleButtonGroup>
 			<div class="flex">
 				<Button
@@ -98,6 +105,7 @@
 					variant="border"
 					color="light"
 					title="Connect"
+					id={`plug`}
 					on:click={() => {
 						$connectingInput = {
 							opened: true,
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 901e3889d0..7e76a82ea2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -192,6 +192,7 @@
 					: hasInteraction
 					? 'Event handler'
 					: 'Data source'}
+				id={'component-input'}
 			>
 				<svelte:fragment slot="action">
 					<span
@@ -208,6 +209,7 @@
 					<ComponentInputTypeEditor
 						{evalV2editor}
 						bind:componentInput={componentSettings.item.data.componentInput}
+						id={component.id}
 					/>
 
 					<div class="flex flex-col w-full gap-2 mt-2">
@@ -244,8 +246,9 @@
 											{#each componentSettings.item.data?.componentInput.connections as connection (connection.componentId + '-' + connection.id)}
 												<span
 													class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border"
-													>{connection.componentId + '.' + connection.id}</span
 												>
+													{connection.componentId + '.' + connection.id}
+												</span>
 											{/each}
 										</div>
 									</div>
@@ -261,9 +264,9 @@
 								id={component.id}
 								bind:componentInput={componentSettings.item.data.componentInput}
 							/>
-							<a class="text-2xs" on:click={transformToFrontend} href="#"
-								>transform to a frontend script</a
-							>
+							<a class="text-2xs" on:click={transformToFrontend} href="#">
+								transform to a frontend script
+							</a>
 						{:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined}
 							<RunnableInputEditor
 								appComponent={component}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 3b4a4e7ed6..fb57166123 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -130,6 +130,7 @@
 									onConnect: applyConnection
 								}
 							}}
+							id="schema-plug"
 						>
 							<Plug size={14} />
 						</Button>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
index ef3ec3b7a4..160b5de8b8 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
@@ -7,6 +7,7 @@
 	export let titlePadding: string = ''
 	export let tooltip = ''
 	export let documentationLink: string | undefined = undefined
+	export let id: string | undefined = undefined
 </script>
 
 <div
@@ -15,6 +16,7 @@
 		'flex flex-col h-full gap-2 items-start',
 		noPadding ? '' : 'p-3'
 	)}
+	{id}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">
 		<div class="text-xs inline-flex items-center font-semibold text-primary {titlePadding} gap-1">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index b46bab9822..59bef0b919 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -196,6 +196,7 @@
 			variant="border"
 			startIcon={{ icon: faPlus }}
 			btnClasses="truncate w-full"
+			id="app-editor-create-inline-script"
 		>
 			Create an inline script
 		</Button>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
index 3fe90ad764..11b7ecae62 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
@@ -13,7 +13,10 @@
 	$: checked = Boolean(appInput.transformer)
 </script>
 
-<div class="text-sm font-semibold justify-between flex flex-row items-center">
+<div
+	class="text-sm font-semibold justify-between flex flex-row items-center"
+	id="app-editor-script-transformer"
+>
 	<div class="flex flex-row items-center gap-2">
 		Transformer
 
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index 3c76fe4d4a..f0c37ba7f5 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -10,6 +10,7 @@
 	export let style = ''
 	export let selectedClass = ''
 	export let selectedStyle = ''
+	export let id: string | undefined = undefined
 
 	export let disabled: boolean = false
 
@@ -45,6 +46,7 @@
 	}}
 	on:pointerdown|stopPropagation
 	{disabled}
+	{id}
 >
 	<slot />
 </button>
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index b97a255ccb..babd3c7fb5 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -18,6 +18,7 @@
 	export let iconProps: Record<string, any> = {}
 	export let showTooltipIcon: boolean = false
 	export let documentationLink: string | undefined = undefined
+	export let id: string | undefined = undefined
 
 	const { select, selected } = getContext<ToggleButtonContext>('ToggleButtonGroup')
 </script>
@@ -29,31 +30,35 @@
 	disappearTimeout={0}
 	{documentationLink}
 >
-	<Tab
-		{disabled}
-		class={twMerge(
-			' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
-			small ? 'px-1 py-0.5' : 'px-2 py-1',
-			$selected === value ? 'bg-surface shadow-md' : 'bg-surface-secondary hover:bg-surface-hover',
-			$$props.class
-		)}
-		on:click={() => select(value)}
-	>
-		{#if icon}
-			<svelte:component
-				this={icon}
-				size={14}
-				color={$selected === value ? selectedColor : '#9CA3AF'}
-				{...iconProps}
-			/>
-		{/if}
-		{#if label && !iconOnly}
-			{label}
-		{/if}
-		{#if showTooltipIcon}
-			<Info size={14} class="text-gray-400" />
-		{/if}
-	</Tab>
+	<div {id} class="flex">
+		<Tab
+			{disabled}
+			class={twMerge(
+				' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+				small ? 'px-1 py-0.5' : 'px-2 py-1',
+				$selected === value
+					? 'bg-surface shadow-md'
+					: 'bg-surface-secondary hover:bg-surface-hover',
+				$$props.class
+			)}
+			on:click={() => select(value)}
+		>
+			{#if icon}
+				<svelte:component
+					this={icon}
+					size={14}
+					color={$selected === value ? selectedColor : '#9CA3AF'}
+					{...iconProps}
+				/>
+			{/if}
+			{#if label && !iconOnly}
+				{label}
+			{/if}
+			{#if showTooltipIcon}
+				<Info size={14} class="text-gray-400" />
+			{/if}
+		</Tab>
+	</div>
 	<svelte:fragment slot="text">
 		{tooltip}
 	</svelte:fragment>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index e3be4f5513..5fa6b4b7f3 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -26,6 +26,7 @@
 
 	import FlowTutorials from '$lib/components/FlowTutorials.svelte'
 	import { ignoredTutorials } from '$lib/components/tutorials/ignoredTutorials'
+	import { tutorialInProgress } from '$lib/tutorialUtils'
 
 	export let modules: FlowModule[] | undefined
 	export let sidebarSize: number | undefined = undefined
@@ -142,13 +143,11 @@
 		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
 
 	function shouldRunTutorial(tutorialName: string, name: string, index: number) {
-		const svg = document.getElementsByClassName('driver-overlay driver-overlay-animated')
-
 		return (
 			$tutorialsToDo.includes(index) &&
 			name == tutorialName &&
-			svg.length === 0 &&
-			!$ignoredTutorials.includes(index)
+			!$ignoredTutorials.includes(index) &&
+			!tutorialInProgress()
 		)
 	}
 </script>
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
index f11ca3f1ed..0c1b10103d 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
@@ -18,7 +18,9 @@
 		| 'powershell'
 		| undefined = undefined
 	export let icon: IconDefinition | undefined = undefined
+
 	export let iconColor: string | undefined = undefined
+	export let id: string | undefined = undefined
 
 	const enterpriseLangs = ['bigquery', 'snowflake']
 </script>
@@ -36,6 +38,7 @@
 			classes: iconColor
 		}}
 		disabled={disabled || (enterpriseLangs.includes(lang || '') && !$enterpriseLicense)}
+		{id}
 	>
 		<div class="flex justify-center flex-col items-center gap-2">
 			{#if lang}
diff --git a/frontend/src/lib/components/tutorials/FlowBranchAll.svelte b/frontend/src/lib/components/tutorials/FlowBranchAll.svelte
index b634d9742b..e3286b09fa 100644
--- a/frontend/src/lib/components/tutorials/FlowBranchAll.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBranchAll.svelte
@@ -11,7 +11,7 @@
 	let tutorial: Tutorial | undefined = undefined
 
 	export function runTutorial(indexToInsertAt?: number | undefined) {
-		tutorial?.runTutorial(indexToInsertAt)
+		tutorial?.runTutorial({ indexToInsertAt })
 	}
 </script>
 
@@ -21,9 +21,9 @@
 	name="branchall"
 	on:error
 	on:skipAll
-	getSteps={(driver, indexToInsertAt) => {
+	getSteps={(driver, options) => {
 		const id = nextId($flowStateStore, $flowStore)
-		const index = indexToInsertAt ?? $flowStore.value.modules.length
+		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
 		const isFirst = id === 'a'
 
 		const steps = [
diff --git a/frontend/src/lib/components/tutorials/FlowBranchOne.svelte b/frontend/src/lib/components/tutorials/FlowBranchOne.svelte
index c72d2e34cd..06520923d4 100644
--- a/frontend/src/lib/components/tutorials/FlowBranchOne.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBranchOne.svelte
@@ -17,7 +17,7 @@
 	let tutorial: Tutorial | undefined = undefined
 
 	export function runTutorial(indexToInsertAt?: number | undefined) {
-		tutorial?.runTutorial(indexToInsertAt)
+		tutorial?.runTutorial({ indexToInsertAt })
 	}
 </script>
 
@@ -27,9 +27,9 @@
 	name="branchone"
 	on:error
 	on:skipAll
-	getSteps={(driver, indexToInsertAt) => {
+	getSteps={(driver, options) => {
 		const id = nextId($flowStateStore, $flowStore)
-		const index = indexToInsertAt ?? $flowStore.value.modules.length
+		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
 		const isFirst = id === 'a'
 
 		const steps = [
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte
index 612654b392..e740d43b54 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialsForLoop.svelte
@@ -19,7 +19,7 @@
 	let tutorial: Tutorial | undefined = undefined
 
 	export function runTutorial(indexToInsertAt?: number | undefined) {
-		tutorial?.runTutorial(indexToInsertAt)
+		tutorial?.runTutorial({ indexToInsertAt })
 	}
 </script>
 
@@ -30,9 +30,9 @@
 	tainted={false}
 	on:error
 	on:skipAll
-	getSteps={(driver, indexToInsertAt) => {
+	getSteps={(driver, options) => {
 		const id = nextId($flowStateStore, $flowStore)
-		const index = indexToInsertAt ?? $flowStore.value.modules.length
+		const index = options?.indexToInsertAt ?? $flowStore.value.modules.length
 		const isFirst = id === 'a'
 
 		let tempId = ''
diff --git a/frontend/src/lib/components/tutorials/Tutorial.svelte b/frontend/src/lib/components/tutorials/Tutorial.svelte
index 943e3554b1..332f63b7c5 100644
--- a/frontend/src/lib/components/tutorials/Tutorial.svelte
+++ b/frontend/src/lib/components/tutorials/Tutorial.svelte
@@ -9,10 +9,12 @@
 	export let name: string = 'action'
 	export let tainted: boolean = false
 
-	export let getSteps: (
-		driver: Driver,
-		indexToInsertAt?: number | undefined
-	) => DriveStep[] = () => []
+	type Options = {
+		indexToInsertAt?: number
+		skipStepsCount?: number
+	}
+
+	export let getSteps: (driver: Driver, options?: Options | undefined) => DriveStep[] = () => []
 
 	const dispatch = createEventDispatcher()
 
@@ -27,7 +29,7 @@
 		return button
 	}
 
-	export const runTutorial = (indexToInsertAt?: number | undefined) => {
+	export const runTutorial = (options?: Options | undefined) => {
 		if (tainted) {
 			dispatch('error', { detail: name })
 			return
@@ -70,7 +72,7 @@
 			}
 		})
 
-		tutorial.setSteps(getSteps(tutorial, indexToInsertAt))
+		tutorial.setSteps(getSteps(tutorial, options))
 		tutorial.drive()
 	}
 </script>
diff --git a/frontend/src/lib/components/tutorials/TutorialItem.svelte b/frontend/src/lib/components/tutorials/TutorialItem.svelte
index 35e9c01f4c..ae179714c8 100644
--- a/frontend/src/lib/components/tutorials/TutorialItem.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialItem.svelte
@@ -7,12 +7,14 @@
 
 	export let label: string
 	export let index: number
+	export let disabled: boolean = false
 </script>
 
-<MenuItem on:click>
+<MenuItem on:click {disabled}>
 	<div
 		class={classNames(
-			'text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
+			'flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold',
+			disabled ? 'text-disabled' : 'text-primary'
 		)}
 	>
 		{#if $tutorialsToDo.includes(index)}
@@ -20,6 +22,9 @@
 		{:else}
 			<CheckCircle size={16} color="green" />
 		{/if}
-		{label}
+		<div class="flex flex-row justify-between items-center w-full">
+			{label}
+			<slot />
+		</div>
 	</div>
 </MenuItem>
diff --git a/frontend/src/lib/components/tutorials/app/AppTutorial.svelte b/frontend/src/lib/components/tutorials/app/AppTutorial.svelte
new file mode 100644
index 0000000000..5069b8af69
--- /dev/null
+++ b/frontend/src/lib/components/tutorials/app/AppTutorial.svelte
@@ -0,0 +1,283 @@
+<script lang="ts">
+	import { insertNewGridItem, appComponentFromType } from '$lib/components/apps/editor/appUtils'
+	import type { AppComponent, TypedComponent } from '$lib/components/apps/editor/component'
+	import type { AppViewerContext, AppEditorContext } from '$lib/components/apps/types'
+	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
+	import { push } from '$lib/history'
+	import { getContext } from 'svelte'
+	import Tutorial from '../Tutorial.svelte'
+	import {
+		clickButtonBySelector,
+		clickFirstButtonBySelector,
+		connectInlineRunnableInputToComponentOutput,
+		isAppTainted,
+		updateInlineRunnableCode
+	} from '../utils'
+	import { updateProgress } from '$lib/tutorialUtils'
+
+	export let name: string
+	export let index: number
+
+	let tutorial: Tutorial | undefined = undefined
+
+	const { app, selectedComponent, focusedGrid, connectingInput } =
+		getContext<AppViewerContext>('AppViewerContext')
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
+
+	export function runTutorial() {
+		tutorial?.runTutorial()
+	}
+
+	function addComponent(appComponentType: TypedComponent['type']): void {
+		push(history, $app)
+
+		$dirtyStore = true
+
+		const id = insertNewGridItem(
+			$app,
+			appComponentFromType(appComponentType) as (id: string) => AppComponent,
+			$focusedGrid
+		)
+
+		$selectedComponent = [id]
+		$app = $app
+	}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	{index}
+	{name}
+	on:error
+	on:skipAll
+	tainted={isAppTainted($app)}
+	getSteps={(driver) => {
+		const steps = [
+			{
+				popover: {
+					title: 'Welcome to the App editor tutorial !',
+					description:
+						'This tutorial will show you how to use the App editor, add components, background scripts and connect them.',
+					onNextClick: () => {
+						addComponent('textinputcomponent')
+
+						setTimeout(() => {
+							clickButtonBySelector('#app-editor-component-library-tab')
+						})
+
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			},
+
+			{
+				element: '#app-editor-component-list',
+				popover: {
+					title: 'Components panel',
+					description:
+						'This is the components panel. Here you can add components to your app. Components are the building blocks of your app. You can add as many components as you want.'
+				}
+			},
+			{
+				element: '#displaycomponent',
+				popover: {
+					title: 'Adding a component',
+					description:
+						'Click on a component to add it to your app. Here we will add a display component.',
+					onNextClick: () => {
+						addComponent('displaycomponent')
+
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			},
+
+			{
+				element: '.wm-app-viewer',
+				popover: {
+					title: 'App canvas',
+					description:
+						'In the canvas, you can move components around, resize them, and organize them in grids. In this example, we already added a text input and a display component.',
+					onNextClick: () => {
+						driver.moveNext()
+					}
+				}
+			},
+
+			{
+				element: '#component-input',
+				popover: {
+					title: 'Component input',
+					description:
+						'They are several ways to set the input of a component. It can be static, the resul of an JS expression, connected to the output of another component, or the result of a inline runnable. Here we will create an inline runnable that will convert the text to uppercase.',
+					onNextClick: () => {
+						clickFirstButtonBySelector('#component-input')
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			},
+
+			{
+				element: '#data-source-compute',
+				popover: {
+					title: 'Compute',
+					description: 'Click on the compute button to create a new inline runnable.',
+					onNextClick: () => {
+						clickFirstButtonBySelector('#data-source-compute')
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			},
+
+			{
+				element: '#app-editor-create-inline-script',
+				popover: {
+					title: 'Create an inline script',
+					description: "Let's create an inline script.",
+					onNextClick: () => {
+						clickButtonBySelector('#app-editor-create-inline-script')
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			},
+
+			{
+				element: '#app-editor-empty-runnable',
+				popover: {
+					title: 'Choose a language',
+					description:
+						'You can choose the language of your runnable. They are two type of runnables: frontend and backend.'
+				}
+			},
+
+			{
+				element: '#app-editor-backend-runnables',
+				popover: {
+					title: 'Backend runnables',
+					description:
+						'Backend runnables are scripts that are executed on the server. They can be used to perform tasks that are not possible to be performed on the client. For example, you can use backend runnables to send emails, perform database operations, etc.'
+				}
+			},
+			{
+				element: '#app-editor-frontend-runnables',
+				popover: {
+					title: 'Frontend runnables',
+					description:
+						'Frontend scripts are executed in the browser and can manipulate the app context directly. You can also interact with components using component controls.'
+				}
+			},
+			{
+				element: '#create-deno-script',
+				popover: {
+					title: 'Create a deno script',
+					description:
+						"Let's create a simple deno script. For the sake of this tutorial, we will create a script that converts the text to uppercase.",
+					onNextClick: () => {
+						clickButtonBySelector('#create-deno-script')
+						setTimeout(() => {
+							if ($selectedComponent?.[0]) {
+								updateInlineRunnableCode(
+									$app,
+									$selectedComponent[0],
+									`export async function main(x: string) {
+  return x?.toLocaleUpperCase();
+}
+`
+								)
+							}
+
+							driver.moveNext()
+						})
+					}
+				}
+			},
+			{
+				element: '#schema-plug',
+				popover: {
+					title: 'Connect the function input',
+					description:
+						"The function we created has an string input 'x'. We can connect the output of the text component to it.",
+					onNextClick: () => {
+						clickButtonBySelector('#schema-plug')
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			},
+
+			{
+				element: '#connect-output-a',
+				popover: {
+					title: 'Select the output',
+					description: ' ',
+					onNextClick: () => {
+						$connectingInput.opened = false
+						$connectingInput.input = undefined
+
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					},
+					onPopoverRender: (popover, opts) => {
+						const wrapper = document.createElement('div')
+						wrapper.classList.add('flex', 'flex-col', 'gap-2', 'w-full', 'items-start')
+
+						const p1 = document.createElement('p')
+						p1.innerText =
+							'You can now select the output in the output menu. Click on the little red button to open the menu.'
+
+						const id = document.createElement('div')
+						id.innerHTML = `<button class="bg-red-500/70 border border-red-600 px-1 py-0.5" title="Outputs" aria-label="Open output"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-plug-2 "><path d="M9 2v6"></path><path d="M15 2v6"></path><path d="M12 17v5"></path><path d="M5 8h14"></path><path d="M6 11V8h12v3a6 6 0 1 1-12 0v0Z"></path></svg></button>`
+
+						const p2 = document.createElement('p')
+						p2.innerText =
+							'Once opened, you can select the output you want to connect to. Here we will connect the result output of the text component to the input "x" of the inline runnable.'
+
+						const objectViewer = document.createElement('div')
+						objectViewer.innerHTML = `<div class="rounded-lg shadow-md border p-4 bg-surface"><span class="s-UNyBDXJ1E286">  <ul class="w-full pl-2 border-none s-UNyBDXJ1E286"><li class="s-UNyBDXJ1E286"><button class="whitespace-nowrap s-UNyBDXJ1E286"><span class="key border  font-semibold rounded px-1 hover:bg-surface-hover text-2xs text-secondary s-UNyBDXJ1E286">result</span> :</button> <button class="val  rounded px-1 hover:bg-blue-100 string s-UNyBDXJ1E286"><span title="" class="text-2xs s-UNyBDXJ1E286">""</span></button></li> </ul> </span> <span class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200 s-UNyBDXJ1E286 hidden">{...}</span> </div>`
+
+						wrapper.appendChild(p1)
+						wrapper.appendChild(id)
+						wrapper.appendChild(p2)
+						wrapper.appendChild(objectViewer)
+
+						popover.description.appendChild(wrapper)
+					}
+				}
+			},
+
+			{
+				element: '.wm-app-viewer',
+				popover: {
+					title: "Let's test out the app !",
+					description:
+						'We can now type in the text input and see the result in the display component',
+					onNextClick: () => {
+						connectInlineRunnableInputToComponentOutput($app, 'b', 'x', 'a', 'result')
+
+						$app = $app
+
+						updateProgress(7)
+
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			}
+		]
+
+		return steps
+	}}
+/>
diff --git a/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
new file mode 100644
index 0000000000..7671ac9db1
--- /dev/null
+++ b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { updateProgress } from '$lib/tutorialUtils'
+	import Tutorial from '../Tutorial.svelte'
+	import { clickButtonBySelector } from '../utils'
+
+	export let name: string
+	export let index: number
+
+	let tutorial: Tutorial | undefined = undefined
+
+	export function runTutorial(skipStepsCount: number | undefined = undefined) {
+		tutorial?.runTutorial({ skipStepsCount })
+	}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	{index}
+	{name}
+	on:error
+	on:skipAll
+	getSteps={(driver, options) => {
+		const steps = [
+			{
+				element: '#app-editor-runnable-panel',
+				popover: {
+					title: 'Runnable panel',
+					description:
+						'This is the runnable panel. Here you can add runnables to your app. Runnables are scripts that can be executed in the background. You can add as many runnables as you want.'
+				}
+			},
+			{
+				element: '#create-background-runnable',
+				popover: {
+					title: 'Create a runnable',
+					description:
+						'Click here to create a runnable. Runnables are scripts that can be executed in the background. You can add as many runnables as you want.',
+					onNextClick: () => {
+						clickButtonBySelector('#create-background-runnable')
+
+						setTimeout(() => {
+							driver.moveNext()
+						})
+					}
+				}
+			},
+			{
+				element: '#app-editor-empty-runnable',
+				popover: {
+					title: 'Empty runnable panel',
+					description:
+						'This is the empty runnable panel. Here you can add runnables to your app. Runnables are scripts that can be executed in the background. You can add as many runnables as you want. You can also select a script or a flow from your workspace or the Hub.'
+				}
+			},
+
+			{
+				element: '#app-editor-backend-runnables',
+				popover: {
+					title: 'Backend runnables',
+					description:
+						'Backend runnables are scripts that are executed on the server. They can be used to perform tasks that are not possible to be performed on the client. For example, you can use backend runnables to send emails, perform database operations, etc.'
+				}
+			},
+			{
+				element: '#app-editor-frontend-runnables',
+				popover: {
+					title: 'Frontend runnables',
+					description:
+						'Frontend scripts are executed in the browser and can manipulate the app context directly. You can also interact with components using component controls.',
+					onNextClick: () => {
+						setTimeout(() => {
+							driver.moveNext()
+
+							updateProgress(5)
+						})
+					}
+				}
+			}
+		]
+
+		// Remove steps if we want to skip them (excpet the first one)
+
+		if (options?.skipStepsCount) {
+			steps.splice(1, options.skipStepsCount)
+		}
+
+		return steps
+	}}
+/>
diff --git a/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
new file mode 100644
index 0000000000..15ec4acb8c
--- /dev/null
+++ b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { insertNewGridItem, appComponentFromType } from '$lib/components/apps/editor/appUtils'
+	import type { AppComponent } from '$lib/components/apps/editor/component'
+	import type { AppViewerContext, AppEditorContext } from '$lib/components/apps/types'
+	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
+	import { push } from '$lib/history'
+	import { getContext } from 'svelte'
+	import Tutorial from '../Tutorial.svelte'
+	import { clickButtonBySelector } from '../utils'
+	import { updateProgress } from '$lib/tutorialUtils'
+
+	export let name: string
+	export let index: number
+
+	let tutorial: Tutorial | undefined = undefined
+
+	const { app, selectedComponent, focusedGrid } = getContext<AppViewerContext>('AppViewerContext')
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
+
+	export function runTutorial() {
+		tutorial?.runTutorial()
+	}
+
+	function addComponent(): void {
+		push(history, $app)
+
+		$dirtyStore = true
+
+		const id = insertNewGridItem(
+			$app,
+			appComponentFromType('textcomponent') as (id: string) => AppComponent,
+			$focusedGrid
+		)
+
+		$selectedComponent = [id]
+		$app = $app
+	}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	{index}
+	{name}
+	on:error
+	on:skipAll
+	getSteps={(driver) => [
+		{
+			popover: {
+				title: 'Connection tutorial',
+				description: 'We will connect the input of a text component to an output.',
+				onNextClick: () => {
+					addComponent()
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			element: `#component-input`,
+			popover: {
+				title: 'Data source',
+				description:
+					'Here we can set the data source of the text component: it can be static, the result of an evaluation or the result of script or flow. We are going to connect the data source to an output.',
+				onNextClick: () => {
+					clickButtonBySelector('#component-input')
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			element: '#plug',
+			popover: {
+				title: 'Connect the text component',
+				description: 'Click on the plug icon to connect the text component',
+				onNextClick: () => {
+					clickButtonBySelector('#plug')
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			element: '#output-ctx',
+			popover: {
+				title: 'Select the output',
+				description:
+					"You can now select the output in the output menu. Let's select your email in the app context",
+				onNextClick: () => {
+					clickButtonBySelector('#output-ctx')
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			element: '.val',
+			popover: {
+				title: 'Click on the output',
+				description: 'Simply click on the output to connect it',
+				onNextClick: () => {
+					clickButtonBySelector('.val')
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		},
+		{
+			popover: {
+				title: 'Connection done',
+				description: 'You can now see the email output connected to the text component input',
+				onNextClick: () => {
+					updateProgress(6)
+
+					setTimeout(() => {
+						driver.moveNext()
+					})
+				}
+			}
+		}
+	]}
+/>
diff --git a/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
new file mode 100644
index 0000000000..e8e076b9b9
--- /dev/null
+++ b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Tutorial from '../Tutorial.svelte'
+
+	export let name: string
+	export let index: number
+
+	let tutorial: Tutorial | undefined = undefined
+
+	export function runTutorial() {
+		tutorial?.runTutorial()
+	}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	{index}
+	{name}
+	on:error
+	on:skipAll
+	getSteps={(driver) => [
+		{
+			popover: {
+				title: 'Welcome to the Windmil Flow editor',
+				description:
+					'Learn how to build our first branch to be executed on a condition. You can use arrow keys to navigate'
+			}
+		}
+	]}
+/>
diff --git a/frontend/src/lib/components/tutorials/utils.ts b/frontend/src/lib/components/tutorials/utils.ts
index 2f20e070c6..58d02bf817 100644
--- a/frontend/src/lib/components/tutorials/utils.ts
+++ b/frontend/src/lib/components/tutorials/utils.ts
@@ -1,4 +1,6 @@
 import type { Flow, FlowModule } from '$lib/gen'
+import { findGridItem } from '../apps/editor/appUtils'
+import type { App } from '../apps/types'
 
 export function setInputBySelector(selector: string, value: string) {
 	const input = document.querySelector(selector) as HTMLInputElement
@@ -17,6 +19,15 @@ export function clickButtonBySelector(selector: string) {
 	}
 }
 
+export function clickFirstButtonBySelector(selector: string) {
+	const buttons = document.querySelector(selector)
+	const button = buttons?.childNodes[0] as HTMLButtonElement
+
+	if (button) {
+		button.click()
+	}
+}
+
 export function triggerAddFlowStep(index: number) {
 	const button = document.querySelector(`#flow-editor-add-step-${index}`) as HTMLButtonElement
 
@@ -48,6 +59,10 @@ export function isFlowTainted(flow: Flow) {
 	return flow.value.modules.length > 0 || Object.keys(flow?.schema?.properties).length > 0
 }
 
+export function isAppTainted(app: App) {
+	return !(app.grid.length === 0 && app.hiddenInlineScripts.length === 0)
+}
+
 export function updateFlowModuleById(
 	flow: Flow,
 	id: string,
@@ -74,3 +89,76 @@ export function updateFlowModuleById(
 
 	flow = flow
 }
+
+export function updateBackgroundRunnableCode(app: App, index: number, newCode: string) {
+	const script = app.hiddenInlineScripts[index]
+	if (script.type === 'runnableByName' && script.inlineScript) {
+		script.inlineScript.content = newCode
+	}
+
+	app = app
+}
+
+export function updateInlineRunnableCode(app: App, componentId: string, newCode: string) {
+	const gridItem = findGridItem(app, componentId)
+
+	if (gridItem?.data.componentInput?.type === 'runnable') {
+		if (
+			gridItem.data.componentInput.runnable?.type === 'runnableByName' &&
+			gridItem.data.componentInput.runnable.inlineScript
+		) {
+			gridItem.data.componentInput.runnable.inlineScript.content = newCode
+		}
+	}
+
+	app = app
+}
+
+export function connectComponentSourceToOutput(app: App, componentId: string, targetId: string) {
+	const gridItem = findGridItem(app, componentId)
+
+	if (gridItem) {
+		gridItem.data.componentInput = {
+			type: 'evalv2',
+			fieldType: 'object',
+
+			expr: `${targetId}.result`,
+			connections: [
+				{
+					componentId: targetId,
+					id: 'result'
+				}
+			]
+		}
+	}
+
+	app = app
+}
+
+export function connectInlineRunnableInputToComponentOutput(
+	app: App,
+	sourceComponentId: string,
+	sourceField: string,
+	targetComponentId: string,
+	targetField: string,
+	fieldType: string = 'text'
+) {
+	const gridItem = findGridItem(app, sourceComponentId)
+
+	if (gridItem?.data.componentInput?.type === 'runnable') {
+		// @ts-ignore
+		gridItem.data.componentInput.fields = {
+			[sourceField]: {
+				type: 'evalv2',
+				expr: `${targetComponentId}.${targetField}`,
+				fieldType: fieldType,
+				connections: [
+					{
+						componentId: targetComponentId,
+						id: targetField
+					}
+				]
+			}
+		}
+	}
+}
diff --git a/frontend/src/lib/tutorialUtils.ts b/frontend/src/lib/tutorialUtils.ts
index 32f3f6c5c0..80ea5bfc7d 100644
--- a/frontend/src/lib/tutorialUtils.ts
+++ b/frontend/src/lib/tutorialUtils.ts
@@ -2,7 +2,7 @@ import { get } from 'svelte/store'
 import { tutorialsToDo } from './stores'
 import { UserService } from './gen'
 
-const MAX_TUTORIAL_ID = 6
+const MAX_TUTORIAL_ID = 7
 
 export async function updateProgress(id: number) {
 	const bef = get(tutorialsToDo)
@@ -49,3 +49,9 @@ export async function syncTutorialsTodos() {
 	}
 	tutorialsToDo.set(todos)
 }
+
+export function tutorialInProgress() {
+	const svg = document.getElementsByClassName('driver-overlay driver-overlay-animated')
+
+	return svg.length > 0
+}