Commit 9c6f654c authored by Tristan Read's avatar Tristan Read Committed by Kushal Pandya

Update alert integration settings description

parent 3102e946
......@@ -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>',
text: this.$options.i18n.usageSection,
url: this.alertsUsageUrl,
},
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.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"
......
......@@ -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,
},
......
......@@ -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
......
.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') } }
---
title: Add more detail to alert integration settings description
merge_request: 33244
author:
type: added
......@@ -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 ""
......
......@@ -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>"`;
......@@ -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();
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment