feat(editor): Only redirect new users to blank canvas (no-changelog) (#…

…5654)

* feat(editor): Bring new users to empty canvas

* fix(editor): Revert empty /workflows redirect

* Provide `COMMIT_INFO_BRANCH` and uncomment demo experiment

* Only change redirect after set-up/sign-up to new canvas

* Fix failing specs

* Prevent redirect for demo experiment

* Fix workflows cards spacing

cypress/e2e/1-workflows.cy.ts

@@ -27,12 +27,13 @@ describe('Workflows', () => {
 		});
 
 		cy.signin({ email, password });
-		cy.visit('/');
-		cy.waitForLoad();
+		cy.visit(WorkflowsPage.url);
 	});
 
-	it('should land on empty canvas after registration', () => {
-		cy.url().should('include', WorkflowPage.url);
+	it('should create a new workflow using empty state card', () => {
+		WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible');
+		WorkflowsPage.getters.newWorkflowButtonCard().click();
+
 		cy.createFixtureWorkflow('Test_workflow_1.json', `Empty State Card Workflow ${uuid()}`);
 
 		WorkflowPage.getters.workflowTags().should('contain.text', 'some-tag-1');
@@ -89,13 +90,5 @@ describe('Workflows', () => {
 		});
 
 		WorkflowsPage.getters.newWorkflowButtonCard().should('be.visible');
-		WorkflowsPage.getters.newWorkflowTemplateCard().should('be.visible');
-	});
-
-	it('should redirect to new canvas if no workflows', () => {
-		cy.wait(1000);
-		cy.visit(WorkflowsPage.url);
-		cy.wait(1000);
-		cy.url().should('include', WorkflowPage.url);
 	});
 });

cypress/pages/settings-users.ts

@@ -1,9 +1,11 @@
 import { SettingsSidebar } from './sidebar/settings-sidebar';
 import { MainSidebar } from './sidebar/main-sidebar';
 import { WorkflowPage } from './workflow';
+import { WorkflowsPage } from './workflows';
 import { BasePage } from './base';
 
 const workflowPage =  new WorkflowPage();
+const workflowsPage =  new WorkflowsPage();
 const mainSidebar = new MainSidebar();
 const settingsSidebar = new SettingsSidebar();
 
