diff options
Diffstat (limited to 'app/assets/javascripts/incidents_settings/components')
3 files changed, 12 insertions, 169 deletions
diff --git a/app/assets/javascripts/incidents_settings/components/alerts_form.vue b/app/assets/javascripts/incidents_settings/components/alerts_form.vue deleted file mode 100644 index e8daad8811e..00000000000 --- a/app/assets/javascripts/incidents_settings/components/alerts_form.vue +++ /dev/null @@ -1,145 +0,0 @@ -<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.createIncident.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.incidentTemplate.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> - <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> - </form> - </div> -</template> diff --git a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue index 0746725153d..af4905deef4 100644 --- a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue +++ b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue @@ -1,7 +1,6 @@ <script> import { GlButton, GlTabs, GlTab } from '@gitlab/ui'; import { INTEGRATION_TABS_CONFIG, I18N_INTEGRATION_TABS } from '../constants'; -import AlertsSettingsForm from './alerts_form.vue'; import PagerDutySettingsForm from './pagerduty_form.vue'; export default { @@ -9,11 +8,15 @@ export default { GlButton, GlTabs, GlTab, - AlertsSettingsForm, PagerDutySettingsForm, ServiceLevelAgreementForm: () => import('ee_component/incidents_settings/components/service_level_agreement_form.vue'), }, + computed: { + activeTabs() { + return this.$options.tabs.filter((tab) => tab.active); + }, + }, tabs: INTEGRATION_TABS_CONFIG, i18n: I18N_INTEGRATION_TABS, }; @@ -23,7 +26,7 @@ export default { <section id="incident-management-settings" data-qa-selector="incidents_settings_content" - class="settings no-animate qa-incident-management-settings" + class="settings no-animate" > <div class="settings-header"> <h4 @@ -42,15 +45,14 @@ export default { <div class="settings-content"> <gl-tabs> + <service-level-agreement-form /> <gl-tab - v-for="(tab, index) in $options.tabs" - v-if="tab.active" + v-for="(tab, index) in activeTabs" :key="`${tab.title}_${index}`" :title="tab.title" > <component :is="tab.component" class="gl-pt-3" :data-testid="`${tab.component}-tab`" /> </gl-tab> - <service-level-agreement-form /> </gl-tabs> </div> </section> diff --git a/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue b/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue index b56dd66342a..866d2ff399e 100644 --- a/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue +++ b/app/assets/javascripts/incidents_settings/components/pagerduty_form.vue @@ -11,7 +11,6 @@ import { GlModal, GlModalDirective, } from '@gitlab/ui'; -import { isEqual } from 'lodash'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import { I18N_PAGERDUTY_SETTINGS_FORM, CONFIGURE_PAGERDUTY_WEBHOOK_DOCS_LINK } from '../constants'; @@ -50,14 +49,8 @@ export default { pagerduty_active: this.active, }; }, - isFormUpdated() { - return isEqual(this.pagerDutySettings, { - active: this.active, - webhookUrl: this.webhookUrl, - }); - }, isSaveDisabled() { - return this.isFormUpdated || this.loading || this.resettingWebhook; + return this.loading || this.resettingWebhook; }, webhookUpdateAlertMsg() { return this.webhookUpdateFailed @@ -123,13 +116,15 @@ export default { </template> </gl-sprintf> </p> - <form ref="settingsForm" @submit.prevent="updatePagerDutyIntegrationSettings"> + <form ref="settingsForm"> <gl-form-group class="col-8 col-md-9 gl-p-0"> <gl-toggle id="active" v-model="active" + :disabled="isSaveDisabled" :is-loading="loading" :label="$options.i18n.activeToggle.label" + @change="updatePagerDutyIntegrationSettings" /> </gl-form-group> @@ -166,15 +161,6 @@ export default { {{ $options.i18n.webhookUrl.restKeyInfo }} </gl-modal> </gl-form-group> - <gl-button - ref="submitBtn" - :disabled="isSaveDisabled" - variant="success" - type="submit" - class="js-no-auto-disable" - > - {{ $options.i18n.saveBtnLabel }} - </gl-button> </form> </div> </template> |