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
120
121
122
123
124
125
126
127
128
|
<script>
import { createAlert } from '~/alert';
import { joinPaths } from '~/lib/utils/url_utility';
import commitReferencesQuery from '../graphql/queries/commit_references.query.graphql';
import containingBranchesQuery from '../graphql/queries/commit_containing_branches.query.graphql';
import containingTagsQuery from '../graphql/queries/commit_containing_tags.query.graphql';
import {
BRANCHES,
TAGS,
FETCH_CONTAINING_REFS_EVENT,
FETCH_COMMIT_REFERENCES_ERROR,
} from '../constants';
import RefsList from './refs_list.vue';
export default {
name: 'CommitRefs',
components: {
RefsList,
},
inject: ['fullPath', 'commitSha'],
apollo: {
project: {
query: commitReferencesQuery,
variables() {
return this.queryVariables;
},
update({
project: {
commitReferences: { tippingTags, tippingBranches, containingBranches, containingTags },
},
}) {
this.tippingTags = tippingTags.names;
this.tippingBranches = tippingBranches.names;
this.hasContainingBranches = Boolean(containingBranches.names.length);
this.hasContainingTags = Boolean(containingTags.names.length);
},
error() {
createAlert({
message: this.$options.i18n.errorMessage,
captureError: true,
});
},
},
},
data() {
return {
containingTags: [],
containingBranches: [],
tippingTags: [],
tippingBranches: [],
hasContainingBranches: false,
hasContainingTags: false,
};
},
computed: {
hasBranches() {
return this.tippingBranches.length || this.hasContainingBranches;
},
hasTags() {
return this.tippingTags.length || this.hasContainingTags;
},
queryVariables() {
return {
fullPath: this.fullPath,
commitSha: this.commitSha,
};
},
commitsUrlPart() {
const urlPart = joinPaths(gon.relative_url_root || '', `/${this.fullPath}`, `/-/commits/`);
return urlPart;
},
},
methods: {
async fetchContainingRefs({ query, namespace }) {
try {
const { data } = await this.$apollo.query({
query,
variables: this.queryVariables,
});
this[namespace] = data.project.commitReferences[namespace].names;
return data.project.commitReferences[namespace].names;
} catch {
return createAlert({
message: this.$options.i18n.errorMessage,
captureError: true,
});
}
},
fetchContainingBranches() {
this.fetchContainingRefs({ query: containingBranchesQuery, namespace: 'containingBranches' });
},
fetchContainingTags() {
this.fetchContainingRefs({ query: containingTagsQuery, namespace: 'containingTags' });
},
},
i18n: {
branches: BRANCHES,
tags: TAGS,
errorMessage: FETCH_COMMIT_REFERENCES_ERROR,
},
fetchContainingRefsEvent: FETCH_CONTAINING_REFS_EVENT,
};
</script>
<template>
<div class="gl-ml-7">
<refs-list
v-if="hasBranches"
:has-containing-refs="hasContainingBranches"
:is-loading="$apollo.queries.project.loading"
:tipping-refs="tippingBranches"
:containing-refs="containingBranches"
:namespace="$options.i18n.branches"
:url-part="commitsUrlPart"
@[$options.fetchContainingRefsEvent]="fetchContainingBranches"
/>
<refs-list
v-if="hasTags"
:has-containing-refs="hasContainingTags"
:is-loading="$apollo.queries.project.loading"
:tipping-refs="tippingTags"
:containing-refs="containingTags"
:namespace="$options.i18n.tags"
:url-part="commitsUrlPart"
@[$options.fetchContainingRefsEvent]="fetchContainingTags"
/>
</div>
</template>
|
