Commit 60f482fb authored by Justin Ho Tuan Duong's avatar Justin Ho Tuan Duong Committed by Peter Hegman

Add external_issue_alert component

To be used by both the Jira and ZenTao integrations
parent c1ef75cb
<script>
import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
export default {
name: 'ExternalIssueAlert',
components: {
GlAlert,
GlLink,
GlSprintf,
},
props: {
issueTrackerName: {
type: String,
required: true,
},
issueUrl: {
type: String,
required: false,
default: '',
},
},
computed: {
alertTitle() {
return sprintf(
s__('ExternalIssueIntegration|This issue is synchronized with %{trackerName}'),
{ trackerName: this.issueTrackerName },
);
},
alertMessage() {
return sprintf(
s__(
`ExternalIssueIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}%{trackerName}%{linkEnd}.`,
),
{ trackerName: this.issueTrackerName },
);
},
},
};
</script>
<template>
<gl-alert variant="info" :dismissible="false" :title="alertTitle" class="gl-mb-2">
<gl-sprintf :message="alertMessage">
<template #link="{ content }">
<gl-link v-if="issueUrl" :href="issueUrl" target="_blank">{{ content }}</gl-link>
<span v-else>{{ content }}</span>
</template>
</gl-sprintf>
</gl-alert>
</template>
<script>
import {
GlAlert,
GlSprintf,
GlLink,
GlLoadingIcon,
GlBadge,
GlTooltipDirective as GlTooltip,
} from '@gitlab/ui';
import { GlAlert, GlBadge, GlLoadingIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
import Note from 'ee/external_issues_show/components/note.vue';
import ExternalIssueAlert from 'ee/external_issues_show/components/external_issue_alert.vue';
import { fetchIssue, fetchIssueStatuses, updateIssue } from 'ee/integrations/jira/issues_show/api';
import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
......@@ -21,10 +16,9 @@ export default {
name: 'JiraIssuesShow',
components: {
GlAlert,
GlSprintf,
GlLink,
GlBadge,
GlLoadingIcon,
ExternalIssueAlert,
IssuableShow,
JiraIssueSidebar,
Note,
......@@ -147,24 +141,7 @@ export default {
{{ errorMessage }}
</gl-alert>
<template v-else>
<gl-alert
variant="info"
:dismissible="false"
:title="s__('JiraService|This issue is synchronized with Jira')"
class="gl-mb-2"
>
<gl-sprintf
:message="
s__(
`JiraService|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}Jira%{linkEnd}.`,
)
"
>
<template #link="{ content }">
<gl-link :href="issue.webUrl" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</gl-alert>
<external-issue-alert issue-tracker-name="Jira" :issue-url="issue.webUrl" />
<issuable-show
:issuable="issue"
......
<script>
import {
GlAlert,
GlSprintf,
GlLink,
GlLoadingIcon,
GlBadge,
GlTooltipDirective as GlTooltip,
} from '@gitlab/ui';
import { GlAlert, GlBadge, GlLoadingIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
import Note from 'ee/external_issues_show/components/note.vue';
import ExternalIssueAlert from 'ee/external_issues_show/components/external_issue_alert.vue';
import { fetchIssue } from 'ee/integrations/zentao/issues_show/api';
import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
import { IssuableStatus, IssuableStatusText } from '~/issue_show/constants';
......@@ -21,10 +15,9 @@ export default {
name: 'ZenTaoIssuesShow',
components: {
GlAlert,
GlSprintf,
GlLink,
GlBadge,
GlLoadingIcon,
ExternalIssueAlert,
IssuableShow,
ZentaoIssueSidebar,
Note,
......@@ -96,24 +89,7 @@ export default {
{{ errorMessage }}
</gl-alert>
<template v-else>
<gl-alert
variant="info"
:dismissible="false"
:title="s__('ZenTaoIntegration|This issue is synchronized with ZenTao')"
class="gl-mb-2"
>
<gl-sprintf
:message="
s__(
`ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}.`,
)
"
>
<template #link="{ content }">
<gl-link :href="issue.webUrl" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</gl-alert>
<external-issue-alert issue-tracker-name="ZenTao" :issue-url="issue.webUrl" />
<issuable-show
:issuable="issue"
......
import { mount } from '@vue/test-utils';
import { GlAlert, GlLink } from '@gitlab/ui';
import ExternalIssueAlert from 'ee/external_issues_show/components/external_issue_alert.vue';
describe('ExternalIssueAlert', () => {
let wrapper;
const findGlAlert = () => wrapper.findComponent(GlAlert);
const findGlLink = () => wrapper.findComponent(GlLink);
const defaultProps = {
issueTrackerName: 'Jira',
issueUrl: 'https://example.atlassian.net/browse/FE-1',
};
const createComponent = ({ props } = {}) => {
wrapper = mount(ExternalIssueAlert, {
propsData: { ...defaultProps, ...props },
});
};
afterEach(() => {
wrapper.destroy();
});
describe('template', () => {
describe.each`
issueTrackerName
${'Jira'}
${'ZenTao'}
`('when `issueTrackerName` is `$issueTrackerName`', ({ issueTrackerName }) => {
it('renders GlAlert', () => {
createComponent({
props: { issueTrackerName },
});
expect(findGlAlert().props('title')).toBe(
`This issue is synchronized with ${issueTrackerName}`,
);
expect(findGlAlert().text()).toContain(
`Not all data may be displayed here. To view more details or make changes to this issue, go to ${issueTrackerName}`,
);
});
});
it('renders GlLink', () => {
createComponent();
expect(findGlLink().attributes('href')).toBe(defaultProps.issueUrl);
});
describe('when issueUrl is not provided', () => {
it('does not render GlLink and falls back to plain text', () => {
createComponent({
props: { issueUrl: null },
});
expect(findGlLink().exists()).toBe(false);
expect(findGlAlert().text()).toContain(
'Not all data may be displayed here. To view more details or make changes to this issue, go to Jira',
);
});
});
});
});
......@@ -14072,6 +14072,12 @@ msgstr ""
msgid "ExternalAuthorizationService|When no classification label is set the default label `%{default_label}` will be used."
msgstr ""
msgid "ExternalIssueIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}%{trackerName}%{linkEnd}."
msgstr ""
msgid "ExternalIssueIntegration|This issue is synchronized with %{trackerName}"
msgstr ""
msgid "ExternalWikiService|External wiki"
msgstr ""
......@@ -19634,9 +19640,6 @@ msgstr ""
msgid "JiraService|No available statuses"
msgstr ""
msgid "JiraService|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}Jira%{linkEnd}."
msgstr ""
msgid "JiraService|Open Jira"
msgstr ""
......@@ -19667,9 +19670,6 @@ msgstr ""
msgid "JiraService|This is an Ultimate feature"
msgstr ""
msgid "JiraService|This issue is synchronized with Jira"
msgstr ""
msgid "JiraService|Transition Jira issues to their final state:"
msgstr ""
......@@ -39890,15 +39890,9 @@ msgstr ""
msgid "ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page."
msgstr ""
msgid "ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}."
msgstr ""
msgid "ZenTaoIntegration|This is a ZenTao user."
msgstr ""
msgid "ZenTaoIntegration|This issue is synchronized with ZenTao"
msgstr ""
msgid "ZenTaoIntegration|ZenTao user"
msgstr ""
......
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