diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/note.vue b/ee/app/assets/javascripts/external_issues_show/components/note.vue
similarity index 96%
rename from ee/app/assets/javascripts/integrations/jira/issues_show/components/note.vue
rename to ee/app/assets/javascripts/external_issues_show/components/note.vue
index ff7fbd75ad4b056d74be47fdd8ec313bafba817e..43a53febb5eb5f2b76145a4de8baf5d1c9f3fa76 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/note.vue
+++ b/ee/app/assets/javascripts/external_issues_show/components/note.vue
@@ -42,6 +42,11 @@ export default {
       required: false,
       default: undefined,
     },
+    badgeText: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     noteAnchor() {
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/assignee.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/assignee.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_due_date.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_due_date.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_due_date.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_due_date.vue
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field.vue
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field_dropdown.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field_dropdown.vue
diff --git a/ee/app/assets/javascripts/external_issues_show/constants.js b/ee/app/assets/javascripts/external_issues_show/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..29bb2dedfd2554649972bc02c93e426b19f7c994
--- /dev/null
+++ b/ee/app/assets/javascripts/external_issues_show/constants.js
@@ -0,0 +1,13 @@
+import { __ } from '~/locale';
+
+export const issueStates = {
+  OPENED: 'opened',
+  CLOSED: 'closed',
+};
+
+export const issueStateLabels = {
+  [issueStates.OPENED]: __('Open'),
+  [issueStates.CLOSED]: __('Closed'),
+};
+
+export const labelsFilterParam = 'labels';
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
index 760ef5e8b8ff86f2e58f6309f23c7a9dcc0705f1..bec8bd9a5153ee7d3cfcb12f735beb7cd98bd1fa 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
@@ -7,6 +7,7 @@ import {
   GlBadge,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
+import Note from 'ee/external_issues_show/components/note.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';
@@ -15,7 +16,6 @@ import createFlash from '~/flash';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
-import Note from './note.vue';
 
 export default {
   name: 'JiraIssuesShow',
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
index d99938d1b584347c3b67435fed42783c7ec1e619..bdc2b28e1a70dd24d8148aeb02bd76e7392af936 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
+++ b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
@@ -1,12 +1,12 @@
 <script>
+import Assignee from 'ee/external_issues_show/components/sidebar/assignee.vue';
+import IssueDueDate from 'ee/external_issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from 'ee/external_issues_show/components/sidebar/issue_field.vue';
 import { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
 import { __, s__ } from '~/locale';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Assignee from './assignee.vue';
-import IssueDueDate from './issue_due_date.vue';
-import IssueField from './issue_field.vue';
 
 export default {
   name: 'JiraIssuesSidebar',
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/__snapshots__/note_spec.js.snap b/ee/spec/frontend/external_issues_show/components/__snapshots__/note_spec.js.snap
similarity index 100%
rename from ee/spec/frontend/integrations/jira/issues_show/components/__snapshots__/note_spec.js.snap
rename to ee/spec/frontend/external_issues_show/components/__snapshots__/note_spec.js.snap
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/note_spec.js b/ee/spec/frontend/external_issues_show/components/note_spec.js
similarity index 79%
rename from ee/spec/frontend/integrations/jira/issues_show/components/note_spec.js
rename to ee/spec/frontend/external_issues_show/components/note_spec.js
index c708560cd39af9fa723e27e10743a2d44f41975c..636d7179b91f131ddbca5a9092156a5b99b6df12 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/note_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/note_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import JiraIssueNote from 'ee/integrations/jira/issues_show/components/note.vue';
+import JiraIssueNote from 'ee/external_issues_show/components/note.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
-import { mockJiraIssueComment } from '../mock_data';
+import { mockExternalIssueComment } from '../mock_data';
 
 describe('JiraIssuesNote', () => {
   let wrapper;
@@ -15,11 +15,11 @@ describe('JiraIssuesNote', () => {
     wrapper = extendedWrapper(
       shallowMount(JiraIssueNote, {
         propsData: {
-          authorName: mockJiraIssueComment.author.name,
-          authorWebUrl: mockJiraIssueComment.author.web_url,
-          authorAvatarUrl: mockJiraIssueComment.author.avatar_url,
-          noteCreatedAt: mockJiraIssueComment.created_at,
-          noteBodyHtml: mockJiraIssueComment.body_html,
+          authorName: mockExternalIssueComment.author.name,
+          authorWebUrl: mockExternalIssueComment.author.web_url,
+          authorAvatarUrl: mockExternalIssueComment.author.avatar_url,
+          noteCreatedAt: mockExternalIssueComment.created_at,
+          noteBodyHtml: mockExternalIssueComment.body_html,
           ...props,
         },
         slots,
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap b/ee/spec/frontend/external_issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
similarity index 86%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
rename to ee/spec/frontend/external_issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
index 3ac59e533ac99d9757a7f5baefc04da9af28b6b6..3864ef3db13fe7dd144fe42e22e081403c515644 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JiraIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
+exports[`ExternalIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
 <div>
   <div
     class="hide-collapsed"
@@ -44,7 +44,7 @@ exports[`JiraIssuesSidebarAssignee with assignee template renders avatar compone
 </div>
 `;
 
-exports[`JiraIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
+exports[`ExternalIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
 <div>
   <div
     class="hide-collapsed"
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/assignee_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js
similarity index 92%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/assignee_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js
index c66df42f0f60ae9a9b52047264055ccf39e178d7..6cb8053644987485f59ef93d9f237e2e896cd06f 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/assignee_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js
@@ -1,15 +1,15 @@
 import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Assignee from 'ee/integrations/jira/issues_show/components/sidebar/assignee.vue';
+import Assignee from 'ee/external_issues_show/components/sidebar/assignee.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
 
-import { mockJiraIssue } from '../../mock_data';
+import { mockExternalIssue } from '../../mock_data';
 
-const mockAssignee = convertObjectPropsToCamelCase(mockJiraIssue.assignees[0], { deep: true });
+const mockAssignee = convertObjectPropsToCamelCase(mockExternalIssue.assignees[0], { deep: true });
 
-describe('JiraIssuesSidebarAssignee', () => {
+describe('ExternalIssuesSidebarAssignee', () => {
   let wrapper;
 
   const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_due_date_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/issue_due_date_spec.js
similarity index 94%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_due_date_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/issue_due_date_spec.js
index 3d24e4198edf3a97d82ed2a6a2099149d3df8c16..3c86b080dcf2f341ba24ab738073e3e26dcf8f95 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_due_date_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/issue_due_date_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import IssueDueDate from 'ee/integrations/jira/issues_show/components/sidebar/issue_due_date.vue';
+import IssueDueDate from 'ee/external_issues_show/components/sidebar/issue_due_date.vue';
 
 import { useFakeDate } from 'helpers/fake_date';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_dropdown_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js
similarity index 78%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_dropdown_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js
index 6c159bcf5adf22869ba73ee02d8a57d8c7691d1a..c9be0498261104ef305f5925fd77d08d2cfc3c2c 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_dropdown_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js
@@ -1,9 +1,9 @@
 import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
-import IssueFieldDropdown from 'ee/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue';
+import IssueFieldDropdown from 'ee/external_issues_show/components/sidebar/issue_field_dropdown.vue';
 
-import { mockJiraIssueStatuses } from '../../mock_data';
+import { mockExternalIssueStatuses } from '../../mock_data';
 
 describe('IssueFieldDropdown', () => {
   let wrapper;
@@ -31,9 +31,9 @@ describe('IssueFieldDropdown', () => {
   it.each`
     loading  | items
     ${true}  | ${[]}
-    ${true}  | ${mockJiraIssueStatuses}
+    ${true}  | ${mockExternalIssueStatuses}
     ${false} | ${[]}
-    ${false} | ${mockJiraIssueStatuses}
+    ${false} | ${mockExternalIssueStatuses}
   `('with loading = $loading, items = $items', ({ loading, items }) => {
     createComponent({
       props: {
@@ -47,7 +47,7 @@ describe('IssueFieldDropdown', () => {
     if (!loading) {
       if (items.length) {
         findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => {
-          expect(itemWrapper.text()).toBe(mockJiraIssueStatuses[index].title);
+          expect(itemWrapper.text()).toBe(mockExternalIssueStatuses[index].title);
         });
       } else {
         expect(wrapper.text()).toBe(emptyText);
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js
similarity index 97%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js
index 16066663ed637586ed4e8af11acb302b6bcd3c41..4efa0e173fd685d741011b4dd0d0dfe5586ff2ff 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
 
-import IssueField from 'ee/integrations/jira/issues_show/components/sidebar/issue_field.vue';
+import IssueField from 'ee/external_issues_show/components/sidebar/issue_field.vue';
 
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
diff --git a/ee/spec/frontend/external_issues_show/mock_data.js b/ee/spec/frontend/external_issues_show/mock_data.js
new file mode 100644
index 0000000000000000000000000000000000000000..79c0c622e6de64a7e0dd995ffe25221f37bf12de
--- /dev/null
+++ b/ee/spec/frontend/external_issues_show/mock_data.js
@@ -0,0 +1,45 @@
+export const mockExternalIssue = {
+  title: 'FE-2 The second FE issue on Jira',
+  description_html:
+    '<a href="https://jira.reali.sh:8080/projects/FE/issues/FE-2">FE-2</a> The second FE issue on Jira',
+  created_at: '"2021-02-01T04:04:40.833Z"',
+  author: {
+    name: 'Justin Ho',
+    web_url: 'http://127.0.0.1:3000/root',
+    avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+  },
+  assignees: [
+    {
+      name: 'Justin Ho',
+      web_url: 'http://127.0.0.1:3000/root',
+      avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+    },
+  ],
+  due_date: '2021-02-14T00:00:00.000Z',
+  labels: [
+    {
+      title: 'In Progress',
+      description: 'Work that is still in progress',
+      color: '#0052CC',
+      text_color: '#FFFFFF',
+    },
+  ],
+  references: {
+    relative: 'FE-2',
+  },
+  state: 'opened',
+  status: 'In Progress',
+};
+
+export const mockExternalIssueComment = {
+  body_html: '<p>hi</p>',
+  created_at: '"2021-02-01T04:04:40.833Z"',
+  author: {
+    name: 'Justin Ho',
+    web_url: 'http://127.0.0.1:3000/root',
+    avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+  },
+  id: 10000,
+};
+
+export const mockExternalIssueStatuses = [{ title: 'In Progress' }, { title: 'Done' }];
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js b/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
index 901e29856dfa33686a8982f93a66da9d40db711a..f3c9e1c887a9da81aa92f6e62631dff7d0ad3d5b 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
+++ b/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import Assignee from 'ee/integrations/jira/issues_show/components/sidebar/assignee.vue';
-import IssueDueDate from 'ee/integrations/jira/issues_show/components/sidebar/issue_due_date.vue';
-import IssueField from 'ee/integrations/jira/issues_show/components/sidebar/issue_field.vue';
+import Assignee from 'ee/external_issues_show/components/sidebar/assignee.vue';
+import IssueDueDate from 'ee/external_issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from 'ee/external_issues_show/components/sidebar/issue_field.vue';
 import Sidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';