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/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;
 }