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

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);