feat: Add onboarding flow (#7212)

Github issue / Community forum post (link here to close automatically):

packages/editor-ui/src/views/NodeView.vue

@@ -886,7 +886,7 @@ export default defineComponent({
 			let data: IWorkflowTemplate | undefined;
 			try {
 				void this.$externalHooks().run('template.requested', { templateId });
-				data = await this.templatesStore.getWorkflowTemplate(templateId);
+				data = await this.templatesStore.getFixedWorkflowTemplate(templateId);
 
 				if (!data) {
 					throw new Error(
@@ -901,14 +901,6 @@ export default defineComponent({
 				return;
 			}
 
-			data.workflow.nodes = NodeViewUtils.getFixedNodesList(data.workflow.nodes) as INodeUi[];
-
-			data.workflow.nodes?.forEach((node) => {
-				if (node.credentials) {
-					delete node.credentials;
-				}
-			});
-
 			this.blankRedirect = true;
 			await this.$router.replace({ name: VIEWS.NEW_WORKFLOW, query: { templateId } });
 
@@ -2635,6 +2627,15 @@ export default defineComponent({
 						this.titleSet(workflow.name, 'IDLE');
 						await this.openWorkflow(workflow);
 						await this.checkAndInitDebugMode();
+
+						if (workflow.meta?.onboardingId) {
+							this.$telemetry.track(
+								`User opened workflow from onboarding template with ID ${workflow.meta.onboardingId}`,
+								{
+									workflow_id: workflow.id,
+								},
+							);
+						}
 					}
 				} else if (this.$route.meta?.nodeView === true) {
 					// Create new workflow

packages/editor-ui/src/views/WorkflowOnboardingView.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useLoadingService, useI18n } from '@/composables';
+import { VIEWS } from '@/constants';
+import { useTemplatesStore, useWorkflowsStore } from '@/stores';
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const loadingService = useLoadingService();
+const templateStore = useTemplatesStore();
+const workfowStore = useWorkflowsStore();
+const router = useRouter();
+const route = useRoute();
+const i18n = useI18n();
+
+const openWorkflowTemplate = async (templateId: string) => {
+	try {
+		loadingService.startLoading();
+		const template = await templateStore.getFixedWorkflowTemplate(templateId);
+		if (!template) {
+			throw new Error();
+		}
+
+		const name: string = i18n.baseText('onboarding.title', {
+			interpolate: { name: template.name },
+		});
+
+		const workflow = await workfowStore.createNewWorkflow({
+			name,
+			connections: template.workflow.connections,
+			nodes: template.workflow.nodes,
+			pinData: template.workflow.pinData,
+			settings: template.workflow.settings,
+			meta: {
+				onboardingId: templateId,
+			},
+		});
+
+		await router.replace({
+			name: VIEWS.WORKFLOW,
+			params: { name: workflow.id },
+			query: { onboardingId: templateId },
+		});
+
+		loadingService.stopLoading();
+	} catch (e) {
+		await router.replace({ name: VIEWS.NEW_WORKFLOW });
+		loadingService.stopLoading();
+
+		throw new Error(`Could not load onboarding template ${templateId}`); // sentry reporing
+	}
+};
+
+onMounted(async () => {
+	const templateId = route.params.id;
+	if (!templateId || typeof templateId !== 'string') {
+		await router.replace({ name: VIEWS.NEW_WORKFLOW });
+		return;
+	}
+
+	await openWorkflowTemplate(templateId);
+});
+</script>
+
+<template>
+	<div></div>
+</template>
+
+<style lang="scss" module></style>