Update alert integration settings description

app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue

@@ -3,24 +3,35 @@ import {
   GlDeprecatedButton,
   GlFormGroup,
   GlFormInput,
+  GlLink,
   GlModal,
   GlModalDirective,
+  GlSprintf,
 } from '@gitlab/ui';
-import { escape } from 'lodash';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import axios from '~/lib/utils/axios_utils';
-import { s__, __, sprintf } from '~/locale';
+import { s__, __ } from '~/locale';
 import createFlash from '~/flash';
 
 export default {
+  i18n: {
+    usageSection: s__(
+      'AlertService|You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page.',
+    ),
+    setupSection: s__(
+      "AlertService|Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.",
+    ),
+  },
   COPY_TO_CLIPBOARD: __('Copy'),
   RESET_KEY: __('Reset key'),
   components: {
     GlDeprecatedButton,
     GlFormGroup,
     GlFormInput,
+    GlLink,
     GlModal,
+    GlSprintf,
     ClipboardButton,
     ToggleButton,
   },
@@ -28,6 +39,14 @@ export default {
     'gl-modal': GlModalDirective,
   },
   props: {
+    alertsSetupUrl: {
+      type: String,
+      required: true,
+    },
+    alertsUsageUrl: {
+      type: String,
+      required: true,
+    },
     initialAuthorizationKey: {
       type: String,
       required: false,
@@ -41,11 +60,6 @@ export default {
       type: String,
       required: true,
     },
-    learnMoreUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
     initialActivated: {
       type: Boolean,
       required: true,
@@ -59,27 +73,17 @@ export default {
     };
   },
   computed: {
-    learnMoreDescription() {
-      return sprintf(
-        s__(
-          'AlertService|%{linkStart}Learn more%{linkEnd} about configuring this endpoint to receive alerts.',
-        ),
+    sections() {
+      return [
         {
-          linkStart: `<a href="${escape(
-            this.learnMoreUrl,
-          )}" target="_blank" rel="noopener noreferrer">`,
-          linkEnd: '</a>',
-        },
-        false,
-      );
-    },
-    sectionDescription() {
-      const desc = s__(
-        'AlertService|Each alert source must be authorized using the following URL and authorization key.',
-      );
-      const learnMoreDesc = this.learnMoreDescription ? ` ${this.learnMoreDescription}` : '';
-
-      return `${desc}${learnMoreDesc}`;
+          text: this.$options.i18n.usageSection,
+          url: this.alertsUsageUrl,
+        },
+        {
+          text: this.$options.i18n.setupSection,
+          url: this.alertsSetupUrl,
+        },
+      ];
     },
   },
   watch: {
@@ -126,7 +130,15 @@ export default {
 
 <template>
   <div>
-    <p v-html="sectionDescription"></p>
+    <div data-testid="description">
+      <p v-for="section in sections" :key="section.text">
+        <gl-sprintf :message="section.text">
+          <template #link="{ content }">
+            <gl-link :href="section.url" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </p>
+    </div>
     <gl-form-group :label="__('Active')" label-for="activated" label-class="label-bold">
       <toggle-button
         id="activated"

app/assets/javascripts/alerts_service_settings/index.js

@@ -7,7 +7,14 @@ export default el => {
     return null;
   }
 
-  const { activated: activatedStr, formPath, authorizationKey, url, learnMoreUrl } = el.dataset;
+  const {
+    activated: activatedStr,
+    alertsSetupUrl,
+    alertsUsageUrl,
+    formPath,
+    authorizationKey,
+    url,
+  } = el.dataset;
   const activated = parseBoolean(activatedStr);
 
   return new Vue({
@@ -15,9 +22,10 @@ export default el => {
     render(createElement) {
       return createElement(AlertsServiceForm, {
         props: {
+          alertsSetupUrl,
+          alertsUsageUrl,
           initialActivated: activated,
           formPath,
-          learnMoreUrl,
           initialAuthorizationKey: authorizationKey,
           url,
         },

app/models/project_services/alerts_service.rb

@@ -41,7 +41,7 @@ class AlertsService < Service
   end
 
   def description
-    _('Receive alerts on GitLab from any source')
+    _('Authorize external services to send alerts to GitLab')
   end
 
   def detailed_description

app/views/projects/services/alerts/_help.html.haml

 .js-alerts-service-settings{ data: { activated: @service.activated?.to_s,
   form_path: scoped_integration_path(@service),
-  authorization_key: @service.token, url: @service.url || _('<namespace / project>'), learn_more_url: 'https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.html' } }
+  authorization_key: @service.token,
+  url: @service.url || _('<namespace / project>'),
+  alerts_setup_url: help_page_path('user/project/integrations/generic_alerts.html', anchor: 'setting-up-generic-alerts'),
+  alerts_usage_url: help_page_path('user/project/operations/alert_management.html') } }

changelogs/unreleased/tr-reword-alert-service.yml

+---
+title: Add more detail to alert integration settings description
+merge_request: 33244
+author:
+type: added

locale/gitlab.pot

@@ -1908,10 +1908,10 @@ msgstr ""
 msgid "AlertManagement|View issue"
 msgstr ""
 
-msgid "AlertService|%{linkStart}Learn more%{linkEnd} about configuring this endpoint to receive alerts."
+msgid "AlertService|Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint."
 msgstr ""
 
-msgid "AlertService|Each alert source must be authorized using the following URL and authorization key."
+msgid "AlertService|You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page."
 msgstr ""
 
 msgid "Alerts"
@@ -3030,6 +3030,9 @@ msgstr ""
 msgid "Authorize %{link_to_client} to use your account?"
 msgstr ""
 
+msgid "Authorize external services to send alerts to GitLab"
+msgstr ""
+
 msgid "Authorized %{new_chat_name}"
 msgstr ""
 
@@ -17910,9 +17913,6 @@ msgstr ""
 msgid "Receive alerts from manually configured Prometheus servers."
 msgstr ""
 
-msgid "Receive alerts on GitLab from any source"
-msgstr ""
-
 msgid "Receive notifications about your own activity"
 msgstr ""
 

spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap

@@ -6,4 +6,4 @@ exports[`AlertsServiceForm with default values renders "url" input 1`] = `"<gl-f
 
 exports[`AlertsServiceForm with default values renders toggle button 1`] = `"<toggle-button-stub id=\\"activated\\"></toggle-button-stub>"`;
 
-exports[`AlertsServiceForm with default values shows description and "Learn More" link 1`] = `"Each alert source must be authorized using the following URL and authorization key. <a href=\\"https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.md\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn more</a> about configuring this endpoint to receive alerts."`;
+exports[`AlertsServiceForm with default values shows description and docs links 1`] = `"<p><gl-sprintf-stub message=\\"You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page.\\"></gl-sprintf-stub></p><p><gl-sprintf-stub message=\\"Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.\\"></gl-sprintf-stub></p>"`;

spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js

@@ -12,7 +12,8 @@ const defaultProps = {
   initialAuthorizationKey: 'abcedfg123',
   formPath: 'http://invalid',
   url: 'https://gitlab.com/endpoint-url',
-  learnMoreUrl: 'https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.md',
+  alertsSetupUrl: 'http://invalid',
+  alertsUsageUrl: 'http://invalid',
   initialActivated: false,
 };
 
@@ -32,7 +33,7 @@ describe('AlertsServiceForm', () => {
 
   const findUrl = () => wrapper.find('#url');
   const findAuthorizationKey = () => wrapper.find('#authorization-key');
-  const findDescription = () => wrapper.find('p');
+  const findDescription = () => wrapper.find('[data-testid="description"');
   const findActiveStatusIcon = val =>
     document.querySelector(`.js-service-active-status[data-value=${val.toString()}]`);
 
@@ -67,7 +68,7 @@ describe('AlertsServiceForm', () => {
       expect(wrapper.find(ToggleButton).html()).toMatchSnapshot();
     });
 
-    it('shows description and "Learn More" link', () => {
+    it('shows description and docs links', () => {
       expect(findDescription().element.innerHTML).toMatchSnapshot();
     });
   });