fix(editor): Make Source control branch select required (#6619)

This commit is contained in:
Csaba Tuncsik 2023-07-07 11:48:44 +02:00 committed by GitHub
parent a76223307f
commit 20737b5324
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

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