From 72e634396453428dcb884d504fa923c4a37c3488 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 4 Dec 2024 21:33:35 +0200
Subject: [PATCH] feat: Enable canvas v2 only if beta feature enabled
 (no-changelog) (#12049)

---
 .../config/src/configs/frontend.config.ts     |  2 +-
 .../components/MainHeader/WorkflowDetails.vue | 50 ++++++++++---------
 .../useNodeViewVersionSwitcher.test.ts        |  5 ++
 .../composables/useNodeViewVersionSwitcher.ts |  5 +-
 4 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/packages/@n8n/config/src/configs/frontend.config.ts b/packages/@n8n/config/src/configs/frontend.config.ts
index 63f812952f..62fa004dd5 100644
--- a/packages/@n8n/config/src/configs/frontend.config.ts
+++ b/packages/@n8n/config/src/configs/frontend.config.ts
@@ -7,5 +7,5 @@ export type FrontendBetaFeatures = 'canvas_v2';
 export class FrontendConfig {
 	/** Which UI experiments to enable. Separate multiple values with a comma `,` */
 	@Env('N8N_UI_BETA_FEATURES')
-	betaFeatures: StringArray<FrontendBetaFeatures> = [];
+	betaFeatures: StringArray<FrontendBetaFeatures> = ['canvas_v2'];
 }
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 6c053057de..6725bbf92d 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -191,30 +191,32 @@ const workflowMenuItems = computed<ActionDropdownItem[]>(() => {
 		disabled: !onWorkflowPage.value || isNewWorkflow.value,
 	});
 
-	actions.push({
-		id: WORKFLOW_MENU_ACTIONS.SWITCH_NODE_VIEW_VERSION,
-		...(nodeViewVersion.value === '2'
-			? nodeViewSwitcherDiscovered.value || isNewUser.value
-				? {}
-				: {
-						badge: locale.baseText('menuActions.badge.new'),
-					}
-			: nodeViewSwitcherDiscovered.value
-				? {
-						badge: locale.baseText('menuActions.badge.beta'),
-						badgeProps: {
-							theme: 'tertiary',
-						},
-					}
-				: {
-						badge: locale.baseText('menuActions.badge.new'),
-					}),
-		label:
-			nodeViewVersion.value === '2'
-				? locale.baseText('menuActions.switchToOldNodeViewVersion')
-				: locale.baseText('menuActions.switchToNewNodeViewVersion'),
-		disabled: !onWorkflowPage.value,
-	});
+	if (settingsStore.isCanvasV2Enabled) {
+		actions.push({
+			id: WORKFLOW_MENU_ACTIONS.SWITCH_NODE_VIEW_VERSION,
+			...(nodeViewVersion.value === '2'
+				? nodeViewSwitcherDiscovered.value || isNewUser.value
+					? {}
+					: {
+							badge: locale.baseText('menuActions.badge.new'),
+						}
+				: nodeViewSwitcherDiscovered.value
+					? {
+							badge: locale.baseText('menuActions.badge.beta'),
+							badgeProps: {
+								theme: 'tertiary',
+							},
+						}
+					: {
+							badge: locale.baseText('menuActions.badge.new'),
+						}),
+			label:
+				nodeViewVersion.value === '2'
+					? locale.baseText('menuActions.switchToOldNodeViewVersion')
+					: locale.baseText('menuActions.switchToNewNodeViewVersion'),
+			disabled: !onWorkflowPage.value,
+		});
+	}
 
 	if ((workflowPermissions.value.delete && !props.readOnly) || isNewWorkflow.value) {
 		actions.push({
diff --git a/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.test.ts b/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.test.ts
index e5cfe1cb2d..2b8ce7710d 100644
--- a/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.test.ts
+++ b/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.test.ts
@@ -16,6 +16,11 @@ describe('useNodeViewVersionSwitcher', () => {
 	const initialState = {
 		[STORES.WORKFLOWS]: {},
 		[STORES.NDV]: {},
+		[STORES.SETTINGS]: {
+			settings: {
+				betaFeatures: ['canvas_v2'],
+			},
+		},
 	};
 
 	beforeEach(() => {
diff --git a/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts b/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts
index 59a033315f..b0ef4a4f4c 100644
--- a/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts
+++ b/packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts
@@ -3,15 +3,18 @@ import { useLocalStorage } from '@vueuse/core';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
+import { useSettingsStore } from '@/stores/settings.store';
 
 export function useNodeViewVersionSwitcher() {
 	const ndvStore = useNDVStore();
 	const workflowsStore = useWorkflowsStore();
 	const telemetry = useTelemetry();
+	const settingsStore = useSettingsStore();
 
 	const isNewUser = computed(() => workflowsStore.activeWorkflows.length === 0);
 
-	const nodeViewVersion = useLocalStorage('NodeView.version', '2');
+	const defaultVersion = settingsStore.isCanvasV2Enabled ? '2' : '1';
+	const nodeViewVersion = useLocalStorage('NodeView.version', defaultVersion);
 	const nodeViewVersionMigrated = useLocalStorage('NodeView.migrated', false);
 
 	function setNodeViewSwitcherDropdownOpened(visible: boolean) {