Add external_issue_alert component

To be used by both the Jira and ZenTao integrations

ee/app/assets/javascripts/external_issues_show/components/external_issue_alert.vue

+<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>

ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue

 <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"

ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue

 <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"

ee/spec/frontend/external_issues_show/components/external_issue_alert_spec.js

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

locale/gitlab.pot

@@ -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 ""