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
|
<script>
import createFlash from '~/flash';
import { convertToGraphQLId } from '~/graphql_shared/utils';
import getProjectEnvironments from '../graphql/queries/project_environments.query.graphql';
import getProjectVariables from '../graphql/queries/project_variables.query.graphql';
import { mapEnvironmentNames } from '../utils';
import {
ADD_MUTATION_ACTION,
DELETE_MUTATION_ACTION,
GRAPHQL_PROJECT_TYPE,
UPDATE_MUTATION_ACTION,
environmentFetchErrorText,
genericMutationErrorText,
variableFetchErrorText,
} from '../constants';
import addProjectVariable from '../graphql/mutations/project_add_variable.mutation.graphql';
import deleteProjectVariable from '../graphql/mutations/project_delete_variable.mutation.graphql';
import updateProjectVariable from '../graphql/mutations/project_update_variable.mutation.graphql';
import CiVariableSettings from './ci_variable_settings.vue';
export default {
components: {
CiVariableSettings,
},
inject: ['endpoint', 'projectFullPath', 'projectId'],
data() {
return {
projectEnvironments: [],
projectVariables: [],
};
},
apollo: {
projectEnvironments: {
query: getProjectEnvironments,
variables() {
return {
fullPath: this.projectFullPath,
};
},
update(data) {
return mapEnvironmentNames(data?.project?.environments?.nodes);
},
error() {
createFlash({ message: environmentFetchErrorText });
},
},
projectVariables: {
query: getProjectVariables,
variables() {
return {
fullPath: this.projectFullPath,
};
},
update(data) {
return data?.project?.ciVariables?.nodes || [];
},
error() {
createFlash({ message: variableFetchErrorText });
},
},
},
computed: {
isLoading() {
return (
this.$apollo.queries.projectVariables.loading ||
this.$apollo.queries.projectEnvironments.loading
);
},
},
methods: {
addVariable(variable) {
this.variableMutation(ADD_MUTATION_ACTION, variable);
},
deleteVariable(variable) {
this.variableMutation(DELETE_MUTATION_ACTION, variable);
},
updateVariable(variable) {
this.variableMutation(UPDATE_MUTATION_ACTION, variable);
},
async variableMutation(mutationAction, variable) {
try {
const currentMutation = this.$options.mutationData[mutationAction];
const { data } = await this.$apollo.mutate({
mutation: currentMutation.action,
variables: {
endpoint: this.endpoint,
fullPath: this.projectFullPath,
projectId: convertToGraphQLId(GRAPHQL_PROJECT_TYPE, this.projectId),
variable,
},
});
const { errors } = data[currentMutation.name];
if (errors.length > 0) {
createFlash({ message: errors[0] });
}
} catch (e) {
createFlash({ message: genericMutationErrorText });
}
},
},
mutationData: {
[ADD_MUTATION_ACTION]: { action: addProjectVariable, name: 'addProjectVariable' },
[UPDATE_MUTATION_ACTION]: { action: updateProjectVariable, name: 'updateProjectVariable' },
[DELETE_MUTATION_ACTION]: { action: deleteProjectVariable, name: 'deleteProjectVariable' },
},
};
</script>
<template>
<ci-variable-settings
:are-scoped-variables-available="true"
:environments="projectEnvironments"
:is-loading="isLoading"
:variables="projectVariables"
@add-variable="addVariable"
@delete-variable="deleteVariable"
@update-variable="updateVariable"
/>
</template>
|
