mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Add demo experiment to help users activate (#5141)

Browse source 
* feat: enable posthog for dev process

* feat: inject sticky in demo

* feat: update url

* feat: update pos

* feat: add demo button

* feat: add callout

* feat: hide behind exp

* fix: fix zoom to fit

* fix: fix zoom reset when moving to new view

* fix: use constant for test

* feat: add tracking

* feat: fix tracking

* feat: fix tracking

* fix canvas centering

* feat: update time

* feat: update bg color

* feat: update copy

* feat: update btm padding

* feat: replace thumbnail

* feat: increase height of sticky

* chore: clean up props

* fix: revert canvas change

* chore: address feedback

* chore: remove extra space

* test: fix unit tests
This commit is contained in:
Mutasem Aldmour 2023-01-13 11:56:29 +01:00 committed by GitHub
parent 94be3b61cb
commit c2eb519398
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 108 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nCallout/Callout.vue
View file

@ -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>

42
packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
View file

@ -1,9 +1,9 @@
// Vitest Snapshot v1
exports[`components > N8nCallout > should render additional slots correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_dfd91_1 _custom_dfd91_17\\">
<div class=\\"_message-section_dfd91_12\\">
<div class=\\"_icon_dfd91_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _custom_lpicq_17\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp; <n8n-link-stub size=\\"small\\">Do something!</n8n-link-stub>
@ -13,9 +13,9 @@ exports[`components > N8nCallout > should render additional slots correctly 1`]
`;
exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_dfd91_1 _custom_dfd91_17\\">
<div class=\\"_message-section_dfd91_12\\">
<div class=\\"_icon_dfd91_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _custom_lpicq_17\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp;
@ -24,9 +24,9 @@ exports[`components > N8nCallout > should render custom theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_dfd91_1 _danger_dfd91_35\\">
<div class=\\"_message-section_dfd91_12\\">
<div class=\\"_icon_dfd91_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _danger_lpicq_35\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
<n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a danger callout.</n8n-text-stub>&nbsp;
@ -35,9 +35,9 @@ exports[`components > N8nCallout > should render danger theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render info theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_dfd91_1 _info_dfd91_16\\">
<div class=\\"_message-section_dfd91_12\\">
<div class=\\"_icon_dfd91_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _info_lpicq_16\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is an info callout.</n8n-text-stub>&nbsp;
@ -46,9 +46,9 @@ exports[`components > N8nCallout > should render info theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_dfd91_1 _secondary_dfd91_45\\">
<div class=\\"_message-section_dfd91_12\\">
<div class=\\"_icon_dfd91_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _secondary_lpicq_45\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp;
@ -57,9 +57,9 @@ exports[`components > N8nCallout > should render secondary theme correctly 1`] =
`;
exports[`components > N8nCallout > should render success theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_dfd91_1 _success_dfd91_29\\">
<div class=\\"_message-section_dfd91_12\\">
<div class=\\"_icon_dfd91_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _success_lpicq_29\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
<n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a success callout.</n8n-text-stub>&nbsp;
@ -68,9 +68,9 @@ exports[`components > N8nCallout > should render success theme correctly 1`] = `
`;
exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_dfd91_1 _warning_dfd91_23\\">
<div class=\\"_message-section_dfd91_12\\">
<div class=\\"_icon_dfd91_41\\">
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _warning_lpicq_23\\">
<div class=\\"_message-section_lpicq_12\\">
<div class=\\"_icon_lpicq_41\\">
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub>
</div>
<n8n-text-stub size=\\"small\\">This is a warning callout.</n8n-text-stub>&nbsp;

1
packages/design-system/src/components/N8nLink/Link.vue
View file

@ -88,7 +88,6 @@ export default Vue.extend({
}
.secondary {
background-color: var(--color-secondary-tint-2);
color: var(--color-secondary);
}

BIN
packages/editor-ui/public/static/quickstart_thumbnail.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 137 KiB

17
packages/editor-ui/src/App.vue
View file

@ -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) {

4
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -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,
},
},

2
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View file

@ -108,6 +108,8 @@
</div>
</template>
<slot name="callout"></slot>
<div v-show="hasFilters" class="mt-xs">
<n8n-info-tip :bold="false">
{{ $locale.baseText(`${resourceKey}.filters.active`) }}

2
packages/editor-ui/src/constants.ts
View file

@ -444,3 +444,5 @@ export enum STORES {
}
export const EXPRESSION_EDITOR_PARSER_TIMEOUT = 15_000; // ms
export const POSTHOG_ASSUMPTION_TEST = 'adore-assumption-tests';

5
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -858,7 +858,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}",
@ -1480,6 +1480,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",

2
packages/editor-ui/src/utils/nodeViewUtils.ts
View file

@ -64,7 +64,7 @@ export const WELCOME_STICKY_NODE = {
typeVersion: 1,
position: [0, 0] as XYPosition,
parameters: {
height: 300,
height: 320,
width: 380,
},
};

40
packages/editor-ui/src/views/NodeView.vue
View file

@ -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

46
packages/editor-ui/src/views/WorkflowsView.vue
View file

@ -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') }}
{{
$locale.baseText(
isDemoTest ? 'workflows.empty.viewDemo' : '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({ 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({
</script>
<style lang="scss" module>
.actionsContainer {
display: flex;
justify-content: center;
}
.emptyStateCard {
width: 192px;
text-align: center;