✨ Introduce telemetry (#2099)

* introduce analytics

* add user survey backend

* add user survey backend

* set answers on survey submit

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* change name to personalization

* lint

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* N8n 2495 add personalization modal (#2280)

* update modals

* add onboarding modal

* implement questions

* introduce analytics

* simplify impl

* implement survey handling

* add personalized cateogry

* update modal behavior

* add thank you view

* handle empty cases

* rename modal

* standarize modal names

* update image, add tags to headings

* remove unused file

* remove unused interfaces

* clean up footer spacing

* introduce analytics

* refactor to fix bug

* update endpoint

* set min height

* update stories

* update naming from questions to survey

* remove spacing after core categories

* fix bug in logic

* sort nodes

* rename types

* merge with be

* rename userSurvey

* clean up rest api

* use constants for keys

* use survey keys

* clean up types

* move personalization to its own file

Co-authored-by: ahsan-virani <ahsan.virani@gmail.com>

* Survey new options (#2300)

* split up options

* fix quotes

* remove unused import

* add user created workflow event (#2301)

* simplify env vars

* fix versionCli on FE

* update personalization env

* fix event User opened Credentials panel

* fix select modal spacing

* fix nodes panel event

* fix workflow id in workflow execute event

* improve telemetry error logging

* fix config and stop process events

* add flush call on n8n stop

* ready for release

* improve telemetry process exit

* fix merge

* improve n8n stop events

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>

.eslintrc.js

@@ -122,6 +122,8 @@ module.exports = {
 			'undefined',
 		],
 
+		'no-void': ['error', { 'allowAsStatement': true }],
+
 		// ----------------------------------
 		//        @typescript-eslint
 		// ----------------------------------
@@ -250,6 +252,11 @@ module.exports = {
 		 */
 		'@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }],
 
+		/**
+		 * https://github.com/typescript-eslint/typescript-eslint/blob/v4.30.0/packages/eslint-plugin/docs/rules/no-floating-promises.md
+		 */
+		'@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
+
 		/**
 		 * https://eslint.org/docs/1.0.0/rules/no-throw-literal
 		 */

packages/cli/commands/start.ts

@@ -24,6 +24,7 @@ import {
 	GenericHelpers,
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	IExecutionsCurrentSummary,
+	InternalHooksManager,
 	LoadNodesAndCredentials,
 	NodeTypes,
 	Server,
@@ -92,9 +93,12 @@ export class Start extends Command {
 			setTimeout(() => {
 				// In case that something goes wrong with shutdown we
 				// kill after max. 30 seconds no matter what
+				console.log(`process exited after 30s`);
 				process.exit(processExitCode);
 			}, 30000);
 
+			await InternalHooksManager.getInstance().onN8nStop();
+
 			const skipWebhookDeregistration = config.get(
 				'endpoints.skipWebhoooksDeregistrationOnShutdown',
 			) as boolean;
@@ -151,9 +155,15 @@ export class Start extends Command {
 				LoggerProxy.init(logger);
 				logger.info('Initializing n8n process');
 
-				// todo remove a few versions after release
 				logger.info(
-					'\nn8n now checks for new versions and security updates. You can turn this off using the environment variable N8N_VERSION_NOTIFICATIONS_ENABLED to "false"\nFor more information, please refer to https://docs.n8n.io/getting-started/installation/advanced/configuration.html\n',
+					'\n' +
+						'****************************************************\n' +
+						'*                                                  *\n' +
+						'*   n8n now sends selected, anonymous telemetry.   *\n' +
+						'*      For more details (and how to opt out):      *\n' +
+						'*   https://docs.n8n.io/reference/telemetry.html   *\n' +
+						'*                                                  *\n' +
+						'****************************************************\n',
 				);
 
 				// Start directly with the init of the database to improve startup time

packages/cli/config/index.ts

@@ -649,6 +649,46 @@ const config = convict({
 			env: 'N8N_VERSION_NOTIFICATIONS_INFO_URL',
 		},
 	},
+
+	deployment: {
+		type: {
+			format: String,
+			default: 'default',
+			env: 'N8N_DEPLOYMENT_TYPE',
+		},
+	},
+
+	personalization: {
+		enabled: {
+			doc: 'Whether personalization is enabled.',
+			format: Boolean,
+			default: true,
+			env: 'N8N_PERSONALIZATION_ENABLED',
+		},
+	},
+
+	diagnostics: {
+		enabled: {
+			doc: 'Whether diagnostic mode is enabled.',
+			format: Boolean,
+			default: true,
+			env: 'N8N_DIAGNOSTICS_ENABLED',
+		},
+		config: {
+			frontend: {
+				doc: 'Diagnostics config for frontend.',
+				format: String,
+				default: '1zPn9bgWPzlQc0p8Gj1uiK6DOTn;https://telemetry.n8n.io',
+				env: 'N8N_DIAGNOSTICS_CONFIG_FRONTEND',
+			},
+			backend: {
+				doc: 'Diagnostics config for backend.',
+				format: String,
+				default: '1zPn7YoGC3ZXE9zLeTKLuQCB4F6;https://telemetry.n8n.io/v1/batch',
+				env: 'N8N_DIAGNOSTICS_CONFIG_BACKEND',
+			},
+		},
+	},
 });
 
 // Overwrite default configuration with settings which got defined in

packages/cli/package.json

@@ -83,6 +83,7 @@
   "dependencies": {
     "@oclif/command": "^1.5.18",
     "@oclif/errors": "^1.2.2",
+    "@rudderstack/rudder-sdk-node": "^1.0.2",
     "@types/json-diff": "^0.5.1",
     "@types/jsonwebtoken": "^8.5.2",
     "basic-auth": "^2.0.1",

packages/cli/src/Interfaces.ts

@@ -11,6 +11,7 @@ import {
 	IRunData,
 	IRunExecutionData,
 	ITaskData,
+	ITelemetrySettings,
 	IWorkflowBase as IWorkflowBaseWorkflow,
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	IWorkflowCredentials,
@@ -281,6 +282,40 @@ export interface IExternalHooksClass {
 	run(hookName: string, hookParameters?: any[]): Promise<void>;
 }
 
+export interface IDiagnosticInfo {
+	versionCli: string;
+	databaseType: DatabaseType;
+	notificationsEnabled: boolean;
+	disableProductionWebhooksOnMainProcess: boolean;
+	basicAuthActive: boolean;
+	systemInfo: {
+		os: {
+			type?: string;
+			version?: string;
+		};
+		memory?: number;
+		cpus: {
+			count?: number;
+			model?: string;
+			speed?: number;
+		};
+	};
+	executionVariables: {
+		[key: string]: string | number | undefined;
+	};
+	deploymentType: string;
+}
+
+export interface IInternalHooksClass {
+	onN8nStop(): Promise<void>;
+	onServerStarted(diagnosticInfo: IDiagnosticInfo): Promise<void>;
+	onPersonalizationSurveySubmitted(answers: IPersonalizationSurveyAnswers): Promise<void>;
+	onWorkflowCreated(workflow: IWorkflowBase): Promise<void>;
+	onWorkflowDeleted(workflowId: string): Promise<void>;
+	onWorkflowSaved(workflow: IWorkflowBase): Promise<void>;
+	onWorkflowPostExecute(workflow: IWorkflowBase, runData?: IRun): Promise<void>;
+}
+
 export interface IN8nConfig {
 	database: IN8nConfigDatabase;
 	endpoints: IN8nConfigEndpoints;
@@ -357,6 +392,20 @@ export interface IN8nUISettings {
 	};
 	versionNotifications: IVersionNotificationSettings;
 	instanceId: string;
+	telemetry: ITelemetrySettings;
+	personalizationSurvey: IPersonalizationSurvey;
+}
+
+export interface IPersonalizationSurveyAnswers {
+	companySize: string | null;
+	codingSkill: string | null;
+	workArea: string | null;
+	otherWorkArea: string | null;
+}
+
+export interface IPersonalizationSurvey {
+	answers?: IPersonalizationSurveyAnswers;
+	shouldShow: boolean;
 }
 
 export interface IPackageVersions {

packages/cli/src/InternalHooks.ts

@@ -0,0 +1,105 @@
+/* eslint-disable import/no-cycle */
+import { IDataObject, IRun, TelemetryHelpers } from 'n8n-workflow';
+import {
+	IDiagnosticInfo,
+	IInternalHooksClass,
+	IPersonalizationSurveyAnswers,
+	IWorkflowBase,
+} from '.';
+import { Telemetry } from './telemetry';
+
+export class InternalHooksClass implements IInternalHooksClass {
+	constructor(private telemetry: Telemetry) {}
+
+	async onServerStarted(diagnosticInfo: IDiagnosticInfo): Promise<void> {
+		const info = {
+			version_cli: diagnosticInfo.versionCli,
+			db_type: diagnosticInfo.databaseType,
+			n8n_version_notifications_enabled: diagnosticInfo.notificationsEnabled,
+			n8n_disable_production_main_process: diagnosticInfo.disableProductionWebhooksOnMainProcess,
+			n8n_basic_auth_active: diagnosticInfo.basicAuthActive,
+			system_info: diagnosticInfo.systemInfo,
+			execution_variables: diagnosticInfo.executionVariables,
+			n8n_deployment_type: diagnosticInfo.deploymentType,
+		};
+		await this.telemetry.identify(info);
+		await this.telemetry.track('Instance started', info);
+	}
+
+	async onPersonalizationSurveySubmitted(answers: IPersonalizationSurveyAnswers): Promise<void> {
+		await this.telemetry.track('User responded to personalization questions', {
+			company_size: answers.companySize,
+			coding_skill: answers.codingSkill,
+			work_area: answers.workArea,
+			other_work_area: answers.otherWorkArea,
+		});
+	}
+
+	async onWorkflowCreated(workflow: IWorkflowBase): Promise<void> {
+		await this.telemetry.track('User created workflow', {
+			workflow_id: workflow.id,
+			node_graph: TelemetryHelpers.generateNodesGraph(workflow).nodeGraph,
+		});
+	}
+
+	async onWorkflowDeleted(workflowId: string): Promise<void> {
+		await this.telemetry.track('User deleted workflow', {
+			workflow_id: workflowId,
+		});
+	}
+
+	async onWorkflowSaved(workflow: IWorkflowBase): Promise<void> {
+		await this.telemetry.track('User saved workflow', {
+			workflow_id: workflow.id,
+			node_graph: TelemetryHelpers.generateNodesGraph(workflow).nodeGraph,
+		});
+	}
+
+	async onWorkflowPostExecute(workflow: IWorkflowBase, runData?: IRun): Promise<void> {
+		const properties: IDataObject = {
+			workflow_id: workflow.id,
+			is_manual: false,
+		};
+
+		if (runData !== undefined) {
+			properties.execution_mode = runData.mode;
+			if (runData.mode === 'manual') {
+				properties.is_manual = true;
+			}
+
+			properties.success = !!runData.finished;
+
+			if (!properties.success && runData?.data.resultData.error) {
+				properties.error_message = runData?.data.resultData.error.message;
+				let errorNodeName = runData?.data.resultData.error.node?.name;
+				properties.error_node_type = runData?.data.resultData.error.node?.type;
+
+				if (runData.data.resultData.lastNodeExecuted) {
+					const lastNode = TelemetryHelpers.getNodeTypeForName(
+						workflow,
+						runData.data.resultData.lastNodeExecuted,
+					);
+
+					if (lastNode !== undefined) {
+						properties.error_node_type = lastNode.type;
+						errorNodeName = lastNode.name;
+					}
+				}
+
+				if (properties.is_manual) {
+					const nodeGraphResult = TelemetryHelpers.generateNodesGraph(workflow);
+					properties.node_graph = nodeGraphResult.nodeGraph;
+					if (errorNodeName) {
+						properties.error_node_id = nodeGraphResult.nameIndices[errorNodeName];
+					}
+				}
+			}
+		}
+
+		void this.telemetry.trackWorkflowExecution(properties);
+	}
+
+	async onN8nStop(): Promise<void> {
+		await this.telemetry.trackN8nStop();
+	}
+}

packages/cli/src/InternalHooksManager.ts

@@ -0,0 +1,23 @@
+/* eslint-disable import/no-cycle */
+import { InternalHooksClass } from './InternalHooks';
+import { Telemetry } from './telemetry';
+
+export class InternalHooksManager {
+	private static internalHooksInstance: InternalHooksClass;
+
+	static getInstance(): InternalHooksClass {
+		if (this.internalHooksInstance) {
+			return this.internalHooksInstance;
+		}
+
+		throw new Error('InternalHooks not initialized');
+	}
+
+	static init(instanceId: string): InternalHooksClass {
+		if (!this.internalHooksInstance) {
+			this.internalHooksInstance = new InternalHooksClass(new Telemetry(instanceId));
+		}
+
+		return this.internalHooksInstance;
+	}
+}

packages/cli/src/PersonalizationSurvey.ts

@@ -0,0 +1,63 @@
+import { readFileSync, writeFile } from 'fs';
+import { promisify } from 'util';
+import { UserSettings } from 'n8n-core';
+
+import * as config from '../config';
+// eslint-disable-next-line import/no-cycle
+import { Db, IPersonalizationSurvey, IPersonalizationSurveyAnswers } from '.';
+
+const fsWriteFile = promisify(writeFile);
+
+const PERSONALIZATION_SURVEY_FILENAME = 'personalizationSurvey.json';
+
+function loadSurveyFromDisk(): IPersonalizationSurveyAnswers | undefined {
+	const userSettingsPath = UserSettings.getUserN8nFolderPath();
+	try {
+		const surveyFile = readFileSync(
+			`${userSettingsPath}/${PERSONALIZATION_SURVEY_FILENAME}`,
+			'utf-8',
+		);
+		return JSON.parse(surveyFile) as IPersonalizationSurveyAnswers;
+	} catch (error) {
+		return undefined;
+	}
+}
+
+export async function writeSurveyToDisk(
+	surveyAnswers: IPersonalizationSurveyAnswers,
+): Promise<void> {
+	const userSettingsPath = UserSettings.getUserN8nFolderPath();
+	await fsWriteFile(
+		`${userSettingsPath}/${PERSONALIZATION_SURVEY_FILENAME}`,
+		JSON.stringify(surveyAnswers, null, '\t'),
+	);
+}
+
+export async function preparePersonalizationSurvey(): Promise<IPersonalizationSurvey> {
+	const survey: IPersonalizationSurvey = {
+		shouldShow: false,
+	};
+
+	survey.answers = loadSurveyFromDisk();
+
+	if (survey.answers) {
+		return survey;
+	}
+
+	const enabled =
+		(config.get('personalization.enabled') as boolean) &&
+		(config.get('diagnostics.enabled') as boolean);
+
+	if (!enabled) {
+		return survey;
+	}
+
+	const workflowsExist = !!(await Db.collections.Workflow?.findOne());
+
+	if (workflowsExist) {
+		return survey;
+	}
+
+	survey.shouldShow = true;
+	return survey;
+}

packages/cli/src/ResponseHelper.ts

@@ -90,13 +90,13 @@ export function sendSuccessResponse(
 	}
 }
 
-export function sendErrorResponse(res: Response, error: ResponseError) {
+export function sendErrorResponse(res: Response, error: ResponseError, shouldLog = true) {
 	let httpStatusCode = 500;
 	if (error.httpStatusCode) {
 		httpStatusCode = error.httpStatusCode;
 	}
 
-	if (process.env.NODE_ENV !== 'production') {
+	if (process.env.NODE_ENV !== 'production' && shouldLog) {
 		console.error('ERROR RESPONSE');
 		console.error(error);
 	}

packages/cli/src/Server.ts

@@ -28,17 +28,18 @@ import * as express from 'express';
 import { readFileSync } from 'fs';
 import { dirname as pathDirname, join as pathJoin, resolve as pathResolve } from 'path';
 import {
-	getConnectionManager,
-	In,
-	Like,
 	FindManyOptions,
 	FindOneOptions,
+	getConnectionManager,
+	In,
 	IsNull,
 	LessThanOrEqual,
+	Like,
 	Not,
 } from 'typeorm';
 import * as bodyParser from 'body-parser';
 import * as history from 'connect-history-api-fallback';
+import * as os from 'os';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as _ from 'lodash';
 import * as clientOAuth2 from 'client-oauth2';
@@ -74,6 +75,8 @@ import {
 	INodeTypeNameVersion,
 	IRunData,
 	INodeVersionedType,
+	ITelemetryClientConfig,
+	ITelemetrySettings,
 	IWorkflowBase,
 	IWorkflowCredentials,
 	LoggerProxy,
@@ -124,11 +127,13 @@ import {
 	IExecutionsStopData,
 	IExecutionsSummary,
 	IExternalHooksClass,
+	IDiagnosticInfo,
 	IN8nUISettings,
 	IPackageVersions,
 	ITagWithCountDb,
 	IWorkflowExecutionDataProcess,
 	IWorkflowResponse,
+	IPersonalizationSurveyAnswers,
 	LoadNodesAndCredentials,
 	NodeTypes,
 	Push,
@@ -142,9 +147,13 @@ import {
 	WorkflowHelpers,
 	WorkflowRunner,
 } from '.';
+
 import * as config from '../config';
 
 import * as TagHelpers from './TagHelpers';
+import * as PersonalizationSurvey from './PersonalizationSurvey';
+
+import { InternalHooksManager } from './InternalHooksManager';
 import { TagEntity } from './databases/entities/TagEntity';
 import { WorkflowEntity } from './databases/entities/WorkflowEntity';
 import { NameRequest } from './WorkflowHelpers';
@@ -243,6 +252,22 @@ class App {
 
 		const urlBaseWebhook = WebhookHelpers.getWebhookBaseUrl();
 
+		const telemetrySettings: ITelemetrySettings = {
+			enabled: config.get('diagnostics.enabled') as boolean,
+		};
+
+		if (telemetrySettings.enabled) {
+			const conf = config.get('diagnostics.config.frontend') as string;
+			const [key, url] = conf.split(';');
+
+			if (!key || !url) {
+				LoggerProxy.warn('Diagnostics frontend config is invalid');
+				telemetrySettings.enabled = false;
+			}
+
+			telemetrySettings.config = { key, url };
+		}
+
 		this.frontendSettings = {
 			endpointWebhook: this.endpointWebhook,
 			endpointWebhookTest: this.endpointWebhookTest,
@@ -264,6 +289,10 @@ class App {
 				infoUrl: config.get('versionNotifications.infoUrl'),
 			},
 			instanceId: '',
+			telemetry: telemetrySettings,
+			personalizationSurvey: {
+				shouldShow: false,
+			},
 		};
 	}
 
@@ -290,7 +319,13 @@ class App {
 
 		this.versions = await GenericHelpers.getVersions();
 		this.frontendSettings.versionCli = this.versions.cli;
-		this.frontendSettings.instanceId = (await generateInstanceId()) as string;
+
+		this.frontendSettings.instanceId = await UserSettings.getInstanceId();
+
+		this.frontendSettings.personalizationSurvey =
+			await PersonalizationSurvey.preparePersonalizationSurvey();
+
+		InternalHooksManager.init(this.frontendSettings.instanceId);
 
 		await this.externalHooks.run('frontend.settings', [this.frontendSettings]);
 
@@ -458,10 +493,13 @@ class App {
 				};
 
 				jwt.verify(token, getKey, jwtVerifyOptions, (err: jwt.VerifyErrors, decoded: object) => {
-					if (err) ResponseHelper.jwtAuthAuthorizationError(res, 'Invalid token');
+					if (err) {
-					else if (!isTenantAllowed(decoded))
+						ResponseHelper.jwtAuthAuthorizationError(res, 'Invalid token');
+					} else if (!isTenantAllowed(decoded)) {
 						ResponseHelper.jwtAuthAuthorizationError(res, 'Tenant not allowed');
-					else next();
+					} else {
+						next();
+					}
 				});
 			});
 		}
@@ -656,6 +694,7 @@ class App {
 
 					// @ts-ignore
 					savedWorkflow.id = savedWorkflow.id.toString();
+					void InternalHooksManager.getInstance().onWorkflowCreated(newWorkflow as IWorkflowBase);
 					return savedWorkflow;
 				},
 			),
@@ -858,12 +897,12 @@ class App {
 					}
 
 					await this.externalHooks.run('workflow.afterUpdate', [workflow]);
+					void InternalHooksManager.getInstance().onWorkflowSaved(workflow as IWorkflowBase);
 
 					if (workflow.active) {
 						// When the workflow is supposed to be active add it again
 						try {
 							await this.externalHooks.run('workflow.activate', [workflow]);
-
 							await this.activeWorkflowRunner.add(id, isActive ? 'update' : 'activate');
 						} catch (error) {
 							// If workflow could not be activated set it again to inactive
@@ -901,6 +940,7 @@ class App {
 				}
 
 				await Db.collections.Workflow!.delete(id);
+				void InternalHooksManager.getInstance().onWorkflowDeleted(id);
 				await this.externalHooks.run('workflow.afterDelete', [id]);
 
 				return true;
@@ -2601,6 +2641,31 @@ class App {
 			),
 		);
 
+		// ----------------------------------------
+		// User Survey
+		// ----------------------------------------
+
+		// Process personalization survey responses
+		this.app.post(
+			`/${this.restEndpoint}/user-survey`,
+			async (req: express.Request, res: express.Response) => {
+				if (!this.frontendSettings.personalizationSurvey.shouldShow) {
+					ResponseHelper.sendErrorResponse(
+						res,
+						new ResponseHelper.ResponseError('User survey already submitted', undefined, 400),
+						false,
+					);
+				}
+
+				const answers = req.body as IPersonalizationSurveyAnswers;
+				await PersonalizationSurvey.writeSurveyToDisk(answers);
+				this.frontendSettings.personalizationSurvey.shouldShow = false;
+				this.frontendSettings.personalizationSurvey.answers = answers;
+				ResponseHelper.sendSuccessResponse(res, undefined, true, 200);
+				void InternalHooksManager.getInstance().onPersonalizationSurveySubmitted(answers);
+			},
+		);
+
 		// ----------------------------------------
 		// Webhooks
 		// ----------------------------------------
@@ -2810,6 +2875,43 @@ export async function start(): Promise<void> {
 		console.log(`Version: ${versions.cli}`);
 
 		await app.externalHooks.run('n8n.ready', [app]);
+		const cpus = os.cpus();
+		const diagnosticInfo: IDiagnosticInfo = {
+			basicAuthActive: config.get('security.basicAuth.active') as boolean,
+			databaseType: (await GenericHelpers.getConfigValue('database.type')) as DatabaseType,
+			disableProductionWebhooksOnMainProcess:
+				config.get('endpoints.disableProductionWebhooksOnMainProcess') === true,
+			notificationsEnabled: config.get('versionNotifications.enabled') === true,
+			versionCli: versions.cli,
+			systemInfo: {
+				os: {
+					type: os.type(),
+					version: os.version(),
+				},
+				memory: os.totalmem() / 1024,
+				cpus: {
+					count: cpus.length,
+					model: cpus[0].model,
+					speed: cpus[0].speed,
+				},
+			},
+			executionVariables: {
+				executions_process: config.get('executions.process'),
+				executions_mode: config.get('executions.mode'),
+				executions_timeout: config.get('executions.timeout'),
+				executions_timeout_max: config.get('executions.maxTimeout'),
+				executions_data_save_on_error: config.get('executions.saveDataOnError'),
+				executions_data_save_on_success: config.get('executions.saveDataOnSuccess'),
+				executions_data_save_on_progress: config.get('executions.saveExecutionProgress'),
+				executions_data_save_manual_executions: config.get('executions.saveDataManualExecutions'),
+				executions_data_prune: config.get('executions.pruneData'),
+				executions_data_max_age: config.get('executions.pruneDataMaxAge'),
+				executions_data_prune_timeout: config.get('executions.pruneDataTimeout'),
+			},
+			deploymentType: config.get('deployment.type'),
+		};
+
+		void InternalHooksManager.getInstance().onServerStarted(diagnosticInfo);
 	});
 }
 
@@ -2848,14 +2950,3 @@ async function getExecutionsCount(
 	const count = await Db.collections.Execution!.count(countFilter);
 	return { count, estimate: false };
 }
-
-async function generateInstanceId() {
-	const encryptionKey = await UserSettings.getEncryptionKey();
-	const hash = encryptionKey
-		? createHash('sha256')
-				.update(encryptionKey.slice(Math.round(encryptionKey.length / 2)))
-				.digest('hex')
-		: undefined;
-
-	return hash;
-}

packages/cli/src/WorkflowExecuteAdditionalData.ts

@@ -48,6 +48,7 @@ import {
 	IExecutionDb,
 	IExecutionFlattedDb,
 	IExecutionResponse,
+	InternalHooksManager,
 	IPushDataExecutionFinished,
 	IWorkflowBase,
 	IWorkflowExecuteProcess,
@@ -903,6 +904,7 @@ export async function executeWorkflow(
 	}
 
 	await externalHooks.run('workflow.postExecute', [data, workflowData]);
+	void InternalHooksManager.getInstance().onWorkflowPostExecute(workflowData, data);
 
 	if (data.finished === true) {
 		// Workflow did finish successfully

packages/cli/src/WorkflowRunner.ts

@@ -16,7 +16,6 @@ import { IProcessMessage, WorkflowExecute } from 'n8n-core';
 import {
 	ExecutionError,
 	IRun,
-	IWorkflowBase,
 	LoggerProxy as Logger,
 	Workflow,
 	WorkflowExecuteMode,
@@ -56,6 +55,7 @@ import {
 	WorkflowHelpers,
 } from '.';
 import * as Queue from './Queue';
+import { InternalHooksManager } from './InternalHooksManager';
 
 export class WorkflowRunner {
 	activeExecutions: ActiveExecutions.ActiveExecutions;
@@ -160,10 +160,22 @@ export class WorkflowRunner {
 			executionId = await this.runSubprocess(data, loadStaticData, executionId);
 		}
 
+		const postExecutePromise = this.activeExecutions.getPostExecutePromise(executionId);
+
 		const externalHooks = ExternalHooks();
+		postExecutePromise
+			.then(async (executionData) => {
+				void InternalHooksManager.getInstance().onWorkflowPostExecute(
+					data.workflowData,
+					executionData,
+				);
+			})
+			.catch((error) => {
+				console.error('There was a problem running internal hook "onWorkflowPostExecute"', error);
+			});
+
 		if (externalHooks.exists('workflow.postExecute')) {
-			this.activeExecutions
+			postExecutePromise
-				.getPostExecutePromise(executionId)
 				.then(async (executionData) => {
 					await externalHooks.run('workflow.postExecute', [executionData, data.workflowData]);
 				})

packages/cli/src/WorkflowRunnerProcess.ts

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable @typescript-eslint/unbound-method */
-import { IProcessMessage, WorkflowExecute } from 'n8n-core';
+import { IProcessMessage, UserSettings, WorkflowExecute } from 'n8n-core';
 
 import {
 	ExecutionError,
@@ -40,6 +40,7 @@ import {
 import { getLogger } from './Logger';
 
 import * as config from '../config';
+import { InternalHooksManager } from './InternalHooksManager';
 
 export class WorkflowRunnerProcess {
 	data: IWorkflowExecutionDataProcessWithExecution | undefined;
@@ -133,6 +134,9 @@ export class WorkflowRunnerProcess {
 		const externalHooks = ExternalHooks();
 		await externalHooks.init();
 
+		const instanceId = (await UserSettings.prepareUserSettings()).instanceId ?? '';
+		InternalHooksManager.init(instanceId);
+
 		// Credentials should now be loaded from database.
 		// We check if any node uses credentials. If it does, then
 		// init database.
@@ -243,6 +247,7 @@ export class WorkflowRunnerProcess {
 				const { workflow } = executeWorkflowFunctionOutput;
 				result = await workflowExecute.processRunExecutionData(workflow);
 				await externalHooks.run('workflow.postExecute', [result, workflowData]);
+				void InternalHooksManager.getInstance().onWorkflowPostExecute(workflowData, result);
 				await sendToParentProcess('finishExecution', { executionId, result });
 				delete this.childExecutions[executionId];
 			} catch (e) {

packages/cli/src/index.ts

@@ -5,6 +5,7 @@ export * from './CredentialTypes';
 export * from './CredentialsOverwrites';
 export * from './ExternalHooks';
 export * from './Interfaces';
+export * from './InternalHooksManager';
 export * from './LoadNodesAndCredentials';
 export * from './NodeTypes';
 export * from './WaitTracker';

packages/cli/src/telemetry/index.ts

@@ -0,0 +1,151 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import TelemetryClient = require('@rudderstack/rudder-sdk-node');
+import { IDataObject, LoggerProxy } from 'n8n-workflow';
+import config = require('../../config');
+import { getLogger } from '../Logger';
+
+interface IExecutionCountsBufferItem {
+	manual_success_count: number;
+	manual_error_count: number;
+	prod_success_count: number;
+	prod_error_count: number;
+}
+
+interface IExecutionCountsBuffer {
+	[workflowId: string]: IExecutionCountsBufferItem;
+}
+
+export class Telemetry {
+	private client?: TelemetryClient;
+
+	private instanceId: string;
+
+	private pulseIntervalReference: NodeJS.Timeout;
+
+	private executionCountsBuffer: IExecutionCountsBuffer = {};
+
+	constructor(instanceId: string) {
+		this.instanceId = instanceId;
+
+		const enabled = config.get('diagnostics.enabled') as boolean;
+		if (enabled) {
+			const conf = config.get('diagnostics.config.backend') as string;
+			const [key, url] = conf.split(';');
+
+			if (!key || !url) {
+				const logger = getLogger();
+				LoggerProxy.init(logger);
+				logger.warn('Diagnostics backend config is invalid');
+				return;
+			}
+
+			this.client = new TelemetryClient(key, url);
+
+			this.pulseIntervalReference = setInterval(async () => {
+				void this.pulse();
+			}, 6 * 60 * 60 * 1000); // every 6 hours
+		}
+	}
+
+	private async pulse(): Promise<unknown> {
+		if (!this.client) {
+			return Promise.resolve();
+		}
+
+		const allPromises = Object.keys(this.executionCountsBuffer).map(async (workflowId) => {
+			const promise = this.track('Workflow execution count', {
+				workflow_id: workflowId,
+				...this.executionCountsBuffer[workflowId],
+			});
+			this.executionCountsBuffer[workflowId].manual_error_count = 0;
+			this.executionCountsBuffer[workflowId].manual_success_count = 0;
+			this.executionCountsBuffer[workflowId].prod_error_count = 0;
+			this.executionCountsBuffer[workflowId].prod_success_count = 0;
+
+			return promise;
+		});
+
+		allPromises.push(this.track('pulse'));
+		return Promise.all(allPromises);
+	}
+
+	async trackWorkflowExecution(properties: IDataObject): Promise<void> {
+		if (this.client) {
+			const workflowId = properties.workflow_id as string;
+			this.executionCountsBuffer[workflowId] = this.executionCountsBuffer[workflowId] ?? {
+				manual_error_count: 0,
+				manual_success_count: 0,
+				prod_error_count: 0,
+				prod_success_count: 0,
+			};
+
+			if (
+				properties.success === false &&
+				properties.error_node_type &&
+				(properties.error_node_type as string).startsWith('n8n-nodes-base')
+			) {
+				// errored exec
+				void this.track('Workflow execution errored', properties);
+
+				if (properties.is_manual) {
+					this.executionCountsBuffer[workflowId].manual_error_count++;
+				} else {
+					this.executionCountsBuffer[workflowId].prod_error_count++;
+				}
+			} else if (properties.is_manual) {
+				this.executionCountsBuffer[workflowId].manual_success_count++;
+			} else {
+				this.executionCountsBuffer[workflowId].prod_success_count++;
+			}
+		}
+	}
+
+	async trackN8nStop(): Promise<void> {
+		clearInterval(this.pulseIntervalReference);
+		void this.track('User instance stopped');
+		return new Promise<void>((resolve) => {
+			if (this.client) {
+				this.client.flush(resolve);
+			} else {
+				resolve();
+			}
+		});
+	}
+
+	async identify(traits?: IDataObject): Promise<void> {
+		return new Promise<void>((resolve) => {
+			if (this.client) {
+				this.client.identify(
+					{
+						userId: this.instanceId,
+						traits: {
+							...traits,
+							instanceId: this.instanceId,
+						},
+					},
+					resolve,
+				);
+			} else {
+				resolve();
+			}
+		});
+	}
+
+	async track(eventName: string, properties?: IDataObject): Promise<void> {
+		return new Promise<void>((resolve) => {
+			if (this.client) {
+				this.client.track(
+					{
+						userId: this.instanceId,
+						event: eventName,
+						properties,
+					},
+					resolve,
+				);
+			} else {
+				resolve();
+			}
+		});
+	}
+}

packages/core/src/Interfaces.ts

@@ -145,6 +145,7 @@ export interface ITriggerTime {
 export interface IUserSettings {
 	encryptionKey?: string;
 	tunnelSubdomain?: string;
+	instanceId?: string;
 }
 
 export interface ILoadOptionsFunctions extends ILoadOptionsFunctionsBase {

packages/core/src/UserSettings.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import * as fs from 'fs';
 import * as path from 'path';
-import { randomBytes } from 'crypto';
+import { createHash, randomBytes } from 'crypto';
 // eslint-disable-next-line import/no-cycle
 import {
 	ENCRYPTION_KEY_ENV_OVERWRITE,
@@ -37,7 +37,12 @@ export async function prepareUserSettings(): Promise<IUserSettings> {
 	if (userSettings !== undefined) {
 		// Settings already exist, check if they contain the encryptionKey
 		if (userSettings.encryptionKey !== undefined) {
-			// Key already exists so return
+			// Key already exists
+			if (userSettings.instanceId === undefined) {
+				userSettings.instanceId = await generateInstanceId(userSettings.encryptionKey);
+				settingsCache = userSettings;
+			}
+
 			return userSettings;
 		}
 	} else {
@@ -52,6 +57,8 @@ export async function prepareUserSettings(): Promise<IUserSettings> {
 		userSettings.encryptionKey = randomBytes(24).toString('base64');
 	}
 
+	userSettings.instanceId = await generateInstanceId(userSettings.encryptionKey);
+
 	// eslint-disable-next-line no-console
 	console.log(`UserSettings were generated and saved to: ${settingsPath}`);
 
@@ -65,8 +72,8 @@ export async function prepareUserSettings(): Promise<IUserSettings> {
  * @export
  * @returns
  */
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+
-export async function getEncryptionKey() {
+export async function getEncryptionKey(): Promise<string | undefined> {
 	if (process.env[ENCRYPTION_KEY_ENV_OVERWRITE] !== undefined) {
 		return process.env[ENCRYPTION_KEY_ENV_OVERWRITE];
 	}
@@ -84,6 +91,36 @@ export async function getEncryptionKey() {
 	return userSettings.encryptionKey;
 }
 
+/**
+ * Returns the instance ID
+ *
+ * @export
+ * @returns
+ */
+export async function getInstanceId(): Promise<string> {
+	const userSettings = await getUserSettings();
+
+	if (userSettings === undefined) {
+		return '';
+	}
+
+	if (userSettings.instanceId === undefined) {
+		return '';
+	}
+
+	return userSettings.instanceId;
+}
+
+async function generateInstanceId(key?: string) {
+	const hash = key
+		? createHash('sha256')
+				.update(key.slice(Math.round(key.length / 2)))
+				.digest('hex')
+		: undefined;
+
+	return hash;
+}
+
 /**
  * Adds/Overwrite the given settings in the currently
  * saved user settings
@@ -141,7 +178,12 @@ export async function writeUserSettings(
 		await fsMkdir(path.dirname(settingsPath));
 	}
 
-	await fsWriteFile(settingsPath, JSON.stringify(userSettings, null, '\t'));
+	const settingsToWrite = { ...userSettings };
+	if (settingsToWrite.instanceId !== undefined) {
+		delete settingsToWrite.instanceId;
+	}
+
+	await fsWriteFile(settingsPath, JSON.stringify(settingsToWrite, null, '\t'));
 	settingsCache = JSON.parse(JSON.stringify(userSettings));
 
 	return userSettings;

packages/design-system/src/components/N8nHeading/Heading.stories.js

@@ -0,0 +1,30 @@
+import N8nHeading from './Heading.vue';
+
+export default {
+	title: 'Atoms/Heading',
+	component: N8nHeading,
+	argTypes: {
+		size: {
+			control: {
+				type: 'select',
+				options: ['2xlarge', 'xlarge', 'large', 'medium', 'small'],
+			},
+		},
+		color: {
+			control: {
+				type: 'select',
+				options: ['primary', 'text-dark', 'text-base', 'text-light'],
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nHeading,
+	},
+	template: '<n8n-heading v-bind="$props">hello world</n8n-heading>',
+});
+
+export const Heading = Template.bind({});

packages/design-system/src/components/N8nHeading/Heading.vue

@@ -0,0 +1,128 @@
+<template functional>
+	<component :is="props.tag" :class="$style[$options.methods.getClass(props)]" :style="$options.methods.getStyles(props)">
+		<slot></slot>
+	</component>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'n8n-heading',
+	props: {
+		tag: {
+			type: String,
+			default: 'span',
+		},
+		bold: {
+			type: Boolean,
+			default: false,
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean => ['2xlarge', 'xlarge', 'large', 'medium', 'small'].includes(value),
+		},
+		color: {
+			type: String,
+			validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light'].includes(value),
+		},
+	},
+	methods: {
+		getClass(props: {size: string, bold: boolean}) {
+			return `heading-${props.size}${props.bold ? '-bold' : '-regular'}`;
+		},
+		getStyles(props: {color: string}) {
+			const styles = {} as any;
+			if (props.color) {
+				styles.color = `var(--color-${props.color})`;
+			}
+			return styles;
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.bold {
+	font-weight: var(--font-weight-bold);
+}
+
+.regular {
+	font-weight: var(--font-weight-regular);
+}
+
+.heading-2xlarge {
+	font-size: var(--font-size-2xl);
+	line-height: var(--font-line-height-compact);
+}
+
+.heading-2xlarge-regular {
+	composes: regular;
+	composes: heading-2xlarge;
+}
+
+.heading-2xlarge-bold {
+	composes: bold;
+	composes: heading-2xlarge;
+}
+
+.heading-xlarge {
+	font-size: var(--font-size-xl);
+	line-height: var(--font-line-height-compact);
+}
+
+.heading-xlarge-regular {
+	composes: regular;
+	composes: heading-xlarge;
+}
+
+.heading-xlarge-bold {
+	composes: bold;
+	composes: heading-xlarge;
+}
+
+.heading-large {
+	font-size: var(--font-size-l);
+	line-height: var(--font-line-height-loose);
+}
+
+.heading-large-regular {
+	composes: regular;
+	composes: heading-large;
+}
+
+.heading-large-bold {
+	composes: bold;
+	composes: heading-large;
+}
+
+.heading-medium {
+	font-size: var(--font-size-m);
+	line-height: var(--font-line-height-loose);
+}
+
+.heading-medium-regular {
+	composes: regular;
+	composes: heading-medium;
+}
+
+.heading-medium-bold {
+	composes: bold;
+	composes: heading-medium;
+}
+
+.heading-small {
+	font-size: var(--font-size-s);
+	line-height: var(--font-line-height-regular);
+}
+
+.heading-small-regular {
+	composes: regular;
+	composes: heading-small;
+}
+
+.heading-small-bold {
+	composes: bold;
+	composes: heading-small;
+}
+
+</style>

packages/design-system/src/components/N8nHeading/index.js

@@ -0,0 +1,3 @@
+import N8nHeading from './Heading.vue';
+
+export default N8nHeading;

packages/design-system/src/components/N8nIconButton/IconButton.vue

@@ -1,5 +1,5 @@
 <template functional>
-	<n8n-button
+	<component :is="$options.components.N8nButton"
 		:type="props.type"
 		:disabled="props.disabled"
 		:size="props.size === 'xlarge' ? 'large' : props.size"
@@ -14,7 +14,6 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
 import N8nButton from '../N8nButton';
 
 const iconSizeMap = {
@@ -22,10 +21,11 @@ const iconSizeMap = {
 	xlarge: 'large',
 };
 
-Vue.component('N8nButton', N8nButton);
-
 export default {
 	name: 'n8n-icon-button',
+	components: {
+		N8nButton,
+	},
 	props: {
 		type: {
 			type: String,

packages/design-system/src/components/N8nInfoTip/InfoTip.vue

@@ -1,19 +1,16 @@
 <template functional>
 	<div :class="$style.infotip">
-		<n8n-icon icon="info-circle" /> <span><slot></slot></span>
+		<component :is="$options.components.N8nIcon" icon="info-circle" /> <span><slot></slot></span>
 	</div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-
 import N8nIcon from '../N8nIcon';
 
-Vue.component('N8nIcon', N8nIcon);
-
 export default {
 	name: 'n8n-info-tip',
-	props: {
+	components: {
+		N8nIcon,
 	},
 };
 </script>

packages/design-system/src/components/N8nInputLabel/InputLabel.vue

@@ -1,15 +1,15 @@
 <template functional>
 	<div :class="$style.inputLabel">
-		<div :class="$style.label">
+		<div :class="props.label ? $style.label: ''">
-			<span>
+			<component v-if="props.label" :is="$options.components.N8nText" :bold="true">
-				{{ $options.methods.addTargetBlank(props.label) }}
+				{{ props.label }}
-				<span v-if="props.required" :class="$style.required">*</span>
+				<component :is="$options.components.N8nText" color="primary" :bold="true" v-if="props.required">*</component>
-			</span>
+			</component>
 			<span :class="$style.infoIcon" v-if="props.tooltipText">
-				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
+				<component :is="$options.components.N8nTooltip" placement="top" :popper-class="$style.tooltipPopper">
-					<n8n-icon icon="question-circle" />
+					<component :is="$options.components.N8nIcon" icon="question-circle" />
-					<div slot="content" v-html="props.tooltipText"></div>
+					<div slot="content" v-html="$options.methods.addTargetBlank(props.tooltipText)"></div>
-				</n8n-tooltip>
+				</component>
 			</span>
 		</div>
 		<slot></slot>
@@ -17,22 +17,22 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import N8nText from '../N8nText';
-
 import N8nTooltip from '../N8nTooltip';
 import N8nIcon from '../N8nIcon';
 
 import { addTargetBlank } from '../utils/helpers';
 
-Vue.component('N8nIcon', N8nIcon);
-Vue.component('N8nTooltip', N8nTooltip);
-
 export default {
 	name: 'n8n-input-label',
+	components: {
+		N8nText,
+		N8nIcon,
+		N8nTooltip,
+	},
 	props: {
 		label: {
 			type: String,
-			required: true,
 		},
 		tooltipText: {
 			type: String,
@@ -55,8 +55,6 @@ export default {
 }
 
 .label {
-	font-weight: var(--font-weight-bold);
-	font-size: var(--font-size-s);
 	margin-bottom: var(--spacing-2xs);
 
 	* {
@@ -69,10 +67,6 @@ export default {
 	display: var(--info-icon-display, none);
 }
 
-.required {
-	color: var(--color-primary);
-}
-
 .tooltipPopper {
 	max-width: 400px;
 }

packages/design-system/src/components/N8nSelect/Select.stories.js

@@ -1,5 +1,6 @@
 import N8nSelect from './Select.vue';
 import N8nOption from '../N8nOption';
+import N8nIcon from '../N8nIcon';
 import { action } from '@storybook/addon-actions';
 
 export default {
@@ -48,6 +49,7 @@ const Template = (args, { argTypes }) => ({
 	components: {
 		N8nSelect,
 		N8nOption,
+		N8nIcon,
 	},
 	template: '<n8n-select v-bind="$props" v-model="val" @input="onInput" @change="onChange"><n8n-option value="1">op1</n8n-option><n8n-option value="2">op2</n8n-option></n8n-select>',
 	data() {
@@ -73,6 +75,7 @@ const ManyTemplate = (args, { argTypes }) => ({
 	components: {
 		N8nSelect,
 		N8nOption,
+		N8nIcon,
 	},
 	template: `<div class="multi-container">${selects}</div>`,
 	methods,
@@ -97,6 +100,7 @@ const ManyTemplateWithIcon = (args, { argTypes }) => ({
 	components: {
 		N8nSelect,
 		N8nOption,
+		N8nIcon,
 	},
 	template: `<div class="multi-container">${selectsWithIcon}</div>`,
 	methods,
@@ -120,6 +124,7 @@ const LimitedWidthTemplate = (args, { argTypes }) => ({
 	components: {
 		N8nSelect,
 		N8nOption,
+		N8nIcon,
 	},
 	template: '<div style="width:100px;"><n8n-select v-bind="$props" v-model="val" @input="onInput" @change="onChange"><n8n-option value="1" label="opt1 11 1111" /><n8n-option value="2" label="opt2 test very long ipsum"/></n8n-select></div>',
 	data() {

packages/design-system/src/components/N8nText/Text.stories.js

@@ -0,0 +1,30 @@
+import N8nText from './Text.vue';
+
+export default {
+	title: 'Atoms/Text',
+	component: N8nText,
+	argTypes: {
+		size: {
+			control: {
+				type: 'select',
+				options: ['small', 'medium', 'large'],
+			},
+		},
+		color: {
+			control: {
+				type: 'select',
+				options: ['primary', 'text-dark', 'text-base', 'text-light'],
+			},
+		},
+	},
+};
+
+const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nText,
+	},
+	template: '<n8n-text v-bind="$props">hello world</n8n-text>',
+});
+
+export const Text = Template.bind({});

packages/design-system/src/components/N8nText/Text.vue

@@ -0,0 +1,102 @@
+<template functional>
+	<span :class="$style[$options.methods.getClass(props)]" :style="$options.methods.getStyles(props)">
+		<slot></slot>
+	</span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'n8n-text',
+	props: {
+		bold: {
+			type: Boolean,
+			default: false,
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean => ['large', 'medium', 'small'].includes(value),
+		},
+		color: {
+			type: String,
+			validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light'].includes(value),
+		},
+		align: {
+			type: String,
+			validator: (value: string): boolean => ['right', 'left', 'center'].includes(value),
+		},
+	},
+	methods: {
+		getClass(props: {size: string, bold: boolean}) {
+			return `body-${props.size}${props.bold ? '-bold' : '-regular'}`;
+		},
+		getStyles(props: {color: string, align: string}) {
+			const styles = {} as any;
+			if (props.color) {
+				styles.color = `var(--color-${props.color})`;
+			}
+			if (props.align) {
+				styles['text-align'] = props.align;
+			}
+			return styles;
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.bold {
+	font-weight: var(--font-weight-bold);
+}
+
+.regular {
+	font-weight: var(--font-weight-regular);
+}
+
+.body-large {
+	font-size: var(--font-size-m);
+	line-height: var(--font-line-height-xloose);
+}
+
+.body-large-regular {
+	composes: regular;
+	composes: body-large;
+}
+
+.body-large-bold {
+	composes: bold;
+	composes: body-large;
+}
+
+.body-medium {
+	font-size: var(--font-size-s);
+	line-height: var(--font-line-height-loose);
+}
+
+.body-medium-regular {
+	composes: regular;
+	composes: body-medium;
+}
+
+.body-medium-bold {
+	composes: bold;
+	composes: body-medium;
+}
+
+.body-small {
+	font-size: var(--font-size-2xs);
+	line-height: var(--font-line-height-loose);
+}
+
+.body-small-regular {
+	composes: regular;
+	composes: body-small;
+}
+
+.body-small-bold {
+	composes: bold;
+	composes: body-small;
+}
+
+</style>

packages/design-system/src/components/N8nText/index.js

@@ -0,0 +1,3 @@
+import N8nText from './Text.vue';
+
+export default N8nText;

packages/design-system/src/components/index.js

@@ -5,10 +5,12 @@ import N8nInput from './N8nInput';
 import N8nInfoTip from './N8nInfoTip';
 import N8nInputNumber from './N8nInputNumber';
 import N8nInputLabel from './N8nInputLabel';
+import N8nHeading from './N8nHeading';
 import N8nMenu from './N8nMenu';
 import N8nMenuItem from './N8nMenuItem';
 import N8nSelect from './N8nSelect';
 import N8nSpinner from './N8nSpinner';
+import N8nText from './N8nText';
 import N8nTooltip from './N8nTooltip';
 import N8nOption from './N8nOption';
 
@@ -20,10 +22,12 @@ export {
 	N8nInput,
 	N8nInputLabel,
 	N8nInputNumber,
+	N8nHeading,
 	N8nMenu,
 	N8nMenuItem,
 	N8nSelect,
 	N8nSpinner,
+	N8nText,
 	N8nTooltip,
 	N8nOption,
 };

packages/design-system/src/styleguide/TextClasses.vue

@@ -1,49 +0,0 @@
-<template>
-	<table :class="$style.table">
-		<tr v-for="c in classes" :key="c">
-			<td>.{{ c }}{{ postfix ? postfix : '' }}</td>
-			<td :class="$style[`${c}${postfix ? postfix : ''}`]">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in
-				luctus sapien, a suscipit neque.
-			</td>
-		</tr>
-	</table>
-</template>
-
-<script lang="ts">
-export default {
-	name: 'text-classes',
-	data(): { observer: null | MutationObserver; classes: string[] } {
-		return {
-			observer: null as null | MutationObserver,
-			classes: [
-				'heading1',
-				'heading2',
-				'heading3',
-				'heading4',
-				'body-large',
-				'body-medium',
-				'body-small',
-			],
-		};
-	},
-	props: {
-		postfix: {
-			type: String,
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-@use "~/theme/src/common/typography.scss";
-
-.table {
-	text-align: center;
-	color: var(--color-text-dark);
-
-	* {
-		padding-bottom: 1em;
-	}
-}
-</style>

packages/design-system/src/styleguide/spacing.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import Sizes from './Sizes.vue';
-import TextClasses from './TextClasses.vue';
 
 <Meta
 	title="Styleguide/Spacing"

packages/design-system/src/styleguide/text.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import TextClasses from './TextClasses.vue';
-
-<Meta
-	title="Styleguide/Text"
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
-		},
-	}}
-/>
-
-# Regular
-
-<Canvas>
-	<Story name="regular">
-		{{
-			template: `<text-classes />`,
-			components: {
-				TextClasses,
-			},
-		}}
-	</Story>
-</Canvas>
-
-# Bold
-
-<Canvas>
-	<Story name="bold">
-		{{
-			template: `<text-classes postfix="-bold" />`,
-			components: {
-				TextClasses,
-			},
-		}}
-	</Story>
-</Canvas>

packages/design-system/theme/src/_tokens.scss

@@ -259,6 +259,7 @@
 		var(--color-background-xlight-l)
 	);
 
+	--border-radius-large: 8px;
 	--border-radius-base: 4px;
 	--border-radius-small: 2px;
 	--border-color-base: var(--color-foreground-base);

packages/design-system/theme/src/collapse.scss

@@ -29,7 +29,7 @@
 		@include mixins.e(arrow) {
 			margin: 0 8px 0 auto;
 			transition: transform 0.3s;
-			font-weight: 300;
+			font-weight: 400;
 			@include mixins.when(active) {
 				transform: rotate(90deg);
 			}

packages/design-system/theme/src/common/typography.scss

@@ -1,66 +0,0 @@
-%bold {
-	font-weight: var(--font-weight-bold);
-}
-
-.heading1 {
-	font-size: var(--font-size-2xl);
-	line-height: var(--font-line-height-compact);
-}
-
-.heading1-bold {
-	@extend %bold, .heading1;
-}
-
-.heading2 {
-	font-size: var(--font-size-xl);
-	line-height: var(--font-line-height-loose);
-}
-
-.heading2-bold {
-	@extend %bold, .heading2;
-}
-
-.heading3 {
-	font-size: var(--font-size-m);
-	line-height: var(--font-line-height-loose);
-}
-
-.heading3-bold {
-	@extend %bold, .heading3;
-}
-
-.heading4 {
-	font-size: var(--font-size-s);
-	line-height: var(--font-line-height-regular);
-}
-
-.heading4-bold {
-	@extend %bold, .heading4;
-}
-
-.body-large {
-	font-size: var(--font-size-m);
-	line-height: var(--font-line-height-xloose);
-}
-
-.body-large-bold {
-	@extend %bold, .body-large;
-}
-
-.body-medium {
-	font-size: var(--font-size-s);
-	line-height: var(--font-line-height-loose);
-}
-
-.body-medium-bold {
-	@extend %bold, .body-medium;
-}
-
-.body-small {
-	font-size: var(--font-size-2xs);
-	line-height: var(--font-line-height-loose);
-}
-
-.body-small-bold {
-	@extend %bold, .body-small;
-}

packages/design-system/theme/src/common/var.scss

@@ -753,11 +753,7 @@ $switch-button-size: 16px;
 $dialog-background-color: $color-white;
 $dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 /// fontSize||Font|1
-$dialog-title-font-size: $font-size-large;
-/// fontSize||Font|1
 $dialog-content-font-size: 14px;
-/// fontLineHeight||LineHeight|2
-$dialog-font-line-height: $font-line-height-primary;
 /// padding||Spacing|3
 $dialog-padding-primary: var(--spacing-l);
 $dialog-close-top: var(--dialog-close-top, var(--spacing-l));

packages/design-system/theme/src/dialog.scss

@@ -59,9 +59,10 @@
 	}
 
 	@include mixins.e(title) {
-		line-height: var.$dialog-font-line-height;
+		line-height: var(--font-line-height-compact);
-		font-size: var.$dialog-title-font-size;
+		font-size: var(--font-size-xl);
 		color: var(--color-text-dark);
+		font-weight: var(--font-weight-regular);
 	}
 
 	@include mixins.e(body) {

packages/design-system/theme/src/message-box.scss

@@ -48,6 +48,7 @@
 		font-size: var.$messagebox-font-size;
 		line-height: 1;
 		color: var.$messagebox-title-color;
+		font-weight: var(--font-weight-regular);
 	}
 
 	@include mixins.e(headerbtn) {
@@ -129,6 +130,7 @@
 
 	@include mixins.e(message) {
 		margin: 0;
+		font-weight: var(--font-weight-regular);
 
 		& p {
 			margin: 0;

packages/design-system/theme/src/reset.scss

@@ -11,7 +11,7 @@ body {
 	overscroll-behavior-x: none;
 	line-height: 1;
 	font-size: var(--font-size-m);
-	font-weight: 300;
+	font-weight: var(--font-weight-regular);
 	color: var(--color-text-dark);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

packages/editor-ui/.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
 		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 		'semi': [2, 'always'],
-		'indent': ['error', 'tab'],
+		'indent': ['error', 'tab', { "SwitchCase": 1 }],
 		'comma-dangle': ['error', 'always-multiline'],
 		'no-tabs': 0,
 		'no-labels': 0,

packages/editor-ui/src/App.vue

@@ -9,12 +9,18 @@
 		<div id="content">
 			<router-view />
 		</div>
+		<Telemetry />
 	</div>
 </template>
 
 <script lang="ts">
+import Telemetry from './components/Telemetry.vue';
+
 export default {
 	name: 'App',
+	components: {
+		Telemetry,
+	},
 };
 </script>
 

packages/editor-ui/src/Interface.ts

@@ -18,6 +18,7 @@ import {
 	IRun,
 	IRunData,
 	ITaskData,
+	ITelemetrySettings,
 	WorkflowExecuteMode,
 } from 'n8n-workflow';
 
@@ -129,7 +130,6 @@ export interface IRestApi {
 	getPastExecutions(filter: object, limit: number, lastId?: string | number, firstId?: string | number): Promise<IExecutionsListResponse>;
 	stopCurrentExecution(executionId: string): Promise<IExecutionsStopData>;
 	makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>; // tslint:disable-line:no-any
-	getSettings(): Promise<IN8nUISettings>;
 	getNodeTypes(onlyLatest?: boolean): Promise<INodeTypeDescription[]>;
 	getNodesInformation(nodeInfos: INodeTypeNameVersion[]): Promise<INodeTypeDescription[]>;
 	getNodeParameterOptions(nodeTypeAndVersion: INodeTypeNameVersion, path: string, methodName: string, currentNodeParameters: INodeParameters, credentials?: INodeCredentials): Promise<INodePropertyOptions[]>;
@@ -437,6 +437,17 @@ export interface IVersionNotificationSettings {
 	infoUrl: string;
 }
 
+export type IPersonalizationSurveyKeys = 'companySize' | 'codingSkill' | 'workArea' | 'otherWorkArea';
+
+export type IPersonalizationSurveyAnswers = {
+	[key in IPersonalizationSurveyKeys]: string | null
+};
+
+export interface IPersonalizationSurvey {
+	answers?: IPersonalizationSurveyAnswers;
+	shouldShow: boolean;
+}
+
 export interface IN8nUISettings {
 	endpointWebhook: string;
 	endpointWebhookTest: string;
@@ -457,6 +468,8 @@ export interface IN8nUISettings {
 	};
 	versionNotifications: IVersionNotificationSettings;
 	instanceId: string;
+	personalizationSurvey?: IPersonalizationSurvey;
+	telemetry: ITelemetrySettings;
 }
 
 export interface IWorkflowSettings extends IWorkflowSettingsWorkflow {
@@ -599,6 +612,7 @@ export interface IRootState {
 	workflow: IWorkflowDb;
 	sidebarMenuItems: IMenuItem[];
 	instanceId: string;
+	telemetry: ITelemetrySettings | null;
 }
 
 export interface ICredentialTypeMap {
@@ -636,6 +650,10 @@ export interface IUiState {
 	isPageLoading: boolean;
 }
 
+export interface ISettingsState {
+	settings: IN8nUISettings;
+}
+
 export interface IVersionsState {
 	versionNotificationSettings: IVersionNotificationSettings;
 	nextVersions: IVersion[];

packages/editor-ui/src/api/settings.ts

@@ -0,0 +1,12 @@
+import { IDataObject } from 'n8n-workflow';
+import { IRestApiContext, IN8nUISettings, IPersonalizationSurveyAnswers } from '../Interface';
+import { makeRestApiRequest } from './helpers';
+
+export async function getSettings(context: IRestApiContext): Promise<IN8nUISettings> {
+	return await makeRestApiRequest(context, 'GET', '/settings');
+}
+
+export async function submitPersonalizationSurvey(context: IRestApiContext, params: IPersonalizationSurveyAnswers): Promise<void> {
+	await makeRestApiRequest(context, 'POST', '/user-survey', params as unknown as IDataObject);
+}
+

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -40,7 +40,7 @@
 
 		<n8n-info-tip v-if="documentationUrl && credentialProperties.length">
 			Need help filling out these fields?
-			<a :href="documentationUrl" target="_blank">Open docs</a>
+			<a :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">Open docs</a>
 		</n8n-info-tip>
 
 		<CopyInput
@@ -168,6 +168,14 @@ export default Vue.extend({
 		onDataChange (event: { name: string; value: string | number | boolean | Date | null }): void {
 			this.$emit('change', event);
 		},
+		onDocumentationUrlClick (): void {
+			this.$telemetry.track('User clicked credential modal docs link', {
+				docs_link: this.documentationUrl,
+				credential_type: this.credentialTypeName,
+				source: 'modal',
+				workflow_id: this.$store.getters.workflowId,
+			});
+		},
 	},
 	watch: {
 		showOAuthSuccessBanner(newValue, oldValue) {

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -668,6 +668,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 				credentialTypeData: this.credentialData,
 			});
 
+			this.$telemetry.track('User created credentials', { credential_type: credentialDetails.type, workflow_id: this.$store.getters.workflowId });
+
 			return credential;
 		},
 

packages/editor-ui/src/components/CredentialsList.vue

@@ -1,10 +1,11 @@
 <template>
-	<div v-if="dialogVisible">
+	<Modal
-		<el-dialog :visible="dialogVisible" append-to-body width="80%" title="Credentials" :before-close="closeDialog">
+		:name="CREDENTIAL_LIST_MODAL_KEY"
-			<div class="text-very-light">
+		width="80%"
-				Your saved credentials:
+		title="Credentials"
-			</div>
+	>
-
+		<template v-slot:content>
+			<n8n-heading tag="h3" size="small" color="text-light">Your saved credentials:</n8n-heading>
 			<div class="new-credentials-button">
 				<n8n-button
 					title="Create New Credentials"
@@ -31,8 +32,8 @@
 					</template>
 				</el-table-column>
 			</el-table>
-		</el-dialog>
+		</template>
-	</div>
+	</Modal>
 </template>
 
 <script lang="ts">
@@ -46,6 +47,9 @@ import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
 import { convertToDisplayDate } from './helpers';
+import { CREDENTIAL_SELECT_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY } from '@/constants';
+
+import Modal from './Modal.vue';
 
 export default mixins(
 	externalHooks,
@@ -54,9 +58,14 @@ export default mixins(
 	showMessage,
 ).extend({
 	name: 'CredentialsList',
-	props: [
+	components: {
-		'dialogVisible',
+		Modal,
-	],
+	},
+	data() {
+		return {
+			CREDENTIAL_LIST_MODAL_KEY,
+		};
+	},
 	computed: {
 		...mapGetters('credentials', ['allCredentials']),
 		credentialsToDisplay() {
@@ -76,25 +85,21 @@ export default mixins(
 			}, []);
 		},
 	},
-	watch: {
+	mounted() {
-		dialogVisible (newValue) {
+		this.$externalHooks().run('credentialsList.mounted');
-			this.$externalHooks().run('credentialsList.dialogVisibleChanged', { dialogVisible: newValue });
+		this.$telemetry.track('User opened Credentials panel', { workflow_id: this.$store.getters.workflowId });
 	},
+	destroyed() {
+		this.$externalHooks().run('credentialsList.destroyed');
 	},
 	methods: {
-		closeDialog () {
-			// Handle the close externally as the visible parameter is an external prop
-			// and is so not allowed to be changed here.
-			this.$emit('closeDialog');
-			return false;
-		},
-
 		createCredential () {
-			this.$store.dispatch('ui/openCredentialsSelectModal');
+			this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
 		},
 
 		editCredential (credential: ICredentialsResponse) {
 			this.$store.dispatch('ui/openExisitngCredential', { id: credential.id});
+			this.$telemetry.track('User opened Credential modal', { credential_type: credential.type, source: 'primary_menu', new_credential: false, workflow_id: this.$store.getters.workflowId });
 		},
 
 		async deleteCredential (credential: ICredentialsResponse) {
@@ -130,7 +135,7 @@ export default mixins(
 .new-credentials-button {
 	float: right;
 	position: relative;
-	top: -15px;
+	margin-bottom: var(--spacing-2xs);
 }
 
 .cred-operations {

packages/editor-ui/src/components/CredentialsSelectModal.vue

@@ -1,6 +1,6 @@
 <template>
 	<Modal
-		:name="modalName"
+		:name="CREDENTIAL_SELECT_MODAL_KEY"
 		:eventBus="modalBus"
 		width="50%"
 		:center="true"
@@ -10,7 +10,7 @@
 			<h2 :class="$style.title">Add new credential</h2>
 		</template>
 		<template slot="content">
-			<div :class="$style.container">
+			<div>
 				<div :class="$style.subtitle">Select an app or service to connect to</div>
 				<n8n-select
 					filterable
@@ -51,6 +51,7 @@ import Vue from 'vue';
 import { mapGetters } from "vuex";
 
 import Modal from './Modal.vue';
+import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
 
 export default Vue.extend({
 	name: 'CredentialsSelectModal',
@@ -69,16 +70,12 @@ export default Vue.extend({
 		return {
 			modalBus: new Vue(),
 			selected: '',
+			CREDENTIAL_SELECT_MODAL_KEY,
 		};
 	},
 	computed: {
 		...mapGetters('credentials', ['allCredentialTypes']),
 	},
-	props: {
-		modalName: {
-			type: String,
-		},
-	},
 	methods: {
 		onSelect(type: string) {
 			this.selected = type;
@@ -86,16 +83,13 @@ export default Vue.extend({
 		openCredentialType () {
 			this.modalBus.$emit('close');
 			this.$store.dispatch('ui/openNewCredential', { type: this.selected });
+			this.$telemetry.track('User opened Credential modal', { credential_type: this.selected, source: 'primary_menu', new_credential: true, workflow_id: this.$store.getters.workflowId });
 		},
 	},
 });
 </script>
 
 <style module lang="scss">
-.container {
-	margin-bottom: var(--spacing-l);
-}
-
 .title {
 	font-size: var(--font-size-xl);
 	line-height: var(--font-line-height-regular);

packages/editor-ui/src/components/DataDisplay.vue

@@ -94,6 +94,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 		node (node, oldNode) {
 			if(node && !oldNode) {
 				this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.nodeType, this.getWorkflow()) });
+				this.$telemetry.track('User opened node modal', { node_type: this.nodeType ? this.nodeType.name : '', workflow_id: this.$store.getters.workflowId });
 			}
 		},
 	},

packages/editor-ui/src/components/DuplicateWorkflowDialog.vue

@@ -10,15 +10,12 @@
 	>
 		<template v-slot:content>
 			<div :class="$style.content">
-				<el-row>
 				<n8n-input
 					v-model="name"
 					ref="nameInput"
 					placeholder="Enter workflow name"
 					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
 				/>
-				</el-row>
-				<el-row>
 				<TagsDropdown
 					:createEnabled="true"
 					:currentTagIds="currentTagIds"
@@ -29,7 +26,6 @@
 					placeholder="Choose or create a tag"
 					ref="dropdown"
 				/>
-				</el-row>
 			</div>
 		</template>
 		<template v-slot:footer="{ close }">
@@ -54,7 +50,7 @@ import Modal from "./Modal.vue";
 export default mixins(showMessage, workflowHelpers).extend({
 	components: { TagsDropdown, Modal },
 	name: "DuplicateWorkflow",
-	props: ["dialogVisible", "modalName", "isActive"],
+	props: ["modalName", "isActive"],
 	data() {
 		const currentTagIds = this.$store.getters[
 			"workflowTags"
@@ -113,12 +109,18 @@ export default mixins(showMessage, workflowHelpers).extend({
 				return;
 			}
 
+			const currentWorkflowId = this.$store.getters.workflowId;
+
 			this.$data.isSaving = true;
 
 			const saved = await this.saveAsNewWorkflow({name, tags: this.currentTagIds, resetWebhookUrls: true, openInNewWindow: true});
 
 			if (saved) {
 				this.closeDialog();
+				this.$telemetry.track('User duplicated workflow', {
+					old_workflow_id: currentWorkflowId,
+					workflow_id: this.$store.getters.workflowId,
+				});
 			}
 
 			this.$data.isSaving = false;
@@ -132,8 +134,8 @@ export default mixins(showMessage, workflowHelpers).extend({
 
 <style lang="scss" module>
 .content {
-	> div {
+	> *:not(:last-child) {
-		margin-bottom: 15px;
+		margin-bottom: var(--spacing-m);
 	}
 }
 

packages/editor-ui/src/components/ExecutionsList.vue

@@ -580,6 +580,7 @@ export default mixins(
 			this.handleAutoRefreshToggle();
 
 			this.$externalHooks().run('executionsList.openDialog');
+			this.$telemetry.track('User opened Executions log', { workflow_id: this.$store.getters.workflowId });
 		},
 		async retryExecution (execution: IExecutionShortResponse, loadWorkflow?: boolean) {
 			this.isDataLoading = true;

packages/editor-ui/src/components/ExpressionEdit.vue

@@ -97,9 +97,7 @@ export default mixins(
 		},
 
 		itemSelected (eventData: IVariableItemSelected) {
-			// User inserted item from Expression Editor variable selector
 			(this.$refs.inputFieldExpression as any).itemSelected(eventData); // tslint:disable-line:no-any
-
 			this.$externalHooks().run('expressionEdit.itemSelected', { parameter: this.parameter, value: this.value, selectedItem: eventData });
 		},
 	},
@@ -110,6 +108,10 @@ export default mixins(
 
 			const resolvedExpressionValue = this.$refs.expressionResult && (this.$refs.expressionResult as any).getValue() || undefined;  // tslint:disable-line:no-any
 			this.$externalHooks().run('expressionEdit.dialogVisibleChanged', { dialogVisible: newValue, parameter: this.parameter, value: this.value, resolvedExpressionValue });
+
+			if (!newValue) {
+				this.$telemetry.track('User closed Expression Editor', { empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value, workflow_id: this.$store.getters.workflowId });
+			}
 		},
 	},
 });

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -68,7 +68,7 @@
 				<SaveButton
 					:saved="!this.isDirty && !this.isNewWorkflow"
 					:disabled="isWorkflowSaving"
-					@click="saveCurrentWorkflow"
+					@click="onSaveButtonClick"
 				/>
 			</template>
 		</PushConnectionTracker>
@@ -135,11 +135,14 @@ export default mixins(workflowHelpers).extend({
 		isWorkflowSaving(): boolean {
 			return this.$store.getters.isActionActive("workflowSaving");
 		},
-		currentWorkflowId() {
+		currentWorkflowId(): string {
 			return this.$route.params.name;
 		},
 	},
 	methods: {
+		onSaveButtonClick () {
+			this.saveCurrentWorkflow(undefined);
+		},
 		onTagsEditEnable() {
 			this.$data.appliedTagIds = this.currentWorkflowTagIds;
 			this.$data.isTagsEditEnabled = true;
@@ -168,6 +171,8 @@ export default mixins(workflowHelpers).extend({
 			this.$data.tagsSaving = true;
 
 			const saved = await this.saveCurrentWorkflow({ tags });
+			this.$telemetry.track('User edited workflow tags', { workflow_id: this.currentWorkflowId as string, new_tag_count: tags.length });
+			
 			this.$data.tagsSaving = false;
 			if (saved) {
 				this.$data.isTagsEditEnabled = false;

packages/editor-ui/src/components/MainSidebar.vue

@@ -2,7 +2,6 @@
 	<div id="side-menu">
 		<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
 		<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
-		<credentials-list :dialogVisible="credentialOpenDialogVisible" @closeDialog="closeCredentialOpenDialog"></credentials-list>
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
 		<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
@@ -113,7 +112,7 @@
 						<span slot="title" class="item-title-root">Help</span>
 					</template>
 
-					<MenuItemsIterator :items="helpMenuItems" />
+					<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
 
 					<n8n-menu-item index="help-about">
 						<template slot="title">
@@ -151,7 +150,6 @@ import {
 } from '../Interface';
 
 import About from '@/components/About.vue';
-import CredentialsList from '@/components/CredentialsList.vue';
 import ExecutionsList from '@/components/ExecutionsList.vue';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
@@ -168,6 +166,7 @@ import { saveAs } from 'file-saver';
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
 import MenuItemsIterator from './MainSidebarMenuItemsIterator.vue';
+import { CREDENTIAL_LIST_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
 
 const helpMenuItems: IMenuItem[] = [
 	{
@@ -214,7 +213,6 @@ export default mixins(
 		name: 'MainHeader',
 		components: {
 			About,
-			CredentialsList,
 			ExecutionsList,
 			GiftNotificationIcon,
 			WorkflowSettings,
@@ -225,7 +223,6 @@ export default mixins(
 				aboutDialogVisible: false,
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				credentialOpenDialogVisible: false,
 				executionsListDialogVisible: false,
 				stopExecutionInProgress: false,
 				helpMenuItems,
@@ -293,6 +290,9 @@ export default mixins(
 			},
 		},
 		methods: {
+			trackHelpItemClick (itemType: string) {
+				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.$store.getters.workflowId });
+			},
 			toggleCollapse () {
 				this.$store.commit('ui/toggleSidebarMenuCollapse');
 			},
@@ -306,14 +306,11 @@ export default mixins(
 			closeExecutionsListOpenDialog () {
 				this.executionsListDialogVisible = false;
 			},
-			closeCredentialOpenDialog () {
-				this.credentialOpenDialogVisible = false;
-			},
 			openTagManager() {
-				this.$store.dispatch('ui/openTagsManagerModal');
+				this.$store.dispatch('ui/openModal', TAGS_MANAGER_MODAL_KEY);
 			},
 			openUpdatesPanel() {
-				this.$store.dispatch('ui/openUpdatesPanel');
+				this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 			},
 			async stopExecution () {
 				const executionId = this.$store.getters.activeExecutionId;
@@ -361,6 +358,7 @@ export default mixins(
 						return;
 					}
 
+					this.$telemetry.track('User imported workflow', { source: 'file', workflow_id: this.$store.getters.workflowId });
 					this.$root.$emit('importWorkflowData', { data: worflowData });
 				};
 
@@ -371,7 +369,7 @@ export default mixins(
 			},
 			async handleSelect (key: string, keyPath: string) {
 				if (key === 'workflow-open') {
-					this.$store.dispatch('ui/openWorklfowOpenModal');
+					this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
 				} else if (key === 'workflow-import-file') {
 					(this.$refs.importFile as HTMLInputElement).click();
 				} else if (key === 'workflow-import-url') {
@@ -423,15 +421,18 @@ export default mixins(
 
 					workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
 
+					this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
+
 					saveAs(blob, workflowName + '.json');
 				} else if (key === 'workflow-save') {
-					this.saveCurrentWorkflow();
+					this.saveCurrentWorkflow(undefined);
 				} else if (key === 'workflow-duplicate') {
-					this.$store.dispatch('ui/openDuplicateModal');
+					this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
 				} else if (key === 'help-about') {
 					this.aboutDialogVisible = true;
+					this.trackHelpItemClick('about');
 				} else if (key === 'workflow-settings') {
-					this.$store.dispatch('ui/openWorkflowSettingsModal');
+					this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
 				} else if (key === 'workflow-new') {
 					const result = this.$store.getters.getStateIsDirty;
 					if(result) {
@@ -463,9 +464,9 @@ export default mixins(
 					}
 					this.$titleReset();
 				} else if (key === 'credentials-open') {
-					this.credentialOpenDialogVisible = true;
+					this.$store.dispatch('ui/openModal', CREDENTIAL_LIST_MODAL_KEY);
 				} else if (key === 'credentials-new') {
-					this.$store.dispatch('ui/openCredentialsSelectModal');
+					this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
 				} else if (key === 'execution-open-workflow') {
 					if (this.workflowExecution !== null) {
 						this.openWorkflow(this.workflowExecution.workflowId as string);

packages/editor-ui/src/components/MainSidebarMenuItemsIterator.vue

@@ -22,6 +22,7 @@ export default Vue.extend({
 	props: [
 		'items',
 		'root',
+		'afterItemClick',
 	],
 	methods: {
 		onClick(item: IMenuItem) {
@@ -37,6 +38,10 @@ export default Vue.extend({
 				else {
 					window.location.assign(item.properties.href);
 				}
+
+				if(this.afterItemClick) {
+					this.afterItemClick(item.id);
+				}
 			}
 		},
 	},

packages/editor-ui/src/components/Modal.vue

@@ -2,26 +2,37 @@
 	<el-dialog
 		:visible="visible"
 		:before-close="closeDialog"
-		:title="title"
+		:class="{'dialog-wrapper': true, [$style.center]: center, scrollable: scrollable}"
-		:class="{'dialog-wrapper': true, 'center': center, 'scrollable': scrollable}"
 		:width="width"
 		:show-close="showClose"
 		:custom-class="getCustomClass()"
+		:close-on-click-modal="closeOnClickModal"
+		:close-on-press-escape="closeOnPressEscape"
 		:style="styles"
 		append-to-body
 	>
-		<template v-slot:title>
+		<template v-slot:title v-if="$scopedSlots.header">
 			<slot name="header" v-if="!loading" />
 		</template>
+		<template v-slot:title v-else-if="title">
+			<div :class="centerTitle ? $style.centerTitle : ''">
+				<div v-if="title">
+					<n8n-heading tag="h1" size="xlarge">{{title}}</n8n-heading>
+				</div>
+				<div v-if="subtitle" :class="$style.subtitle">
+					<n8n-heading tag="h3" size="small" color="text-light">{{subtitle}}</n8n-heading>
+				</div>
+			</div>
+		</template>
 		<div class="modal-content" @keydown.stop @keydown.enter="handleEnter" @keydown.esc="closeDialog">
 			<slot v-if="!loading"  name="content"/>
-			<div class="loader" v-else>
+			<div :class="$style.loader" v-else>
 				<n8n-spinner />
 			</div>
 		</div>
-		<el-row  v-if="!loading" class="modal-footer">
+		<div v-if="!loading && $scopedSlots.footer" :class="$style.footer">
 			<slot name="footer" :close="closeDialog" />
-		</el-row>
+		</div>
 	</el-dialog>
 </template>
 
@@ -37,6 +48,9 @@ export default Vue.extend({
 		title: {
 			type: String,
 		},
+		subtitle: {
+			type: String,
+		},
 		eventBus: {
 			type: Vue,
 		},
@@ -72,6 +86,9 @@ export default Vue.extend({
 		height: {
 			type: String,
 		},
+		minHeight: {
+			type: String,
+		},
 		maxHeight: {
 			type: String,
 		},
@@ -79,6 +96,18 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		centerTitle: {
+			type: Boolean,
+			default: false,
+		},
+		closeOnClickModal: {
+			type: Boolean,
+			default: true,
+		},
+		closeOnPressEscape: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	mounted() {
 		window.addEventListener('keydown', this.onWindowKeydown);
@@ -151,6 +180,9 @@ export default Vue.extend({
 			if (this.height) {
 				styles['--dialog-height'] = this.height;
 			}
+			if (this.minHeight) {
+				styles['--dialog-min-height'] = this.minHeight;
+			}
 			if (this.maxHeight) {
 				styles['--dialog-max-height'] = this.maxHeight;
 			}
@@ -174,6 +206,7 @@ export default Vue.extend({
 		max-width: var(--dialog-max-width, 80%);
 		min-width: var(--dialog-min-width, 420px);
 		height: var(--dialog-height);
+		min-height: var(--dialog-min-height);
 		max-height: var(--dialog-max-height);
 	}
 
@@ -188,12 +221,14 @@ export default Vue.extend({
 		overflow: hidden;
 		flex-grow: 1;
 	}
-}
 
-.scrollable .modal-content {
+	&.scrollable .modal-content {
 		overflow-y: auto;
 	}
+}
+</style>
 
+<style lang="scss" module>
 .center {
 		display: flex;
 		align-items: center;
@@ -208,4 +243,16 @@ export default Vue.extend({
 	font-size: 30px;
 	height: 80%;
 }
+
+.centerTitle {
+	text-align: center;
+}
+
+.subtitle {
+	margin-top: var(--spacing-2xs);
+}
+
+.footer {
+	margin-top: var(--spacing-l);
+}
 </style>

packages/editor-ui/src/components/Modals.vue

@@ -1,45 +1,5 @@
 <template>
 	<div>
-		<ModalRoot :name="DUPLICATE_MODAL_KEY">
-			<template v-slot:default="{ modalName, active }">
-				<DuplicateWorkflowDialog
-					:isActive="active"
-					:modalName="modalName"
-				/>
-			</template>
-		</ModalRoot>
-
-		<ModalRoot :name="TAGS_MANAGER_MODAL_KEY">
-			<template v-slot="{ modalName }">
-				<TagsManager
-					:modalName="modalName"
-				/>
-			</template>
-		</ModalRoot>
-
-		<ModalRoot :name="WORKLOW_OPEN_MODAL_KEY">
-			<template v-slot="{ modalName }">
-				<WorkflowOpen
-					:modalName="modalName"
-				/>
-			</template>
-		</ModalRoot>
-
-		<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
-			<template v-slot="{ modalName }">
-				<UpdatesPanel
-					:modalName="modalName"
-				/>
-			</template>
-		</ModalRoot>
-		<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
-			<template v-slot="{ modalName }">
-				<WorkflowSettings
-					:modalName="modalName"
-				/>
-			</template>
-		</ModalRoot>
-
 		<ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY">
 			<template v-slot="{ modalName, activeId, mode }">
 				<CredentialEdit
@@ -51,48 +11,83 @@
 		</ModalRoot>
 
 		<ModalRoot :name="CREDENTIAL_SELECT_MODAL_KEY">
-			<template v-slot="{ modalName }">
+			<CredentialsSelectModal />
-				<CredentialsSelectModal
+		</ModalRoot>
+
+		<ModalRoot :name="CREDENTIAL_LIST_MODAL_KEY">
+			<CredentialsList />
+		</ModalRoot>
+
+		<ModalRoot :name="DUPLICATE_MODAL_KEY">
+			<template v-slot:default="{ modalName, active }">
+				<DuplicateWorkflowDialog
+					:isActive="active"
 					:modalName="modalName"
 				/>
 			</template>
 		</ModalRoot>
+
+		<ModalRoot :name="PERSONALIZATION_MODAL_KEY">
+			<PersonalizationModal />
+		</ModalRoot>
+
+		<ModalRoot :name="TAGS_MANAGER_MODAL_KEY">
+			<TagsManager />
+		</ModalRoot>
+
+		<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
+			<UpdatesPanel />
+		</ModalRoot>
+
+		<ModalRoot :name="WORKFLOW_OPEN_MODAL_KEY">
+			<WorkflowOpen />
+		</ModalRoot>
+
+		<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
+			<WorkflowSettings />
+		</ModalRoot>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import { DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
+import { CREDENTIAL_LIST_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, PERSONALIZATION_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 
 import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
-import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue";
+import CredentialsList from "./CredentialsList.vue";
-import WorkflowOpen from "@/components/WorkflowOpen.vue";
-import ModalRoot from "./ModalRoot.vue";
 import CredentialsSelectModal from "./CredentialsSelectModal.vue";
+import DuplicateWorkflowDialog from "./DuplicateWorkflowDialog.vue";
+import ModalRoot from "./ModalRoot.vue";
+import PersonalizationModal from "./PersonalizationModal.vue";
+import TagsManager from "./TagsManager/TagsManager.vue";
 import UpdatesPanel from "./UpdatesPanel.vue";
 import WorkflowSettings from "./WorkflowSettings.vue";
-import TagsManager from "@/components/TagsManager/TagsManager.vue";
+import WorkflowOpen from "./WorkflowOpen.vue";
 
 export default Vue.extend({
 	name: "Modals",
 	components: {
 		CredentialEdit,
+		CredentialsList,
+		CredentialsSelectModal,
 		DuplicateWorkflowDialog,
 		ModalRoot,
-		CredentialsSelectModal,
+		PersonalizationModal,
+		TagsManager,
 		UpdatesPanel,
 		WorkflowSettings,
-		TagsManager,
 		WorkflowOpen,
 	},
 	data: () => ({
-		DUPLICATE_MODAL_KEY,
-		TAGS_MANAGER_MODAL_KEY,
-		WORKLOW_OPEN_MODAL_KEY,
-		WORKFLOW_SETTINGS_MODAL_KEY,
-		VERSIONS_MODAL_KEY,
 		CREDENTIAL_EDIT_MODAL_KEY,
+		CREDENTIAL_LIST_MODAL_KEY,
 		CREDENTIAL_SELECT_MODAL_KEY,
+		DUPLICATE_MODAL_KEY,
+		PERSONALIZATION_MODAL_KEY,
+		TAGS_MANAGER_MODAL_KEY,
+		VERSIONS_MODAL_KEY,
+		WORKFLOW_OPEN_MODAL_KEY,
+		WORKFLOW_SETTINGS_MODAL_KEY,
 	}),
 });
 </script>

packages/editor-ui/src/components/Node.vue

@@ -177,12 +177,15 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		},
 		disableNode () {
 			this.disableNodes([this.data]);
+			this.$telemetry.track('User set node enabled status', { node_type: this.data.type, is_enabled: !this.data.disabled, workflow_id: this.$store.getters.workflowId });
 		},
 		executeNode () {
 			this.$emit('runWorkflow', this.data.name, 'Node.executeNode');
 		},
 		deleteNode () {
 			this.$externalHooks().run('node.deleteNode', { node: this.data});
+			this.$telemetry.track('User deleted node', { node_type: this.data.type, workflow_id: this.$store.getters.workflowId });
+
 			Vue.nextTick(() => {
 				// Wait a tick else vue causes problems because the data is gone
 				this.$emit('removeNode', this.data.name);

packages/editor-ui/src/components/NodeCreator/ItemIterator.vue

@@ -87,7 +87,6 @@ export default Vue.extend({
 	opacity: 1;
 }
 
-.subcategory + .category,
 .node + .category {
 	margin-top: 15px;
 }

packages/editor-ui/src/components/NodeCreator/MainPanel.vue

@@ -89,7 +89,6 @@ export default mixins(externalHooks).extend({
 			const nodeTypes: INodeCreateElement[] = this.searchItems;
 			const filter = this.searchFilter;
 			const returnData = nodeTypes.filter((el: INodeCreateElement) => {
-				const nodeType = (el.properties as INodeItemProps).nodeType;
 				return filter && matchesSelectType(el, this.selectedType) && matchesNodeType(el, filter);
 			});
 
@@ -152,12 +151,24 @@ export default mixins(externalHooks).extend({
 				selectedType: this.selectedType,
 				filteredNodes: this.filteredNodeTypes,
 			});
+			this.$telemetry.trackNodesPanel('nodeCreateList.nodeFilterChanged', {
+				oldValue,
+				newValue,
+				selectedType: this.selectedType,
+				filteredNodes: this.filteredNodeTypes,
+				workflow_id: this.$store.getters.workflowId,
+			});
 		},
 		selectedType(newValue, oldValue) {
 			this.$externalHooks().run('nodeCreateList.selectedTypeChanged', {
 				oldValue,
 				newValue,
 			});
+			this.$telemetry.trackNodesPanel('nodeCreateList.selectedTypeChanged', {
+				old_filter: oldValue,
+				new_filter: newValue,
+				workflow_id: this.$store.getters.workflowId,
+			});
 		},
 	},
 	methods: {
@@ -243,6 +254,7 @@ export default mixins(externalHooks).extend({
 				);
 			} else {
 				this.activeCategory = [...this.activeCategory, category];
+				this.$telemetry.trackNodesPanel('nodeCreateList.onCategoryExpanded', { category_name: category, workflow_id: this.$store.getters.workflowId });
 			}
 
 			this.activeIndex = this.categorized.findIndex(
@@ -252,6 +264,7 @@ export default mixins(externalHooks).extend({
 		onSubcategorySelected(selected: INodeCreateElement) {
 			this.activeSubcategoryIndex = 0;
 			this.activeSubcategory = selected;
+			this.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: this.$store.getters.workflowId });
 		},
 
 		onSubcategoryClose() {
@@ -273,6 +286,7 @@ export default mixins(externalHooks).extend({
 	},
 	async destroyed() {
 		this.$externalHooks().run('nodeCreateList.destroyed');
+		this.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: this.$store.getters.workflowId });
 	},
 });
 </script>

packages/editor-ui/src/components/NodeCreator/NoResults.vue

@@ -35,7 +35,7 @@
 
 
 <script lang="ts">
-import { HTTP_REQUEST_NODE_NAME, REQUEST_NODE_FORM_URL, WEBHOOK_NODE_NAME } from '@/constants';
+import { HTTP_REQUEST_NODE_TYPE, REQUEST_NODE_FORM_URL, WEBHOOK_NODE_TYPE } from '@/constants';
 import Vue from 'vue';
 
 import NoResultsIcon from './NoResultsIcon.vue';
@@ -57,11 +57,11 @@ export default Vue.extend({
 	},
 	methods: {
 		selectWebhook() {
-			this.$emit('nodeTypeSelected', WEBHOOK_NODE_NAME);
+			this.$emit('nodeTypeSelected', WEBHOOK_NODE_TYPE);
 		},
 
 		selectHttpRequest() {
-			this.$emit('nodeTypeSelected', HTTP_REQUEST_NODE_NAME);
+			this.$emit('nodeTypeSelected', HTTP_REQUEST_NODE_TYPE);
 		},
 	},
 });

packages/editor-ui/src/components/NodeCreator/NodeCreator.vue

@@ -19,6 +19,7 @@ import { HIDDEN_NODES  } from '@/constants';
 
 import MainPanel from './MainPanel.vue';
 import { getCategoriesWithNodes, getCategorizedList } from './helpers';
+import { mapGetters } from 'vuex';
 
 export default Vue.extend({
 	name: 'NodeCreator',
@@ -35,6 +36,7 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		...mapGetters('settings', ['personalizedNodeTypes']),
 		nodeTypes(): INodeTypeDescription[] {
 			return this.$store.getters.allNodeTypes;
 		},
@@ -57,7 +59,7 @@ export default Vue.extend({
 				}, []);
 		},
 		categoriesWithNodes(): ICategoriesWithNodes {
-			return getCategoriesWithNodes(this.visibleNodeTypes);
+			return getCategoriesWithNodes(this.visibleNodeTypes, this.personalizedNodeTypes as string[]);
 		},
 		categorizedItems(): INodeCreateElement[] {
 			return getCategorizedList(this.categoriesWithNodes);

packages/editor-ui/src/components/NodeCreator/helpers.ts

@@ -1,33 +1,8 @@
-import { CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, SUBCATEGORY_DESCRIPTIONS, UNCATEGORIZED_CATEGORY, UNCATEGORIZED_SUBCATEGORY, REGULAR_NODE_FILTER, TRIGGER_NODE_FILTER, ALL_NODE_FILTER  } from '@/constants';
+import { CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, SUBCATEGORY_DESCRIPTIONS, UNCATEGORIZED_CATEGORY, UNCATEGORIZED_SUBCATEGORY, REGULAR_NODE_FILTER, TRIGGER_NODE_FILTER, ALL_NODE_FILTER, PERSONALIZED_CATEGORY  } from '@/constants';
 import { INodeCreateElement, ICategoriesWithNodes, INodeItemProps } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
 
-
+const addNodeToCategory = (accu: ICategoriesWithNodes, nodeType: INodeTypeDescription, category: string, subcategory: string) => {
-export const getCategoriesWithNodes = (nodeTypes: INodeTypeDescription[]): ICategoriesWithNodes => {
-	return nodeTypes.reduce(
-		(accu: ICategoriesWithNodes, nodeType: INodeTypeDescription) => {
-			if (!nodeType.codex || !nodeType.codex.categories) {
-				accu[UNCATEGORIZED_CATEGORY][UNCATEGORIZED_SUBCATEGORY].nodes.push({
-					type: 'node',
-					category: UNCATEGORIZED_CATEGORY,
-					key: `${UNCATEGORIZED_CATEGORY}_${nodeType.name}`,
-					properties: {
-						subcategory: UNCATEGORIZED_SUBCATEGORY,
-						nodeType,
-					},
-					includedByTrigger: nodeType.group.includes('trigger'),
-					includedByRegular: !nodeType.group.includes('trigger'),
-				});
-				return accu;
-			}
-			nodeType.codex.categories.forEach((_category: string) => {
-				const category = _category.trim();
-				const subcategory =
-					nodeType.codex &&
-					nodeType.codex.subcategories &&
-					nodeType.codex.subcategories[category]
-						? nodeType.codex.subcategories[category][0]
-						: UNCATEGORIZED_SUBCATEGORY;
 	if (!accu[category]) {
 		accu[category] = {};
 	}
@@ -56,30 +31,48 @@ export const getCategoriesWithNodes = (nodeTypes: INodeTypeDescription[]): ICate
 		includedByTrigger: isTrigger,
 		includedByRegular: !isTrigger,
 	});
+};
+
+export const getCategoriesWithNodes = (nodeTypes: INodeTypeDescription[], personalizedNodeTypes: string[]): ICategoriesWithNodes => {
+	const sorted = [...nodeTypes].sort((a: INodeTypeDescription, b: INodeTypeDescription) => a.displayName > b.displayName? 1 : -1);
+	return sorted.reduce(
+		(accu: ICategoriesWithNodes, nodeType: INodeTypeDescription) => {
+			if (personalizedNodeTypes.includes(nodeType.name)) {
+				addNodeToCategory(accu, nodeType, PERSONALIZED_CATEGORY, UNCATEGORIZED_SUBCATEGORY);
+			}
+
+			if (!nodeType.codex || !nodeType.codex.categories) {
+				addNodeToCategory(accu, nodeType, UNCATEGORIZED_CATEGORY, UNCATEGORIZED_SUBCATEGORY);
+				return accu;
+			}
+
+			nodeType.codex.categories.forEach((_category: string) => {
+				const category = _category.trim();
+				const subcategory =
+					nodeType.codex &&
+					nodeType.codex.subcategories &&
+					nodeType.codex.subcategories[category]
+						? nodeType.codex.subcategories[category][0]
+						: UNCATEGORIZED_SUBCATEGORY;
+
+				addNodeToCategory(accu, nodeType, category, subcategory);
 			});
 			return accu;
 		},
-		{
+		{},
-			[UNCATEGORIZED_CATEGORY]: {
-				[UNCATEGORIZED_SUBCATEGORY]: {
-					triggerCount: 0,
-					regularCount: 0,
-					nodes: [],
-				},
-			},
-		},
 	);
 };
 
 const getCategories = (categoriesWithNodes: ICategoriesWithNodes): string[] => {
+	const excludeFromSort = [CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, UNCATEGORIZED_CATEGORY, PERSONALIZED_CATEGORY];
 	const categories = Object.keys(categoriesWithNodes);
 	const sorted = categories.filter(
 		(category: string) =>
-			category !== CORE_NODES_CATEGORY && category !== CUSTOM_NODES_CATEGORY && category !== UNCATEGORIZED_CATEGORY,
+			!excludeFromSort.includes(category),
 	);
 	sorted.sort();
 
-	return [CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, ...sorted, UNCATEGORIZED_CATEGORY];
+	return [CORE_NODES_CATEGORY, CUSTOM_NODES_CATEGORY, PERSONALIZED_CATEGORY, ...sorted, UNCATEGORIZED_CATEGORY];
 };
 
 export const getCategorizedList = (categoriesWithNodes: ICategoriesWithNodes): INodeCreateElement[] => {

packages/editor-ui/src/components/NodeCredentials.vue

@@ -191,17 +191,19 @@ export default mixins(
 		},
 
 		onCredentialSelected (credentialType: string, credentialId: string | null | undefined) {
-			let selected = undefined;
 			if (credentialId === NEW_CREDENTIALS_TEXT) {
 				this.listenForNewCredentials(credentialType);
 				this.$store.dispatch('ui/openNewCredential', { type: credentialType });
+				this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: true, workflow_id: this.$store.getters.workflowId });
 				return;
 			}
 
+			this.$telemetry.track('User selected credential from node modal', { credential_type: credentialType, workflow_id: this.$store.getters.workflowId });
+
 			const selectedCredentials = this.$store.getters['credentials/getCredentialById'](credentialId);
 			const oldCredentials = this.node.credentials && this.node.credentials[credentialType] ? this.node.credentials[credentialType] : {};
 
-			selected = { id: selectedCredentials.id, name: selectedCredentials.name };
+			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
 
 			// if credentials has been string or neither id matched nor name matched uniquely
 			if (oldCredentials.id === null || (oldCredentials.id && !this.$store.getters['credentials/getCredentialByIdAndType'](oldCredentials.id, credentialType))) {
@@ -272,6 +274,8 @@ export default mixins(
 			const { id } = this.node.credentials[credentialType];
 			this.$store.dispatch('ui/openExisitngCredential', { id });
 
+			this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: false, workflow_id: this.$store.getters.workflowId });
+
 			this.listenForNewCredentials(credentialType);
 		},
 	},

packages/editor-ui/src/components/NodeSettings.vue

@@ -16,7 +16,7 @@
 			The node is not valid as its type "{{node.type}}" is unknown.
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
-			<el-tabs stretch>
+			<el-tabs stretch @tab-click="handleTabClick">
 				<el-tab-pane label="Parameters">
 					<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
 					<node-webhooks :node="node" :nodeType="nodeType" />
@@ -49,6 +49,8 @@ import {
 	IUpdateInformation,
 } from '@/Interface';
 
+import { ElTabPane } from "element-ui/types/tab-pane";
+
 import DisplayWithChange from '@/components/DisplayWithChange.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterInputList from '@/components/ParameterInputList.vue';
@@ -501,6 +503,11 @@ export default mixins(
 					this.nodeValid = false;
 				}
 			},
+			handleTabClick(tab: ElTabPane) {
+				if(tab.label === 'Settings') {
+					this.$telemetry.track('User viewed node settings', { node_type: this.node ? this.node.type : '', workflow_id: this.$store.getters.workflowId });
+				}
+			},
 		},
 		mounted () {
 			this.setNodeValues();

packages/editor-ui/src/components/NodeWebhooks.vue

@@ -44,7 +44,7 @@ import {
 	NodeHelpers,
 } from 'n8n-workflow';
 
-import { WEBHOOK_NODE_NAME } from '@/constants';
+import { WEBHOOK_NODE_TYPE } from '@/constants';
 import { copyPaste } from '@/components/mixins/copyPaste';
 import { showMessage } from '@/components/mixins/showMessage';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
@@ -64,7 +64,7 @@ export default mixins(
 		],
 		data () {
 			return {
-				isMinimized: this.nodeType.name !== WEBHOOK_NODE_NAME,
+				isMinimized: this.nodeType.name !== WEBHOOK_NODE_TYPE,
 				showUrlFor: 'test',
 			};
 		},
@@ -119,7 +119,7 @@ export default mixins(
 		},
 		watch: {
 			node () {
-				this.isMinimized = this.nodeType.name !== WEBHOOK_NODE_NAME;
+				this.isMinimized = this.nodeType.name !== WEBHOOK_NODE_TYPE;
 			},
 		},
 	});

packages/editor-ui/src/components/ParameterInput.vue

@@ -585,6 +585,21 @@ export default mixins(
 			closeExpressionEditDialog () {
 				this.expressionEditDialogVisible = false;
 			},
+			trackExpressionEditOpen () {
+				if(!this.node) {
+					return;
+				}
+
+				if((this.node.type as string).startsWith('n8n-nodes-base')) {
+					this.$telemetry.track('User opened Expression Editor', {
+						node_type: this.node.type,
+						parameter_name: this.parameter.displayName,
+						parameter_field_type: this.parameter.type,
+						new_expression: !this.isValueExpression,
+						workflow_id: this.$store.getters.workflowId,
+					});	
+				}
+			},
 			closeTextEditDialog () {
 				this.textEditDialogVisible = false;
 			},
@@ -612,6 +627,7 @@ export default mixins(
 			openExpressionEdit() {
 				if (this.isValueExpression) {
 					this.expressionEditDialogVisible = true;
+					this.trackExpressionEditOpen();
 					return;
 				}
 			},
@@ -621,6 +637,7 @@ export default mixins(
 			setFocus () {
 				if (this.isValueExpression) {
 					this.expressionEditDialogVisible = true;
+					this.trackExpressionEditOpen();
 					return;
 				}
 
@@ -700,6 +717,7 @@ export default mixins(
 					}
 
 					this.expressionEditDialogVisible = true;
+					this.trackExpressionEditOpen();
 				} else if (command === 'removeExpression') {
 					this.valueChanged(this.expressionValueComputed !== undefined ? this.expressionValueComputed : null);
 				} else if (command === 'refreshOptions') {

packages/editor-ui/src/components/ParameterInputExpanded.vue

@@ -19,7 +19,7 @@
 			inputSize="large"
 		/>
 		<div class="errors" v-if="showRequiredErrors">
-			This field is required. <a v-if="documentationUrl" :href="documentationUrl" target="_blank">Open docs</a>
+			This field is required. <a v-if="documentationUrl" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">Open docs</a>
 		</div>
 	</n8n-input-label>
 </template>
@@ -77,6 +77,13 @@ export default Vue.extend({
 		valueChanged(parameterData: IUpdateInformation) {
 			this.$emit('change', parameterData);
 		},
+		onDocumentationUrlClick (): void {
+			this.$telemetry.track('User clicked credential modal docs link', {
+				docs_link: this.documentationUrl,
+				source: 'field',
+				workflow_id: this.$store.getters.workflowId,
+			});
+		},
 	},
 });
 </script>

packages/editor-ui/src/components/PersonalizationModal.vue

@@ -0,0 +1,249 @@
+<template>
+	<Modal
+		:name="PERSONALIZATION_MODAL_KEY"
+		:title="!submitted? 'Get started' : 'Thanks!'"
+		:subtitle="!submitted? 'These questions help us tailor n8n to you' : ''"
+		:centerTitle="true"
+		:showClose="false"
+		:eventBus="modalBus"
+		:closeOnClickModal="false"
+		:closeOnPressEscape="false"
+		width="460px"
+		@enter="save"
+		@input="onInput"
+	>
+		<template v-slot:content>
+			<div v-if="submitted" :class="$style.submittedContainer">
+				<img :class="$style.demoImage" :src="baseUrl + 'suggestednodes.png'" />
+				<n8n-text>Look out for things marked with a ✨. They are personalized to make n8n more relevant to you.</n8n-text>
+			</div>
+			<div :class="$style.container" v-else>
+				<n8n-input-label label="Which of these areas do you mainly work in?">
+					<n8n-select :value="values[WORK_AREA_KEY]" placeholder="Select..." @change="(value) => onInput(WORK_AREA_KEY, value)">
+						<n8n-option :value="AUTOMATION_CONSULTING_WORK_AREA" label="Automation consulting" />
+						<n8n-option :value="FINANCE_WORK_AREA" label="Finance" />
+						<n8n-option :value="HR_WORK_AREA" label="HR" />
+						<n8n-option :value="IT_ENGINEERING_WORK_AREA" label="IT / Engineering" />
+						<n8n-option :value="LEGAL_WORK_AREA" label="Legal" />
+						<n8n-option :value="MARKETING_WORK_AREA" label="Marketing / Growth" />
+						<n8n-option :value="OPS_WORK_AREA" label="Operations" />
+						<n8n-option :value="PRODUCT_WORK_AREA" label="Product" />
+						<n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" label="Sales / Business Development" />
+						<n8n-option :value="SECURITY_WORK_AREA" label="Security" />
+						<n8n-option :value="SUPPORT_WORK_AREA" label="Support" />
+						<n8n-option :value="OTHER_WORK_AREA_OPTION" label="Other (please specify)" />
+					</n8n-select>
+				</n8n-input-label>
+
+				<n8n-input
+					v-if="otherWorkAreaFieldVisible"
+					:value="values[OTHER_WORK_AREA_KEY]"
+					placeholder="Specify your work area"
+					@input="(value) => onInput(OTHER_WORK_AREA_KEY, value)"
+				/>
+
+				<n8n-input-label label="How are your coding skills?">
+					<n8n-select :value="values[CODING_SKILL_KEY]" placeholder="Select..." @change="(value) => onInput(CODING_SKILL_KEY, value)">
+						<n8n-option
+							label="0 (Never coded)"
+							value="0"
+						/>
+						<n8n-option
+							label="1"
+							value="1"
+						/>
+						<n8n-option
+							label="2"
+							value="2"
+						/>
+						<n8n-option
+							label="3"
+							value="3"
+						/>
+						<n8n-option
+							label="4"
+							value="4"
+						/>
+						<n8n-option
+							label="5 (Pro coder)"
+							value="5"
+						/>
+					</n8n-select>
+				</n8n-input-label>
+
+				<n8n-input-label label="How big is your company?">
+					<n8n-select :value="values[COMPANY_SIZE_KEY]" placeholder="Select..." @change="(value) => onInput(COMPANY_SIZE_KEY, value)">
+						<n8n-option
+							label="Less than 20 people"
+							:value="COMPANY_SIZE_20_OR_LESS"
+						/>
+						<n8n-option
+							label="20-99 people"
+							:value="COMPANY_SIZE_20_99"
+						/>
+						<n8n-option
+							label="100-499 people"
+							:value="COMPANY_SIZE_100_499"
+						/>
+						<n8n-option
+							label="500-999 people"
+							:value="COMPANY_SIZE_500_999"
+						/>
+						<n8n-option
+							label="1000+ people"
+							:value="COMPANY_SIZE_1000_OR_MORE"
+						/>
+						<n8n-option
+							label="I'm not using n8n for work"
+							:value="COMPANY_SIZE_PERSONAL_USE"
+						/>
+					</n8n-select>
+				</n8n-input-label>
+			</div>
+		</template>
+		<template v-slot:footer>
+			<div>
+				<n8n-button v-if="submitted" @click="closeDialog" label="Get started" float="right" />
+				<n8n-button v-else @click="save" :loading="isSaving" label="Continue" float="right" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import mixins from "vue-typed-mixins";
+
+import {
+	PERSONALIZATION_MODAL_KEY,
+	AUTOMATION_CONSULTING_WORK_AREA,
+	FINANCE_WORK_AREA,
+	HR_WORK_AREA,
+	IT_ENGINEERING_WORK_AREA,
+	LEGAL_WORK_AREA,
+	MARKETING_WORK_AREA,
+	PRODUCT_WORK_AREA,
+	SALES_BUSINESSDEV_WORK_AREA,
+	SECURITY_WORK_AREA,
+	SUPPORT_WORK_AREA,
+	OPS_WORK_AREA,
+	OTHER_WORK_AREA_OPTION,
+	COMPANY_SIZE_20_OR_LESS,
+	COMPANY_SIZE_20_99,
+	COMPANY_SIZE_100_499,
+	COMPANY_SIZE_500_999,
+	COMPANY_SIZE_1000_OR_MORE,
+	COMPANY_SIZE_PERSONAL_USE,
+	WORK_AREA_KEY,
+	COMPANY_SIZE_KEY,
+	CODING_SKILL_KEY,
+	OTHER_WORK_AREA_KEY,
+} from "../constants";
+import { workflowHelpers } from "@/components/mixins/workflowHelpers";
+import { showMessage } from "@/components/mixins/showMessage";
+import Modal from "./Modal.vue";
+import { IPersonalizationSurveyAnswers, IPersonalizationSurveyKeys } from "@/Interface";
+import Vue from "vue";
+import { mapGetters } from "vuex";
+
+export default mixins(showMessage, workflowHelpers).extend({
+	components: { Modal },
+	name: "PersonalizationModal",
+	data() {
+		return {
+			submitted: false,
+			isSaving: false,
+			PERSONALIZATION_MODAL_KEY,
+			otherWorkAreaFieldVisible: false,
+			modalBus: new Vue(),
+			values: {
+				[WORK_AREA_KEY]: null,
+				[COMPANY_SIZE_KEY]: null,
+				[CODING_SKILL_KEY]: null,
+				[OTHER_WORK_AREA_KEY]: null,
+			} as IPersonalizationSurveyAnswers,
+			AUTOMATION_CONSULTING_WORK_AREA,
+			FINANCE_WORK_AREA,
+			HR_WORK_AREA,
+			IT_ENGINEERING_WORK_AREA,
+			LEGAL_WORK_AREA,
+			MARKETING_WORK_AREA,
+			PRODUCT_WORK_AREA,
+			SALES_BUSINESSDEV_WORK_AREA,
+			SECURITY_WORK_AREA,
+			SUPPORT_WORK_AREA,
+			OPS_WORK_AREA,
+			OTHER_WORK_AREA_OPTION,
+			COMPANY_SIZE_20_OR_LESS,
+			COMPANY_SIZE_20_99,
+			COMPANY_SIZE_100_499,
+			COMPANY_SIZE_500_999,
+			COMPANY_SIZE_1000_OR_MORE,
+			COMPANY_SIZE_PERSONAL_USE,
+			WORK_AREA_KEY,
+			COMPANY_SIZE_KEY,
+			CODING_SKILL_KEY,
+			OTHER_WORK_AREA_KEY,
+		};
+	},
+	computed: {
+		...mapGetters({
+			baseUrl: 'getBaseUrl',
+		}),
+	},
+	methods: {
+		closeDialog() {
+			this.modalBus.$emit('close');
+		},
+		onInput(name: IPersonalizationSurveyKeys, value: string) {
+			if (name === WORK_AREA_KEY && value === OTHER_WORK_AREA_OPTION) {
+				this.otherWorkAreaFieldVisible = true;
+			}
+			else if (name === WORK_AREA_KEY) {
+				this.otherWorkAreaFieldVisible = false;
+				this.values[OTHER_WORK_AREA_KEY] = null;
+			}
+
+			this.values[name] = value;
+		},
+		async save(): Promise<void> {
+			this.$data.isSaving = true;
+
+			try {
+				await this.$store.dispatch('settings/submitPersonalizationSurvey', this.values);
+
+				if (this.values[WORK_AREA_KEY] === null && this.values[COMPANY_SIZE_KEY] === null && this.values[CODING_SKILL_KEY] === null) {
+					this.closeDialog();
+				}
+
+				this.submitted = true;
+			} catch (e) {
+				this.$showError(e, 'Error while submitting results');
+			}
+
+			this.$data.isSaving = false;
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.container {
+	> div:not(:last-child) {
+		margin-bottom: var(--spacing-m);
+	}
+}
+
+.submittedContainer {
+	* {
+		margin-bottom: var(--spacing-2xs);
+	}
+}
+
+.demoImage {
+	border-radius: var(--border-radius-large);
+	border: var(--border-base);
+	width: 100%;
+	height: 140px;
+}
+
+</style>

packages/editor-ui/src/components/RunData.vue

@@ -630,6 +630,10 @@ export default mixins(
 			displayMode (newValue, oldValue) {
 				this.closeBinaryDataDisplay();
 				this.$externalHooks().run('runData.displayModeChanged', { newValue, oldValue });
+				if(this.node) {
+					const nodeType = this.node ? this.node.type : '';
+					this.$telemetry.track('User changed node output view mode', { old_mode: oldValue, new_mode: newValue, node_type: nodeType, workflow_id: this.$store.getters.workflowId });
+				}
 			},
 			maxRunIndex () {
 				this.runIndex = Math.min(this.runIndex, this.maxRunIndex);

packages/editor-ui/src/components/TagsDropdown.vue

@@ -55,7 +55,7 @@ import mixins from "vue-typed-mixins";
 import { mapGetters } from "vuex";
 
 import { ITag } from "@/Interface";
-import { MAX_TAG_NAME_LENGTH } from "@/constants";
+import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
 
 import { showMessage } from "@/components/mixins/showMessage";
 
@@ -150,7 +150,7 @@ export default mixins(showMessage).extend({
 			);
 			if (ops === MANAGE_KEY) {
 				this.$data.filter = "";
-				this.$store.dispatch("ui/openTagsManagerModal");
+				this.$store.dispatch("ui/openModal", TAGS_MANAGER_MODAL_KEY);
 			} else if (ops === CREATE_KEY) {
 				this.onCreate();
 			} else {

packages/editor-ui/src/components/TagsManager/NoTagsView.vue

@@ -30,7 +30,6 @@ $--footer-spacing: 45px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	min-height: $--tags-manager-min-height - $--footer-spacing;
 	margin-top: $--footer-spacing;
 }
 

packages/editor-ui/src/components/TagsManager/TagsManager.vue

@@ -1,10 +1,11 @@
 <template>
 	<Modal
 		title="Manage tags"
-		:name="modalName"
+		:name="TAGS_MANAGER_MODAL_KEY"
 		:eventBus="modalBus"
 		@enter="onEnter"
 		minWidth="620px"
+		minHeight="420px"
 	>
 		<template v-slot:content>
 			<el-row>
@@ -40,13 +41,13 @@ import { showMessage } from "@/components/mixins/showMessage";
 import TagsView from "@/components/TagsManager/TagsView/TagsView.vue";
 import NoTagsView from "@/components/TagsManager/NoTagsView.vue";
 import Modal from "@/components/Modal.vue";
+import { TAGS_MANAGER_MODAL_KEY } from '../../constants';
 
 export default mixins(showMessage).extend({
 	name: "TagsManager",
 	created() {
 		this.$store.dispatch("tags/fetchAll", {force: true, withUsageCount: true});
 	},
-	props: ['modalName'],
 	data() {
 		const tagIds = (this.$store.getters['tags/allTags'] as ITag[])
 			.map((tag) => tag.id);
@@ -55,6 +56,7 @@ export default mixins(showMessage).extend({
 			tagIds,
 			isCreating: false,
 			modalBus: new Vue(),
+			TAGS_MANAGER_MODAL_KEY,
 		};
 	},
 	components: {
@@ -183,9 +185,3 @@ export default mixins(showMessage).extend({
 });
 </script>
 
-<style lang="scss" scoped>
-.el-row {
-	min-height: $--tags-manager-min-height;
-	margin-bottom: 15px;
-}
-</style>

packages/editor-ui/src/components/Telemetry.vue

@@ -0,0 +1,23 @@
+<template>
+	<fragment></fragment>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import { mapGetters } from 'vuex';
+
+export default Vue.extend({
+	name: 'Telemetry',
+	computed: {
+		...mapGetters(['telemetry']),
+	},
+	watch: {
+		telemetry(opts) {
+			if (opts.enabled) {
+				this.$telemetry.init(opts, this.$store.getters.instanceId);
+			}
+		},
+	},
+});
+</script>

packages/editor-ui/src/components/UpdatesPanel.vue

@@ -1,6 +1,6 @@
 <template>
 	<ModalDrawer
-		:name="modalName"
+		:name="VERSIONS_MODAL_KEY"
 		direction="ltr"
 		width="520px"
 	>
@@ -48,6 +48,7 @@ import { mapGetters } from 'vuex';
 import ModalDrawer from './ModalDrawer.vue';
 import TimeAgo from './TimeAgo.vue';
 import VersionCard from './VersionCard.vue';
+import { VERSIONS_MODAL_KEY } from '../constants';
 
 export default Vue.extend({
 	name: 'UpdatesPanel',
@@ -56,10 +57,14 @@ export default Vue.extend({
 		VersionCard,
 		TimeAgo,
 	},
-	props: ['modalName'],
 	computed: {
 		...mapGetters('versions', ['nextVersions', 'currentVersion', 'infoUrl']),
 	},
+	data() {
+		return {
+			VERSIONS_MODAL_KEY,
+		};
+	},
 });
 </script>
 

packages/editor-ui/src/components/WorkflowActivator.vue

@@ -144,6 +144,7 @@ export default mixins(
 					}
 
 					this.$externalHooks().run(activationEventName, { workflowId: this.workflowId, active: newActiveState });
+					this.$telemetry.track('User set workflow active status', { workflow_id: this.workflowId, is_active: newActiveState });
 
 					this.$emit('workflowActiveChanged', { id: this.workflowId, active: newActiveState });
 					this.loading = false;

packages/editor-ui/src/components/WorkflowOpen.vue

@@ -1,15 +1,15 @@
 <template>
 	<Modal
-		:name="modalName"
+		:name="WORKFLOW_OPEN_MODAL_KEY"
 		width="80%"
 		minWidth="620px"
 		:classic="true"
 	>
 			<template v-slot:header>
 				<div class="workflows-header">
-					<div class="title">
+					<n8n-heading tag="h1" size="xlarge" class="title">
-						<h1>Open Workflow</h1>
+						Open Workflow
-					</div>
+					</n8n-heading>
 					<div class="tags-filter">
 						<TagsDropdown
 							placeholder="Filter by tags..."
@@ -66,6 +66,7 @@ import TagsContainer from '@/components/TagsContainer.vue';
 import TagsDropdown from '@/components/TagsDropdown.vue';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import { convertToDisplayDate } from './helpers';
+import { WORKFLOW_OPEN_MODAL_KEY } from '../constants';
 
 export default mixins(
 	genericHelpers,
@@ -88,6 +89,7 @@ export default mixins(
 			workflows: [] as IWorkflowShortResponse[],
 			filterTagIds: [] as string[],
 			prevFilterTagIds: [] as string[],
+			WORKFLOW_OPEN_MODAL_KEY,
 		};
 	},
 	computed: {
@@ -214,13 +216,8 @@ export default mixins(
 .workflows-header {
 	display: flex;
 
-	.title {
+	> *:first-child {
 		flex-grow: 1;
-
-		h1 {
-			line-height: 24px;
-			font-size: 18px;
-		}
 	}
 
 	.search-filter {

packages/editor-ui/src/components/WorkflowSettings.vue

@@ -1,6 +1,6 @@
 <template>
 	<Modal
-		:name="modalName"
+		:name="WORKFLOW_SETTINGS_MODAL_KEY"
 		width="65%"
 		maxHeight="80%"
 		title="Workflow Settings"
@@ -167,7 +167,7 @@
 		</template>
 		<template v-slot:footer>
 			<div class="action-buttons">
-				<n8n-button label="Save" size="large" @click="saveSettings" />
+				<n8n-button label="Save" size="large" float="right" @click="saveSettings" />
 			</div>
 		</template>
 	</Modal>
@@ -187,6 +187,7 @@ import {
 	IWorkflowShortResponse,
 } from '@/Interface';
 import Modal from './Modal.vue';
+import { WORKFLOW_SETTINGS_MODAL_KEY } from '../constants';
 
 import mixins from 'vue-typed-mixins';
 
@@ -197,11 +198,6 @@ export default mixins(
 	showMessage,
 ).extend({
 	name: 'WorkflowSettings',
-	props: {
-		modalName: {
-			type: String,
-		},
-	},
 	components: {
 		Modal,
 	},
@@ -236,6 +232,7 @@ export default mixins(
 			maxExecutionTimeout: this.$store.getters.maxExecutionTimeout,
 			timeoutHMS: { hours: 0, minutes: 0, seconds: 0 } as ITimeoutHMS,
 			modalBus: new Vue(),
+			WORKFLOW_SETTINGS_MODAL_KEY,
 		};
 	},
 	async mounted () {
@@ -299,10 +296,12 @@ export default mixins(
 		this.isLoading = false;
 
 		this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: true });
+		this.$telemetry.track('User opened workflow settings', { workflow_id: this.$store.getters.workflowId });
 	},
 	methods: {
 		closeDialog () {
 			this.modalBus.$emit('close');
+			this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: false });
 		},
 		setTimeout (key: string, value: string) {
 			const time = value ? parseInt(value, 10) : 0;
@@ -488,6 +487,7 @@ export default mixins(
 			this.closeDialog();
 
 			this.$externalHooks().run('workflowSettings.saveSettings', { oldSettings });
+			this.$telemetry.track('User updated workflow settings', { workflow_id: this.$store.getters.workflowId });
 		},
 		toggleTimeout() {
 			this.workflowSettings.executionTimeout = this.workflowSettings.executionTimeout === -1 ? 0 : -1;
@@ -514,17 +514,13 @@ export default mixins(
 	}
 }
 
-.action-buttons {
-	margin-top: 1em;
-	text-align: right;
-}
-
 .setting-info {
 	display: none;
 }
 
 .setting-name {
 	line-height: 32px;
+	font-weight: var(--font-weight-regular);
 }
 
 .setting-name:hover {

packages/editor-ui/src/components/mixins/newVersions.ts

@@ -3,6 +3,7 @@ import { showMessage } from './showMessage';
 import {
 	IVersion,
 } from '../../Interface';
+import { VERSIONS_MODAL_KEY } from '@/constants';
 
 export const newVersions = mixins(
 	showMessage,
@@ -30,7 +31,7 @@ export const newVersions = mixins(
 					title: 'Critical update available',
 					message,
 					onClick: () => {
-						this.$store.dispatch('ui/openUpdatesPanel');
+						this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
 					},
 					closeOnClick: true,
 					customClass: 'clickable',

packages/editor-ui/src/components/mixins/nodeBase.ts

@@ -4,7 +4,7 @@ import mixins from 'vue-typed-mixins';
 
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { nodeIndex } from '@/components/mixins/nodeIndex';
-import { NODE_NAME_PREFIX } from '@/constants';
+import { NODE_NAME_PREFIX, NO_OP_NODE_TYPE } from '@/constants';
 
 export const nodeBase = mixins(
 	deviceSupportHelpers,
@@ -96,7 +96,7 @@ export const nodeBase = mixins(
 
 			if (!nodeTypeData) {
 				// If node type is not know use by default the base.noOp data to display it
-				nodeTypeData = this.$store.getters.nodeType('n8n-nodes-base.noOp');
+				nodeTypeData = this.$store.getters.nodeType(NO_OP_NODE_TYPE);
 			}
 
 			const anchorPositions: {

packages/editor-ui/src/components/mixins/pushConnection.ts

@@ -16,6 +16,7 @@ import { titleChange } from '@/components/mixins/titleChange';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
+import { WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 
 export const pushConnection = mixins(
 	externalHooks,
@@ -246,7 +247,7 @@ export const pushConnection = mixins(
 									if (this.$store.getters.isNewWorkflow) {
 										await this.saveAsNewWorkflow();
 									}
-									this.$store.dispatch('ui/openWorkflowSettingsModal');
+									this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
 								}
 							},
 						});

packages/editor-ui/src/components/mixins/restApi.ts

@@ -11,7 +11,6 @@ import {
 	IExecutionFlattedResponse,
 	IExecutionsListResponse,
 	IExecutionsStopData,
-	IN8nUISettings,
 	IStartRunData,
 	IWorkflowDb,
 	IWorkflowShortResponse,
@@ -78,9 +77,6 @@ export const restApi = Vue.extend({
 				stopCurrentExecution: (executionId: string): Promise<IExecutionsStopData> => {
 					return self.restApi().makeRestApiRequest('POST', `/executions-current/${executionId}/stop`);
 				},
-				getSettings: (): Promise<IN8nUISettings> => {
-					return self.restApi().makeRestApiRequest('GET', `/settings`);
-				},
 
 				// Returns all node-types
 				getNodeTypes: (onlyLatest = false): Promise<INodeTypeDescription[]> => {

packages/editor-ui/src/components/mixins/showMessage.ts

@@ -12,7 +12,7 @@ let stickyNotificationQueue: ElNotificationComponent[] = [];
 
 export const showMessage = mixins(externalHooks).extend({
 	methods: {
-		$showMessage(messageData: ElNotificationOptions) {
+		$showMessage(messageData: ElNotificationOptions, track = true) {
 			messageData.dangerouslyUseHTMLString = true;
 			if (messageData.position === undefined) {
 				messageData.position = 'bottom-right';
@@ -24,6 +24,10 @@ export const showMessage = mixins(externalHooks).extend({
 				stickyNotificationQueue.push(notification);
 			}
 
+			if(messageData.type === 'error' && track) {
+				this.$telemetry.track('Instance FE emitted error', { error_title: messageData.title, error_message: messageData.message, workflow_id: this.$store.getters.workflowId });
+			}
+
 			return notification;
 		},
 
@@ -116,13 +120,14 @@ export const showMessage = mixins(externalHooks).extend({
 					${this.collapsableDetails(error)}`,
 				type: 'error',
 				duration: 0,
-			});
+			}, false);
 
 			this.$externalHooks().run('showMessage.showError', {
 				title,
 				message,
 				errorMessage: error.message,
 			});
+			this.$telemetry.track('Instance FE emitted error', { error_title: title, error_description: message, error_message: error.message, workflow_id: this.$store.getters.workflowId });
 		},
 
 		async confirmMessage (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText = 'OK', cancelButtonText = 'Cancel'): Promise<boolean> {

packages/editor-ui/src/components/mixins/workflowHelpers.ts

@@ -1,9 +1,9 @@
 import {
-	ERROR_TRIGGER_NODE_NAME,
+	ERROR_TRIGGER_NODE_TYPE,
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	START_NODE_TYPE,
-	WEBHOOK_NODE_NAME,
+	WEBHOOK_NODE_TYPE,
 } from '@/constants';
 
 import {
@@ -24,6 +24,7 @@ import {
 	IRunExecutionData,
 	IWorfklowIssues,
 	IWorkflowDataProxyAdditionalKeys,
+	TelemetryHelpers,
 	Workflow,
 	NodeHelpers,
 } from 'n8n-workflow';
@@ -162,7 +163,7 @@ export const workflowHelpers = mixins(
 					// if there are any
 					let checkWebhook: string[] = [];
 					for (const nodeName of Object.keys(workflow.nodes)) {
-						if (workflow.nodes[nodeName].disabled !== true && workflow.nodes[nodeName].type === WEBHOOK_NODE_NAME) {
+						if (workflow.nodes[nodeName].disabled !== true && workflow.nodes[nodeName].type === WEBHOOK_NODE_TYPE) {
 							checkWebhook = [nodeName, ...checkWebhook, ...workflow.getChildNodes(nodeName)];
 						}
 					}
@@ -246,7 +247,7 @@ export const workflowHelpers = mixins(
 							// As we do not have the trigger/poll functions available in the frontend
 							// we use the information available to figure out what are trigger nodes
 							// @ts-ignore
-							trigger: ![ERROR_TRIGGER_NODE_NAME, START_NODE_TYPE].includes(nodeType) && nodeTypeDescription.inputs.length === 0 && !nodeTypeDescription.webhooks || undefined,
+							trigger: ![ERROR_TRIGGER_NODE_TYPE, START_NODE_TYPE].includes(nodeType) && nodeTypeDescription.inputs.length === 0 && !nodeTypeDescription.webhooks || undefined,
 						};
 					},
 				};

packages/editor-ui/src/components/mixins/workflowRun.ts

@@ -56,11 +56,18 @@ export const workflowRun = mixins(
 			return response;
 		},
 		async runWorkflow (nodeName?: string, source?: string): Promise<IExecutionPushResponse | undefined> {
+			const workflow = this.getWorkflow();
+
+			if(nodeName) {
+				this.$telemetry.track('User clicked execute node button', { node_type: nodeName, workflow_id: this.$store.getters.workflowId });
+			} else {
+				this.$telemetry.track('User clicked execute workflow button', { workflow_id: this.$store.getters.workflowId });
+			}
+
 			if (this.$store.getters.isActionActive('workflowRunning') === true) {
 				return;
 			}
 
-			const workflow = this.getWorkflow();
 			this.$titleSet(workflow.name as string, 'EXECUTING');
 
 			this.clearAllStickyNotifications();

packages/editor-ui/src/constants.ts

@@ -18,11 +18,13 @@ export const MAX_TAG_NAME_LENGTH = 24;
 // modals
 export const DUPLICATE_MODAL_KEY = 'duplicate';
 export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
-export const WORKLOW_OPEN_MODAL_KEY = 'workflowOpen';
+export const WORKFLOW_OPEN_MODAL_KEY = 'workflowOpen';
 export const VERSIONS_MODAL_KEY = 'versions';
 export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
 export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential';
 export const CREDENTIAL_SELECT_MODAL_KEY = 'selectCredential';
+export const CREDENTIAL_LIST_MODAL_KEY = 'credentialsList';
+export const PERSONALIZATION_MODAL_KEY = 'personalization';
 
 // breakpoints
 export const BREAKPOINT_SM = 768;
@@ -33,7 +35,35 @@ export const BREAKPOINT_XL = 1920;
 
 // templates
 export const TEMPLATES_BASE_URL = `https://api.n8n.io/`;
+
+// node types
+export const CALENDLY_TRIGGER_NODE_TYPE = 'n8n-nodes-base.calendlyTrigger';
+export const CRON_NODE_TYPE = 'n8n-nodes-base.cron';
+export const CLEARBIT_NODE_TYPE = 'n8n-nodes-base.clearbit';
+export const FUNCTION_NODE_TYPE = 'n8n-nodes-base.function';
+export const GITHUB_TRIGGER_NODE_TYPE = 'n8n-nodes-base.githubTrigger';
+export const ERROR_TRIGGER_NODE_TYPE = 'n8n-nodes-base.errorTrigger';
+export const ELASTIC_SECURITY_NODE_TYPE = 'n8n-nodes-base.elasticSecurity';
+export const EMAIL_SEND_NODE_TYPE = 'n8n-nodes-base.emailSend';
+export const EXECUTE_COMMAND_NODE_TYPE = 'n8n-nodes-base.executeCommand';
+export const HTTP_REQUEST_NODE_TYPE = 'n8n-nodes-base.httpRequest';
+export const IF_NODE_TYPE = 'n8n-nodes-base.if';
+export const ITEM_LISTS_NODE_TYPE = 'n8n-nodes-base.itemLists';
+export const JIRA_TRIGGER_NODE_TYPE = 'n8n-nodes-base.jiraTrigger';
+export const MICROSOFT_EXCEL_NODE_TYPE = 'n8n-nodes-base.microsoftExcel';
+export const MICROSOFT_TEAMS_NODE_TYPE = 'n8n-nodes-base.microsoftTeams';
+export const NO_OP_NODE_TYPE = 'n8n-nodes-base.noOp';
+export const PAGERDUTY_NODE_TYPE = 'n8n-nodes-base.pagerDuty';
+export const SALESFORCE_NODE_TYPE = 'n8n-nodes-base.salesforce';
+export const SEGMENT_NODE_TYPE = 'n8n-nodes-base.segment';
+export const SET_NODE_TYPE = 'n8n-nodes-base.set';
+export const SLACK_NODE_TYPE = 'n8n-nodes-base.slack';
+export const SPREADSHEET_FILE_NODE_TYPE = 'n8n-nodes-base.spreadsheetFile';
 export const START_NODE_TYPE = 'n8n-nodes-base.start';
+export const SWITCH_NODE_TYPE = 'n8n-nodes-base.switch';
+export const QUICKBOOKS_NODE_TYPE = 'n8n-nodes-base.quickbooks';
+export const WEBHOOK_NODE_TYPE = 'n8n-nodes-base.webhook';
+export const XERO_NODE_TYPE = 'n8n-nodes-base.xero';
 
 // Node creator
 export const CORE_NODES_CATEGORY = 'Core Nodes';
@@ -53,12 +83,36 @@ export const TRIGGER_NODE_FILTER = 'Trigger';
 export const ALL_NODE_FILTER = 'All';
 export const UNCATEGORIZED_CATEGORY = 'Miscellaneous';
 export const UNCATEGORIZED_SUBCATEGORY = 'Helpers';
-export const HIDDEN_NODES = ['n8n-nodes-base.start'];
+export const PERSONALIZED_CATEGORY = 'Suggested Nodes ✨';
-export const ERROR_TRIGGER_NODE_NAME = 'n8n-nodes-base.errorTrigger';
+export const HIDDEN_NODES = [START_NODE_TYPE];
-export const WEBHOOK_NODE_NAME = 'n8n-nodes-base.webhook';
+
-export const HTTP_REQUEST_NODE_NAME = 'n8n-nodes-base.httpRequest';
 export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fBVTZ3';
 
 // General
 export const INSTANCE_ID_HEADER = 'n8n-instance-id';
 export const WAIT_TIME_UNLIMITED = '3000-01-01T00:00:00.000Z';
+
+export const WORK_AREA_KEY = 'workArea';
+export const AUTOMATION_CONSULTING_WORK_AREA = 'automationConsulting';
+export const FINANCE_WORK_AREA = 'finance';
+export const HR_WORK_AREA = 'HR';
+export const IT_ENGINEERING_WORK_AREA = 'IT-Engineering';
+export const LEGAL_WORK_AREA = 'legal';
+export const MARKETING_WORK_AREA = 'marketing-growth';
+export const PRODUCT_WORK_AREA = 'product';
+export const SALES_BUSINESSDEV_WORK_AREA = 'sales-businessDevelopment';
+export const SECURITY_WORK_AREA = 'security';
+export const SUPPORT_WORK_AREA = 'support';
+export const OPS_WORK_AREA = 'ops';
+export const OTHER_WORK_AREA_OPTION = 'other';
+
+export const COMPANY_SIZE_KEY = 'companySize';
+export const COMPANY_SIZE_20_OR_LESS = '<20';
+export const COMPANY_SIZE_20_99 = '20-99';
+export const COMPANY_SIZE_100_499 = '100-499';
+export const COMPANY_SIZE_500_999 = '500-999';
+export const COMPANY_SIZE_1000_OR_MORE = '1000+';
+export const COMPANY_SIZE_PERSONAL_USE = 'personalUser';
+
+export const CODING_SKILL_KEY = 'codingSkill';
+export const OTHER_WORK_AREA_KEY = 'otherWorkArea';

packages/editor-ui/src/main.ts

@@ -9,7 +9,6 @@ import 'vue-prism-editor/dist/VuePrismEditor.css';
 import 'vue-json-pretty/lib/styles.css';
 import './n8n-theme.scss';
 
-import "@fontsource/open-sans/latin-300.css";
 import "@fontsource/open-sans/latin-400.css";
 import "@fontsource/open-sans/latin-600.css";
 import "@fontsource/open-sans/latin-700.css";
@@ -18,6 +17,7 @@ import App from '@/App.vue';
 import router from './router';
 
 import { runExternalHook } from './components/mixins/externalHooks';
+import { TelemetryPlugin } from './plugins/telemetry';
 
 import { store } from './store';
 
@@ -26,6 +26,8 @@ router.afterEach((to, from) => {
 	runExternalHook('main.routeChange', store, { from, to });
 });
 
+Vue.use(TelemetryPlugin);
+
 new Vue({
 	router,
 	store,

packages/editor-ui/src/modules/helper.ts

@@ -0,0 +1,82 @@
+
+import { AUTOMATION_CONSULTING_WORK_AREA, CALENDLY_TRIGGER_NODE_TYPE, CLEARBIT_NODE_TYPE, COMPANY_SIZE_1000_OR_MORE, COMPANY_SIZE_500_999, CRON_NODE_TYPE, ELASTIC_SECURITY_NODE_TYPE, EMAIL_SEND_NODE_TYPE, EXECUTE_COMMAND_NODE_TYPE, FINANCE_WORK_AREA, FUNCTION_NODE_TYPE, GITHUB_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE, IF_NODE_TYPE, ITEM_LISTS_NODE_TYPE, IT_ENGINEERING_WORK_AREA, JIRA_TRIGGER_NODE_TYPE, MICROSOFT_EXCEL_NODE_TYPE, MICROSOFT_TEAMS_NODE_TYPE, PERSONALIZATION_MODAL_KEY, PAGERDUTY_NODE_TYPE, PRODUCT_WORK_AREA, QUICKBOOKS_NODE_TYPE, SALESFORCE_NODE_TYPE, SALES_BUSINESSDEV_WORK_AREA, SECURITY_WORK_AREA, SEGMENT_NODE_TYPE, SET_NODE_TYPE, SLACK_NODE_TYPE, SPREADSHEET_FILE_NODE_TYPE, SWITCH_NODE_TYPE, WEBHOOK_NODE_TYPE, XERO_NODE_TYPE, COMPANY_SIZE_KEY, WORK_AREA_KEY, CODING_SKILL_KEY } from '@/constants';
+import { IPersonalizationSurveyAnswers } from '@/Interface';
+
+export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswers) {
+	const companySize = answers[COMPANY_SIZE_KEY];
+	const workArea = answers[WORK_AREA_KEY];
+
+	if (companySize === null && workArea === null && answers[CODING_SKILL_KEY] === null) {
+		return [];
+	}
+
+	let codingSkill = null;
+	if (answers[CODING_SKILL_KEY]) {
+		codingSkill = parseInt(answers[CODING_SKILL_KEY] as string, 10);
+		codingSkill = isNaN(codingSkill)? 0 : codingSkill;
+	}
+
+	let nodeTypes = [] as string[];
+	if (workArea === IT_ENGINEERING_WORK_AREA || workArea === AUTOMATION_CONSULTING_WORK_AREA) {
+		nodeTypes = nodeTypes.concat(WEBHOOK_NODE_TYPE);
+	}
+	else {
+		nodeTypes = nodeTypes.concat(CRON_NODE_TYPE);
+	}
+
+	if (codingSkill !== null && codingSkill >= 4) {
+		nodeTypes = nodeTypes.concat(FUNCTION_NODE_TYPE);
+	}
+	else {
+		nodeTypes = nodeTypes.concat(ITEM_LISTS_NODE_TYPE);
+	}
+
+	if (codingSkill !== null && codingSkill < 3) {
+		nodeTypes = nodeTypes.concat(IF_NODE_TYPE);
+	}
+	else {
+		nodeTypes = nodeTypes.concat(SWITCH_NODE_TYPE);
+	}
+
+	if (companySize === COMPANY_SIZE_500_999 || companySize === COMPANY_SIZE_1000_OR_MORE) {
+		if (workArea === SALES_BUSINESSDEV_WORK_AREA) {
+			nodeTypes = nodeTypes.concat(SALESFORCE_NODE_TYPE);
+		}
+		else if (workArea === SECURITY_WORK_AREA) {
+			nodeTypes = nodeTypes.concat([ELASTIC_SECURITY_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
+		}
+		else if (workArea === PRODUCT_WORK_AREA) {
+			nodeTypes = nodeTypes.concat([JIRA_TRIGGER_NODE_TYPE, SEGMENT_NODE_TYPE]);
+		}
+		else if (workArea === IT_ENGINEERING_WORK_AREA) {
+			nodeTypes = nodeTypes.concat([GITHUB_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
+		}
+		else {
+			nodeTypes = nodeTypes.concat([MICROSOFT_EXCEL_NODE_TYPE, MICROSOFT_TEAMS_NODE_TYPE]);
+		}
+	}
+	else {
+		if (workArea === SALES_BUSINESSDEV_WORK_AREA) {
+			nodeTypes = nodeTypes.concat(CLEARBIT_NODE_TYPE);
+		}
+		else if (workArea === SECURITY_WORK_AREA) {
+			nodeTypes = nodeTypes.concat([PAGERDUTY_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
+		}
+		else if (workArea === PRODUCT_WORK_AREA) {
+			nodeTypes = nodeTypes.concat([JIRA_TRIGGER_NODE_TYPE, CALENDLY_TRIGGER_NODE_TYPE]);
+		}
+		else if (workArea === IT_ENGINEERING_WORK_AREA) {
+			nodeTypes = nodeTypes.concat([EXECUTE_COMMAND_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
+		}
+		else if (workArea === FINANCE_WORK_AREA) {
+			nodeTypes = nodeTypes.concat([XERO_NODE_TYPE, QUICKBOOKS_NODE_TYPE, SPREADSHEET_FILE_NODE_TYPE]);
+		}
+		else {
+			nodeTypes = nodeTypes.concat([EMAIL_SEND_NODE_TYPE, SLACK_NODE_TYPE]);
+		}
+	}
+
+	nodeTypes = nodeTypes.concat(SET_NODE_TYPE);
+
+	return nodeTypes;
+}

packages/editor-ui/src/modules/settings.ts

@@ -0,0 +1,75 @@
+import {  ActionContext, Module } from 'vuex';
+import {
+	IN8nUISettings,
+	IPersonalizationSurveyAnswers,
+	IRootState,
+	ISettingsState,
+} from '../Interface';
+import { getSettings, submitPersonalizationSurvey } from '../api/settings';
+import Vue from 'vue';
+import { getPersonalizedNodeTypes } from './helper';
+import { PERSONALIZATION_MODAL_KEY } from '@/constants';
+
+const module: Module<ISettingsState, IRootState> = {
+	namespaced: true,
+	state: {
+		settings: {} as IN8nUISettings,
+	},
+	getters: {
+		personalizedNodeTypes(state: ISettingsState): string[] {
+			const answers = state.settings.personalizationSurvey && state.settings.personalizationSurvey.answers;
+			if (!answers) {
+				return [];
+			}
+
+			return getPersonalizedNodeTypes(answers);
+		},
+	},
+	mutations: {
+		setSettings(state: ISettingsState, settings: IN8nUISettings) {
+			state.settings = settings;
+		},
+		setPersonalizationAnswers(state: ISettingsState, answers: IPersonalizationSurveyAnswers) {
+			Vue.set(state.settings, 'personalizationSurvey', {
+				answers,
+				shouldShow: false,
+			});
+		},
+	},
+	actions: {
+		async getSettings(context: ActionContext<ISettingsState, IRootState>) {
+			const settings = await getSettings(context.rootGetters.getRestApiContext);
+			context.commit('setSettings', settings);
+
+			// todo refactor to this store
+			context.commit('setUrlBaseWebhook', settings.urlBaseWebhook, {root: true});
+			context.commit('setEndpointWebhook', settings.endpointWebhook, {root: true});
+			context.commit('setEndpointWebhookTest', settings.endpointWebhookTest, {root: true});
+			context.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution, {root: true});
+			context.commit('setSaveDataSuccessExecution', settings.saveDataSuccessExecution, {root: true});
+			context.commit('setSaveManualExecutions', settings.saveManualExecutions, {root: true});
+			context.commit('setTimezone', settings.timezone, {root: true});
+			context.commit('setExecutionTimeout', settings.executionTimeout, {root: true});
+			context.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout, {root: true});
+			context.commit('setVersionCli', settings.versionCli, {root: true});
+			context.commit('setInstanceId', settings.instanceId, {root: true});
+			context.commit('setOauthCallbackUrls', settings.oauthCallbackUrls, {root: true});
+			context.commit('setN8nMetadata', settings.n8nMetadata || {}, {root: true});
+			context.commit('versions/setVersionNotificationSettings', settings.versionNotifications, {root: true});
+			context.commit('setTelemetry', settings.telemetry, {root: true});
+
+			const showPersonalizationsModal = settings.personalizationSurvey && settings.personalizationSurvey.shouldShow && !settings.personalizationSurvey.answers;
+			if (showPersonalizationsModal) {
+				context.commit('ui/openModal', PERSONALIZATION_MODAL_KEY, {root: true});
+			}
+			return settings;
+		},
+		async submitPersonalizationSurvey(context: ActionContext<ISettingsState, IRootState>, results: IPersonalizationSurveyAnswers) {
+			await submitPersonalizationSurvey(context.rootGetters.getRestApiContext, results);
+
+			context.commit('setPersonalizationAnswers', results);
+		},
+	},
+};
+
+export default module;

packages/editor-ui/src/modules/ui.ts

@@ -1,4 +1,4 @@
-import { CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
+import { CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, PERSONALIZATION_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY } from '@/constants';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
 import {
@@ -15,13 +15,22 @@ const module: Module<IUiState, IRootState> = {
 				mode: '',
 				activeId: null,
 			},
+			[CREDENTIAL_LIST_MODAL_KEY]: {
+				open: false,
+			},
+			[CREDENTIAL_SELECT_MODAL_KEY]: {
+				open: false,
+			},
 			[DUPLICATE_MODAL_KEY]: {
 				open: false,
 			},
+			[PERSONALIZATION_MODAL_KEY]: {
+				open: false,
+			},
 			[TAGS_MANAGER_MODAL_KEY]: {
 				open: false,
 			},
-			[WORKLOW_OPEN_MODAL_KEY]: {
+			[WORKFLOW_OPEN_MODAL_KEY]: {
 				open: false,
 			},
 			[VERSIONS_MODAL_KEY]: {
@@ -30,9 +39,6 @@ const module: Module<IUiState, IRootState> = {
 			[WORKFLOW_SETTINGS_MODAL_KEY]: {
 				open: false,
 			},
-			[CREDENTIAL_SELECT_MODAL_KEY]: {
-				open: false,
-			},
 		},
 		modalStack: [],
 		sidebarMenuCollapsed: true,
@@ -86,20 +92,8 @@ const module: Module<IUiState, IRootState> = {
 		},
 	},
 	actions: {
-		openTagsManagerModal: async (context: ActionContext<IUiState, IRootState>) => {
+		openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {
-			context.commit('openModal', TAGS_MANAGER_MODAL_KEY);
+			context.commit('openModal', modalKey);
-		},
-		openWorklfowOpenModal: async (context: ActionContext<IUiState, IRootState>) => {
-			context.commit('openModal', WORKLOW_OPEN_MODAL_KEY);
-		},
-		openDuplicateModal: async (context: ActionContext<IUiState, IRootState>) => {
-			context.commit('openModal', DUPLICATE_MODAL_KEY);
-		},
-		openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => {
-			context.commit('openModal', VERSIONS_MODAL_KEY);
-		},
-		openWorkflowSettingsModal: async (context: ActionContext<IUiState, IRootState>) => {
-			context.commit('openModal', WORKFLOW_SETTINGS_MODAL_KEY);
 		},
 		openExisitngCredential: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
 			context.commit('setActiveId', {name: CREDENTIAL_EDIT_MODAL_KEY, id});
@@ -111,9 +105,6 @@ const module: Module<IUiState, IRootState> = {
 			context.commit('setMode', {name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'new'});
 			context.commit('openModal', CREDENTIAL_EDIT_MODAL_KEY);
 		},
-		openCredentialsSelectModal: async (context: ActionContext<IUiState, IRootState>) => {
-			context.commit('openModal', CREDENTIAL_SELECT_MODAL_KEY);
-		},
 	},
 };
 

packages/editor-ui/src/n8n-theme-variables.scss

@@ -55,9 +55,6 @@ $--gift-notification-active-color: $--color-primary;
 $--gift-notification-inner-color: $--color-primary;
 $--gift-notification-outer-color: #fff;
 
-// tags manager
-$--tags-manager-min-height: 300px;
-
 // based on element.io breakpoints
 $--breakpoint-2xs: 600px;
 $--breakpoint-xs: 768px;

packages/editor-ui/src/n8n-theme.scss

@@ -16,10 +16,6 @@ body {
 	color: $--custom-font-light;
 	font-weight: 400;
 }
-.text-very-light {
-	color: $--custom-font-very-light;
-	font-weight: 400;
-}
 
 .el-dialog {
 	border: var(--border-base);

packages/editor-ui/src/plugins/components.ts

@@ -51,10 +51,13 @@ import {
 	N8nInput,
 	N8nInputLabel,
 	N8nInputNumber,
+	N8nHeading,
 	N8nMenu,
 	N8nMenuItem,
 	N8nSelect,
 	N8nSpinner,
+	N8nText,
+	N8nTooltip,
 	N8nOption,
 } from 'n8n-design-system';
 import { ElMessageBoxOptions } from "element-ui/types/message-box";
@@ -68,10 +71,13 @@ Vue.use(N8nInfoTip);
 Vue.use(N8nInput);
 Vue.use(N8nInputLabel);
 Vue.use(N8nInputNumber);
+Vue.use(N8nHeading);
 Vue.use(N8nMenu);
 Vue.use(N8nMenuItem);
 Vue.use(N8nSelect);
 Vue.use(N8nSpinner);
+Vue.component('n8n-text', N8nText);
+Vue.use(N8nTooltip);
 Vue.use(N8nOption);
 
 // element io

packages/editor-ui/src/plugins/telemetry/index.ts

@@ -0,0 +1,171 @@
+import _Vue from "vue";
+import {
+	ITelemetrySettings,
+	IDataObject,
+} from 'n8n-workflow';
+import { INodeCreateElement } from "@/Interface";
+
+declare module 'vue/types/vue' {
+	interface Vue {
+		$telemetry: Telemetry;
+	}
+}
+
+export function TelemetryPlugin(vue: typeof _Vue): void {
+	const telemetry = new Telemetry();
+
+	Object.defineProperty(vue, '$telemetry', {
+		get() { return telemetry; },
+	});
+	Object.defineProperty(vue.prototype, '$telemetry', {
+		get() { return telemetry; },
+	});
+}
+
+interface IUserNodesPanelSessionData {
+	nodeFilter: string;
+	resultsNodes: string[];
+	filterMode: string;
+}
+
+interface IUserNodesPanelSession {
+	sessionId: string;
+	data: IUserNodesPanelSessionData;
+}
+
+class Telemetry {
+	
+	private get telemetry() {
+		// @ts-ignore
+		return window.rudderanalytics;
+	}
+
+	private userNodesPanelSession: IUserNodesPanelSession = {
+		sessionId: '',
+		data: {
+			nodeFilter: '',
+			resultsNodes: [],
+			filterMode: 'Regular',
+		},
+	};
+
+	init(options: ITelemetrySettings, instanceId: string) {
+		if (options.enabled && !this.telemetry) {
+			if(!options.config) {
+				return;
+			}
+
+			this.loadTelemetryLibrary(options.config.key, options.config.url, { integrations: { All: false }, loadIntegration: false });
+			this.telemetry.identify(instanceId);
+		}
+	}
+
+	track(event: string, properties?: IDataObject) {
+		if (this.telemetry) {
+			this.telemetry.track(event, properties);
+		}
+	}
+
+	trackNodesPanel(event: string, properties: IDataObject = {}) {
+		if (this.telemetry) {
+			properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
+			switch (event) {
+				case 'nodeView.createNodeActiveChanged':
+					if (properties.createNodeActive !== false) {
+						this.resetNodesPanelSession();
+						properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
+						this.telemetry.track('User opened nodes panel', properties);
+					}
+					break;
+				case 'nodeCreateList.selectedTypeChanged':
+					this.userNodesPanelSession.data.filterMode = properties.new_filter as string;
+					this.telemetry.track('User changed nodes panel filter', properties);
+					break;
+				case 'nodeCreateList.destroyed':
+					if(this.userNodesPanelSession.data.nodeFilter.length > 0 && this.userNodesPanelSession.data.nodeFilter !== '') {
+						this.telemetry.track('User entered nodes panel search term', this.generateNodesPanelEvent());
+					}
+					break;
+				case 'nodeCreateList.nodeFilterChanged':
+					if((properties.newValue as string).length === 0 && this.userNodesPanelSession.data.nodeFilter.length > 0) {
+						this.telemetry.track('User entered nodes panel search term', this.generateNodesPanelEvent());
+					}
+
+					if((properties.newValue as string).length > (properties.oldValue as string || '').length) {
+						this.userNodesPanelSession.data.nodeFilter = properties.newValue as string;
+						this.userNodesPanelSession.data.resultsNodes = ((properties.filteredNodes || []) as INodeCreateElement[]).map((node: INodeCreateElement) => node.key);
+					}
+					break;
+				case 'nodeCreateList.onCategoryExpanded':
+					properties.is_subcategory = false;
+					this.telemetry.track('User viewed node category', properties);
+					break;
+				case 'nodeCreateList.onSubcategorySelected':
+					const selectedProperties = (properties.selected as IDataObject).properties as IDataObject;
+					if(selectedProperties && selectedProperties.subcategory) {
+						properties.category_name = selectedProperties.subcategory;
+					}
+					properties.is_subcategory = true;
+					delete properties.selected;
+					this.telemetry.track('User viewed node category', properties);
+					break;
+				case 'nodeView.addNodeButton':
+					this.telemetry.track('User added node to workflow canvas', properties);
+					break;
+				default:
+					break;
+			}
+		}
+	}
+
+	private resetNodesPanelSession() {
+		this.userNodesPanelSession.sessionId = `nodes_panel_session_${(new Date()).valueOf()}`;
+		this.userNodesPanelSession.data = {
+			nodeFilter: '',
+			resultsNodes: [],
+			filterMode: 'All',
+		};
+	}
+
+	private generateNodesPanelEvent() {
+		return {
+			search_string: this.userNodesPanelSession.data.nodeFilter,
+			results_count: this.userNodesPanelSession.data.resultsNodes.length,
+			filter_mode: this.userNodesPanelSession.data.filterMode,
+			nodes_panel_session_id: this.userNodesPanelSession.sessionId,
+		};
+	}
+
+	private loadTelemetryLibrary(key: string, url: string, options: IDataObject) {
+		// @ts-ignore
+		window.rudderanalytics = window.rudderanalytics || [];
+
+		this.telemetry.methods = ["load", "page", "track", "identify", "alias", "group", "ready", "reset", "getAnonymousId", "setAnonymousId"];
+		this.telemetry.factory = (t: any) => { // tslint:disable-line:no-any
+			return (...args: any[]) => { // tslint:disable-line:no-any
+				const r = Array.prototype.slice.call(args);
+				r.unshift(t);
+				this.telemetry.push(r);
+				return this.telemetry;
+			};
+		};
+
+		for (let t = 0; t < this.telemetry.methods.length; t++) {
+			const r = this.telemetry.methods[t];
+			this.telemetry[r] = this.telemetry.factory(r);
+		}
+
+		this.telemetry.loadJS = () => {
+			const r = document.createElement("script");
+			r.type = "text/javascript";
+			r.async = !0;
+			r.src = "https://cdn.rudderlabs.com/v1/rudder-analytics.min.js";
+			const a = document.getElementsByTagName("script")[0];
+			if(a && a.parentNode) {
+				a.parentNode.insertBefore(r, a);
+			}
+		};
+		this.telemetry.loadJS();
+		this.telemetry.load(key, url, options);
+	}
+}

packages/editor-ui/src/plugins/telemetry/rudder-sdk.d.ts

@@ -0,0 +1 @@
+declare module 'rudder-sdk-js';

packages/editor-ui/src/store.ts

@@ -7,18 +7,17 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, DEFAULT_NODETYPE_VERSION } from '@/const
 import {
 	IConnection,
 	IConnections,
-	ICredentialType,
 	IDataObject,
 	INodeConnections,
 	INodeIssueData,
 	INodeTypeDescription,
 	IRunData,
+	ITelemetrySettings,
 	ITaskData,
 	IWorkflowSettings,
 } from 'n8n-workflow';
 
 import {
-	ICredentialsResponse,
 	IExecutionResponse,
 	IExecutionsCurrentSummaryExtended,
 	IRootState,
@@ -35,6 +34,7 @@ import {
 
 import credentials from './modules/credentials';
 import tags from './modules/tags';
+import settings from './modules/settings';
 import ui from './modules/ui';
 import workflows from './modules/workflows';
 import versions from './modules/versions';
@@ -87,11 +87,13 @@ const state: IRootState = {
 	},
 	sidebarMenuItems: [],
 	instanceId: '',
+	telemetry: null,
 };
 
 const modules = {
 	credentials,
 	tags,
+	settings,
 	workflows,
 	versions,
 	ui,
@@ -541,6 +543,9 @@ export const store = new Vuex.Store({
 		setInstanceId(state, instanceId: string) {
 			Vue.set(state, 'instanceId', instanceId);
 		},
+		setTelemetry(state, telemetry: ITelemetrySettings) {
+			Vue.set(state, 'telemetry', telemetry);
+		},
 		setOauthCallbackUrls(state, urls: IDataObject) {
 			Vue.set(state, 'oauthCallbackUrls', urls);
 		},
@@ -678,6 +683,10 @@ export const store = new Vuex.Store({
 			return state.stateIsDirty;
 		},
 
+		instanceId: (state): string => {
+			return state.instanceId;
+		},
+
 		saveDataErrorExecution: (state): string => {
 			return state.saveDataErrorExecution;
 		},
@@ -699,6 +708,9 @@ export const store = new Vuex.Store({
 		versionCli: (state): string => {
 			return state.versionCli;
 		},
+		telemetry: (state): ITelemetrySettings | null => {
+			return state.telemetry;
+		},
 		oauthCallbackUrls: (state): object => {
 			return state.oauthCallbackUrls;
 		},

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

@@ -109,7 +109,7 @@ import {
 } from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb';
-import { NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE } from '@/constants';
+import { NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
 import { copyPaste } from '@/components/mixins/copyPaste';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -175,7 +175,7 @@ const SIDEBAR_WIDTH = 65;
 
 const DEFAULT_START_NODE = {
 	name: 'Start',
-	type: 'n8n-nodes-base.start',
+	type: START_NODE_TYPE,
 	typeVersion: 1,
 	position: [
 		DEFAULT_START_POSITION_X,
@@ -345,7 +345,8 @@ export default mixins(
 			},
 			openNodeCreator () {
 				this.createNodeActive = true;
-				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source: 'add_node_button' });
+				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source: 'add_node_button', createNodeActive: this.createNodeActive });
+				this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source: 'add_node_button', workflow_id: this.$store.getters.workflowId, createNodeActive: this.createNodeActive });
 			},
 			async openExecution (executionId: string) {
 				this.resetWorkspace();
@@ -374,6 +375,7 @@ export default mixins(
 				});
 
 				this.$externalHooks().run('execution.open', { workflowId: data.workflowData.id, workflowName: data.workflowData.name, executionId });
+				this.$telemetry.track('User opened read-only execution', { workflow_id: data.workflowData.id, execution_mode: data.mode, execution_finished: data.finished });
 
 				if (data.finished !== true && data.data.resultData.error) {
 					// Check if any node contains an error
@@ -392,12 +394,14 @@ export default mixins(
 					}
 
 					if (nodeErrorFound === false) {
-						const errorMessage = this.$getExecutionError(data.data.resultData.error);
+						const resultError = data.data.resultData.error;
+						const errorMessage = this.$getExecutionError(resultError);
+						const shouldTrack = resultError && resultError.node && resultError.node.type.startsWith('n8n-nodes-base');
 						this.$showMessage({
 							title: 'Failed execution',
 							message: errorMessage,
 							type: 'error',
-						});
+						}, shouldTrack);
 
 						if (data.data.resultData.error.stack) {
 							// Display some more information for now in console to make debugging easier
@@ -593,6 +597,9 @@ export default mixins(
 
 				} else if (e.key === 'Tab') {
 					this.createNodeActive = !this.createNodeActive && !this.isReadOnly;
+					this.$externalHooks().run('nodeView.createNodeActiveChanged', { source: 'tab', createNodeActive: this.createNodeActive });
+					this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source: 'tab', workflow_id: this.$store.getters.workflowId, createNodeActive: this.createNodeActive });
+
 				} else if (e.key === this.controlKeyCode) {
 					this.ctrlKeyPressed = true;
 				} else if (e.key === 'F2' && !this.isReadOnly) {
@@ -627,7 +634,7 @@ export default mixins(
 					e.stopPropagation();
 					e.preventDefault();
 
-					this.$store.dispatch('ui/openWorklfowOpenModal');
+					this.$store.dispatch('ui/openModal', WORKFLOW_OPEN_MODAL_KEY);
 				} else if (e.key === 'n' && this.isCtrlKeyPressed(e) === true && e.altKey === true) {
 					// Create a new workflow
 					e.stopPropagation();
@@ -653,7 +660,7 @@ export default mixins(
 						return;
 					}
 
-					this.callDebounced('saveCurrentWorkflow', 1000);
+					this.callDebounced('saveCurrentWorkflow', 1000, undefined, true);
 				} else if (e.key === 'Enter') {
 					// Activate the last selected node
 					const lastSelectedNode = this.$store.getters.lastSelectedNode;
@@ -838,6 +845,12 @@ export default mixins(
 				this.getSelectedNodesToSave().then((data) => {
 					const nodeData = JSON.stringify(data, null, 2);
 					this.copyToClipboard(nodeData);
+					if (data.nodes.length > 0) {
+						this.$telemetry.track('User copied nodes', {
+							node_types: data.nodes.map((node) => node.type),
+							workflow_id: this.$store.getters.workflowId,
+						});
+					}
 				});
 			},
 
@@ -1011,6 +1024,10 @@ export default mixins(
 					}
 				}
 
+				this.$telemetry.track('User pasted nodes', {
+					workflow_id: this.$store.getters.workflowId,
+				});
+
 				return this.importWorkflowData(workflowData!);
 			},
 
@@ -1029,6 +1046,8 @@ export default mixins(
 				}
 				this.stopLoading();
 
+				this.$telemetry.track('User imported workflow', { source: 'url', workflow_id: this.$store.getters.workflowId });
+
 				return workflowData;
 			},
 
@@ -1247,6 +1266,7 @@ export default mixins(
 				this.$store.commit('setStateDirty', true);
 
 				this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
+				this.$telemetry.trackNodesPanel('nodeView.addNodeButton', { node_type: nodeTypeName, workflow_id: this.$store.getters.workflowId });
 
 				// Automatically deselect all nodes and select the current one and also active
 				// current node
@@ -1370,7 +1390,8 @@ export default mixins(
 
 					// Display the node-creator
 					this.createNodeActive = true;
-					this.$externalHooks().run('nodeView.createNodeActiveChanged', { source: 'node_connection_drop' });
+					this.$externalHooks().run('nodeView.createNodeActiveChanged', { source: 'node_connection_drop', createNodeActive: this.createNodeActive });
+					this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source: 'node_connection_drop', workflow_id: this.$store.getters.workflowId, createNodeActive: this.createNodeActive });
 				});
 
 				this.instance.bind('connection', (info: OnConnectionBindInfo) => {
@@ -1752,6 +1773,8 @@ export default mixins(
 				setTimeout(() => {
 					this.nodeSelectedByName(newNodeData.name, true);
 				});
+
+				this.$telemetry.track('User duplicated node', { node_type: node.type, workflow_id: this.$store.getters.workflowId });
 			},
 			removeNode (nodeName: string) {
 				if (this.editAllowedCheck() === false) {
@@ -1761,7 +1784,7 @@ export default mixins(
 				const node = this.$store.getters.nodeByName(nodeName);
 
 				// "requiredNodeTypes" are also defined in cli/commands/run.ts
-				const requiredNodeTypes = [ 'n8n-nodes-base.start' ];
+				const requiredNodeTypes = [ START_NODE_TYPE ];
 
 				if (requiredNodeTypes.includes(node.type)) {
 					// The node is of the required type so check first
@@ -1961,7 +1984,7 @@ export default mixins(
 						node.parameters = nodeParameters !== null ? nodeParameters : {};
 
 						// if it's a webhook and the path is empty set the UUID as the default path
-						if (node.type === 'n8n-nodes-base.webhook' && node.parameters.path === '') {
+						if (node.type === WEBHOOK_NODE_TYPE && node.parameters.path === '') {
 							node.parameters.path = node.webhookId as string;
 						}
 					}
@@ -2240,21 +2263,7 @@ export default mixins(
 				this.$store.commit('setActiveWorkflows', activeWorkflows);
 			},
 			async loadSettings (): Promise<void> {
-				const settings = await this.restApi().getSettings() as IN8nUISettings;
+				await this.$store.dispatch('settings/getSettings');
-				this.$store.commit('setUrlBaseWebhook', settings.urlBaseWebhook);
-				this.$store.commit('setEndpointWebhook', settings.endpointWebhook);
-				this.$store.commit('setEndpointWebhookTest', settings.endpointWebhookTest);
-				this.$store.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution);
-				this.$store.commit('setSaveDataSuccessExecution', settings.saveDataSuccessExecution);
-				this.$store.commit('setSaveManualExecutions', settings.saveManualExecutions);
-				this.$store.commit('setTimezone', settings.timezone);
-				this.$store.commit('setExecutionTimeout', settings.executionTimeout);
-				this.$store.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout);
-				this.$store.commit('setVersionCli', settings.versionCli);
-				this.$store.commit('setInstanceId', settings.instanceId);
-				this.$store.commit('setOauthCallbackUrls', settings.oauthCallbackUrls);
-				this.$store.commit('setN8nMetadata', settings.n8nMetadata || {});
-				this.$store.commit('versions/setVersionNotificationSettings', settings.versionNotifications);
 			},
 			async loadNodeTypes (): Promise<void> {
 				const nodeTypes = await this.restApi().getNodeTypes();

packages/editor-ui/tsconfig.json

@@ -37,7 +37,7 @@
 		"src/**/*.tsx",
 		"src/**/*.vue",
 		"tests/**/*.ts",
-		"tests/**/*.tsx"
+		"tests/**/*.tsx",
 	],
 	"exclude": [
 		"node_modules"

packages/workflow/src/Interfaces.ts

@@ -1064,3 +1064,41 @@ export type PropertiesOf<M extends { resource: string; operation: string }> = Ar
 		};
 	}
 >;
+
+// Telemetry
+
+export interface INodesGraph {
+	node_types: string[];
+	node_connections: IDataObject[];
+	nodes: INodesGraphNode;
+}
+
+export interface INodesGraphNode {
+	[key: string]: INodeGraphItem;
+}
+
+export interface INodeGraphItem {
+	type: string;
+	resource?: string;
+	operation?: string;
+	domain?: string;
+}
+
+export interface INodeNameIndex {
+	[name: string]: string;
+}
+
+export interface INodesGraphResult {
+	nodeGraph: INodesGraph;
+	nameIndices: INodeNameIndex;
+}
+
+export interface ITelemetryClientConfig {
+	url: string;
+	key: string;
+}
+
+export interface ITelemetrySettings {
+	enabled: boolean;
+	config?: ITelemetryClientConfig;
+}

packages/workflow/src/TelemetryHelpers.ts

@@ -0,0 +1,61 @@
+/* eslint-disable import/no-cycle */
+import {
+	IConnection,
+	INode,
+	INodeNameIndex,
+	INodesGraph,
+	INodeGraphItem,
+	INodesGraphResult,
+	IWorkflowBase,
+} from '.';
+
+export function getNodeTypeForName(workflow: IWorkflowBase, nodeName: string): INode | undefined {
+	return workflow.nodes.find((node) => node.name === nodeName);
+}
+
+export function generateNodesGraph(workflow: IWorkflowBase): INodesGraphResult {
+	const nodesGraph: INodesGraph = {
+		node_types: [],
+		node_connections: [],
+		nodes: {},
+	};
+	const nodeNameAndIndex: INodeNameIndex = {};
+
+	workflow.nodes.forEach((node: INode, index: number) => {
+		nodesGraph.node_types.push(node.type);
+		const nodeItem: INodeGraphItem = {
+			type: node.type,
+		};
+
+		if (node.type === 'n8n-nodes-base.httpRequest') {
+			try {
+				nodeItem.domain = new URL(node.parameters.url as string).hostname;
+			} catch (e) {
+				nodeItem.domain = node.parameters.url as string;
+			}
+		} else {
+			Object.keys(node.parameters).forEach((parameterName) => {
+				if (parameterName === 'operation' || parameterName === 'resource') {
+					nodeItem[parameterName] = node.parameters[parameterName] as string;
+				}
+			});
+		}
+		nodesGraph.nodes[`${index}`] = nodeItem;
+		nodeNameAndIndex[node.name] = index.toString();
+	});
+
+	const getGraphConnectionItem = (startNode: string, connectionItem: IConnection) => {
+		return { start: nodeNameAndIndex[startNode], end: nodeNameAndIndex[connectionItem.node] };
+	};
+
+	Object.keys(workflow.connections).forEach((nodeName) => {
+		const connections = workflow.connections[nodeName];
+		connections.main.forEach((element) => {
+			element.forEach((element2) => {
+				nodesGraph.node_connections.push(getGraphConnectionItem(nodeName, element2));
+			});
+		});
+	});
+
+	return { nodeGraph: nodesGraph, nameIndices: nodeNameAndIndex };
+}

packages/workflow/src/index.ts

@@ -6,6 +6,7 @@ import * as ObservableObject from './ObservableObject';
 export * from './Interfaces';
 export * from './Expression';
 export * from './NodeErrors';
+export * as TelemetryHelpers from './TelemetryHelpers';
 export * from './Workflow';
 export * from './WorkflowDataProxy';
 export * from './WorkflowErrors';