n8n-io · mutdmour · Jan 13, 2023 · Jan 11, 2023 · Jan 11, 2023 · Jan 11, 2023
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -104,7 +104,7 @@ export default Vue.extend({
 	font-size: var(--font-size-2xs);
 	font-weight: var(--font-weight-bold);
 	color: var(--color-secondary);
-	background-color: var(--color-secondary-tint-2);
+	background-color: var(--color-secondary-tint-3);
 	border-color: var(--color-secondary-tint-1);
 }
 </style>
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
@@ -88,7 +88,6 @@ export default Vue.extend({
 }
 
 .secondary {
-	background-color: var(--color-secondary-tint-2);
 	color: var(--color-secondary);
 }
 

diff --git a/packages/editor-ui/index.html b/packages/editor-ui/index.html
@@ -8,6 +8,9 @@
 		<script type="text/javascript">
 			window.BASE_PATH = '/{{BASE_PATH}}/';
 		</script>
+		<script src="https://public.n8n.cloud/posthog-hooks.js"></script>
+		<script>!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);posthog.init('phc_4URIAm1uYfJO7j8kWSe0J8lc8IqnstRLS7Jx8NcakHo',{api_host:'https://app.posthog.com', autocapture: false, disable_session_recording: true, debug:false})</script>
+
 		<title>n8n.io - Workflow Automation</title>
 	</head>
 	<body>

diff --git a/packages/editor-ui/public/static/quickstart_thumbnail.png b/packages/editor-ui/public/static/quickstart_thumbnail.png
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
@@ -30,7 +30,7 @@
 import Modals from './components/Modals.vue';
 import LoadingView from './views/LoadingView.vue';
 import Telemetry from './components/Telemetry.vue';
-import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
+import { HIRING_BANNER, LOCAL_STORAGE_THEME, POSTHOG_ASSUMPTION_TEST, VIEWS } from './constants';
 
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/mixins/showMessage';
@@ -179,6 +179,17 @@ export default mixins(showMessage, userHelpers, restApi, historyHelper).extend({
 				window.document.body.classList.add(`theme-${theme}`);
 			}
 		},
+		trackExperiments() {
+			const assumption = window.posthog?.getFeatureFlag?.(POSTHOG_ASSUMPTION_TEST);
+			const isVideo = assumption === 'assumption-video';
+			const isDemo = assumption === 'assumption-demo';
+
+			if (isVideo) {
+				this.$telemetry.track('User is part of video experiment');
+			} else if (isDemo) {
+				this.$telemetry.track('User is part of demo experiment');
+			}
+		},
 	},
 	async mounted() {
 		this.setTheme();
@@ -195,6 +206,10 @@ export default mixins(showMessage, userHelpers, restApi, historyHelper).extend({
 		if (this.defaultLocale !== 'en') {
 			await this.nodeTypesStore.getNodeTranslationHeaders();
 		}
+
+		setTimeout(() => {
+			this.trackExperiments();
+		}, 0);
 	},
 	watch: {
 		$route(route) {

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
@@ -260,7 +260,7 @@ export default mixins(
 							label: this.$locale.baseText('mainSidebar.helpMenuItems.quickstart'),
 							type: 'link',
 							properties: {
-								href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+								href: 'https://www.youtube.com/watch?v=1MwSoB0gnM4',
 								newWindow: true,
 							},
 						},
@@ -290,7 +290,7 @@ export default mixins(
 							label: this.$locale.baseText('mainSidebar.helpMenuItems.course'),
 							type: 'link',
 							properties: {
-								href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
+								href: 'https://www.youtube.com/watch?v=1MwSoB0gnM4',
 								newWindow: true,
 							},
 						},

diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -118,6 +118,7 @@
 				</div>
 
 				<div class="mt-xs mb-l">
+					<slot name="callout"></slot>
 					<ul
 						:class="[$style.list, 'list-style-none']"
 						v-if="filteredAndSortedSubviewResources.length > 0"

diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
@@ -444,3 +444,5 @@ export enum STORES {
 }
 
 export const EXPRESSION_EDITOR_PARSER_TIMEOUT = 15_000; // ms
+
+export const POSTHOG_ASSUMPTION_TEST = 'adore-assumption-tests';
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -855,7 +855,7 @@
 	"onboardingCallSignupFailed.title": "Something went wrong",
 	"onboardingCallSignupFailed.message": "Your request could not be sent",
 	"onboardingCallSignupModal.confirmExit.title": "Are you sure?",
-	"onboardingWorkflow.stickyContent": "## 👇 Get started faster \nLightning tour of the key concepts [3 min] \n\n[![n8n quickstart video](/static/quickstart_thumbnail.png#full-width)](https://www.youtube.com/watch?v=RpjQTGKm-ok)",
+	"onboardingWorkflow.stickyContent": "## 👇 Get started faster \nLightning tour of the key concepts [4 min] \n\n[![n8n quickstart video](/static/quickstart_thumbnail.png#full-width)](https://www.youtube.com/watch?v=1MwSoB0gnM4)",
 	"openWorkflow.workflowImportError": "Could not import workflow",
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"parameterInput.expressionResult": "e.g. {result}",
@@ -1477,6 +1477,9 @@
 	"workflows.empty.description": "Create your first workflow",
 	"workflows.empty.startFromScratch": "Start from scratch",
 	"workflows.empty.browseTemplates": "Browse templates",
+	"workflows.empty.viewDemo": "View a demo workflow",
+	"workflows.viewDemoNotice": "Learn automation key concepts with our demo workflow",
+	"workflows.viewDemo": "View demo workflow",
 	"workflows.shareModal.title": "Share '{name}'",
 	"workflows.shareModal.select.placeholder": "Add users...",
 	"workflows.shareModal.list.delete": "Remove access",

diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts
@@ -64,7 +64,7 @@ export const WELCOME_STICKY_NODE = {
 	typeVersion: 1,
 	position: [0, 0] as XYPosition,
 	parameters: {
-		height: 300,
+		height: 320,
 		width: 380,
 	},
 };

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
@@ -167,7 +167,6 @@ import type {
 	jsPlumbInstance,
 } from 'jsplumb';
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
-import once from 'lodash/once';
 
 import {
 	FIRST_ONBOARDING_PROMPT_TIMEOUT,
@@ -186,6 +185,7 @@ import {
 	WEBHOOK_NODE_TYPE,
 	TRIGGER_NODE_FILTER,
 	EnterpriseEditionFeature,
+	POSTHOG_ASSUMPTION_TEST,
 } from '@/constants';
 import { copyPaste } from '@/mixins/copyPaste';
 import { externalHooks } from '@/mixins/externalHooks';
@@ -373,7 +373,6 @@ export default mixins(
 			// Re-center CanvasAddButton if there's no triggers
 			if (containsTrigger === false)
 				this.canvasStore.setRecenteredCanvasAddButtonPosition(this.getNodeViewOffsetPosition);
-			else this.tryToAddWelcomeSticky();
 		},
 		nodeViewScale(newScale) {
 			const element = this.$refs.nodeView as HTMLDivElement;
@@ -2436,27 +2435,22 @@ export default mixins(
 			this.workflowsStore.activeWorkflowExecution = null;
 
 			this.uiStore.stateIsDirty = false;
-			this.canvasStore.setZoomLevel(1, 0);
-			this.canvasStore.zoomToFit();
+			this.canvasStore.setZoomLevel(1, [0, 0]);
+			this.tryToAddWelcomeSticky();
+			this.uiStore.nodeViewInitialized = true;
+			this.historyStore.reset();
+			this.workflowsStore.activeWorkflowExecution = null;
+			this.stopLoading();
 		},
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		tryToAddWelcomeSticky: once(async function (this: any) {
+		async tryToAddWelcomeSticky(): Promise<void> {
 			const newWorkflow = this.workflowData;
-			if (window.posthog?.getFeatureFlag?.('welcome-note') === 'test') {
+			if (window.posthog?.getFeatureFlag?.(POSTHOG_ASSUMPTION_TEST) === 'assumption-video') {
 				// For novice users (onboardingFlowEnabled == true)
 				// Inject welcome sticky note and zoom to fit
 
 				if (newWorkflow?.onboardingFlowEnabled && !this.isReadOnly) {
-					const collisionPadding = NodeViewUtils.GRID_SIZE + NodeViewUtils.NODE_SIZE;
 					// Position the welcome sticky left to the added trigger node
-					let position: XYPosition = [...(this.triggerNodes[0].position as XYPosition)];
-
-					position[0] -=
-						NodeViewUtils.WELCOME_STICKY_NODE.parameters.width + NodeViewUtils.GRID_SIZE * 4;
-					position = NodeViewUtils.getNewNodePosition(this.nodes, position, [
-						collisionPadding,
-						collisionPadding,
-					]);
+					const position: XYPosition = [50, 250];
 
 					await this.addNodes([
 						{
@@ -2470,14 +2464,16 @@ export default mixins(
 							position,
 						},
 					]);
-					this.$telemetry.track('welcome note inserted');
+					setTimeout(() => {
+						this.canvasStore.zoomToFit();
+						this.canvasStore.canvasAddButtonPosition = [500, 350];
+						this.$telemetry.track('welcome note inserted');
+					}, 0);
 				}
+			} else {
+				this.canvasStore.zoomToFit();
 			}
-			this.uiStore.nodeViewInitialized = true;
-			this.historyStore.reset();
-			this.workflowsStore.activeWorkflowExecution = null;
-			this.stopLoading();
-		}),
+		},
 		async initView(): Promise<void> {
 			if (this.$route.params.action === 'workflowSave') {
 				// In case the workflow got saved we do not have to run init

diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -11,6 +11,17 @@
 		@click:add="addWorkflow"
 		@update:filters="filters = $event"
 	>
+		<template #callout v-if="!hasActiveWorkflows && isDemoTest">
+			<n8n-callout theme="secondary" icon="graduation-cap" class="mb-xs">
+				{{ $locale.baseText('workflows.viewDemoNotice') }}
+
+				<template #trailingContent>
+					<n8n-link size="small" theme="secondary" bold underline @click="goToTemplates">
+						{{ $locale.baseText('workflows.viewDemo') }}
+					</n8n-link>
+				</template>
+			</n8n-callout>
+		</template>
 		<template #default="{ data }">
 			<workflow-card :data="data" @click:tag="onClickTag" />
 		</template>
@@ -30,7 +41,7 @@
 					{{ $locale.baseText('workflows.empty.description') }}
 				</n8n-text>
 			</div>
-			<div class="text-center mt-2xl">
+			<div :class="['text-center', 'mt-2xl', $style.actionsContainer]">
 				<n8n-card
 					:class="[$style.emptyStateCard, 'mr-s']"
 					hoverable
@@ -48,9 +59,16 @@
 					@click="goToTemplates"
 					data-test-id="new-workflow-template-card"
 				>
-					<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
+					<n8n-icon
+						:class="$style.emptyStateCardIcon"
+						:icon="isDemoTest ? 'graduation-cap' : 'box-open'"
+					/>
 					<n8n-text size="large" class="mt-xs" color="text-base">
-						{{ $locale.baseText('workflows.empty.browseTemplates') }}
+						{{
+							isDemoTest
+								? $locale.baseText('workflows.empty.viewDemo')
+								: $locale.baseText('workflows.empty.browseTemplates')
+						}}
 					</n8n-text>
 				</n8n-card>
 			</div>
@@ -103,7 +121,7 @@ import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
 import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
 import WorkflowCard from '@/components/WorkflowCard.vue';
 import TemplateCard from '@/components/TemplateCard.vue';
-import { EnterpriseEditionFeature, VIEWS } from '@/constants';
+import { EnterpriseEditionFeature, POSTHOG_ASSUMPTION_TEST, VIEWS } from '@/constants';
 import { debounceHelper } from '@/mixins/debounce';
 import Vue from 'vue';
 import { ITag, IUser, IWorkflowDb } from '@/Interface';
@@ -155,6 +173,12 @@ export default mixins(showMessage, debounceHelper).extend({
 		isShareable(): boolean {
 			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
+		hasActiveWorkflows(): boolean {
+			return !!this.workflowsStore.activeWorkflows.length;
+		},
+		isDemoTest(): boolean {
+			return window.posthog?.getFeatureFlag?.(POSTHOG_ASSUMPTION_TEST) === 'assumption-demo';
+		},
 		statusFilterOptions(): Array<{ label: string; value: string | boolean }> {
 			return [
 				{
@@ -182,7 +206,14 @@ export default mixins(showMessage, debounceHelper).extend({
 			});
 		},
 		goToTemplates() {
-			this.$router.push({ name: VIEWS.TEMPLATES });
+			if (this.isDemoTest) {
+				this.$router.push('/collections/7');
+				this.$telemetry.track('User clicked on inspect demo workflow', {
+					location: this.allWorkflows.length ? 'workflows' : 'start_page',
+				});
+			} else {
+				this.$router.push({ name: VIEWS.TEMPLATES });
+			}
 		},
 		async initialize() {
 			this.usersStore.fetchUsers(); // Can be loaded in the background, used for filtering
@@ -236,6 +267,11 @@ export default mixins(showMessage, debounceHelper).extend({
 </script>
 
 <style lang="scss" module>
+.actionsContainer {
+	display: flex;
+	justify-content: center;
+}
+
 .emptyStateCard {
 	width: 192px;
 	text-align: center;
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,7 +88,6 @@ export default Vue.extend({ @@
     }
     .secondary {
-    	background-color: var(--color-secondary-tint-2);
     	color: var(--color-secondary);
     }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -444,3 +444,5 @@ export enum STORES {
		}

		export const EXPRESSION_EDITOR_PARSER_TIMEOUT = 15_000; // ms

		export const POSTHOG_ASSUMPTION_TEST = 'adore-assumption-tests';