🔀 Merge master

2025-12-19 02:51:14 +00:00 · 2021-12-13 09:50:26 +01:00
parent f2242be787 984a7a5301
commit c33cd0de3f
72 changed files with 2348 additions and 767 deletions
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -14,14 +14,20 @@
 </template>

 <script lang="ts">
+import Vue from 'vue';
 import Telemetry from './components/Telemetry.vue';

-export default {
+export default Vue.extend({
 	name: 'App',
 	components: {
 		Telemetry,
 	},
-};
+	watch: {
+		'$route'(route) {
+			this.$telemetry.page('Editor', route.name);
+		},
+	},
+});
 </script>

 <style lang="scss">
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -483,7 +483,12 @@ export interface IVersionNotificationSettings {
 export type IPersonalizationSurveyKeys = 'codingSkill' | 'companyIndustry' | 'companySize' | 'otherCompanyIndustry' | 'otherWorkArea' | 'workArea';

 export type IPersonalizationSurveyAnswers = {
-	[key in IPersonalizationSurveyKeys]: string | null
+	codingSkill: string | null;
+	companyIndustry: string[];
+	companySize: string | null;
+	otherCompanyIndustry: string | null;
+	otherWorkArea: string | null;
+	workArea: string[] | string | null;
 };

 export interface IPersonalizationSurvey {
@@ -491,6 +496,21 @@ export interface IPersonalizationSurvey {
 	shouldShow: boolean;
 }

+export interface IN8nPrompts {
+	message: string;
+	title: string;
+	showContactPrompt: boolean;
+	showValueSurvey: boolean;
+}
+
+export interface IN8nValueSurveyData {
+	[key: string]: string;
+}
+
+export interface IN8nPromptResponse {
+	updated: boolean;
+}
+
 export interface IN8nUISettings {
 	endpointWebhook: string;
 	endpointWebhookTest: string;
@@ -698,6 +718,7 @@ export interface IUiState {

 export interface ISettingsState {
 	settings: IN8nUISettings;
+	promptsData: IN8nPrompts;
 }

 export interface IVersionsState {
--- a/packages/editor-ui/src/api/helpers.ts
+++ b/packages/editor-ui/src/api/helpers.ts
@@ -93,3 +93,7 @@ export async function makeRestApiRequest(context: IRestApiContext, method: Metho
 export async function get(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) {
 	return await request({method: 'GET', baseURL, endpoint, headers, data: params});
 }
+
+export async function post(baseURL: string, endpoint: string, params?: IDataObject, headers?: IDataObject) {
+	return await request({method: 'POST', baseURL, endpoint, headers, data: params});
+}
--- a/packages/editor-ui/src/api/settings.ts
+++ b/packages/editor-ui/src/api/settings.ts
@@ -1,6 +1,7 @@
 import { IDataObject } from 'n8n-workflow';
-import { IRestApiContext, IN8nUISettings, IPersonalizationSurveyAnswers } from '../Interface';
-import { makeRestApiRequest } from './helpers';
+import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings, IPersonalizationSurveyAnswers } from '../Interface';
+import { makeRestApiRequest, get, post } from './helpers';
+import { TEMPLATES_BASE_URL } from '@/constants';

 export async function getSettings(context: IRestApiContext): Promise<IN8nUISettings> {
 	return await makeRestApiRequest(context, 'GET', '/settings');
@@ -10,3 +11,15 @@ export async function submitPersonalizationSurvey(context: IRestApiContext, para
 	await makeRestApiRequest(context, 'POST', '/user-survey', params as unknown as IDataObject);
 }

+export async function getPromptsData(instanceId: string): Promise<IN8nPrompts> {
+	return await get(TEMPLATES_BASE_URL, '/prompts', {}, {'n8n-instance-id': instanceId});
+}
+
+export async function submitContactInfo(instanceId: string, email: string): Promise<void> {
+	return await post(TEMPLATES_BASE_URL, '/prompt', { email }, {'n8n-instance-id': instanceId});
+}
+
+export async function submitValueSurvey(instanceId: string, params: IN8nValueSurveyData): Promise<IN8nPrompts> {
+	return await post(TEMPLATES_BASE_URL, '/value-survey', params, {'n8n-instance-id': instanceId});
+}
+
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -0,0 +1,128 @@
+<template>
+	<Modal
+		:name="modalName"
+		:eventBus="modalBus"
+		:center="true"
+		:closeOnPressEscape="false"
+		:beforeClose="closeDialog"
+		customClass="contact-prompt-modal"
+		width="460px"
+	>
+		<template slot="header">
+			<n8n-heading tag="h2" size="xlarge" color="text-dark">{{ title }}</n8n-heading>
+		</template>
+		<template v-slot:content>
+			<div :class="$style.description">
+				<n8n-text size="medium" color="text-base">{{ description }}</n8n-text>
+			</div>
+			<div @keyup.enter="send">
+				<n8n-input v-model="email" placeholder="Your email address" />
+			</div>
+			<div :class="$style.disclaimer">
+				<n8n-text size="small" color="text-base"
+					>David from our product team will get in touch personally</n8n-text
+				>
+			</div>
+		</template>
+		<template v-slot:footer>
+			<div :class="$style.footer">
+				<n8n-button label="Send" float="right" @click="send" :disabled="!isEmailValid" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import mixins from 'vue-typed-mixins';
+import { mapGetters } from 'vuex';
+
+import { IN8nPromptResponse } from '@/Interface';
+import { VALID_EMAIL_REGEX } from '@/constants';
+import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import Modal from './Modal.vue';
+
+export default mixins(workflowHelpers).extend({
+	components: { Modal },
+	name: 'ContactPromptModal',
+	props: ['modalName'],
+	data() {
+		return {
+			email: '',
+			modalBus: new Vue(),
+		};
+	},
+	computed: {
+		...mapGetters({
+			promptsData: 'settings/getPromptsData',
+		}),
+		title(): string {
+			if (this.promptsData && this.promptsData.title) {
+				return this.promptsData.title;
+			}
+
+			return 'You’re a power user 💪';
+		},
+		description(): string {
+			if (this.promptsData && this.promptsData.message) {
+				return this.promptsData.message;
+			}
+
+			return 'Your experience with n8n can help us improve — for you and our entire community.';
+		},
+		isEmailValid(): boolean {
+			return VALID_EMAIL_REGEX.test(String(this.email).toLowerCase());
+		},
+	},
+	methods: {
+		closeDialog(): void {
+			this.$telemetry.track('User closed email modal', {
+				instance_id: this.$store.getters.instanceId,
+				email: null,
+			});
+			this.$store.commit('ui/closeTopModal');
+		},
+		async send() {
+			if (this.isEmailValid) {
+				const response: IN8nPromptResponse = await this.$store.dispatch(
+					'settings/submitContactInfo',
+					this.email,
+				);
+
+				if (response.updated) {
+					this.$telemetry.track('User closed email modal', {
+						instance_id: this.$store.getters.instanceId,
+						email: this.email,
+					});
+					this.$showMessage({
+						title: 'Thanks!',
+						message: "It's people like you that help make n8n better",
+						type: 'success',
+					});
+				}
+				this.$store.commit('ui/closeTopModal');
+			}
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.description {
+	margin-bottom: var(--spacing-s);
+}
+
+.disclaimer {
+	margin-top: var(--spacing-4xs);
+}
+</style>
+
+<style lang="scss">
+.dialog-wrapper {
+	.contact-prompt-modal {
+		.el-dialog__body {
+			padding: 16px 24px 24px;
+		}
+	}
+}
+</style>
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -140,8 +140,9 @@ export default mixins(workflowHelpers).extend({
 		},
 	},
 	methods: {
-		onSaveButtonClick () {
-			this.saveCurrentWorkflow(undefined);
+		async onSaveButtonClick () {
+			const saved = await this.saveCurrentWorkflow();
+			if (saved) this.$store.dispatch('settings/fetchPromptsData');
 		},
 		onTagsEditEnable() {
 			this.$data.appliedTagIds = this.currentWorkflowTagIds;
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -452,7 +452,8 @@ export default mixins(

 					saveAs(blob, workflowName + '.json');
 				} else if (key === 'workflow-save') {
-					this.saveCurrentWorkflow(undefined);
+					const saved = await this.saveCurrentWorkflow();
+					if (saved) this.$store.dispatch('settings/fetchPromptsData');
 				} else if (key === 'workflow-duplicate') {
 					this.$store.dispatch('ui/openModal', DUPLICATE_MODAL_KEY);
 				} else if (key === 'help-about') {
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -3,7 +3,9 @@
 		:direction="direction"
 		:visible="visible"
 		:size="width"
-		:before-close="close"
+		:before-close="beforeClose"
+		:modal="modal"
+		:wrapperClosable="wrapperClosable"
 		>
 		<template v-slot:title>
 			<slot name="header" />
@@ -23,15 +25,26 @@ export default Vue.extend({
 		name: {
 			type: String,
 		},
+		beforeClose: {
+			type: Function,
+		},
 		eventBus: {
 			type: Vue,
 		},
 		direction: {
 			type: String,
 		},
+		modal: {
+			type: Boolean,
+			default: true,
+		},
 		width: {
 			type: String,
 		},
+		wrapperClosable: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	mounted() {
 		window.addEventListener('keydown', this.onWindowKeydown);
--- a/packages/editor-ui/src/components/Modals.vue
+++ b/packages/editor-ui/src/components/Modals.vue
@@ -1,5 +1,13 @@
 <template>
 	<div>
+		<ModalRoot :name="CONTACT_PROMPT_MODAL_KEY">
+			<template v-slot:default="{ modalName }">
+				<ContactPromptModal
+					:modalName="modalName"
+				/>
+			</template>
+		</ModalRoot>
+
 		<ModalRoot :name="CREDENTIAL_EDIT_MODAL_KEY">
 			<template v-slot="{ modalName, activeId, mode }">
 				<CredentialEdit
@@ -39,6 +47,12 @@
 			<UpdatesPanel />
 		</ModalRoot>

+		<ModalRoot :name="VALUE_SURVEY_MODAL_KEY" :keepAlive="true">
+			<template v-slot:default="{ active }">
+				<ValueSurvey :isActive="active"/>
+			</template>
+		</ModalRoot>
+
 		<ModalRoot :name="WORKFLOW_OPEN_MODAL_KEY">
 			<WorkflowOpen />
 		</ModalRoot>
@@ -51,8 +65,9 @@

 <script lang="ts">
 import Vue from "vue";
-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 { CONTACT_PROMPT_MODAL_KEY, 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, VALUE_SURVEY_MODAL_KEY } from '@/constants';

+import ContactPromptModal from './ContactPromptModal.vue';
 import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
 import CredentialsList from "./CredentialsList.vue";
 import CredentialsSelectModal from "./CredentialsSelectModal.vue";
@@ -61,12 +76,14 @@ import ModalRoot from "./ModalRoot.vue";
 import PersonalizationModal from "./PersonalizationModal.vue";
 import TagsManager from "./TagsManager/TagsManager.vue";
 import UpdatesPanel from "./UpdatesPanel.vue";
+import ValueSurvey from "./ValueSurvey.vue";
 import WorkflowSettings from "./WorkflowSettings.vue";
 import WorkflowOpen from "./WorkflowOpen.vue";

 export default Vue.extend({
 	name: "Modals",
 	components: {
+		ContactPromptModal,
 		CredentialEdit,
 		CredentialsList,
 		CredentialsSelectModal,
@@ -75,10 +92,12 @@ export default Vue.extend({
 		PersonalizationModal,
 		TagsManager,
 		UpdatesPanel,
+		ValueSurvey,
 		WorkflowSettings,
 		WorkflowOpen,
 	},
 	data: () => ({
+		CONTACT_PROMPT_MODAL_KEY,
 		CREDENTIAL_EDIT_MODAL_KEY,
 		CREDENTIAL_LIST_MODAL_KEY,
 		CREDENTIAL_SELECT_MODAL_KEY,
@@ -88,6 +107,7 @@ export default Vue.extend({
 		VERSIONS_MODAL_KEY,
 		WORKFLOW_OPEN_MODAL_KEY,
 		WORKFLOW_SETTINGS_MODAL_KEY,
+		VALUE_SURVEY_MODAL_KEY,
 	}),
 });
 </script>
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -128,6 +128,9 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 				return `Waiting for you to create an event in ${this.nodeType && this.nodeType.displayName.replace(/Trigger/, "")}`;
 			}
 		},
+		isPollingTypeNode (): boolean {
+			return !!(this.nodeType && this.nodeType.polling);
+		},
 		isExecuting (): boolean {
 			return this.$store.getters.executingNode === this.data.name;
 		},
@@ -266,7 +269,16 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			return !!(this.nodeType && this.nodeType.outputs.length > 2);
 		},
 		shouldShowTriggerTooltip () : boolean {
-			return !!this.node && this.workflowRunning && this.workflowDataItems === 0 && this.isTriggerNode && this.isSingleActiveTriggerNode && !this.isTriggerNodeTooltipEmpty && !this.isNodeDisabled && !this.hasIssues && !this.dragging;
+			return !!this.node &&
+				this.isTriggerNode &&
+				!this.isPollingTypeNode &&
+				!this.isNodeDisabled &&
+				this.workflowRunning &&
+				this.workflowDataItems === 0  &&
+				this.isSingleActiveTriggerNode &&
+				!this.isTriggerNodeTooltipEmpty &&
+				!this.hasIssues &&
+				!this.dragging;
 		},
 	},
 	watch: {
@@ -478,7 +490,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			top: -25px;
 			left: -10px;
 			width: 120px;
-			height: 24px;
+			height: 26px;
 			font-size: 0.9em;
 			text-align: left;
 			z-index: 10;
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -10,7 +10,6 @@
 		:closeOnPressEscape="false"
 		width="460px"
 		@enter="save"
-		@input="onInput"
 	>
 		<template v-slot:content>
 			<div v-if="submitted" :class="$style.submittedContainer">
@@ -47,6 +46,7 @@
 					</n8n-select>
 				</n8n-input-label>

+
 				<n8n-input-label :label="$i.baseText('personalizationModal.whichOfTheseAreasDoYouMainlyWorkIn')">
 					<n8n-select :value="values[WORK_AREA_KEY]" :placeholder="$i.baseText('personalizationModal.select')" @change="(value) => onInput(WORK_AREA_KEY, value)">
 						<n8n-option
@@ -154,6 +154,20 @@
 							:value="OTHER_INDUSTRY_OPTION"
 							:label="$i.baseText('personalizationModal.otherPleaseSpecify')"
 						/>
+
+				<section v-if="showAllIndustryQuestions">
+					<n8n-input-label label="Which industries is your company in?">
+					<n8n-select :value="values[COMPANY_INDUSTRY_KEY]" multiple placeholder="Select..." @change="(value) => onMultiInput(COMPANY_INDUSTRY_KEY, value)">
+						<n8n-option :value="E_COMMERCE_INDUSTRY" label="eCommerce" />
+						<n8n-option :value="AUTOMATION_CONSULTING_INDUSTRY" label="Automation consulting" />
+						<n8n-option :value="SYSTEM_INTEGRATION_INDUSTRY" label="Systems integration" />
+						<n8n-option :value="GOVERNMENT_INDUSTRY" label="Government" />
+						<n8n-option :value="LEGAL_INDUSTRY" label="Legal" />
+						<n8n-option :value="HEALTHCARE_INDUSTRY" label="Healthcare" />
+						<n8n-option :value="FINANCE_INDUSTRY" label="Finance" />
+						<n8n-option :value="SECURITY_INDUSTRY" label="Security" />
+						<n8n-option :value="SAAS_INDUSTRY" label="SaaS" />
+						<n8n-option :value="OTHER_INDUSTRY_OPTION" label="Other (please specify)" />
 					</n8n-select>
 				</n8n-input-label>
 				<n8n-input
@@ -265,11 +279,11 @@ export default mixins(showMessage, workflowHelpers).extend({
 			showAllIndustryQuestions: true,
 			modalBus: new Vue(),
 			values: {
-				[WORK_AREA_KEY]: null,
+				[WORK_AREA_KEY]: [],
 				[COMPANY_SIZE_KEY]: null,
 				[CODING_SKILL_KEY]: null,
 				[OTHER_WORK_AREA_KEY]: null,
-				[COMPANY_INDUSTRY_KEY]: null,
+				[COMPANY_INDUSTRY_KEY]: [],
 				[OTHER_COMPANY_INDUSTRY_KEY]: null,
 			} as IPersonalizationSurveyAnswers,
 			FINANCE_WORK_AREA,
@@ -318,28 +332,19 @@ export default mixins(showMessage, workflowHelpers).extend({
 		closeDialog() {
 			this.modalBus.$emit('close');
 		},
-		onInput(name: IPersonalizationSurveyKeys, value: string) {
-			if (name === WORK_AREA_KEY && value.includes(OTHER_WORK_AREA_OPTION)) {
-				this.otherWorkAreaFieldVisible = true;
+		onMultiInput(name: IPersonalizationSurveyKeys, value: string[]) {
+			if (name === WORK_AREA_KEY) {
+				this.otherWorkAreaFieldVisible = value.includes(OTHER_WORK_AREA_OPTION);
+				this.showAllIndustryQuestions = !value.includes(NOT_APPLICABLE_WORK_AREA);
+				this.values[OTHER_WORK_AREA_KEY] = value.includes(OTHER_WORK_AREA_OPTION) ? this.values[OTHER_WORK_AREA_KEY] : null;
+				this.values[WORK_AREA_KEY] = value;
 			}
-			else if (name === WORK_AREA_KEY && value.includes(NOT_APPLICABLE_WORK_AREA)) {
-				this.showAllIndustryQuestions = false;
-			}
-			else if (name === WORK_AREA_KEY) {
-				this.otherWorkAreaFieldVisible = false;
-				this.showAllIndustryQuestions = true;
-				this.values[OTHER_WORK_AREA_KEY] = null;
+			if (name === COMPANY_INDUSTRY_KEY) {
+				this.otherCompanyIndustryFieldVisible = value.includes(OTHER_INDUSTRY_OPTION);
+				this.values[OTHER_COMPANY_INDUSTRY_KEY] = value.includes(OTHER_INDUSTRY_OPTION) ? this.values[OTHER_COMPANY_INDUSTRY_KEY] : null;
+				this.values[COMPANY_INDUSTRY_KEY] = value;
 			}

-			if (name === COMPANY_INDUSTRY_KEY && value.includes(OTHER_INDUSTRY_OPTION)) {
-				this.otherCompanyIndustryFieldVisible = true;
-			}
-			else if (name === COMPANY_INDUSTRY_KEY) {
-				this.otherCompanyIndustryFieldVisible = false;
-				this.values[OTHER_COMPANY_INDUSTRY_KEY] = null;
-			}
-
-			this.values[name] = value;
 		},
 		async save(): Promise<void> {
 			this.$data.isSaving = true;
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -0,0 +1,283 @@
+<template>
+	<ModalDrawer
+		:name="VALUE_SURVEY_MODAL_KEY"
+		:beforeClose="closeDialog"
+		:modal="false"
+		:wrapperClosable="false"
+		direction="btt"
+		width="120px"
+		class="value-survey"
+	>
+		<template slot="header">
+			<div :class="$style.title">
+				<n8n-heading tag="h2" size="medium" color="text-xlight">{{ getTitle }}</n8n-heading>
+			</div>
+		</template>
+		<template slot="content">
+			<section :class="$style.content">
+				<div v-if="showButtons" :class="$style.wrapper">
+					<div :class="$style.buttons">
+						<div v-for="value in 11" :key="value - 1" :class="$style.container">
+							<n8n-square-button
+								:label="(value - 1).toString()"
+								@click="selectSurveyValue((value - 1).toString())"
+							/>
+						</div>
+					</div>
+					<div :class="$style.text">
+						<n8n-text size="small" color="text-xlight">Not likely</n8n-text>
+						<n8n-text size="small" color="text-xlight">Very likely</n8n-text>
+					</div>
+				</div>
+				<div v-else :class="$style.email">
+					<div :class="$style.input" @keyup.enter="send">
+						<n8n-input
+							v-model="form.email"
+							placeholder="Your email address"
+							size="medium"
+							@input="onInputChange"
+						/>
+						<div :class="$style.button">
+							<n8n-button label="Send" float="right" @click="send" :disabled="!isEmailValid" />
+						</div>
+					</div>
+					<div :class="$style.disclaimer">
+						<n8n-text size="small" color="text-xlight">
+							David from our product team will get in touch personally
+						</n8n-text>
+					</div>
+				</div>
+			</section>
+		</template>
+	</ModalDrawer>
+</template>
+
+<script lang="ts">
+import { VALID_EMAIL_REGEX, VALUE_SURVEY_MODAL_KEY } from '@/constants';
+import { IN8nPromptResponse } from '@/Interface';
+
+import ModalDrawer from './ModalDrawer.vue';
+
+import mixins from 'vue-typed-mixins';
+import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+
+const DEFAULT_TITLE = `How likely are you to recommend n8n to a friend or colleague?`;
+const GREAT_FEEDBACK_TITLE = `Great to hear! Can we reach out to see how we can make n8n even better for you?`;
+const DEFAULT_FEEDBACK_TITLE = `Thanks for your feedback! We'd love to understand how we can improve. Can we reach out?`;
+
+export default mixins(workflowHelpers).extend({
+	name: 'ValueSurvey',
+	props: ['isActive'],
+	components: {
+		ModalDrawer,
+	},
+	watch: {
+		isActive(isActive) {
+			if (isActive) {
+				this.$telemetry.track('User shown value survey', {
+					instance_id: this.$store.getters.instanceId,
+				});
+			}
+		},
+	},
+	computed: {
+		getTitle(): string {
+			if (this.form.value !== '') {
+				if (Number(this.form.value) > 7) {
+					return GREAT_FEEDBACK_TITLE;
+				} else {
+					return DEFAULT_FEEDBACK_TITLE;
+				}
+			} else {
+				return DEFAULT_TITLE;
+			}
+		},
+		isEmailValid(): boolean {
+			return VALID_EMAIL_REGEX.test(String(this.form.email).toLowerCase());
+		},
+	},
+	data() {
+		return {
+			form: {
+				email: '',
+				value: '',
+			},
+			showButtons: true,
+			VALUE_SURVEY_MODAL_KEY,
+		};
+	},
+	methods: {
+		closeDialog(): void {
+			if (this.form.value === '') {
+				this.$telemetry.track('User responded value survey score', {
+					instance_id: this.$store.getters.instanceId,
+					nps: '',
+				});
+			} else {
+				this.$telemetry.track('User responded value survey email', {
+					instance_id: this.$store.getters.instanceId,
+					email: '',
+				});
+			}
+
+			this.$store.commit('ui/closeTopModal');
+		},
+		onInputChange(value: string) {
+			this.form.email = value;
+		},
+		async selectSurveyValue(value: string) {
+			this.form.value = value;
+			this.showButtons = false;
+
+			const response: IN8nPromptResponse = await this.$store.dispatch(
+				'settings/submitValueSurvey',
+				{ value: this.form.value },
+			);
+
+			if (response.updated) {
+				this.$telemetry.track('User responded value survey score', {
+					instance_id: this.$store.getters.instanceId,
+					nps: this.form.value,
+				});
+			}
+		},
+		async send() {
+			if (this.isEmailValid) {
+				const response: IN8nPromptResponse = await this.$store.dispatch(
+					'settings/submitValueSurvey',
+					{
+						email: this.form.email,
+						value: this.form.value,
+					},
+				);
+
+				if (response.updated) {
+					this.$telemetry.track('User responded value survey email', {
+						instance_id: this.$store.getters.instanceId,
+						email: this.form.email,
+					});
+					this.$showMessage({
+						title: 'Thanks for your feedback',
+						message: `If you’d like to help even more, answer this <a target="_blank" href="https://n8n-community.typeform.com/quicksurvey#nps=${this.form.value}&instance_id=${this.$store.getters.instanceId}">quick survey.</a>`,
+						type: 'success',
+						duration: 15000,
+					});
+				}
+
+				setTimeout(() => {
+					this.form.value = '';
+					this.form.email = '';
+					this.showButtons = true;
+				}, 1000);
+				this.$store.commit('ui/closeTopModal');
+			}
+		},
+	},
+});
+</script>
+
+<style module lang="scss">
+.title {
+	height: 16px;
+	text-align: center;
+
+	@media (max-width: $--breakpoint-xs) {
+		margin-top: 10px;
+		padding: 0 15px;
+	}
+}
+
+.content {
+	display: flex;
+	justify-content: center;
+
+	@media (max-width: $--breakpoint-xs) {
+		margin-top: 20px;
+	}
+}
+
+.wrapper {
+	display: flex;
+	flex-direction: column;
+}
+
+.buttons {
+	display: flex;
+}
+
+.container {
+	margin: 0 8px;
+
+	@media (max-width: $--breakpoint-xs) {
+		margin: 0 4px;
+	}
+
+	&:first-child {
+		margin-left: 0;
+	}
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
+
+.text {
+	margin-top: 8px;
+	display: flex;
+	justify-content: space-between;
+}
+
+.input {
+	display: flex;
+	align-items: center;
+}
+
+.button {
+	margin-left: 10px;
+}
+
+.disclaimer {
+	margin-top: var(--spacing-4xs);
+}
+</style>
+
+<style lang="scss">
+.value-survey {
+	height: 120px;
+	top: auto;
+
+	@media (max-width: $--breakpoint-xs) {
+		height: 140px;
+	}
+
+	.el-drawer {
+		background: var(--color-background-dark);
+
+		@media (max-width: $--breakpoint-xs) {
+			height: 140px !important;
+		}
+
+		&__header {
+			height: 50px;
+			margin: 0;
+			padding: 18px 0 16px;
+
+			.el-drawer__close-btn {
+				top: 12px;
+				right: 16px;
+				position: absolute;
+
+				@media (max-width: $--breakpoint-xs) {
+					top: 2px;
+					right: 2px;
+				}
+			}
+
+			.el-dialog__close {
+				font-weight: var(--font-weight-bold);
+				color: var(--color-text-xlight);
+			}
+		}
+	}
+}
+</style>
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -161,6 +161,7 @@ export default mixins(

 					this.$emit('workflowActiveChanged', { id: this.workflowId, active: newActiveState });
 					this.loading = false;
+					this.$store.dispatch('settings/fetchPromptsData');
 				},
 				async displayActivationError () {
 					let errorMessage: string;
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -26,6 +26,8 @@ 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';
+export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';
+export const VALUE_SURVEY_MODAL_KEY = 'valueSurvey';

 // breakpoints
 export const BREAKPOINT_SM = 768;
@@ -132,3 +134,5 @@ export const CODING_SKILL_KEY = 'codingSkill';
 export const OTHER_WORK_AREA_KEY = 'otherWorkArea';
 export const OTHER_COMPANY_INDUSTRY_KEY = 'otherCompanyIndustry';

+export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
--- a/packages/editor-ui/src/modules/helper.ts
+++ b/packages/editor-ui/src/modules/helper.ts
@@ -6,7 +6,17 @@ 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) {
+	function isWorkAreaAnswer(name: string) {
+		if (Array.isArray(workArea)) {
+			return workArea.includes(name);
+		} else {
+			return workArea === name;
+		}
+	}
+
+	const workAreaIsEmpty = workArea === null || workArea.length === 0;
+
+	if (companySize === null && workAreaIsEmpty && answers[CODING_SKILL_KEY] === null) {
 		return [];
 	}

@@ -17,7 +27,7 @@ export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswers)
 	}

 	let nodeTypes = [] as string[];
-	if (workArea === IT_ENGINEERING_WORK_AREA) {
+	if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
 		nodeTypes = nodeTypes.concat(WEBHOOK_NODE_TYPE);
 	}
 	else {
@@ -39,16 +49,16 @@ export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswers)
 	}

 	if (companySize === COMPANY_SIZE_500_999 || companySize === COMPANY_SIZE_1000_OR_MORE) {
-		if (workArea === SALES_BUSINESSDEV_WORK_AREA) {
+		if (isWorkAreaAnswer(SALES_BUSINESSDEV_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat(SALESFORCE_NODE_TYPE);
 		}
-		else if (workArea === SECURITY_WORK_AREA) {
+		else if (isWorkAreaAnswer(SECURITY_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([ELASTIC_SECURITY_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
 		}
-		else if (workArea === PRODUCT_WORK_AREA) {
+		else if (isWorkAreaAnswer(PRODUCT_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([JIRA_TRIGGER_NODE_TYPE, SEGMENT_NODE_TYPE]);
 		}
-		else if (workArea === IT_ENGINEERING_WORK_AREA) {
+		else if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([GITHUB_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
 		}
 		else {
@@ -56,19 +66,19 @@ export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswers)
 		}
 	}
 	else {
-		if (workArea === SALES_BUSINESSDEV_WORK_AREA) {
+		if (isWorkAreaAnswer(SALES_BUSINESSDEV_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat(CLEARBIT_NODE_TYPE);
 		}
-		else if (workArea === SECURITY_WORK_AREA) {
+		else if (isWorkAreaAnswer(SECURITY_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([PAGERDUTY_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
 		}
-		else if (workArea === PRODUCT_WORK_AREA) {
+		else if (isWorkAreaAnswer(PRODUCT_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([JIRA_TRIGGER_NODE_TYPE, CALENDLY_TRIGGER_NODE_TYPE]);
 		}
-		else if (workArea === IT_ENGINEERING_WORK_AREA) {
+		else if (isWorkAreaAnswer(IT_ENGINEERING_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([EXECUTE_COMMAND_NODE_TYPE, HTTP_REQUEST_NODE_TYPE]);
 		}
-		else if (workArea === FINANCE_WORK_AREA) {
+		else if (isWorkAreaAnswer(FINANCE_WORK_AREA)) {
 			nodeTypes = nodeTypes.concat([XERO_NODE_TYPE, QUICKBOOKS_NODE_TYPE, SPREADSHEET_FILE_NODE_TYPE]);
 		}
 		else {
--- a/packages/editor-ui/src/modules/settings.ts
+++ b/packages/editor-ui/src/modules/settings.ts
@@ -1,19 +1,22 @@
 import {  ActionContext, Module } from 'vuex';
 import {
+	IN8nPrompts,
 	IN8nUISettings,
+	IN8nValueSurveyData,
 	IPersonalizationSurveyAnswers,
 	IRootState,
 	ISettingsState,
 } from '../Interface';
-import { getSettings, submitPersonalizationSurvey } from '../api/settings';
+import { getPromptsData, getSettings, submitValueSurvey, submitPersonalizationSurvey, submitContactInfo } from '../api/settings';
 import Vue from 'vue';
 import { getPersonalizedNodeTypes } from './helper';
-import { PERSONALIZATION_MODAL_KEY } from '@/constants';
+import { CONTACT_PROMPT_MODAL_KEY, PERSONALIZATION_MODAL_KEY, VALUE_SURVEY_MODAL_KEY } from '@/constants';

 const module: Module<ISettingsState, IRootState> = {
 	namespaced: true,
 	state: {
 		settings: {} as IN8nUISettings,
+		promptsData: {} as IN8nPrompts,
 	},
 	getters: {
 		personalizedNodeTypes(state: ISettingsState): string[] {
@@ -24,6 +27,9 @@ const module: Module<ISettingsState, IRootState> = {

 			return getPersonalizedNodeTypes(answers);
 		},
+		getPromptsData(state: ISettingsState) {
+			return state.promptsData;
+		},
 	},
 	mutations: {
 		setSettings(state: ISettingsState, settings: IN8nUISettings) {
@@ -35,6 +41,9 @@ const module: Module<ISettingsState, IRootState> = {
 				shouldShow: false,
 			});
 		},
+		setPromptsData(state: ISettingsState, promptsData: IN8nPrompts) {
+			Vue.set(state, 'promptsData', promptsData);
+		},
 	},
 	actions: {
 		async getSettings(context: ActionContext<ISettingsState, IRootState>) {
@@ -71,6 +80,40 @@ const module: Module<ISettingsState, IRootState> = {

 			context.commit('setPersonalizationAnswers', results);
 		},
+		async fetchPromptsData(context: ActionContext<ISettingsState, IRootState>) {
+			if (!context.rootGetters.isTelemetryEnabled) {
+				return;
+			}
+
+			try {
+				const promptsData: IN8nPrompts = await getPromptsData(context.state.settings.instanceId);
+
+				if (promptsData && promptsData.showContactPrompt) {
+					context.commit('ui/openModal', CONTACT_PROMPT_MODAL_KEY, {root: true});
+				} else if (promptsData && promptsData.showValueSurvey) {
+					context.commit('ui/openModal', VALUE_SURVEY_MODAL_KEY, {root: true});
+				}
+
+				context.commit('setPromptsData', promptsData);
+			} catch (e) {
+				return e;
+			}
+
+		},
+		async submitContactInfo(context: ActionContext<ISettingsState, IRootState>, email: string) {
+			try {
+				return await submitContactInfo(context.state.settings.instanceId, email);
+			} catch (e) {
+				return e;
+			}
+		},
+		async submitValueSurvey(context: ActionContext<ISettingsState, IRootState>, params: IN8nValueSurveyData) {
+			try {
+				return await submitValueSurvey(context.state.settings.instanceId, params);
+			} catch (e) {
+				return e;
+			}
+		},
 	},
 };

--- a/packages/editor-ui/src/modules/ui.ts
+++ b/packages/editor-ui/src/modules/ui.ts
@@ -1,4 +1,4 @@
-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 { CONTACT_PROMPT_MODAL_KEY, 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, VALUE_SURVEY_MODAL_KEY } from '@/constants';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
 import {
@@ -10,6 +10,9 @@ const module: Module<IUiState, IRootState> = {
 	namespaced: true,
 	state: {
 		modals: {
+			[CONTACT_PROMPT_MODAL_KEY]: {
+				open: false,
+			},
 			[CREDENTIAL_EDIT_MODAL_KEY]: {
 				open: false,
 				mode: '',
@@ -33,6 +36,9 @@ const module: Module<IUiState, IRootState> = {
 			[WORKFLOW_OPEN_MODAL_KEY]: {
 				open: false,
 			},
+			[VALUE_SURVEY_MODAL_KEY]: {
+				open: false,
+			},
 			[VERSIONS_MODAL_KEY]: {
 				open: false,
 			},
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -55,6 +55,7 @@ import {
 	N8nMenuItem,
 	N8nSelect,
 	N8nSpinner,
+	N8nSquareButton,
 	N8nText,
 	N8nTooltip,
 	N8nOption,
@@ -75,6 +76,7 @@ Vue.use(N8nMenu);
 Vue.use(N8nMenuItem);
 Vue.use(N8nSelect);
 Vue.use(N8nSpinner);
+Vue.component('n8n-square-button', N8nSquareButton);
 Vue.component('n8n-text', N8nText);
 Vue.use(N8nTooltip);
 Vue.use(N8nOption);
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -66,6 +66,12 @@ class Telemetry {
 		}
 	}

+	page(category?: string, name?: string | undefined | null) {
+		if (this.telemetry)	{
+			this.telemetry.page(category, name);
+		}
+	}
+
 	trackNodesPanel(event: string, properties: IDataObject = {}) {
 		if (this.telemetry) {
 			properties.nodes_panel_session_id = this.userNodesPanelSession.sessionId;
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -656,6 +656,10 @@ export const store = new Vuex.Store({
 			return state.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
 		},

+		isTelemetryEnabled: (state) => {
+			return state.telemetry && state.telemetry.enabled;
+		},
+
 		currentWorkflowHasWebhookNode: (state: IRootState): boolean => {
 			return !!state.workflow.nodes.find((node: INodeUi) => !!node.webhookId);
 		},
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -424,6 +424,10 @@ export default mixins(

 				return uniqueName;
 			},
+			async onSaveKeyboardShortcut () {
+				const saved = await this.saveCurrentWorkflow();
+				if (saved) this.$store.dispatch('settings/fetchPromptsData');
+			},
 			openNodeCreator (source: string) {
 				this.createNodeActive = true;
 				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source, createNodeActive: this.createNodeActive });
@@ -755,7 +759,7 @@ export default mixins(
 						return;
 					}

-					this.callDebounced('saveCurrentWorkflow', 1000, undefined, true);
+					this.callDebounced('onSaveKeyboardShortcut', 1000);
 				} else if (e.key === 'Enter') {
 					// Activate the last selected node
 					const lastSelectedNode = this.lastSelectedNode;
@@ -954,15 +958,22 @@ export default mixins(
 			},

 			cutSelectedNodes () {
-				this.copySelectedNodes();
+				this.copySelectedNodes(true);
 				this.deleteSelectedNodes();
 			},

-			copySelectedNodes () {
+			copySelectedNodes (isCut: boolean) {
 				this.getSelectedNodesToSave().then((data) => {
 					const nodeData = JSON.stringify(data, null, 2);
 					this.copyToClipboard(nodeData);
 					if (data.nodes.length > 0) {
+						if(!isCut){
+							this.$showMessage({
+								title: 'Copied!',
+								message: '',
+								type: 'success',
+							});
+						}
 						this.$telemetry.track('User copied nodes', {
 							node_types: data.nodes.map((node) => node.type),
 							workflow_id: this.$store.getters.workflowId,
@@ -2732,6 +2743,7 @@ export default mixins(
 			});

 			this.$externalHooks().run('nodeView.mount');
+			this.$telemetry.page('Editor', this.$route.name);
 		},

 		destroyed () {