diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue index a401837526937..f901d8ad59065 100644 --- 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); } diff --git a/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap b/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap index e05c385f47f09..ba1bd01f97d32 100644 --- a/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap +++ b/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1 exports[`components > N8nCallout > should render additional slots correctly 1`] = ` -"
-
-
+"
+
+
This is a secondary callout.  Do something! @@ -13,9 +13,9 @@ exports[`components > N8nCallout > should render additional slots correctly 1`] `; exports[`components > N8nCallout > should render custom theme correctly 1`] = ` -"
-
-
+"
+
+
This is a secondary callout.  @@ -24,9 +24,9 @@ exports[`components > N8nCallout > should render custom theme correctly 1`] = ` `; exports[`components > N8nCallout > should render danger theme correctly 1`] = ` -"
-
-
+"
+
+
This is a danger callout.  @@ -35,9 +35,9 @@ exports[`components > N8nCallout > should render danger theme correctly 1`] = ` `; exports[`components > N8nCallout > should render info theme correctly 1`] = ` -"
-
-
+"
+
+
This is an info callout.  @@ -46,9 +46,9 @@ exports[`components > N8nCallout > should render info theme correctly 1`] = ` `; exports[`components > N8nCallout > should render secondary theme correctly 1`] = ` -"
-
-
+"
+
+
This is a secondary callout.  @@ -57,9 +57,9 @@ exports[`components > N8nCallout > should render secondary theme correctly 1`] = `; exports[`components > N8nCallout > should render success theme correctly 1`] = ` -"
-
-
+"
+
+
This is a success callout.  @@ -68,9 +68,9 @@ exports[`components > N8nCallout > should render success theme correctly 1`] = ` `; exports[`components > N8nCallout > should render warning theme correctly 1`] = ` -"
-
-
+"
+
+
This is a warning callout.  diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue index 39eba1fd42e5d..2fcc0872832d3 100644 --- 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/public/static/quickstart_thumbnail.png b/packages/editor-ui/public/static/quickstart_thumbnail.png index efa4099d9ccfc..2958955a2cc20 100644 Binary files a/packages/editor-ui/public/static/quickstart_thumbnail.png and b/packages/editor-ui/public/static/quickstart_thumbnail.png differ diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue index 3052a95712745..d3c4fde265467 100644 --- 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 index 02e7318cf8b23..229f826fd9c5b 100644 --- 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 index db9bdfb54a616..08aee20b346a7 100644 --- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue +++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue @@ -108,6 +108,8 @@
+ +
{{ $locale.baseText(`${resourceKey}.filters.active`) }} diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts index b7dfb56c4fe37..017795ecb9dae 100644 --- 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 index d91a644b3af09..1d50a69d0bad0 100644 --- 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 index 0d7dbb119fde7..31d662d11b14b 100644 --- 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 index a5a7cfb50ebd6..e21bad4680003 100644 --- 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 { 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 { 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 index e838ccebb3121..277629b62b33d 100644 --- 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" > + @@ -30,7 +41,7 @@ {{ $locale.baseText('workflows.empty.description') }}
-
+
- + - {{ $locale.baseText('workflows.empty.browseTemplates') }} + {{ + $locale.baseText( + isDemoTest ? 'workflows.empty.viewDemo' : 'workflows.empty.browseTemplates', + ) + }}
@@ -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({ name: VIEWS.COLLECTION, params: { id: '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({