@@ -39,7 +41,7 @@ export class SettingsUsersPage extends BasePage {
 				settingsSidebar.getters.menuItem('Users').should('not.exist');
 				// Should be redirected to workflows page if trying to access UM url
 				cy.visit('/settings/users');
-				cy.url().should('match', new RegExp(workflowPage.url));
+				cy.url().should('match', new RegExp(workflowsPage.url));
 			}
 		},
 		opedDeleteDialog: (email: string) => {

cypress/support/commands.ts

@@ -60,7 +60,7 @@ Cypress.Commands.add('waitForLoad', () => {
 
 Cypress.Commands.add('signin', ({ email, password }) => {
 	const signinPage = new SigninPage();
-	const workflowPage = new WorkflowPage();
+	const workflowsPage = new WorkflowsPage();
 
 	cy.session(
 		[email, password],
@@ -74,10 +74,7 @@ Cypress.Commands.add('signin', ({ email, password }) => {
 			});
 
 			// we should be redirected to /workflows
-			cy.visit(workflowPage.url);
-			cy.url().should('include', workflowPage.url);
-			cy.intercept('GET', '/rest/workflows/new').as('loading');
-			cy.wait('@loading');
+			cy.url().should('include', workflowsPage.url);
 		},
 		{
 			validate() {

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

@@ -14,13 +14,14 @@ import { showMessage } from '@/mixins/showMessage';
 
 import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
-import { VIEWS } from '@/constants';
+import { VIEWS, ASSUMPTION_EXPERIMENT } from '@/constants';
 import { restApi } from '@/mixins/restApi';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 import { useCredentialsStore } from '@/stores/credentials';
+import { usePostHog } from '@/stores/posthog';
 
 export default mixins(showMessage, restApi).extend({
 	name: 'SetupView',
@@ -100,6 +101,9 @@ export default mixins(showMessage, restApi).extend({
 	},
 	computed: {
 		...mapStores(useCredentialsStore, useSettingsStore, useUIStore, useUsersStore),
+		isDemoTest(): boolean {
+			return usePostHog().isVariantEnabled(ASSUMPTION_EXPERIMENT.name, ASSUMPTION_EXPERIMENT.demo);
+		},
 	},
 	methods: {
 		async confirmSetupOrGoBack(): Promise<boolean> {
@@ -159,7 +163,7 @@ export default mixins(showMessage, restApi).extend({
 				}
 
 				if (forceRedirectedHere) {
-					await this.$router.push({ name: VIEWS.HOMEPAGE });
+					await this.$router.push({ name: this.isDemoTest ? VIEWS.HOMEPAGE : VIEWS.NEW_WORKFLOW });
 				} else {
 					await this.$router.push({ name: VIEWS.USERS_SETTINGS });
 				}
@@ -183,7 +187,7 @@ export default mixins(showMessage, restApi).extend({
 		onSkip() {
 			this.usersStore.skipOwnerSetup();
 			this.$router.push({
-				name: VIEWS.HOMEPAGE,
+				name: this.isDemoTest ? VIEWS.HOMEPAGE : VIEWS.NEW_WORKFLOW,
 			});
 		},
 	},

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

@@ -142,7 +142,7 @@ export default mixins(showMessage).extend({
 					} catch {}
 				}
 
-				await this.$router.push({ name: VIEWS.HOMEPAGE });
+				await this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('auth.signup.setupYourAccountError'));
 			}

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

@@ -49,7 +49,7 @@
 			</div>
 			<div :class="['text-center', 'mt-2xl', $style.actionsContainer]">
 				<n8n-card
-					:class="[$style.emptyStateCard, 'mr-s']"
+					:class="$style.emptyStateCard"
 					hoverable
 					@click="addWorkflow"
 					data-test-id="new-workflow-card"
@@ -60,21 +60,15 @@
 					</n8n-text>
 				</n8n-card>
 				<n8n-card
+					v-if="isDemoTest"
 					:class="$style.emptyStateCard"
 					hoverable
 					@click="goToTemplates"
 					data-test-id="new-workflow-template-card"
 				>
-					<n8n-icon
-						:class="$style.emptyStateCardIcon"
-						:icon="isDemoTest ? 'graduation-cap' : 'box-open'"
-					/>
+					<n8n-icon :class="$style.emptyStateCardIcon" icon="graduation-cap" />
 					<n8n-text size="large" class="mt-xs" color="text-base">
-						{{
-							$locale.baseText(
-								isDemoTest ? 'workflows.empty.viewDemo' : 'workflows.empty.browseTemplates',
-							)
-						}}
+						{{ $locale.baseText('workflows.empty.viewDemo') }}
 					</n8n-text>
 				</n8n-card>
 			</div>
@@ -237,15 +231,6 @@ const WorkflowsView = mixins(showMessage, debounceHelper).extend({
 			]);
 
 			this.credentialsStore.fetchAllCredentials();
-
-			// If the user has no workflows and is not participating in the demo experiment,
-			// redirect to the new workflow view
-			if (!this.isDemoTest && this.allWorkflows.length === 0) {
-				this.uiStore.nodeViewInitialized = false;
-				this.$router.replace({ name: VIEWS.NEW_WORKFLOW });
-			}
-
-			return Promise.resolve();
 		},
 		onClickTag(tagId: string, event: PointerEvent) {
 			if (!this.filters.tags.includes(tagId)) {
@@ -304,6 +289,10 @@ export default WorkflowsView;
 	display: inline-flex;
 	height: 230px;
 
+	& + & {
+		margin-left: var(--spacing-s);
+	}
+
 	&:hover {
 		svg {
 			color: var(--color-primary);