Feature ZenTao integration: Extract Issue Detail Part

ee/app/assets/javascripts/integrations/jira/issues_show/components/note.vue → 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() {

ee/app/assets/javascripts/external_issues_show/constants.js

+import { __ } from '~/locale';
+
+export const issueStates = {
+  OPENED: 'opened',
+  CLOSED: 'closed',
+};
+
+export const issueStateLabels = {
+  [issueStates.OPENED]: __('Open'),
+  [issueStates.CLOSED]: __('Closed'),
+};
+
+export const labelsFilterParam = 'labels';

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',

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue

 <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',

ee/spec/frontend/integrations/jira/issues_show/components/note_spec.js → ee/spec/frontend/external_issues_show/components/note_spec.js

 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,

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap → ee/spec/frontend/external_issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap

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

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/assignee_spec.js → ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js

 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');

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_due_date_spec.js → ee/spec/frontend/external_issues_show/components/sidebar/issue_due_date_spec.js

 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';

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_dropdown_spec.js → ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js

 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);

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_spec.js → ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js

 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';

ee/spec/frontend/external_issues_show/mock_data.js

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

ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js

 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';