Operations Settings forms cleanup

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

@@ -155,7 +155,7 @@ export default {
         <span v-if="item.active" data-testid="integration-activated-status">
           <gl-icon
             v-gl-tooltip
-            name="check-circle-filled"
+            name="check"
             :size="16"
             class="gl-text-green-500 gl-hover-cursor-pointer gl-mr-3"
             :title="$options.i18n.status.enabled.tooltip"

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

@@ -167,7 +167,7 @@ export default {
           if (testAfterSubmit) {
             this.viewIntegration(integration, tabIndices.sendTestAlert);
           } else {
-            this.clearCurrentIntegration(type);
+            this.clearCurrentIntegration({ type });
           }
 
           createFlash({

app/assets/javascripts/alerts_settings/graphql.js

+import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 import produce from 'immer';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import introspectionQueryResultData from './graphql/fragmentTypes.json';
 import getCurrentIntegrationQuery from './graphql/queries/get_current_integration.query.graphql';
 
+const fragmentMatcher = new IntrospectionFragmentMatcher({
+  introspectionQueryResultData,
+});
+
 Vue.use(VueApollo);
 
 const resolvers = {
@@ -50,7 +56,9 @@ const resolvers = {
 
 export default new VueApollo({
   defaultClient: createDefaultClient(resolvers, {
-    cacheConfig: {},
+    cacheConfig: {
+      fragmentMatcher,
+    },
     assumeImmutableResults: true,
   }),
 });

app/assets/javascripts/alerts_settings/graphql/fragmentTypes.json

+{"__schema":{"types":[{"kind":"UNION","name":"AlertManagementIntegration","possibleTypes":[{"name":"AlertManagementHttpIntegration"},{"name":"AlertManagementPrometheusIntegration"}]}]}}

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox, GlIcon, GlLink } from '@gitlab/ui';
+import {
+  GlButton,
+  GlFormGroup,
+  GlFormInput,
+  GlFormCheckbox,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+} from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
@@ -11,6 +19,7 @@ export default {
     GlFormInput,
     GlIcon,
     GlLink,
+    GlSprintf,
   },
   data() {
     return {
@@ -78,13 +87,11 @@ export default {
     </div>
     <div class="settings-content">
       <form>
-        <gl-form-checkbox
-          id="grafana-integration-enabled"
-          v-model="integrationEnabled"
-          class="mb-4"
-        >
-          {{ s__('GrafanaIntegration|Active') }}
-        </gl-form-checkbox>
+        <gl-form-group :label="__('Enable authentication')" label-for="grafana-integration-enabled">
+          <gl-form-checkbox id="grafana-integration-enabled" v-model="integrationEnabled">
+            {{ s__('GrafanaIntegration|Active') }}
+          </gl-form-checkbox>
+        </gl-form-group>
         <gl-form-group
           :label="s__('GrafanaIntegration|Grafana URL')"
           label-for="grafana-url"
@@ -95,18 +102,27 @@ export default {
         <gl-form-group :label="s__('GrafanaIntegration|API token')" label-for="grafana-token">
           <gl-form-input id="grafana-token" v-model="localGrafanaToken" />
           <p class="form-text text-muted">
-            {{ s__('GrafanaIntegration|Enter the Grafana API token.') }}
-            <a
-              href="https://grafana.com/docs/http_api/auth/#create-api-token"
-              target="_blank"
-              rel="noopener noreferrer"
+            <gl-sprintf
+              :message="
+                s__('GrafanaIntegration|Enter the %{docLinkStart}Grafana API token%{docLinkEnd}.')
+              "
             >
-              {{ __('More information.') }}
-              <gl-icon name="external-link" class="vertical-align-middle" />
-            </a>
+              <template #docLink="{ content }">
+                <gl-link
+                  href="https://grafana.com/docs/http_api/auth/#create-api-token"
+                  target="_blank"
+                  >{{ content }} <gl-icon name="external-link" class="gl-vertical-align-middle"
+                /></gl-link>
+              </template>
+            </gl-sprintf>
           </p>
         </gl-form-group>
-        <gl-button variant="success" category="primary" @click="updateGrafanaIntegration">
+        <gl-button
+          variant="confirm"
+          category="primary"
+          data-testid="save-grafana-settings-button"
+          @click="updateGrafanaIntegration"
+        >
           {{ __('Save changes') }}
         </gl-button>
       </form>

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

@@ -134,7 +134,7 @@ export default {
         ref="submitBtn"
         data-qa-selector="save_changes_button"
         :disabled="loading"
-        variant="success"
+        variant="confirm"
         type="submit"
         class="js-no-auto-disable"
       >

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>

app/assets/javascripts/incidents_settings/constants.js

@@ -23,7 +23,7 @@ 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.',
   ),
 };
 

app/assets/javascripts/operation_settings/components/metrics_settings.vue

@@ -34,19 +34,19 @@ export default {
       <h4
         class="js-section-header settings-title js-settings-toggle js-settings-toggle-trigger-only"
       >
-        {{ s__('MetricsSettings|Metrics dashboard') }}
+        {{ s__('MetricsSettings|Metrics') }}
       </h4>
       <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
-        {{ s__('MetricsSettings|Manage Metrics Dashboard settings.') }}
-        <gl-link :href="helpPage">{{ __('Learn more') }}</gl-link>
+        {{ s__('MetricsSettings|Manage metrics dashboard settings.') }}
+        <gl-link :href="helpPage">{{ __('Learn more.') }}</gl-link>
       </p>
     </div>
     <div class="settings-content">
       <form>
         <dashboard-timezone />
         <external-dashboard />
-        <gl-button variant="success" category="primary" @click="saveChanges">
+        <gl-button variant="confirm" category="primary" @click="saveChanges">
           {{ __('Save Changes') }}
         </gl-button>
       </form>

app/views/projects/settings/operations/_alert_management.html.haml

@@ -6,7 +6,7 @@
 %section.settings.no-animate#js-alert-management-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _('Alert integrations')
+      = _('Alerts')
     %button.gl-button.btn.btn-default.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p

app/views/projects/settings/operations/_tracing.html.haml

 - setting = tracing_setting
-- has_jaeger_url = setting.external_url.present?
 
 %section.settings.border-0.no-animate
-  .settings-header{ :class => "border-top" }
+  .settings-header{ :class => 'border-top' }
     %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
-      = _("Jaeger tracing")
+      = _('Tracing')
     %button.btn.btn-default.gl-button.js-settings-toggle{ type: 'button' }
       = _('Expand')
     %p
-      - if has_jaeger_url
-        - tracing_link = link_to sanitize(setting.external_url, scrubber: Rails::Html::TextOnlyScrubber.new), target: "_blank", rel: 'noopener noreferrer' do
-          %span
-            = _('Tracing')
-            = sprite_icon('external-link', css_class: 'ml-1 vertical-align-middle')
-      - else
-        - tracing_link = link_to project_tracing_path(@project) do
-          %span
-            = _('Tracing')
-      = _("To open Jaeger from GitLab to view tracing from the %{link} page, add a URL to your Jaeger server.").html_safe % { link: tracing_link }
+      = _('Embed an image of your existing Jaeger server in GitLab.')
       = link_to _('Learn more.'), help_page_path('operations/tracing'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
     = form_for @project, url: project_settings_operations_path(@project), method: :patch do |f|
@@ -27,8 +17,8 @@
           = form.label :external_url, _('Jaeger URL'), class: 'label-bold'
           = form.url_field :external_url, class: 'form-control gl-form-input', placeholder: 'https://jaeger.example.com'
           %p.form-text.text-muted
-            - jaeger_help_url = "https://www.jaegertracing.io/docs/getting-started/"
+            - jaeger_help_url = 'https://www.jaegertracing.io/docs/getting-started/'
             - link_start_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jaeger_help_url }
-            - link_end_tag = "#{sprite_icon('external-link', css_class: 'ml-1 vertical-align-middle')}</a>".html_safe
-            = _("Learn more about %{link_start_tag}Jaeger configuration%{link_end_tag}.").html_safe % { link_start_tag: link_start_tag, link_end_tag: link_end_tag }
+            - link_end_tag = "#{sprite_icon('external-link', css_class: 'gl-ml-2 gl-vertical-align-middle')}</a>".html_safe
+            = _('Learn more about %{link_start_tag}Jaeger configuration%{link_end_tag}.').html_safe % { link_start_tag: link_start_tag, link_end_tag: link_end_tag }
       = f.submit _('Save changes'), class: 'gl-button btn btn-confirm'

app/views/projects/settings/operations/show.html.haml

@@ -3,11 +3,11 @@
 - page_title title
 - breadcrumb_title title
 
+= render 'projects/settings/operations/metrics_dashboard'
+= render 'projects/settings/operations/tracing'
+= render 'projects/settings/operations/error_tracking'
 = render 'projects/settings/operations/alert_management'
 = render 'projects/settings/operations/incidents'
-= render 'projects/settings/operations/error_tracking'
-= render 'projects/settings/operations/prometheus', service: prometheus_service if Feature.enabled?(:settings_operations_prometheus_service)
-= render 'projects/settings/operations/metrics_dashboard'
 = render 'projects/settings/operations/grafana_integration'
-= render 'projects/settings/operations/tracing'
 = render_if_exists 'projects/settings/operations/status_page'
+= render 'projects/settings/operations/prometheus', service: prometheus_service if Feature.enabled?(:settings_operations_prometheus_service)

doc/operations/incident_management/integrations.md

@@ -20,7 +20,7 @@ to use this endpoint.
 
 With Maintainer or higher [permissions](../../user/permissions.md),
 you can view the list of configured alerts integrations by navigating to **Settings > Operations**
-in your project's sidebar menu, and expanding the **Alert integrations** section. The list displays
+in your project's sidebar menu, and expanding the **Alerts** section. The list displays
 the integration name, type, and status (enabled or disabled):
 
 ![Current Integrations](img/integrations_list_v13_5.png)
@@ -39,7 +39,7 @@ receive alert payloads in JSON format. You can always
 1. Sign in to GitLab as a user with maintainer [permissions](../../user/permissions.md)
    for a project.
 1. Navigate to **Settings > Operations** in your project.
-1. Expand the **Alert integrations** section, and in the **Select integration type** dropdown menu,
+1. Expand the **Alerts** section, and in the **Select integration type** dropdown menu,
    select **HTTP Endpoint**.
 1. Toggle the **Active** alert setting. The URL and Authorization Key for the webhook configuration
    are available in the **View credentials** tab after you save the integration. You must also input
@@ -56,7 +56,7 @@ and you can [customize the payload](#customize-the-alert-payload-outside-of-gitl
 1. Sign in to GitLab as a user with maintainer [permissions](../../user/permissions.md)
    for a project.
 1. Navigate to **Settings > Operations** in your project.
-1. Expand the **Alert integrations** section.
+1. Expand the **Alerts** section.
 1. For each endpoint you want to create:
 
    1. Click the **Add new integration** button.

ee/app/assets/javascripts/incidents_settings/components/service_level_agreement_form.vue

@@ -148,7 +148,7 @@ export default {
           {{ $options.i18n.validFeedback }}
         </template>
       </gl-form-group>
-      <gl-button variant="success" type="submit" :disabled="disableSubmit" :loading="loading">
+      <gl-button variant="confirm" type="submit" :disabled="disableSubmit" :loading="loading">
         {{ __('Save changes') }}
       </gl-button>
     </gl-form>

ee/app/assets/javascripts/status_page_settings/components/settings_form.vue

@@ -37,7 +37,7 @@ export default {
     activeLabel: s__('StatusPage|Active'),
     url: {
       label: s__('StatusPage|Status page URL'),
-      linkText: s__('StatusPage|Status page frontend documentation'),
+      linkText: __('Configuration help'),
     },
     bucket: {
       label: s__('StatusPage|S3 Bucket name'),
@@ -67,7 +67,9 @@ export default {
       { key: 'awsSecretKey', updateFn: 'setStatusPageSecretAccessKey' },
     ]),
     statusPageHelpUrl() {
-      return helpPagePath('operations/incident_management/status_page');
+      return helpPagePath('/operations/incident_management/status_page', {
+        anchor: 'configure-gitlab-with-cloud-provider-information',
+      });
     },
   },
   methods: {
@@ -190,7 +192,7 @@ export default {
         <gl-button
           ref="submitBtn"
           :disabled="loading"
-          variant="success"
+          variant="confirm"
           category="primary"
           type="submit"
           class="js-no-auto-disable"

ee/changelogs/unreleased/208330-operations-clean-up.yml

+---
+title: Update Operations settings forms to be UX consistent
+merge_request: 62034
+author:
+type: changed

ee/spec/frontend/incidents_settings/components/__snapshots__/service_level_agreement_form_spec.js.snap

@@ -67,7 +67,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
       icon=""
       size="medium"
       type="submit"
-      variant="success"
+      variant="confirm"
     >
       
       Save changes

ee/spec/frontend/status_page_settings/__snapshots__/settings_form_spec.js.snap

@@ -71,11 +71,11 @@ exports[`Status Page settings form default state should match the default snapsh
           class="form-text text-muted"
         >
           <gl-link-stub
-            href="/help/operations/incident_management/status_page"
+            href="/help/operations/incident_management/status_page#configure-gitlab-with-cloud-provider-information"
             target="_blank"
           >
             
-            Status page frontend documentation
+            Configuration help
           
           </gl-link-stub>
         </p>
@@ -153,7 +153,7 @@ exports[`Status Page settings form default state should match the default snapsh
         icon=""
         size="medium"
         type="submit"
-        variant="success"
+        variant="confirm"
       >
         
         Save changes

locale/gitlab.pot

@@ -2859,9 +2859,6 @@ msgid_plural "Alerts"
 msgstr[0] ""
 msgstr[1] ""
 
-msgid "Alert integrations"
-msgstr ""
-
 msgid "AlertManagement|Acknowledged"
 msgstr ""
 
@@ -8424,6 +8421,9 @@ msgstr ""
 msgid "Configuration"
 msgstr ""
 
+msgid "Configuration help"
+msgstr ""
+
 msgid "Configure GitLab runners to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}"
 msgstr ""
 
@@ -12130,6 +12130,9 @@ msgstr ""
 msgid "Embed"
 msgstr ""
 
+msgid "Embed an image of your existing Jaeger server in GitLab."
+msgstr ""
+
 msgid "Empty file"
 msgstr ""
 
@@ -12214,6 +12217,9 @@ msgstr ""
 msgid "Enable authenticated API request rate limit"
 msgstr ""
 
+msgid "Enable authentication"
+msgstr ""
+
 msgid "Enable automatic repository housekeeping (git repack, git gc)"
 msgstr ""
 
@@ -15512,7 +15518,7 @@ msgstr ""
 msgid "GrafanaIntegration|Active"
 msgstr ""
 
-msgid "GrafanaIntegration|Enter the Grafana API token."
+msgid "GrafanaIntegration|Enter the %{docLinkStart}Grafana API token%{docLinkEnd}."
 msgstr ""
 
 msgid "GrafanaIntegration|Enter the base URL of the Grafana instance."
@@ -17385,6 +17391,9 @@ 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 ""
+
 msgid "IncidentSettings|Grafana integration"
 msgstr ""
 
@@ -17400,9 +17409,6 @@ msgstr ""
 msgid "IncidentSettings|PagerDuty integration"
 msgstr ""
 
-msgid "IncidentSettings|Set up integrations with external tools to help better manage incidents."
-msgstr ""
-
 msgid "IncidentSettings|Time limit"
 msgstr ""
 
@@ -18563,9 +18569,6 @@ msgstr ""
 msgid "Jaeger URL"
 msgstr ""
 
-msgid "Jaeger tracing"
-msgstr ""
-
 msgid "Jan"
 msgstr ""
 
@@ -20910,10 +20913,10 @@ msgstr ""
 msgid "MetricsSettings|External dashboard URL"
 msgstr ""
 
-msgid "MetricsSettings|Manage Metrics Dashboard settings."
+msgid "MetricsSettings|Manage metrics dashboard settings."
 msgstr ""
 
-msgid "MetricsSettings|Metrics dashboard"
+msgid "MetricsSettings|Metrics"
 msgstr ""
 
 msgid "MetricsSettings|UTC (Coordinated Universal Time)"
@@ -31129,9 +31132,6 @@ msgstr ""
 msgid "StatusPage|Status page URL"
 msgstr ""
 
-msgid "StatusPage|Status page frontend documentation"
-msgstr ""
-
 msgid "StatusPage|To publish incidents to an external status page, GitLab stores a JSON file in your Amazon S3 account at a location that your external status page service can access. Make sure to also set up %{docsLink}"
 msgstr ""
 
@@ -34052,9 +34052,6 @@ msgstr ""
 msgid "To only use CI/CD features for an external repository, choose %{strong_open}CI/CD for external repo%{strong_close}."
 msgstr ""
 
-msgid "To open Jaeger from GitLab to view tracing from the %{link} page, add a URL to your Jaeger server."
-msgstr ""
-
 msgid "To pass variables to the triggered pipeline, add %{code_start}variables[VARIABLE]=VALUE%{code_end} to the API request."
 msgstr ""
 

spec/features/alerts_settings/user_views_alerts_settings_spec.rb

@@ -25,7 +25,7 @@ RSpec.describe 'Alert integrations settings form', :js do
 
       it 'shows the alerts setting form title' do
         page.within('#js-alert-management-settings') do
-          expect(find('h4')).to have_content('Alert integrations')
+          expect(find('h4')).to have_content('Alerts')
         end
       end
 

spec/features/projects/settings/user_searches_in_settings_spec.rb

@@ -63,7 +63,7 @@ RSpec.describe 'User searches project settings', :js do
       visit project_settings_operations_path(project)
     end
 
-    it_behaves_like 'can search settings', 'Alert integrations', 'Error tracking'
+    it_behaves_like 'can search settings', 'Alerts', 'Error tracking'
   end
 
   context 'in Pages page' do

spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js

@@ -80,7 +80,7 @@ describe('AlertIntegrationsList', () => {
       const cell = finsStatusCell().at(0);
       const activatedIcon = cell.find(GlIcon);
       expect(cell.text()).toBe(i18n.status.enabled.name);
-      expect(activatedIcon.attributes('name')).toBe('check-circle-filled');
+      expect(activatedIcon.attributes('name')).toBe('check');
       expect(activatedIcon.attributes('title')).toBe(i18n.status.enabled.tooltip);
     });
 

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -43,14 +43,18 @@ exports[`grafana integration component default state to match the default snapsh
     class="settings-content"
   >
     <form>
-      <gl-form-checkbox-stub
-        class="mb-4"
-        id="grafana-integration-enabled"
+      <gl-form-group-stub
+        label="Enable authentication"
+        label-for="grafana-integration-enabled"
       >
+        <gl-form-checkbox-stub
+          id="grafana-integration-enabled"
+        >
+          
+          Active
         
-        Active
-      
-      </gl-form-checkbox-stub>
+        </gl-form-checkbox-stub>
+      </gl-form-group-stub>
        
       <gl-form-group-stub
         description="Enter the base URL of the Grafana instance."
@@ -76,32 +80,19 @@ exports[`grafana integration component default state to match the default snapsh
         <p
           class="form-text text-muted"
         >
-          
-          Enter the Grafana API token.
-          
-          <a
-            href="https://grafana.com/docs/http_api/auth/#create-api-token"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            
-            More information.
-            
-            <gl-icon-stub
-              class="vertical-align-middle"
-              name="external-link"
-              size="16"
-            />
-          </a>
+          <gl-sprintf-stub
+            message="Enter the %{docLinkStart}Grafana API token%{docLinkEnd}."
+          />
         </p>
       </gl-form-group-stub>
        
       <gl-button-stub
         buttontextclasses=""
         category="primary"
+        data-testid="save-grafana-settings-button"
         icon=""
         size="medium"
-        variant="success"
+        variant="confirm"
       >
         
         Save changes

spec/frontend/grafana_integration/components/grafana_integration_spec.js

 import { GlButton } from '@gitlab/ui';
-import { mount, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
 import { createStore } from '~/grafana_integration/store';
@@ -51,8 +52,7 @@ describe('grafana integration component', () => {
     it('renders as an expand button by default', () => {
       wrapper = shallowMount(GrafanaIntegration, { store });
 
-      const button = wrapper.find(GlButton);
-
+      const button = wrapper.findComponent(GlButton);
       expect(button.text()).toBe('Expand');
     });
   });
@@ -70,6 +70,7 @@ describe('grafana integration component', () => {
   describe('form', () => {
     beforeEach(() => {
       jest.spyOn(axios, 'patch').mockImplementation();
+      wrapper = mountExtended(GrafanaIntegration, { store });
     });
 
     afterEach(() => {
@@ -77,7 +78,7 @@ describe('grafana integration component', () => {
     });
 
     describe('submit button', () => {
-      const findSubmitButton = () => wrapper.find('.settings-content form').find(GlButton);
+      const findSubmitButton = () => wrapper.findByTestId('save-grafana-settings-button');
 
       const endpointRequest = [
         operationsSettingsEndpoint,
@@ -93,9 +94,7 @@ describe('grafana integration component', () => {
       ];
 
       it('submits form on click', () => {
-        wrapper = mount(GrafanaIntegration, { store });
         axios.patch.mockResolvedValue();
-
         findSubmitButton(wrapper).trigger('click');
 
         expect(axios.patch).toHaveBeenCalledWith(...endpointRequest);
@@ -104,7 +103,6 @@ describe('grafana integration component', () => {
 
       it('creates flash banner on error', () => {
         const message = 'mockErrorMessage';
-        wrapper = mount(GrafanaIntegration, { store });
         axios.patch.mockRejectedValue({ response: { data: { message } } });
 
         findSubmitButton().trigger('click');

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

@@ -103,7 +103,7 @@ exports[`Alert integration settings form default state should match the default
       icon=""
       size="medium"
       type="submit"
-      variant="success"
+      variant="confirm"
     >
       
       Save changes

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

@@ -30,7 +30,7 @@ exports[`IncidentsSettingTabs should render the component 1`] = `
      
     <p>
       
-      Set up integrations with external tools to help better manage incidents.
+      Fine-tune incident settings and set up integrations with external tools to help better manage incidents.
     
     </p>
   </div>

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

@@ -66,20 +66,6 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
       
       </gl-modal-stub>
     </gl-form-group-stub>
-     
-    <gl-button-stub
-      buttontextclasses=""
-      category="primary"
-      class="js-no-auto-disable"
-      icon=""
-      size="medium"
-      type="submit"
-      variant="success"
-    >
-      
-      Save changes
-    
-    </gl-button-stub>
   </form>
 </div>
 `;

spec/frontend/incidents_settings/components/pagerduty_form_spec.js

-import { GlAlert, GlModal } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlModal, GlToggle } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import PagerDutySettingsForm from '~/incidents_settings/components/pagerduty_form.vue';
 
@@ -8,13 +8,13 @@ describe('Alert integration settings form', () => {
   const resetWebhookUrl = jest.fn();
   const service = { updateSettings: jest.fn().mockResolvedValue(), resetWebhookUrl };
 
-  const findForm = () => wrapper.find({ ref: 'settingsForm' });
-  const findWebhookInput = () => wrapper.find('[data-testid="webhook-url"]');
-  const findModal = () => wrapper.find(GlModal);
-  const findAlert = () => wrapper.find(GlAlert);
+  const findWebhookInput = () => wrapper.findByTestId('webhook-url');
+  const findFormToggle = () => wrapper.findComponent(GlToggle);
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   beforeEach(() => {
-    wrapper = shallowMount(PagerDutySettingsForm, {
+    wrapper = shallowMountExtended(PagerDutySettingsForm, {
       provide: {
         service,
         pagerDutySettings: {
@@ -27,18 +27,15 @@ describe('Alert integration settings form', () => {
   });
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
   it('should match the default snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('should call service `updateSettings` on form submit', () => {
-    findForm().trigger('submit');
+  it('should call service `updateSettings` on toggle change', () => {
+    findFormToggle().vm.$emit('change', true);
     expect(service.updateSettings).toHaveBeenCalledWith(
       expect.objectContaining({ pagerduty_active: wrapper.vm.active }),
     );

spec/frontend/operation_settings/components/metrics_settings_spec.js

@@ -56,7 +56,7 @@ describe('operation settings external dashboard component', () => {
 
   it('renders header text', () => {
     mountComponent();
-    expect(wrapper.find('.js-section-header').text()).toBe('Metrics dashboard');
+    expect(wrapper.find('.js-section-header').text()).toBe('Metrics');
   });
 
   describe('expand/collapse button', () => {
@@ -77,13 +77,13 @@ describe('operation settings external dashboard component', () => {
     });
 
     it('renders descriptive text', () => {
-      expect(subHeader.text()).toContain('Manage Metrics Dashboard settings.');
+      expect(subHeader.text()).toContain('Manage metrics dashboard settings.');
     });
 
     it('renders help page link', () => {
       const link = subHeader.find(GlLink);
 
-      expect(link.text()).toBe('Learn more');
+      expect(link.text()).toBe('Learn more.');
       expect(link.attributes().href).toBe(helpPage);
     });
   });

spec/views/projects/settings/operations/show.html.haml_spec.rb

@@ -36,7 +36,7 @@ RSpec.describe 'projects/settings/operations/show' do
     it 'renders the Operations Settings page' do
       render
 
-      expect(rendered).to have_content _('Alert integrations')
+      expect(rendered).to have_content _('Alerts')
       expect(rendered).to have_content _('Display alerts from all configured monitoring tools.')
     end
   end
@@ -77,41 +77,11 @@ RSpec.describe 'projects/settings/operations/show' do
   end
 
   describe 'Operations > Tracing' do
-    context 'with project.tracing_external_url' do
-      it 'links to project.tracing_external_url' do
-        render
-
-        expect(rendered).to have_link('Tracing', href: tracing_setting.external_url)
-      end
-
-      context 'with malicious external_url' do
-        let(:malicious_tracing_url) { "https://replaceme.com/'><script>alert(document.cookie)</script>" }
-        let(:cleaned_url) { "https://replaceme.com/'>" }
-
-        before do
-          tracing_setting.update_column(:external_url, malicious_tracing_url)
-        end
-
-        it 'sanitizes external_url' do
-          render
-
-          expect(tracing_setting.external_url).to eq(malicious_tracing_url)
-          expect(rendered).to have_link('Tracing', href: cleaned_url)
-        end
-      end
-    end
-
-    context 'without project.tracing_external_url' do
-      let(:tracing_setting) { build(:project_tracing_setting, project: project) }
-
-      before do
-        tracing_setting.external_url = nil
-      end
-
-      it 'links to Tracing page' do
+    context 'Settings page ' do
+      it 'renders the Tracing Settings page' do
         render
 
-        expect(rendered).to have_link('Tracing', href: project_tracing_path(project))
+        expect(rendered).to have_content _('Embed an image of your existing Jaeger server in GitLab.')
       end
     end
   end