feat: Add onboarding flow (#7212)

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

packages/editor-ui/src/stores/__tests__/workflows.spec.ts

@@ -0,0 +1,101 @@
+import { setActivePinia, createPinia } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import type { IWorkflowDataUpdate } from '@/Interface';
+import { makeRestApiRequest } from '@/utils';
+import { useRootStore } from '../n8nRoot.store';
+
+vi.mock('@/utils', () => ({
+	makeRestApiRequest: vi.fn(),
+}));
+
+const MOCK_WORKFLOW_SIMPLE: IWorkflowDataUpdate = {
+	id: '1',
+	name: 'test',
+	nodes: [
+		{
+			parameters: {
+				path: '21a77783-e050-4e0f-9915-2d2dd5b53cde',
+				options: {},
+			},
+			id: '2dbf9369-2eec-42e7-9b89-37e50af12289',
+			name: 'Webhook',
+			type: 'n8n-nodes-base.webhook',
+			typeVersion: 1,
+			position: [340, 240],
+			webhookId: '21a77783-e050-4e0f-9915-2d2dd5b53cde',
+		},
+		{
+			parameters: {
+				table: 'product',
+				columns: 'name,ean',
+				additionalFields: {},
+			},
+			name: 'Insert Rows1',
+			type: 'n8n-nodes-base.postgres',
+			position: [580, 240],
+			typeVersion: 1,
+			id: 'a10ba62a-8792-437c-87df-0762fa53e157',
+			credentials: {
+				postgres: {
+					id: 'iEFl08xIegmR8xF6',
+					name: 'Postgres account',
+				},
+			},
+		},
+	],
+	connections: {
+		Webhook: {
+			main: [
+				[
+					{
+						node: 'Insert Rows1',
+						type: 'main',
+						index: 0,
+					},
+				],
+			],
+		},
+	},
+};
+
+describe('worklfows store', () => {
+	beforeEach(() => {
+		setActivePinia(createPinia());
+	});
+
+	describe('createNewWorkflow', () => {
+		beforeEach(() => {
+			vi.resetAllMocks();
+		});
+
+		it('creates new workflow', async () => {
+			const workflowsStore = useWorkflowsStore();
+			await workflowsStore.createNewWorkflow(MOCK_WORKFLOW_SIMPLE);
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(
+				useRootStore().getRestApiContext,
+				'POST',
+				'/workflows',
+				{
+					...MOCK_WORKFLOW_SIMPLE,
+					active: false,
+				},
+			);
+		});
+
+		it('sets active to false', async () => {
+			const workflowsStore = useWorkflowsStore();
+			await workflowsStore.createNewWorkflow({ ...MOCK_WORKFLOW_SIMPLE, active: true });
+
+			expect(makeRestApiRequest).toHaveBeenCalledWith(
+				useRootStore().getRestApiContext,
+				'POST',
+				'/workflows',
+				{
+					...MOCK_WORKFLOW_SIMPLE,
+					active: false,
+				},
+			);
+		});
+	});
+});

packages/editor-ui/src/stores/templates.store.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { STORES } from '@/constants';
 import type {
+	INodeUi,
 	ITemplatesCategory,
 	ITemplatesCollection,
 	ITemplatesCollectionFull,
@@ -19,6 +20,7 @@ import {
 	getWorkflows,
 	getWorkflowTemplate,
 } from '@/api/templates';
+import { getFixedNodesList } from '@/utils/nodeViewUtils';
 
 const TEMPLATES_PAGE_SIZE = 10;
 
@@ -332,5 +334,19 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
 			const versionCli: string = settingsStore.versionCli;
 			return getWorkflowTemplate(apiEndpoint, templateId, { 'n8n-version': versionCli });
 		},
+
+		async getFixedWorkflowTemplate(templateId: string): Promise<IWorkflowTemplate | undefined> {
+			const template = await this.getWorkflowTemplate(templateId);
+			if (template?.workflow?.nodes) {
+				template.workflow.nodes = getFixedNodesList(template.workflow.nodes) as INodeUi[];
+				template.workflow.nodes?.forEach((node) => {
+					if (node.credentials) {
+						delete node.credentials;
+					}
+				});
+			}
+
+			return template;
+		},
 	},
 });

packages/editor-ui/src/stores/workflows.store.ts

@@ -1272,6 +1272,9 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 
 		// Creates a new workflow
 		async createNewWorkflow(sendData: IWorkflowDataUpdate): Promise<IWorkflowDb> {
+			// make sure that the new ones are not active
+			sendData.active = false;
+
 			const rootStore = useRootStore();
 			return makeRestApiRequest(
 				rootStore.getRestApiContext,