1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<script>
import { GlCollapsibleListbox } from '@gitlab/ui';
import { debounce } from 'lodash';
import { __ } from '~/locale';
import { BRANCHES_PER_PAGE } from '../constants';
import getProjectQuery from '../graphql/queries/get_project.query.graphql';
export default {
BRANCHES_PER_PAGE,
components: {
GlCollapsibleListbox,
},
props: {
selectedProject: {
type: Object,
required: false,
default: null,
},
selectedBranchName: {
type: String,
required: false,
default: null,
},
},
data() {
return {
initialSourceBranchNamesLoading: false,
sourceBranchNamesLoading: false,
sourceBranchNames: [],
};
},
computed: {
hasSelectedProject() {
return Boolean(this.selectedProject);
},
hasSelectedSourceBranch() {
return Boolean(this.selectedBranchName);
},
branchDropdownText() {
return this.selectedBranchName || __('Select a branch');
},
},
watch: {
selectedProject: {
immediate: true,
async handler(selectedProject) {
if (!selectedProject) return;
this.initialSourceBranchNamesLoading = true;
await this.fetchSourceBranchNames({ projectPath: selectedProject.fullPath });
this.initialSourceBranchNamesLoading = false;
},
},
},
methods: {
onSourceBranchSelect(branchName) {
this.$emit('change', branchName);
},
onSearch: debounce(function debouncedSearch(branchSearchQuery) {
this.onSourceBranchSearchQuery(branchSearchQuery);
}, 250),
onSourceBranchSearchQuery(branchSearchQuery) {
this.branchSearchQuery = branchSearchQuery;
this.fetchSourceBranchNames({
projectPath: this.selectedProject.fullPath,
searchPattern: this.branchSearchQuery,
});
},
onError({ message } = {}) {
this.$emit('error', { message });
},
async fetchSourceBranchNames({ projectPath, searchPattern } = {}) {
this.sourceBranchNamesLoading = true;
try {
const { data } = await this.$apollo.query({
query: getProjectQuery,
variables: {
projectPath,
branchNamesLimit: this.$options.BRANCHES_PER_PAGE,
branchNamesOffset: 0,
branchNamesSearchPattern: searchPattern ? `*${searchPattern}*` : '*',
},
});
const { branchNames, rootRef } = data?.project.repository || {};
this.sourceBranchNames =
branchNames.map((value) => {
return { text: value, value };
}) || [];
// Use root ref as the default selection
if (rootRef && !this.hasSelectedSourceBranch) {
this.onSourceBranchSelect(rootRef);
}
} catch (err) {
this.onError({
message: __('Something went wrong while fetching source branches.'),
});
} finally {
this.sourceBranchNamesLoading = false;
}
},
},
};
</script>
<template>
<gl-collapsible-listbox
:class="{ 'gl-font-monospace': hasSelectedSourceBranch }"
:disabled="!hasSelectedProject"
:items="sourceBranchNames"
:loading="initialSourceBranchNamesLoading"
:searchable="true"
:searching="sourceBranchNamesLoading"
:toggle-text="branchDropdownText"
@search="onSearch"
@select="onSourceBranchSelect"
/>
</template>
|
