feat(editor): Allow enabling canvas v2 via instance settings (no-chan…

…gelog) (#11447)

packages/@n8n/api-types/package.json

@@ -21,6 +21,7 @@
     "dist/**/*"
   ],
   "devDependencies": {
+    "@n8n/config": "workspace:*",
     "n8n-workflow": "workspace:*"
   },
   "dependencies": {

packages/@n8n/api-types/src/frontend-settings.ts

@@ -1,3 +1,4 @@
+import type { FrontendBetaFeatures } from '@n8n/config';
 import type { ExpressionEvaluatorType, LogLevel, WorkflowSettings } from 'n8n-workflow';
 
 export interface IVersionNotificationSettings {
@@ -169,4 +170,5 @@ export interface FrontendSettings {
 	security: {
 		blockFileAccessToN8nFiles: boolean;
 	};
+	betaFeatures: FrontendBetaFeatures[];
 }

packages/@n8n/config/src/configs/frontend.config.ts

@@ -0,0 +1,11 @@
+import { Config, Env } from '../decorators';
+import { StringArray } from '../utils';
+
+export type FrontendBetaFeatures = 'canvas_v2';
+
+@Config
+export class FrontendConfig {
+	/** Which UI experiments to enable. Separate multiple values with a comma `,` */
+	@Env('N8N_UI_BETA_FEATURES')
+	betaFeatures: StringArray<FrontendBetaFeatures> = [];
+}

packages/@n8n/config/src/index.ts

@@ -24,6 +24,7 @@ import { Config, Env, Nested } from './decorators';
 export { Config, Env, Nested } from './decorators';
 export { TaskRunnersConfig } from './configs/runners.config';
 export { SecurityConfig } from './configs/security.config';
+export { FrontendBetaFeatures, FrontendConfig } from './configs/frontend.config';
 export { LOG_SCOPES } from './configs/logging.config';
 export type { LogScope } from './configs/logging.config';
 

packages/cli/src/services/frontend.service.ts

@@ -1,5 +1,5 @@
 import type { FrontendSettings, ITelemetrySettings } from '@n8n/api-types';
-import { GlobalConfig, SecurityConfig } from '@n8n/config';
+import { GlobalConfig, FrontendConfig, SecurityConfig } from '@n8n/config';
 import { createWriteStream } from 'fs';
 import { mkdir } from 'fs/promises';
 import uniq from 'lodash/uniq';
@@ -47,6 +47,7 @@ export class FrontendService {
 		private readonly instanceSettings: InstanceSettings,
 		private readonly urlService: UrlService,
 		private readonly securityConfig: SecurityConfig,
+		private readonly frontendConfig: FrontendConfig,
 	) {
 		loadNodesAndCredentials.addPostProcessor(async () => await this.generateTypes());
 		void this.generateTypes();
@@ -228,6 +229,7 @@ export class FrontendService {
 			security: {
 				blockFileAccessToN8nFiles: this.securityConfig.blockFileAccessToN8nFiles,
 			},
+			betaFeatures: this.frontendConfig.betaFeatures,
 		};
 	}
 

packages/editor-ui/src/__tests__/defaults.ts

@@ -124,4 +124,5 @@ export const defaultSettings: FrontendSettings = {
 	aiAssistant: {
 		enabled: false,
 	},
+	betaFeatures: [],
 };

packages/editor-ui/src/composables/useNodeViewVersionSwitcher.ts

@@ -16,7 +16,7 @@ export function useNodeViewVersionSwitcher() {
 
 	const nodeViewVersion = useLocalStorage(
 		'NodeView.version',
-		settingsStore.deploymentType === 'n8n-internal' ? '2' : '1',
+		settingsStore.isCanvasV2Enabled ? '2' : '1',
 	);
 
 	function setNodeViewSwitcherDropdownOpened(visible: boolean) {

packages/editor-ui/src/stores/settings.store.ts

@@ -156,6 +156,10 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, () => {
 
 	const isDevRelease = computed(() => settings.value.releaseChannel === 'dev');
 
+	const isCanvasV2Enabled = computed(() =>
+		(settings.value.betaFeatures ?? []).includes('canvas_v2'),
+	);
+
 	const setSettings = (newSettings: FrontendSettings) => {
 		settings.value = newSettings;
 		userManagement.value = newSettings.userManagement;
@@ -418,6 +422,7 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, () => {
 		saveDataProgressExecution,
 		isCommunityPlan,
 		isAskAiEnabled,
+		isCanvasV2Enabled,
 		reset,
 		testLdapConnection,
 		getLdapConfig,