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
129
130
|
import Vue from 'vue';
import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
import IntegrationForm from './components/integration_form.vue';
import { createStore } from './store';
function parseBooleanInData(data) {
const result = {};
Object.entries(data).forEach(([key, value]) => {
result[key] = parseBoolean(value);
});
return result;
}
function parseDatasetToProps(data) {
const {
id,
type,
commentDetail,
projectKey,
upgradePlanPath,
editProjectPath,
learnMorePath,
triggerEvents,
sections,
fields,
inheritFromId,
integrationLevel,
cancelPath,
testPath,
resetPath,
formPath,
vulnerabilitiesIssuetype,
jiraIssueTransitionAutomatic,
jiraIssueTransitionId,
redirectTo,
...booleanAttributes
} = data;
const {
showActive,
activated,
activateDisabled,
editable,
canTest,
commitEvents,
mergeRequestEvents,
enableComments,
showJiraIssuesIntegration,
showJiraVulnerabilitiesIntegration,
enableJiraIssues,
enableJiraVulnerabilities,
gitlabIssuesEnabled,
} = parseBooleanInData(booleanAttributes);
return {
initialActivated: activated,
showActive,
activateDisabled,
type,
cancelPath,
editable,
canTest,
testPath,
resetPath,
formPath,
triggerFieldsProps: {
initialTriggerCommit: commitEvents,
initialTriggerMergeRequest: mergeRequestEvents,
initialEnableComments: enableComments,
initialCommentDetail: commentDetail,
initialJiraIssueTransitionAutomatic: jiraIssueTransitionAutomatic,
initialJiraIssueTransitionId: jiraIssueTransitionId,
},
jiraIssuesProps: {
showJiraIssuesIntegration,
showJiraVulnerabilitiesIntegration,
initialEnableJiraIssues: enableJiraIssues,
initialEnableJiraVulnerabilities: enableJiraVulnerabilities,
initialVulnerabilitiesIssuetype: vulnerabilitiesIssuetype,
initialProjectKey: projectKey,
gitlabIssuesEnabled,
upgradePlanPath,
editProjectPath,
},
learnMorePath,
triggerEvents: JSON.parse(triggerEvents),
sections: JSON.parse(sections, { deep: true }),
fields: convertObjectPropsToCamelCase(JSON.parse(fields), { deep: true }),
inheritFromId: parseInt(inheritFromId, 10),
integrationLevel,
id: parseInt(id, 10),
redirectTo,
};
}
export default function initIntegrationSettingsForm() {
const customSettingsEl = document.querySelector('.js-vue-integration-settings');
const defaultSettingsEl = document.querySelector('.js-vue-default-integration-settings');
if (!customSettingsEl) {
return null;
}
const customSettingsProps = parseDatasetToProps(customSettingsEl.dataset);
const initialState = {
defaultState: null,
customState: customSettingsProps,
};
if (defaultSettingsEl) {
initialState.defaultState = Object.freeze(parseDatasetToProps(defaultSettingsEl.dataset));
}
// Here, we capture the "helpHtml", so we can pass it to the Vue component
// to position it where ever it wants.
// Because this node is a _child_ of `el`, it will be removed when the Vue component is mounted,
// so we don't need to manually remove it.
const helpHtml = customSettingsEl.querySelector('.js-integration-help-html')?.innerHTML;
return new Vue({
el: customSettingsEl,
name: 'IntegrationEditRoot',
store: createStore(initialState),
provide: {
helpHtml,
},
render(createElement) {
return createElement(IntegrationForm);
},
});
}
|
