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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<script>
import {
GlButton,
GlSprintf,
GlLink,
GlIcon,
GlFormGroup,
GlFormCheckbox,
GlDropdown,
GlDropdownItem,
} from '@gitlab/ui';
import {
I18N_ALERT_SETTINGS_FORM,
NO_ISSUE_TEMPLATE_SELECTED,
TAKING_INCIDENT_ACTION_DOCS_LINK,
ISSUE_TEMPLATES_DOCS_LINK,
} from '../constants';
export default {
components: {
GlButton,
GlSprintf,
GlLink,
GlFormGroup,
GlIcon,
GlFormCheckbox,
GlDropdown,
GlDropdownItem,
},
inject: ['service', 'alertSettings'],
data() {
return {
templates: [NO_ISSUE_TEMPLATE_SELECTED, ...this.alertSettings.templates],
createIssueEnabled: this.alertSettings.createIssue,
issueTemplate: this.alertSettings.issueTemplateKey,
sendEmailEnabled: this.alertSettings.sendEmail,
autoCloseIncident: this.alertSettings.autoCloseIncident,
loading: false,
};
},
i18n: I18N_ALERT_SETTINGS_FORM,
TAKING_INCIDENT_ACTION_DOCS_LINK,
ISSUE_TEMPLATES_DOCS_LINK,
computed: {
issueTemplateHeader() {
return this.issueTemplate || NO_ISSUE_TEMPLATE_SELECTED.name;
},
formData() {
return {
create_issue: this.createIssueEnabled,
issue_template_key: this.issueTemplate,
send_email: this.sendEmailEnabled,
auto_close_incident: this.autoCloseIncident,
};
},
},
methods: {
selectIssueTemplate(templateKey) {
this.issueTemplate = templateKey;
},
isTemplateSelected(templateKey) {
return templateKey === this.issueTemplate;
},
updateAlertsIntegrationSettings() {
this.loading = true;
this.service.updateSettings(this.formData).catch(() => {
this.loading = false;
});
},
},
};
</script>
<template>
<div>
<p>
<gl-sprintf :message="$options.i18n.introText">
<template #docsLink>
<gl-link :href="$options.TAKING_INCIDENT_ACTION_DOCS_LINK" target="_blank">
<span>{{ $options.i18n.introLinkText }}</span>
</gl-link>
</template>
</gl-sprintf>
</p>
<form ref="settingsForm" @submit.prevent="updateAlertsIntegrationSettings">
<gl-form-group class="gl-pl-0">
<gl-form-checkbox v-model="createIssueEnabled" data-qa-selector="create_issue_checkbox">
<span>{{ $options.i18n.createIssue.label }}</span>
</gl-form-checkbox>
</gl-form-group>
<gl-form-group
label-size="sm"
label-for="alert-integration-settings-issue-template"
class="col-8 col-md-9 gl-px-6"
>
<label class="gl-display-inline-flex" for="alert-integration-settings-issue-template">
{{ $options.i18n.issueTemplate.label }}
<gl-link :href="$options.ISSUE_TEMPLATES_DOCS_LINK" target="_blank">
<gl-icon name="question" :size="12" />
</gl-link>
</label>
<gl-dropdown
id="alert-integration-settings-issue-template"
data-qa-selector="incident_templates_dropdown"
:text="issueTemplateHeader"
:block="true"
>
<gl-dropdown-item
v-for="template in templates"
:key="template.key"
data-qa-selector="incident_templates_item"
:is-check-item="true"
:is-checked="isTemplateSelected(template.key)"
@click="selectIssueTemplate(template.key)"
>
{{ template.name }}
</gl-dropdown-item>
</gl-dropdown>
</gl-form-group>
<gl-form-group class="gl-pl-0 gl-mb-5">
<gl-form-checkbox v-model="sendEmailEnabled">
<span>{{ $options.i18n.sendEmail.label }}</span>
</gl-form-checkbox>
</gl-form-group>
<gl-form-group class="gl-pl-0 gl-mb-5">
<gl-form-checkbox v-model="autoCloseIncident">
<span>{{ $options.i18n.autoCloseIncidents.label }}</span>
</gl-form-checkbox>
</gl-form-group>
<div class="gl-display-flex gl-justify-content-end">
<gl-button
ref="submitBtn"
data-qa-selector="save_changes_button"
:disabled="loading"
variant="success"
type="submit"
class="js-no-auto-disable"
>
{{ $options.i18n.saveBtnLabel }}
</gl-button>
</div>
</form>
</div>
</template>
|
