From 0c9ce3a2ec9487b4eb9130651927e91dcd0f85af Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Wed, 26 Apr 2023 17:52:53 +0200
Subject: [PATCH] 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                |   9 ++
 packages/editor-ui/src/Interface.ts           |  11 ++
 packages/editor-ui/src/api/versionControl.ts  |  36 +++++
 .../editor-ui/src/components/MainSidebar.vue  |  95 ++++++++++++--
 .../editor-ui/src/composables/useMessage.ts   |  12 +-
 .../src/plugins/i18n/locales/en.json          |  18 +++
 .../editor-ui/src/stores/versionControl.ts    |  74 ++++++++++-
 .../src/views/SettingsVersionControl.vue      | 123 +++++++++++++++++-
 8 files changed, 358 insertions(+), 20 deletions(-)
 create mode 100644 packages/editor-ui/src/api/versionControl.ts

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index 2d1e09cf364..2498681e81d 100644
--- a/packages/editor-ui/src/App.vue
+++ b/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) {
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index cb153e3f1f7..c90e18da3a5 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/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;
+};
diff --git a/packages/editor-ui/src/api/versionControl.ts b/packages/editor-ui/src/api/versionControl.ts
new file mode 100644
index 00000000000..d4b78a56542
--- /dev/null
+++ b/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`);
+};
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index d3c3cff7017..d9c8eb0ed17 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/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>
diff --git a/packages/editor-ui/src/composables/useMessage.ts b/packages/editor-ui/src/composables/useMessage.ts
index 2a5dd6e8e7a..3fbecc58079 100644
--- a/packages/editor-ui/src/composables/useMessage.ts
+++ b/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 : {})),
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 30eb69c8dd9..ecf79a17330 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/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",
diff --git a/packages/editor-ui/src/stores/versionControl.ts b/packages/editor-ui/src/stores/versionControl.ts
index 315d2044557..9c0d0abfa0a 100644
--- a/packages/editor-ui/src/stores/versionControl.ts
+++ b/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,
 	};
 });
diff --git a/packages/editor-ui/src/views/SettingsVersionControl.vue b/packages/editor-ui/src/views/SettingsVersionControl.vue
index 4c6906c6a57..917e3b870b5 100644
--- a/packages/editor-ui/src/views/SettingsVersionControl.vue
+++ b/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;
 }