From 0666377ef8074ad093391d41e08e194704a25dbd Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 12 May 2023 09:26:41 +0200
Subject: [PATCH] feat(editor): Version Control settings update (WIP) (#6233)

---
 packages/editor-ui/src/Interface.ts           |   3 +-
 .../src/plugins/i18n/locales/en.json          |  18 +-
 .../src/stores/versionControl.store.ts        |   6 +-
 .../src/views/SettingsVersionControl.vue      | 195 ++++++++++++------
 4 files changed, 156 insertions(+), 66 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index c90e18da3..3cd3761be 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1438,7 +1438,8 @@ export type VersionControlPreferences = {
 	repositoryUrl: string;
 	authorName: string;
 	authorEmail: string;
-	branchName: string;
+	currentBranch: string;
+	branches: string[];
 	branchReadOnly: boolean;
 	branchColor: string;
 	publicKey?: string;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 64dce45c6..b398af6c2 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -1290,18 +1290,26 @@
 	"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.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. {link}",
+	"settings.versionControl.description.link": "Learn how to set up versioning and environments in n8n.",
+	"settings.versionControl.gitConfig": "Git configuration",
+	"settings.versionControl.repoUrl": "Git repository URL (SSH)",
 	"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.authorName": "Commit author  name",
+	"settings.versionControl.authorEmail": "Commit 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.button.save": "Save settings",
+	"settings.versionControl.instanceSettings": "Instance settings",
+	"settings.versionControl.branches": "Branch connected to this n8n instance",
+	"settings.versionControl.readonly": "{bold}: prevent editing workflows (recommended for production environments). {link}",
+	"settings.versionControl.readonly.bold": "Read-only instance",
+	"settings.versionControl.readonly.link": "Learn more.",
+	"settings.versionControl.color": "Color",
 	"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",
diff --git a/packages/editor-ui/src/stores/versionControl.store.ts b/packages/editor-ui/src/stores/versionControl.store.ts
index 6cc0da32d..819836432 100644
--- a/packages/editor-ui/src/stores/versionControl.store.ts
+++ b/packages/editor-ui/src/stores/versionControl.store.ts
@@ -16,12 +16,13 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 	);
 
 	const preferences = reactive<VersionControlPreferences>({
-		branchName: '',
+		currentBranch: '',
+		branches: [],
 		authorName: '',
 		authorEmail: '',
 		repositoryUrl: '',
 		branchReadOnly: false,
-		branchColor: '#000000',
+		branchColor: '#F4A6DC',
 		connected: false,
 		publicKey: '',
 	});
@@ -77,6 +78,7 @@ export const useVersionControlStore = defineStore('versionControl', () => {
 	return {
 		isEnterpriseVersionControlEnabled,
 		state,
+		preferences,
 		initSsh,
 		initRepository,
 		sync,
diff --git a/packages/editor-ui/src/views/SettingsVersionControl.vue b/packages/editor-ui/src/views/SettingsVersionControl.vue
index ca1971b1a..bb5ca3524 100644
--- a/packages/editor-ui/src/views/SettingsVersionControl.vue
+++ b/packages/editor-ui/src/views/SettingsVersionControl.vue
@@ -1,19 +1,14 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
 import { i18n as locale } from '@/plugins/i18n';
 import { useVersionControlStore } from '@/stores/versionControl.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useMessage } from '@/composables';
+import CopyInput from '@/components/CopyInput.vue';
 
 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 = () => {
 	void versionControlStore.initSsh({
 		name: versionControlStore.state.authorName,
@@ -26,22 +21,15 @@ const onConnect = () => {
 	void versionControlStore.initRepository();
 };
 
+const onSave = () => {
+	void versionControlStore.savePreferences(versionControlStore.preferences);
+};
+
 const onSelect = async (b: string) => {
-	if (b === branch.value) {
+	if (b === versionControlStore.preferences.currentBranch) {
 		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();
-	}
+	versionControlStore.preferences.currentBranch = b;
 };
 
 const goToUpgrade = () => {
@@ -51,40 +39,59 @@ const goToUpgrade = () => {
 
 <template>
 	<div>
-		<n8n-heading size="2xlarge">{{ locale.baseText('settings.versionControl.title') }}</n8n-heading>
+		<n8n-heading size="2xlarge" tag="h1">{{
+			locale.baseText('settings.versionControl.title')
+		}}</n8n-heading>
 		<div
 			v-if="versionControlStore.isEnterpriseVersionControlEnabled"
 			data-test-id="version-control-content-licensed"
 		>
-			<n8n-callout theme="secondary" icon="info-circle" class="mt-2xl mb-l">{{
-				locale.baseText('settings.versionControl.description')
-			}}</n8n-callout>
+			<n8n-callout theme="secondary" icon="info-circle" class="mt-2xl mb-l">
+				<i18n path="settings.versionControl.description">
+					<template #link>
+						<a href="#" target="_blank">
+							{{ locale.baseText('settings.versionControl.description.link') }}
+						</a>
+					</template>
+				</i18n>
+			</n8n-callout>
+			<n8n-heading size="xlarge" tag="h2" class="mb-s">{{
+				locale.baseText('settings.versionControl.gitConfig')
+			}}</n8n-heading>
 			<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"
+					v-model="versionControlStore.preferences.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 :class="[$style.group, $style.groupFlex]">
+				<div>
+					<label for="authorName">{{
+						locale.baseText('settings.versionControl.authorName')
+					}}</label>
+					<n8n-input id="authorName" v-model="versionControlStore.preferences.authorName" />
+				</div>
+				<div>
+					<label for="authorEmail">{{
+						locale.baseText('settings.versionControl.authorEmail')
+					}}</label>
+					<n8n-input id="authorEmail" v-model="versionControlStore.preferences.authorEmail" />
+				</div>
 			</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">
+			<n8n-button
+				v-if="!versionControlStore.preferences.publicKey"
+				@click="onContinue"
+				size="large"
+				class="mt-2xs"
+				>{{ locale.baseText('settings.versionControl.button.continue') }}</n8n-button
+			>
+			<div v-if="versionControlStore.preferences.publicKey" :class="$style.group">
 				<label>{{ locale.baseText('settings.versionControl.sshKey') }}</label>
 				<CopyInput
-					:value="versionControlStore.state.sshKey"
+					:value="versionControlStore.preferences.publicKey"
 					:copy-button-text="locale.baseText('generic.clickToCopy')"
 				/>
 				<n8n-notice type="info" class="mt-s">
@@ -97,25 +104,70 @@ const goToUpgrade = () => {
 					</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>
+			<n8n-button
+				v-if="
+					versionControlStore.preferences.publicKey &&
+					!versionControlStore.preferences.branches.length
+				"
+				@click="onConnect"
+				size="large"
+				:class="$style.connect"
+				>{{ locale.baseText('settings.versionControl.button.connect') }}</n8n-button
+			>
+			<div v-if="versionControlStore.preferences.branches.length">
+				<div :class="$style.group">
+					<hr />
+					<n8n-heading size="xlarge" tag="h2" class="mb-s">{{
+						locale.baseText('settings.versionControl.instanceSettings')
+					}}</n8n-heading>
+					<label>{{ locale.baseText('settings.versionControl.branches') }}</label>
+					<n8n-select
+						:value="versionControlStore.preferences.currentBranch"
+						class="mb-s"
+						size="medium"
+						filterable
+						@input="onSelect"
+					>
+						<n8n-option
+							v-for="b in versionControlStore.preferences.branches"
+							:key="b"
+							:value="b"
+							:label="b"
+						/>
+					</n8n-select>
+					<n8n-checkbox
+						v-model="versionControlStore.preferences.branchReadOnly"
+						:class="$style.readOnly"
+					>
+						<i18n path="settings.versionControl.readonly">
+							<template #bold>
+								<strong>{{ locale.baseText('settings.versionControl.readonly.bold') }}</strong>
+							</template>
+							<template #link>
+								<a href="#" target="_blank">
+									{{ locale.baseText('settings.versionControl.readonly.link') }}
+								</a>
+							</template>
+						</i18n>
+					</n8n-checkbox>
+				</div>
+				<div :class="$style.group">
+					<label>{{ locale.baseText('settings.versionControl.color') }}</label>
+					<div>
+						<n8n-color-picker size="small" v-model="versionControlStore.preferences.branchColor" />
+					</div>
+				</div>
+				<div :class="[$style.group, 'pt-s']">
+					<n8n-button
+						v-if="
+							versionControlStore.preferences.publicKey &&
+							versionControlStore.preferences.currentBranch
+						"
+						@click="onSave"
+						size="large"
+						>{{ locale.baseText('settings.versionControl.button.save') }}</n8n-button
+					>
+				</div>
 			</div>
 		</div>
 		<n8n-action-box
@@ -135,7 +187,7 @@ const goToUpgrade = () => {
 
 <style lang="scss" module>
 .group {
-	padding: 0 0 var(--spacing-2xs);
+	padding: 0 0 var(--spacing-s);
 
 	label {
 		display: inline-block;
@@ -151,6 +203,28 @@ const goToUpgrade = () => {
 	}
 }
 
+.readOnly {
+	span {
+		font-size: var(--font-size-s) !important;
+	}
+}
+
+.groupFlex {
+	display: flex;
+
+	> div {
+		flex: 1;
+
+		&:last-child {
+			margin-left: var(--spacing-2xs);
+		}
+	}
+
+	input {
+		width: 100%;
+	}
+}
+
 .connect {
 	margin: calc(var(--spacing-2xs) * -1) 0 var(--spacing-2xs);
 }
@@ -158,4 +232,9 @@ const goToUpgrade = () => {
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
 }
+
+hr {
+	margin: 0 0 var(--spacing-xl);
+	border: 1px solid var(--color-foreground-light);
+}
 </style>