feat(editor): Version control (WIP) (#6013)

* feat(editor): Version control settings (with feature flag)

* feat(editor): replace posthog feature flag with local storage key

packages/editor-ui/src/components/SettingsSidebar.vue

@@ -74,6 +74,14 @@ export default mixins(userHelpers, pushConnection).extend({
 					available: this.canAccessApiSettings(),
 					activateOnRouteNames: [VIEWS.API_SETTINGS],
 				},
+				{
+					id: 'settings-version-control',
+					icon: 'code-branch',
+					label: this.$locale.baseText('settings.versionControl.title'),
+					position: 'top',
+					available: this.canAccessVersionControl(),
+					activateOnRouteNames: [VIEWS.VERSION_CONTROL],
+				},
 				{
 					id: 'settings-sso',
 					icon: 'user-lock',
@@ -151,6 +159,9 @@ export default mixins(userHelpers, pushConnection).extend({
 		canAccessUsageAndPlan(): boolean {
 			return this.canUserAccessRouteByName(VIEWS.USAGE);
 		},
+		canAccessVersionControl(): boolean {
+			return this.canUserAccessRouteByName(VIEWS.VERSION_CONTROL);
+		},
 		canAccessSso(): boolean {
 			return this.canUserAccessRouteByName(VIEWS.SSO_SETTINGS);
 		},
@@ -207,6 +218,11 @@ export default mixins(userHelpers, pushConnection).extend({
 						this.$router.push({ name: VIEWS.SSO_SETTINGS });
 					}
 					break;
+				case 'settings-version-control':
+					if (this.$router.currentRoute.name !== VIEWS.VERSION_CONTROL) {
+						this.$router.push({ name: VIEWS.VERSION_CONTROL });
+					}
+					break;
 				default:
 					break;
 			}

packages/editor-ui/src/constants.ts

@@ -395,6 +395,7 @@ export enum VIEWS {
 	LOG_STREAMING_SETTINGS = 'LogStreamingSettingsView',
 	SSO_SETTINGS = 'SSoSettings',
 	SAML_ONBOARDING = 'SamlOnboarding',
+	VERSION_CONTROL = 'VersionControl',
 }
 
 export enum FAKE_DOOR_FEATURES {

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

@@ -1291,6 +1291,7 @@
 	"settings.usageAndPlan.license.activation.success.message": "Your {name} {type} has been successfully activated.",
 	"settings.usageAndPlan.desktop.title": "Upgrade to n8n Cloud for the full experience",
 	"settings.usageAndPlan.desktop.description": "Cloud plans allow you to collaborate with teammates. Plus you don’t need to leave this app open all the time for your workflows to run.",
+	"settings.versionControl.title": "Version Control",
 	"showMessage.cancel": "@:_reusableBaseText.cancel",
 	"showMessage.ok": "OK",
 	"showMessage.showDetails": "Show Details",

packages/editor-ui/src/router.ts

@@ -40,6 +40,7 @@ import SettingsUsageAndPlanVue from './views/SettingsUsageAndPlan.vue';
 import SettingsSso from './views/SettingsSso.vue';
 import SignoutView from '@/views/SignoutView.vue';
 import SamlOnboarding from '@/views/SamlOnboarding.vue';
+import SettingsVersionControl from './views/SettingsVersionControl.vue';
 
 Vue.use(Router);
 
@@ -572,6 +573,31 @@ export const routes = [
 					},
 				},
 			},
+			{
+				path: 'version-control',
+				name: VIEWS.VERSION_CONTROL,
+				components: {
+					settingsView: SettingsVersionControl,
+				},
+				meta: {
+					telemetry: {
+						pageCategory: 'settings',
+						getProperties(route: Route) {
+							return {
+								feature: 'vc',
+							};
+						},
+					},
+					permissions: {
+						allow: {
+							role: [ROLE.Owner],
+						},
+						deny: {
+							shouldDeny: () => !window.localStorage.getItem('version-control'),
+						},
+					},
+				},
+			},
 			{
 				path: 'sso',
 				name: VIEWS.SSO_SETTINGS,

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

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { i18n as locale } from '@/plugins/i18n';
+</script>
+
+<template>
+	<div>
+		<n8n-heading size="2xlarge">{{ locale.baseText('settings.versionControl.title') }}</n8n-heading>
+	</div>
+</template>
+
+<style lang="scss" module></style>