From 20737b532423c964bd70e0aa2aac2c9533b5c3d4 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 7 Jul 2023 11:48:44 +0200
Subject: [PATCH] fix(editor): Make Source control branch select required
 (#6619)

---
 .../src/views/SettingsSourceControl.vue       | 49 +++++++++++++------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/editor-ui/src/views/SettingsSourceControl.vue b/packages/editor-ui/src/views/SettingsSourceControl.vue
index 3967dff8df..dd111bab13 100644
--- a/packages/editor-ui/src/views/SettingsSourceControl.vue
+++ b/packages/editor-ui/src/views/SettingsSourceControl.vue
@@ -17,6 +17,12 @@ const sourceControlDocsSetupUrl = computed(() =>
 	locale.baseText('settings.sourceControl.docs.setup.url'),
 );
 const isConnected = ref(false);
+const branchNameOptions = computed(() =>
+	sourceControlStore.preferences.branches.map((branch) => ({
+		value: branch,
+		label: branch,
+	})),
+);
 
 const onConnect = async () => {
 	loadingService.startLoading();
@@ -106,6 +112,7 @@ const formValidationStatus = reactive<Record<string, boolean>>({
 	repoUrl: false,
 	authorName: false,
 	authorEmail: false,
+	branchName: false,
 });
 
 function onValidate(key: string, value: boolean) {
@@ -136,6 +143,8 @@ const authorEmailValidationRules: Array<Rule | RuleGroup> = [
 	},
 ];
 
+const branchNameValidationRules: Array<Rule | RuleGroup> = [{ name: 'REQUIRED' }];
+
 const validForConnection = computed(
 	() =>
 		formValidationStatus.repoUrl &&
@@ -216,7 +225,7 @@ const refreshBranches = async () => {
 						@validate="(value) => onValidate('repoUrl', value)"
 					/>
 					<n8n-button
-						class="ml-2xs"
+						:class="$style.disconnectButton"
 						type="tertiary"
 						v-if="isConnected"
 						@click="onDisconnect"
@@ -303,21 +312,20 @@ const refreshBranches = async () => {
 					}}</n8n-heading>
 					<label>{{ locale.baseText('settings.sourceControl.branches') }}</label>
 					<div :class="$style.branchSelection">
-						<n8n-select
-							:value="sourceControlStore.preferences.branchName"
+						<n8n-form-input
+							label
+							type="select"
+							id="branchName"
+							name="branchName"
 							class="mb-s"
-							size="medium"
-							filterable
-							@input="onSelect"
 							data-test-id="source-control-branch-select"
-						>
-							<n8n-option
-								v-for="b in sourceControlStore.preferences.branches"
-								:key="b"
-								:value="b"
-								:label="b"
-							/>
-						</n8n-select>
+							validateOnBlur
+							:validationRules="branchNameValidationRules"
+							:options="branchNameOptions"
+							:value="sourceControlStore.preferences.branchName"
+							@validate="(value) => onValidate('branchName', value)"
+							@input="onSelect"
+						/>
 						<n8n-tooltip placement="top">
 							<template #content>
 								<span>
@@ -441,6 +449,11 @@ const refreshBranches = async () => {
 	margin: calc(var(--spacing-2xs) * -1) 0 var(--spacing-2xs);
 }
 
+.disconnectButton {
+	margin: 0 0 0 var(--spacing-2xs);
+	height: 40px;
+}
+
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
 }
@@ -462,6 +475,14 @@ const refreshBranches = async () => {
 .branchSelection {
 	display: flex;
 
+	> div:first-child {
+		flex: 1;
+
+		input {
+			height: 36px;
+		}
+	}
+
 	button.refreshBranches {
 		height: 36px;
 		width: 36px;