feat(editor): Add version controls settings (WIP) (#6036)

* feat(editor): Version control paywall (WIP)

* fix(editor): remove version control docs link

* feat(editor): Adding version control settings (WIP)

* feat(editor): Adding version control settings (WIP)

* fix(editor): use rest api root path in version control

* fix(editor): adding preferences

* fix(editor): adding preferences

* fix(editor): change store action name

packages/editor-ui/src/App.vue

@@ -47,6 +47,7 @@ import { useNodeTypesStore } from './stores/nodeTypes';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
+import { useVersionControlStore } from '@/stores/versionControl';
 
 export default mixins(newVersions, showMessage, userHelpers).extend({
 	name: 'App',
@@ -69,6 +70,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			useTemplatesStore,
 			useUIStore,
 			useUsersStore,
+			useVersionControlStore,
 		),
 		defaultLocale(): string {
 			return this.rootStore.defaultLocale;
@@ -196,6 +198,13 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		if (this.defaultLocale !== 'en') {
 			await this.nodeTypesStore.getNodeTranslationHeaders();
 		}
+
+		if (
+			this.versionControlStore.isEnterpriseVersionControlEnabled &&
+			this.usersStore.isInstanceOwner
+		) {
+			this.versionControlStore.getPreferences();
+		}
 	},
 	watch: {
 		$route(route) {

packages/editor-ui/src/Interface.ts

@@ -1432,3 +1432,14 @@ export type SamlPreferencesExtractedData = {
 	entityID: string;
 	returnUrl: string;
 };
+
+export type VersionControlPreferences = {
+	connected: boolean;
+	repositoryUrl: string;
+	authorName: string;
+	authorEmail: string;
+	branchName: string;
+	branchReadOnly: boolean;
+	branchColor: string;
+	publicKey?: string;
+};

packages/editor-ui/src/api/versionControl.ts

@@ -0,0 +1,36 @@
+import type { IRestApiContext, VersionControlPreferences } from '@/Interface';
+import { makeRestApiRequest } from '@/utils';
+import type { IDataObject } from 'n8n-workflow';
+
+const versionControlApiRoot = '/version-control';
+
+export const initSsh = (context: IRestApiContext, data: IDataObject): Promise<string> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/init-ssh`, data);
+};
+
+export const initRepository = (
+	context: IRestApiContext,
+): Promise<{ branches: string[]; currentBranch: string }> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/init-repository`);
+};
+
+export const sync = (context: IRestApiContext, data: IDataObject): Promise<void> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/push`, data);
+};
+
+export const getConfig = (
+	context: IRestApiContext,
+): Promise<{ remoteRepository: string; name: string; email: string; currentBranch: string }> => {
+	return makeRestApiRequest(context, 'GET', `${versionControlApiRoot}/config`);
+};
+
+export const setPreferences = (
+	context: IRestApiContext,
+	preferences: Partial<VersionControlPreferences>,
+): Promise<VersionControlPreferences> => {
+	return makeRestApiRequest(context, 'POST', `${versionControlApiRoot}/preferences`, preferences);
+};
+
+export const getPreferences = (context: IRestApiContext): Promise<VersionControlPreferences> => {
+	return makeRestApiRequest(context, 'GET', `${versionControlApiRoot}/preferences`);
+};

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

@@ -26,19 +26,39 @@
 					/>
 				</div>
 			</template>
-			<template #menuSuffix v-if="hasVersionUpdates">
-				<div :class="$style.updates" @click="openUpdatesPanel">
-					<div :class="$style.giftContainer">
-						<GiftNotificationIcon />
+			<template #menuSuffix>
+				<div v-if="hasVersionUpdates || versionControlStore.state.currentBranch">
+					<div v-if="hasVersionUpdates" :class="$style.updates" @click="openUpdatesPanel">
+						<div :class="$style.giftContainer">
+							<GiftNotificationIcon />
+						</div>
+						<n8n-text
+							:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
+							color="text-base"
+						>
+							{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
+								nextVersions.length > 1 ? 's' : ''
+							}}
+						</n8n-text>
+					</div>
+					<div :class="$style.sync" v-if="versionControlStore.state.currentBranch">
+						<span>
+							<n8n-icon icon="code-branch" class="mr-xs" />
+							{{ currentBranch }}
+						</span>
+						<n8n-button
+							:title="
+								$locale.baseText('settings.versionControl.sync.prompt.title', {
+									interpolate: { branch: currentBranch },
+								})
+							"
+							icon="sync"
+							type="tertiary"
+							:size="isCollapsed ? 'mini' : 'small'"
+							square
+							@click="sync"
+						/>
 					</div>
-					<n8n-text
-						:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
-						color="text-base"
-					>
-						{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
-							nextVersions.length > 1 ? 's' : ''
-						}}
-					</n8n-text>
 				</div>
 			</template>
 			<template #footer v-if="showUserArea">
@@ -114,6 +134,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useVersionsStore } from '@/stores/versions';
 import { isNavigationFailure } from 'vue-router';
+import { useVersionControlStore } from '@/stores/versionControl';
 
 export default mixins(
 	genericHelpers,
@@ -143,7 +164,11 @@ export default mixins(
 			useUsersStore,
 			useVersionsStore,
 			useWorkflowsStore,
+			useVersionControlStore,
 		),
+		currentBranch(): string {
+			return this.versionControlStore.state.currentBranch;
+		},
 		hasVersionUpdates(): boolean {
 			return this.versionsStore.hasVersionUpdates;
 		},
@@ -458,6 +483,29 @@ export default mixins(
 				});
 			}
 		},
+		async sync() {
+			const prompt = await this.$prompt(
+				this.$locale.baseText('settings.versionControl.sync.prompt.description', {
+					interpolate: { branch: this.versionControlStore.state.currentBranch },
+				}),
+				this.$locale.baseText('settings.versionControl.sync.prompt.title', {
+					interpolate: { branch: this.versionControlStore.state.currentBranch },
+				}),
+				{
+					confirmButtonText: 'Sync',
+					cancelButtonText: 'Cancel',
+					inputPlaceholder: this.$locale.baseText(
+						'settings.versionControl.sync.prompt.placeholder',
+					),
+					inputPattern: /^.+$/,
+					inputErrorMessage: this.$locale.baseText('settings.versionControl.sync.prompt.error'),
+				},
+			);
+
+			if (prompt.value) {
+				this.versionControlStore.sync({ commitMessage: prompt.value });
+			}
+		},
 	},
 });
 </script>
@@ -596,4 +644,27 @@ export default mixins(
 		display: none;
 	}
 }
+
+.sync {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-l);
+	margin: 0 calc(var(--spacing-l) * -1) calc(var(--spacing-m) * -1);
+	background: var(--color-background-light);
+	border-top: 1px solid var(--color-foreground-light);
+	font-size: var(--font-size-2xs);
+
+	span {
+		color: var(--color-text-light);
+	}
+
+	.sideMenuCollapsed & {
+		justify-content: center;
+		margin-left: calc(var(--spacing-xl) * -1);
+		> span {
+			display: none;
+		}
+	}
+}
 </style>

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

@@ -4,8 +4,8 @@ import { Message, MessageBox } from 'element-ui';
 export function useMessage() {
 	async function alert(
 		message: string,
-		configOrTitle: string | ElMessageBoxOptions | undefined,
-		config: ElMessageBoxOptions | undefined,
+		configOrTitle?: string | ElMessageBoxOptions,
+		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
 			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
@@ -21,8 +21,8 @@ export function useMessage() {
 
 	async function confirm(
 		message: string,
-		configOrTitle: string | ElMessageBoxOptions | undefined,
-		config: ElMessageBoxOptions | undefined,
+		configOrTitle?: string | ElMessageBoxOptions,
+		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
 			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
@@ -41,8 +41,8 @@ export function useMessage() {
 
 	async function prompt(
 		message: string,
-		configOrTitle: string | ElMessageBoxOptions | undefined,
-		config: ElMessageBoxOptions | undefined,
+		configOrTitle?: string | ElMessageBoxOptions,
+		config?: ElMessageBoxOptions,
 	) {
 		const resolvedConfig = {
 			...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),

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

@@ -1286,6 +1286,24 @@
 	"settings.versionControl.actionBox.title": "Available on Enterprise plan",
 	"settings.versionControl.actionBox.description": "Use Version Control to connect your instance to an external Git repository to backup and track changes made to your workflows, variables, and credentials. With Version Control you can also sync instances across multiple environments (development, production...).",
 	"settings.versionControl.actionBox.buttonText": "See plans",
+	"settings.versionControl.description": "Versioning allows you to connect your n8n instance to a Git branch of a repository. You can connect your branches to multiples n8n instances to create a multi environments setup. Learn how to set up versioning and environments in n8n.",
+	"settings.versionControl.repoUrl": "Git repository URL",
+	"settings.versionControl.repoUrlPlaceholder": "e.g. git@github.com:my-team/my-repository",
+	"settings.versionControl.repoUrlDescription": "The SSH url of your Git repository",
+	"settings.versionControl.authorName": "Author name",
+	"settings.versionControl.authorEmail": "Author email",
+	"settings.versionControl.sshKey": "SSH Key",
+	"settings.versionControl.sshKeyDescription": "Paste the SSH key in yout git repository settings. {link}.",
+	"settings.versionControl.sshKeyDescriptionLink": "More info.",
+	"settings.versionControl.button.continue": "Continue",
+	"settings.versionControl.button.connect": "Connect",
+	"settings.versionControl.branches": "Select branch",
+	"settings.versionControl.switchBranch.title": "Switch to {branch} branch",
+	"settings.versionControl.switchBranch.description": "Please confirm you want to switch the current n8n instance to the branch: {branch}",
+	"settings.versionControl.sync.prompt.title": "Sync changes in {branch} branch",
+	"settings.versionControl.sync.prompt.description": "All the changes on your n8n instances will be synced with branch {branch} on the remote git repository. The following git sequence will be executed: pull > commit > push.",
+	"settings.versionControl.sync.prompt.placeholder": "Commit message",
+	"settings.versionControl.sync.prompt.error": "Please enter a commit message",
 	"showMessage.cancel": "@:_reusableBaseText.cancel",
 	"showMessage.ok": "OK",
 	"showMessage.showDetails": "Show Details",

packages/editor-ui/src/stores/versionControl.ts

@@ -1,16 +1,88 @@
-import { computed } from 'vue';
+import { computed, reactive } from 'vue';
 import { defineStore } from 'pinia';
+import type { IDataObject } from 'n8n-workflow';
 import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings';
+import * as vcApi from '@/api/versionControl';
+import { useRootStore } from '@/stores/n8nRootStore';
+import type { VersionControlPreferences } from '@/Interface';
 
 export const useVersionControlStore = defineStore('versionControl', () => {
+	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
 
 	const isEnterpriseVersionControlEnabled = computed(() =>
 		settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.VersionControl),
 	);
 
+	const preferences = reactive<VersionControlPreferences>({
+		branchName: '',
+		authorName: '',
+		authorEmail: '',
+		repositoryUrl: '',
+		branchReadOnly: false,
+		branchColor: '#000000',
+		connected: false,
+		publicKey: '',
+	});
+
+	const state = reactive({
+		branches: [] as string[],
+		currentBranch: '',
+		authorName: '',
+		authorEmail: '',
+		repositoryUrl: '',
+		sshKey: '',
+		commitMessage: 'commit message',
+	});
+
+	const initSsh = async (data: IDataObject) => {
+		state.sshKey = await vcApi.initSsh(rootStore.getRestApiContext, data);
+	};
+
+	const initRepository = async () => {
+		const { branches, currentBranch } = await vcApi.initRepository(rootStore.getRestApiContext);
+		state.branches = branches;
+		state.currentBranch = currentBranch;
+	};
+
+	const sync = async (data: { commitMessage: string }) => {
+		state.commitMessage = data.commitMessage;
+		return vcApi.sync(rootStore.getRestApiContext, { message: data.commitMessage });
+	};
+	const getConfig = async () => {
+		const { remoteRepository, name, email, currentBranch } = await vcApi.getConfig(
+			rootStore.getRestApiContext,
+		);
+		state.repositoryUrl = remoteRepository;
+		state.authorName = name;
+		state.authorEmail = email;
+		state.currentBranch = currentBranch;
+	};
+
+	const setPreferences = (data: Partial<VersionControlPreferences>) => {
+		Object.assign(preferences, data);
+	};
+
+	const getPreferences = async () => {
+		const data = await vcApi.getPreferences(rootStore.getRestApiContext);
+		setPreferences(data);
+	};
+
+	const savePreferences = async (preferences: Partial<VersionControlPreferences>) => {
+		const data = await vcApi.setPreferences(rootStore.getRestApiContext, preferences);
+		setPreferences(data);
+	};
+
 	return {
 		isEnterpriseVersionControlEnabled,
+		state,
+		initSsh,
+		initRepository,
+		sync,
+		getConfig,
+		getPreferences,
+		setPreferences,
+		savePreferences,
 	};
 });

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

@@ -1,10 +1,48 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
 import { i18n as locale } from '@/plugins/i18n';
 import { useVersionControlStore } from '@/stores/versionControl';
 import { useUIStore } from '@/stores/ui';
+import { useMessage } from '@/composables';
 
 const versionControlStore = useVersionControlStore();
 const uiStore = useUIStore();
+const message = useMessage();
+
+const sshKey = computed(() => versionControlStore.state.sshKey);
+const branch = computed(() => versionControlStore.state.currentBranch);
+const branches = ref<string[]>([]);
+const selectElement = ref<HTMLSelectElement | null>(null);
+
+const onContinue = () => {
+	versionControlStore.initSsh({
+		name: versionControlStore.state.authorName,
+		email: versionControlStore.state.authorEmail,
+		remoteRepository: versionControlStore.state.repositoryUrl,
+	});
+};
+
+const onConnect = () => {
+	versionControlStore.initRepository();
+};
+
+const onSelect = async (b: string) => {
+	if (b === branch.value) {
+		return;
+	}
+	const switchBranch = await message
+		.confirm(
+			locale.baseText('settings.versionControl.switchBranch.description', {
+				interpolate: { branch: b },
+			}),
+			locale.baseText('settings.versionControl.switchBranch.title', { interpolate: { branch: b } }),
+		)
+		.catch(() => {});
+	if (switchBranch === 'confirm') {
+		versionControlStore.state.currentBranch = b;
+		selectElement.value?.blur();
+	}
+};
 
 const goToUpgrade = () => {
 	uiStore.goToUpgrade('version-control', 'upgrade-version-control');
@@ -17,7 +55,69 @@ const goToUpgrade = () => {
 		<div
 			v-if="versionControlStore.isEnterpriseVersionControlEnabled"
 			data-test-id="version-control-content-licensed"
-		></div>
+		>
+			<n8n-callout theme="secondary" icon="info-circle" class="mt-2xl mb-l">{{
+				locale.baseText('settings.versionControl.description')
+			}}</n8n-callout>
+			<div :class="$style.group">
+				<label for="repoUrl">{{ locale.baseText('settings.versionControl.repoUrl') }}</label>
+				<n8n-input
+					id="repoUrl"
+					:placeholder="locale.baseText('settings.versionControl.repoUrlPlaceholder')"
+					v-model="versionControlStore.state.repositoryUrl"
+				/>
+				<small>{{ locale.baseText('settings.versionControl.repoUrlDescription') }}</small>
+			</div>
+			<div :class="$style.group">
+				<label for="authorName">{{ locale.baseText('settings.versionControl.authorName') }}</label>
+				<n8n-input id="authorName" v-model="versionControlStore.state.authorName" />
+			</div>
+			<div :class="$style.group">
+				<label for="authorEmail">{{
+					locale.baseText('settings.versionControl.authorEmail')
+				}}</label>
+				<n8n-input id="authorEmail" v-model="versionControlStore.state.authorEmail" />
+			</div>
+			<n8n-button v-if="!sshKey" @click="onContinue" size="large" class="mt-2xs">{{
+				locale.baseText('settings.versionControl.button.continue')
+			}}</n8n-button>
+			<div v-if="sshKey" :class="$style.group">
+				<label>{{ locale.baseText('settings.versionControl.sshKey') }}</label>
+				<CopyInput
+					:value="versionControlStore.state.sshKey"
+					:copy-button-text="locale.baseText('generic.clickToCopy')"
+				/>
+				<n8n-notice type="info" class="mt-s">
+					<i18n path="settings.versionControl.sshKeyDescription">
+						<template #link>
+							<a href="#" target="_blank">
+								{{ locale.baseText('settings.versionControl.sshKeyDescriptionLink') }}
+							</a>
+						</template>
+					</i18n>
+				</n8n-notice>
+			</div>
+			<n8n-button v-if="sshKey" @click="onConnect" size="large" :class="$style.connect">{{
+				locale.baseText('settings.versionControl.button.connect')
+			}}</n8n-button>
+			<div v-if="versionControlStore.state.branches.length" :class="$style.group">
+				<label>{{ locale.baseText('settings.versionControl.branches') }}</label>
+				<n8n-select
+					ref="selectElement"
+					:value="versionControlStore.state.currentBranch"
+					size="medium"
+					filterable
+					@input="onSelect"
+				>
+					<n8n-option
+						v-for="b in versionControlStore.state.branches"
+						:key="b"
+						:value="b"
+						:label="b"
+					/>
+				</n8n-select>
+			</div>
+		</div>
 		<n8n-action-box
 			v-else
 			data-test-id="version-control-content-unlicensed"
@@ -34,6 +134,27 @@ const goToUpgrade = () => {
 </template>
 
 <style lang="scss" module>
+.group {
+	padding: 0 0 var(--spacing-2xs);
+
+	label {
+		display: inline-block;
+		padding: 0 0 var(--spacing-2xs);
+		font-size: var(--font-size-s);
+	}
+
+	small {
+		display: inline-block;
+		padding: var(--spacing-2xs) 0 0;
+		font-size: var(--font-size-2xs);
+		color: var(--color-text-light);
+	}
+}
+
+.connect {
+	margin: calc(var(--spacing-2xs) * -1) 0 var(--spacing-2xs);
+}
+
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
 }