Add latest changes from gitlab-org/gitlab@master

9 files changed, 121 insertions, 103 deletions

diff --git a/app/assets/javascripts/incidents_settings/components/alerts_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_form.vue
index b22ec6add96..696e7f359d1 100644
--- a/app/assets/javascripts/incidents_settings/components/alerts_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_form.vue
@@ -3,7 +3,6 @@ import {
   GlButton,
   GlSprintf,
   GlLink,
-  GlIcon,
   GlFormGroup,
   GlFormCheckbox,
   GlDropdown,
@@ -22,7 +21,6 @@ export default {
     GlSprintf,
     GlLink,
     GlFormGroup,
-    GlIcon,
     GlFormCheckbox,
     GlDropdown,
     GlDropdownItem,
@@ -98,7 +96,7 @@ export default {
         <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" />
+            <span class="gl-font-weight-normal gl-pl-2">{{ $options.i18n.introLinkText }}</span>
           </gl-link>
         </label>
         <gl-dropdown
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
index 717d4cb01ab..f4cc0678c38 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -23,7 +23,6 @@ import getCurrentIntegrationQuery from '../graphql/queries/get_current_integrati
 export const i18n = {
   deleteIntegration: s__('AlertSettings|Delete integration'),
   editIntegration: s__('AlertSettings|Edit integration'),
-  title: s__('AlertsIntegrations|Current integrations'),
   emptyState: s__('AlertsIntegrations|No integrations have been added yet.'),
   status: {
     enabled: {
@@ -141,7 +140,6 @@ export default {
 
 <template>
   <div class="incident-management-list">
-    <h5 class="gl-font-lg gl-mt-5">{{ $options.i18n.title }}</h5>
     <gl-table
       class="integration-list"
       :items="integrations"
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index 2c0ef4dbe0f..902bad780ad 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlAlert } from '@gitlab/ui';
+import { GlButton, GlAlert, GlTabs, GlTab } from '@gitlab/ui';
 import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql';
 import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql';
 import createFlash, { FLASH_TYPES } from '~/flash';
@@ -30,6 +30,7 @@ import {
   INTEGRATION_INACTIVE_PAYLOAD_TEST_ERROR,
   DEFAULT_ERROR,
 } from '../utils/error_messages';
+import AlertsForm from './alerts_form.vue';
 import IntegrationsList from './alerts_integrations_list.vue';
 import AlertSettingsForm from './alerts_settings_form.vue';
 
@@ -38,9 +39,12 @@ export default {
   i18n,
   components: {
     IntegrationsList,
+    AlertsForm,
     AlertSettingsForm,
     GlAlert,
     GlButton,
+    GlTabs,
+    GlTab,
   },
   inject: {
     projectPath: {
@@ -347,46 +351,51 @@ export default {
 </script>
 
 <template>
-  <div>
-    <gl-alert
-      v-if="showSuccessfulCreateAlert"
-      class="gl-mt-n2"
-      :primary-button-text="$options.i18n.integrationCreated.btnCaption"
-      :title="$options.i18n.integrationCreated.title"
-      @primaryAction="viewCreatedIntegration"
-      @dismiss="showSuccessfulCreateAlert = false"
-    >
-      {{ $options.i18n.integrationCreated.successMsg }}
-    </gl-alert>
+  <gl-tabs data-testid="alert-integration-settings">
+    <gl-tab :title="$options.i18n.settingsTabs.currentIntegrations">
+      <gl-alert
+        v-if="showSuccessfulCreateAlert"
+        class="gl-mt-n2"
+        :primary-button-text="$options.i18n.integrationCreated.btnCaption"
+        :title="$options.i18n.integrationCreated.title"
+        @primaryAction="viewCreatedIntegration"
+        @dismiss="showSuccessfulCreateAlert = false"
+      >
+        {{ $options.i18n.integrationCreated.successMsg }}
+      </gl-alert>
 
-    <integrations-list
-      :integrations="integrations"
-      :loading="loading"
-      @edit-integration="editIntegration"
-      @delete-integration="deleteIntegration"
-    />
-    <gl-button
-      v-if="canAddIntegration && !formVisible"
-      category="secondary"
-      variant="confirm"
-      data-testid="add-integration-btn"
-      class="gl-mt-3"
-      @click="setFormVisibility(true)"
-    >
-      {{ $options.i18n.addNewIntegration }}
-    </gl-button>
-    <alert-settings-form
-      v-if="formVisible"
-      :loading="isUpdating"
-      :can-add-integration="canAddIntegration"
-      :alert-fields="alertFields"
-      :tab-index="tabIndex"
-      @create-new-integration="createNewIntegration"
-      @update-integration="updateIntegration"
-      @reset-token="resetToken"
-      @clear-current-integration="clearCurrentIntegration"
-      @test-alert-payload="testAlertPayload"
-      @save-and-test-alert-payload="saveAndTestAlertPayload"
-    />
-  </div>
+      <integrations-list
+        :integrations="integrations"
+        :loading="loading"
+        @edit-integration="editIntegration"
+        @delete-integration="deleteIntegration"
+      />
+      <gl-button
+        v-if="canAddIntegration && !formVisible"
+        category="secondary"
+        variant="confirm"
+        data-testid="add-integration-btn"
+        class="gl-mt-3"
+        @click="setFormVisibility(true)"
+      >
+        {{ $options.i18n.addNewIntegration }}
+      </gl-button>
+      <alert-settings-form
+        v-if="formVisible"
+        :loading="isUpdating"
+        :can-add-integration="canAddIntegration"
+        :alert-fields="alertFields"
+        :tab-index="tabIndex"
+        @create-new-integration="createNewIntegration"
+        @update-integration="updateIntegration"
+        @reset-token="resetToken"
+        @clear-current-integration="clearCurrentIntegration"
+        @test-alert-payload="testAlertPayload"
+        @save-and-test-alert-payload="saveAndTestAlertPayload"
+      />
+    </gl-tab>
+    <gl-tab :title="$options.i18n.settingsTabs.integrationSettings">
+      <alerts-form class="gl-pt-3" data-testid="alert-integration-settings-tab" />
+    </gl-tab>
+  </gl-tabs>
 </template>
diff --git a/app/assets/javascripts/alerts_settings/constants.js b/app/assets/javascripts/alerts_settings/constants.js
index 4a180ed2bc0..b93119d6e6a 100644
--- a/app/assets/javascripts/alerts_settings/constants.js
+++ b/app/assets/javascripts/alerts_settings/constants.js
@@ -93,6 +93,10 @@ export const i18n = {
   integrationRemoved: s__('AlertsIntegrations|The integration is deleted.'),
   alertSent: s__('AlertsIntegrations|The test alert should now be visible in your alerts list.'),
   addNewIntegration: s__('AlertSettings|Add new integration'),
+  settingsTabs: {
+    currentIntegrations: s__('AlertSettings|Current integrations'),
+    integrationSettings: s__('AlertSettings|Alert settings'),
+  },
 };
 
 export const integrationSteps = {
@@ -156,3 +160,31 @@ export const tabIndices = {
 };
 
 export const testAlertModalId = 'confirmSendTestAlert';
+
+/* Alerts integration settings constants */
+
+export const I18N_ALERT_SETTINGS_FORM = {
+  saveBtnLabel: __('Save changes'),
+  introText: __('Action to take when receiving an alert. %{docsLink}'),
+  introLinkText: __('Learn more.'),
+  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';
diff --git a/app/assets/javascripts/alerts_settings/index.js b/app/assets/javascripts/alerts_settings/index.js
index 953a867b2b7..19cdf1d7a19 100644
--- a/app/assets/javascripts/alerts_settings/index.js
+++ b/app/assets/javascripts/alerts_settings/index.js
@@ -1,5 +1,6 @@
 import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
+import IncidentsSettingsService from '~/incidents_settings/incidents_settings_service';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import AlertSettingsWrapper from './components/alerts_settings_wrapper.vue';
 import apolloProvider from './graphql';
@@ -19,14 +20,37 @@ export default (el) => {
     return null;
   }
 
-  const { alertsUsageUrl, projectPath, multiIntegrations, alertFields } = el.dataset;
+  const {
+    alertsUsageUrl,
+    projectPath,
+    multiIntegrations,
+    alertFields,
+    templates,
+    createIssue,
+    issueTemplateKey,
+    sendEmail,
+    autoCloseIncident,
+    pagerdutyResetKeyPath,
+    operationsSettingsEndpoint,
+  } = el.dataset;
 
+  const service = new IncidentsSettingsService(operationsSettingsEndpoint, pagerdutyResetKeyPath);
   return new Vue({
     el,
     components: {
       AlertSettingsWrapper,
     },
     provide: {
+      service,
+      alertSettings: {
+        templates: JSON.parse(templates),
+        createIssue: parseBoolean(createIssue),
+        issueTemplateKey,
+        sendEmail: parseBoolean(sendEmail),
+        autoCloseIncident: parseBoolean(autoCloseIncident),
+        pagerdutyResetKeyPath,
+        operationsSettingsEndpoint,
+      },
       alertsUsageUrl,
       projectPath,
       multiIntegrations: parseBoolean(multiIntegrations),
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 199a887dac9..f9d24c96c43 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,7 +8,6 @@ export default {
     GlButton,
     GlTabs,
     GlTab,
-    AlertsSettingsForm,
     PagerDutySettingsForm,
     ServiceLevelAgreementForm: () =>
       import('ee_component/incidents_settings/components/service_level_agreement_form.vue'),
@@ -23,7 +21,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
diff --git a/app/assets/javascripts/incidents_settings/constants.js b/app/assets/javascripts/incidents_settings/constants.js
index d72e2aedee9..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,
@@ -27,34 +22,6 @@ export const I18N_INTEGRATION_TABS = {
   ),
 };
 
-/* 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/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,
diff --git a/app/helpers/operations_helper.rb b/app/helpers/operations_helper.rb
index df07baa2d03..fb410c46128 100644
--- a/app/helpers/operations_helper.rb
+++ b/app/helpers/operations_helper.rb
@@ -10,6 +10,9 @@ module OperationsHelper
   end
 
   def alerts_settings_data(disabled: false)
+    setting = project_incident_management_setting
+    templates = setting.available_issue_templates.map { |t| { key: t.key, name: t.name } }
+
     {
       'prometheus_activated' => prometheus_service.manual_configuration?.to_s,
       'prometheus_form_path' => scoped_integration_path(prometheus_service),
@@ -21,21 +24,22 @@ module OperationsHelper
       'alerts_usage_url' => project_alert_management_index_path(@project),
       'disabled' => disabled.to_s,
       'project_path' => @project.full_path,
-      'multi_integrations' => 'false'
+      'multi_integrations' => 'false',
+      'templates' => templates.to_json,
+      'create_issue' => setting.create_issue.to_s,
+      'issue_template_key' => setting.issue_template_key.to_s,
+      'send_email' => setting.send_email.to_s,
+      'auto_close_incident' => setting.auto_close_incident.to_s,
+      'pagerduty_reset_key_path' => reset_pagerduty_token_project_settings_operations_path(@project),
+      'operations_settings_endpoint' => project_settings_operations_path(@project)
     }
   end
 
   def operations_settings_data
     setting = project_incident_management_setting
-    templates = setting.available_issue_templates.map { |t| { key: t.key, name: t.name } }
 
     {
       operations_settings_endpoint: project_settings_operations_path(@project),
-      templates: templates.to_json,
-      create_issue: setting.create_issue.to_s,
-      issue_template_key: setting.issue_template_key.to_s,
-      send_email: setting.send_email.to_s,
-      auto_close_incident: setting.auto_close_incident.to_s,
       pagerduty_active: setting.pagerduty_active.to_s,
       pagerduty_token: setting.pagerduty_token.to_s,
       pagerduty_webhook_url: project_incidents_integrations_pagerduty_url(@project, token: setting.pagerduty_token),