Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

6 files changed, 18 insertions, 217 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>
diff --git a/app/assets/javascripts/incidents_settings/constants.js b/app/assets/javascripts/incidents_settings/constants.js
index d479838b491..54e4bab6c10 100644
--- a/app/assets/javascripts/incidents_settings/constants.js
+++ b/app/assets/javascripts/incidents_settings/constants.js
@@ -3,11 +3,6 @@ import { __, s__ } from '~/locale';
 /* Integration tabs constants */
 export const INTEGRATION_TABS_CONFIG = [
   {
-    title: s__('IncidentSettings|Alert integration'),
-    component: 'AlertsSettingsForm',
-    active: true,
-  },
-  {
     title: s__('IncidentSettings|PagerDuty integration'),
     component: 'PagerDutySettingsForm',
     active: true,
@@ -23,38 +18,10 @@ export const I18N_INTEGRATION_TABS = {
   headerText: s__('IncidentSettings|Incidents'),
   expandBtnLabel: __('Expand'),
   subHeaderText: s__(
-    'IncidentSettings|Set up integrations with external tools to help better manage incidents.',
+    'IncidentSettings|Fine-tune incident settings and set up integrations with external tools to help better manage incidents.',
   ),
 };
 
-/* Alerts integration settings constants */
-
-export const I18N_ALERT_SETTINGS_FORM = {
-  saveBtnLabel: __('Save changes'),
-  introText: __('Action to take when receiving an alert. %{docsLink}'),
-  introLinkText: __('More information.'),
-  createIncident: {
-    label: __('Create an incident. Incidents are created for each alert triggered.'),
-  },
-  incidentTemplate: {
-    label: __('Incident template (optional)'),
-  },
-  sendEmail: {
-    label: __('Send a single email notification to Owners and Maintainers for new alerts.'),
-  },
-  autoCloseIncidents: {
-    label: __(
-      'Automatically close associated incident when a recovery alert notification resolves an alert',
-    ),
-  },
-};
-
-export const NO_ISSUE_TEMPLATE_SELECTED = { key: '', name: __('No template selected') };
-export const TAKING_INCIDENT_ACTION_DOCS_LINK =
-  '/help/operations/metrics/alerts#trigger-actions-from-alerts';
-export const ISSUE_TEMPLATES_DOCS_LINK =
-  '/help/user/project/description_templates#create-an-issue-template';
-
 /* PagerDuty integration settings constants */
 
 export const I18N_PAGERDUTY_SETTINGS_FORM = {
diff --git a/app/assets/javascripts/incidents_settings/incidents_settings_service.js b/app/assets/javascripts/incidents_settings/incidents_settings_service.js
index 82b94c08381..83fd29a058e 100644
--- a/app/assets/javascripts/incidents_settings/incidents_settings_service.js
+++ b/app/assets/javascripts/incidents_settings/incidents_settings_service.js
@@ -1,4 +1,4 @@
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import { ERROR_MSG } from './constants';
@@ -22,7 +22,10 @@ export default class IncidentsSettingsService {
       .catch(({ response }) => {
         const message = response?.data?.message || '';
 
-        createFlash(`${ERROR_MSG} ${message}`, 'alert');
+        createFlash({
+          message: `${ERROR_MSG} ${message}`,
+          type: 'alert',
+        });
       });
   }
 
diff --git a/app/assets/javascripts/incidents_settings/index.js b/app/assets/javascripts/incidents_settings/index.js
index e9ba4294519..62c48a40026 100644
--- a/app/assets/javascripts/incidents_settings/index.js
+++ b/app/assets/javascripts/incidents_settings/index.js
@@ -13,14 +13,9 @@ export default () => {
   const {
     dataset: {
       operationsSettingsEndpoint,
-      templates,
-      createIssue,
-      issueTemplateKey,
-      sendEmail,
       pagerdutyActive,
       pagerdutyWebhookUrl,
       pagerdutyResetKeyPath,
-      autoCloseIncident,
       slaActive,
       slaMinutes,
       slaFeatureAvailable,
@@ -32,13 +27,6 @@ export default () => {
     el,
     provide: {
       service,
-      alertSettings: {
-        templates: JSON.parse(templates),
-        createIssue: parseBoolean(createIssue),
-        issueTemplateKey,
-        sendEmail: parseBoolean(sendEmail),
-        autoCloseIncident: parseBoolean(autoCloseIncident),
-      },
       pagerDutySettings: {
         active: parseBoolean(pagerdutyActive),
         webhookUrl: pagerdutyWebhookUrl,