Move Alert intergrations tab in Operations[RUN ALL RSPEC] [RUN AS-IF-FOSS]

app/assets/javascripts/incidents_settings/components/alerts_form.vue → 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

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"

app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue

 <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,7 +351,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <gl-tabs data-testid="alert-integration-settings">
+    <gl-tab :title="$options.i18n.settingsTabs.currentIntegrations">
       <gl-alert
         v-if="showSuccessfulCreateAlert"
         class="gl-mt-n2"
@@ -388,5 +393,9 @@ export default {
         @test-alert-payload="testAlertPayload"
         @save-and-test-alert-payload="saveAndTestAlertPayload"
       />
-  </div>
+    </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>

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';

app/assets/javascripts/alerts_settings/index.js

 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),

app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue

 <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

app/assets/javascripts/incidents_settings/constants.js

@@ -2,11 +2,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',
@@ -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 = {

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,

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),

doc/operations/incident_management/integrations.md

@@ -167,7 +167,7 @@ alert to confirm your integration works properly.
 
 1. Sign in as a user with Developer or greater [permissions](../../user/permissions.md).
 1. Navigate to **Settings > Operations** in your project.
-1. Click **Alert integrations** to expand the section.
+1. Click **Alerts** to expand the section.
 1. Click the **{settings}** settings icon on the right side of the integration in [the list](#integrations-list).
 1. Select the **Send test alert** tab to open it.
 1. Enter a test payload in the payload field (valid JSON is required).

doc/operations/incident_management/paging.md

@@ -28,8 +28,8 @@ members with the **Owner** or **Maintainer** roles have the option to receive
 a single email notification for new alerts.
 
 1. Navigate to **Settings > Operations**.
-1. Expand the **Incidents** section.
-1. In the **Alert Integration** tab, select the checkbox
+1. Expand the **Alerts** section.
+1. In the **Integration settings** tab, select the checkbox
    **Send a single email notification to Owners and Maintainers for new alerts**.
 1. Select **Save changes**.
 

doc/operations/metrics/alerts.md

@@ -100,7 +100,7 @@ Prometheus server to use the
 Alerts can be used to trigger actions, like opening an issue automatically
 (disabled by default since `13.1`). To configure the actions:
 
-1. Navigate to your project's **Settings > Operations > Incidents**.
+1. Navigate to your project's **Settings > Operations > Alerts**.
 1. Enable the option to create issues.
 1. Choose the [issue template](../../user/project/description_templates.md) to create the issue from.
 1. Optionally, select whether to send an email notification to the developers of the project.

ee/spec/helpers/ee/operations_helper_spec.rb

@@ -110,9 +110,7 @@ RSpec.describe OperationsHelper, :routing do
       create(
         :project_incident_management_setting,
         project: project,
-        issue_template_key: 'template-key',
-        pagerduty_active: true,
-        auto_close_incident: false
+        pagerduty_active: true
       )
     end
 
@@ -121,11 +119,6 @@ RSpec.describe OperationsHelper, :routing do
     it 'returns the correct set of data' do
       is_expected.to eq(
         operations_settings_endpoint: project_settings_operations_path(project),
-        templates: '[]',
-        create_issue: 'false',
-        issue_template_key: 'template-key',
-        send_email: 'false',
-        auto_close_incident: 'false',
         pagerduty_active: 'true',
         pagerduty_token: operations_settings.pagerduty_token,
         pagerduty_webhook_url: project_incidents_integrations_pagerduty_url(project, token: operations_settings.pagerduty_token),

locale/gitlab.pot

@@ -3018,12 +3018,18 @@ msgstr ""
 msgid "AlertSettings|Add new integration"
 msgstr ""
 
+msgid "AlertSettings|Alert settings"
+msgstr ""
+
 msgid "AlertSettings|Authorization key"
 msgstr ""
 
 msgid "AlertSettings|Configure details"
 msgstr ""
 
+msgid "AlertSettings|Current integrations"
+msgstr ""
+
 msgid "AlertSettings|Customize alert payload mapping (optional)"
 msgstr ""
 
@@ -3150,9 +3156,6 @@ msgstr ""
 msgid "AlertsIntegrations|Alerts will not be created through this integration"
 msgstr ""
 
-msgid "AlertsIntegrations|Current integrations"
-msgstr ""
-
 msgid "AlertsIntegrations|If you delete the %{integrationName} integration, alerts are no longer sent from this endpoint. This action cannot be undone."
 msgstr ""
 
@@ -17363,7 +17366,7 @@ msgstr ""
 msgid "Incident Management Limits"
 msgstr ""
 
-msgid "Incident template (optional)"
+msgid "Incident template (optional)."
 msgstr ""
 
 msgid "IncidentManagement|%{hours} hours, %{minutes} minutes remaining"
@@ -17453,9 +17456,6 @@ msgstr ""
 msgid "IncidentSettings|Activate \"time to SLA\" countdown timer"
 msgstr ""
 
-msgid "IncidentSettings|Alert integration"
-msgstr ""
-
 msgid "IncidentSettings|Fine-tune incident settings and set up integrations with external tools to help better manage incidents."
 msgstr ""
 

qa/qa.rb

@@ -339,7 +339,7 @@ module QA
           autoload :Prometheus, 'qa/page/project/settings/services/prometheus'
         end
         autoload :Operations, 'qa/page/project/settings/operations'
-        autoload :Incidents, 'qa/page/project/settings/incidents'
+        autoload :Alerts, 'qa/page/project/settings/alerts'
         autoload :Integrations, 'qa/page/project/settings/integrations'
       end
 

qa/qa/page/project/settings/incidents.rb → qa/qa/page/project/settings/alerts.rb

@@ -4,8 +4,8 @@ module QA
   module Page
     module Project
       module Settings
-        class Incidents < Page::Base
-          view 'app/assets/javascripts/incidents_settings/components/alerts_form.vue' do
+        class Alerts < Page::Base
+          view 'app/assets/javascripts/alerts_settings/components/alerts_form.vue' do
             element :create_issue_checkbox
             element :incident_templates_dropdown
             element :save_changes_button

qa/qa/page/project/settings/operations.rb

@@ -13,7 +13,7 @@ module QA
 
           def expand_incidents(&block)
             expand_content(:incidents_settings_content) do
-              Settings::Incidents.perform(&block)
+              Settings::Alerts.perform(&block)
             end
           end
         end

spec/features/projects/settings/monitor_settings_spec.rb

@@ -41,7 +41,7 @@ RSpec.describe 'Projects > Settings > For a forked project', :js do
         visit project_settings_operations_path(project)
 
         wait_for_requests
-        click_expand_incident_management_button
+        click_settings_tab
       end
 
       it 'renders form for incident management' do
@@ -60,22 +60,24 @@ RSpec.describe 'Projects > Settings > For a forked project', :js do
         click_on('bug')
 
         save_form
-        click_expand_incident_management_button
+        click_settings_tab
 
         expect(find_field(create_issue)).to be_checked
         expect(page).to have_selector(:id, 'alert-integration-settings-issue-template', text: 'bug')
+
+        click_settings_tab
         expect(find_field(send_email)).not_to be_checked
       end
 
-      def click_expand_incident_management_button
-        within '.qa-incident-management-settings' do
-          click_button('Expand')
+      def click_settings_tab
+        within '[data-testid="alert-integration-settings"]' do
+          click_link 'Alert settings'
         end
       end
 
       def save_form
-        page.within ".qa-incident-management-settings" do
-          click_on 'Save changes'
+        page.within '[data-testid="alert-integration-settings"]' do
+          click_button 'Save changes'
         end
       end
     end

spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap → spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap

@@ -34,16 +34,17 @@ exports[`Alert integration settings form default state should match the default
         for="alert-integration-settings-issue-template"
       >
         
-        Incident template (optional)
+        Incident template (optional).
         
         <gl-link-stub
           href="/help/user/project/description_templates#create-an-issue-template"
           target="_blank"
         >
-          <gl-icon-stub
-            name="question"
-            size="12"
-          />
+          <span
+            class="gl-font-weight-normal gl-pl-2"
+          >
+            Learn more.
+          </span>
         </gl-link-stub>
       </label>
        

spec/frontend/incidents_settings/components/alerts_form_spec.js → spec/frontend/alerts_settings/components/alerts_form_spec.js

 import { shallowMount } from '@vue/test-utils';
-import AlertsSettingsForm from '~/incidents_settings/components/alerts_form.vue';
+import AlertsSettingsForm from '~/alerts_settings/components/alerts_form.vue';
 
 describe('Alert integration settings form', () => {
   let wrapper;
@@ -25,7 +25,6 @@ describe('Alert integration settings form', () => {
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 

spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js

@@ -95,6 +95,10 @@ describe('AlertsSettingsWrapper', () => {
         },
         provide: {
           ...provide,
+          alertSettings: {
+            templates: [],
+          },
+          service: {},
         },
         mocks: {
           $apollo: {
@@ -129,12 +133,17 @@ describe('AlertsSettingsWrapper', () => {
     wrapper = mount(AlertsSettingsWrapper, {
       localVue,
       apolloProvider: fakeApollo,
+      provide: {
+        alertSettings: {
+          templates: [],
+        },
+        service: {},
+      },
     });
   }
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('template', () => {

spec/frontend/incidents_settings/components/__snapshots__/incidents_settings_tabs_spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`IncidentsSettingTabs should render the component 1`] = `
 <section
-  class="settings no-animate qa-incident-management-settings"
+  class="settings no-animate"
   data-qa-selector="incidents_settings_content"
   id="incident-management-settings"
 >
@@ -43,15 +43,6 @@ exports[`IncidentsSettingTabs should render the component 1`] = `
     >
       <!---->
        
-      <gl-tab-stub
-        title="Alert integration"
-        titlelinkclass=""
-      >
-        <alertssettingsform-stub
-          class="gl-pt-3"
-          data-testid="AlertsSettingsForm-tab"
-        />
-      </gl-tab-stub>
       <gl-tab-stub
         title="PagerDuty integration"
         titlelinkclass=""

spec/helpers/operations_helper_spec.rb

@@ -40,7 +40,14 @@ RSpec.describe OperationsHelper do
           'prometheus_url' => notify_project_prometheus_alerts_url(project, format: :json),
           'disabled' => 'false',
           'project_path' => project.full_path,
-          'multi_integrations' => 'false'
+          'multi_integrations' => 'false',
+          'templates' => '[]',
+          'create_issue' => 'false',
+          'issue_template_key' => '',
+          'send_email' => 'false',
+          'auto_close_incident' => 'true',
+          'operations_settings_endpoint' => project_settings_operations_path(project),
+          'pagerduty_reset_key_path' => reset_pagerduty_token_project_settings_operations_path(project)
         )
       end
     end
@@ -106,9 +113,7 @@ RSpec.describe OperationsHelper do
       create(
         :project_incident_management_setting,
         project: project,
-        issue_template_key: 'template-key',
-        pagerduty_active: true,
-        auto_close_incident: false
+        pagerduty_active: true
       )
     end
 
@@ -117,11 +122,6 @@ RSpec.describe OperationsHelper do
     it 'returns the correct set of data' do
       is_expected.to include(
         operations_settings_endpoint: project_settings_operations_path(project),
-        templates: '[]',
-        create_issue: 'false',
-        issue_template_key: 'template-key',
-        send_email: 'false',
-        auto_close_incident: 'false',
         pagerduty_active: 'true',
         pagerduty_token: operations_settings.pagerduty_token,
         pagerduty_webhook_url: project_incidents_integrations_pagerduty_url(project, token: operations_settings.pagerduty_token),