Commit 23f8597e authored by Jeremy Wu's avatar Jeremy Wu Committed by Ezekiel Kigbo

Feature ZenTao integration: Extract Issue Detail Part

parent cbc1b00b
...@@ -42,6 +42,11 @@ export default { ...@@ -42,6 +42,11 @@ export default {
required: false, required: false,
default: undefined, default: undefined,
}, },
badgeText: {
type: String,
required: false,
default: '',
},
}, },
computed: { computed: {
noteAnchor() { noteAnchor() {
......
import { __ } from '~/locale';
export const issueStates = {
OPENED: 'opened',
CLOSED: 'closed',
};
export const issueStateLabels = {
[issueStates.OPENED]: __('Open'),
[issueStates.CLOSED]: __('Closed'),
};
export const labelsFilterParam = 'labels';
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
GlBadge, GlBadge,
GlTooltipDirective as GlTooltip, GlTooltipDirective as GlTooltip,
} from '@gitlab/ui'; } 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 { 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'; import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
...@@ -15,7 +16,6 @@ import createFlash from '~/flash'; ...@@ -15,7 +16,6 @@ import createFlash from '~/flash';
import IssuableShow from '~/issuable_show/components/issuable_show_root.vue'; import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import { s__ } from '~/locale'; import { s__ } from '~/locale';
import Note from './note.vue';
export default { export default {
name: 'JiraIssuesShow', name: 'JiraIssuesShow',
......
<script> <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 { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
import { __, s__ } from '~/locale'; import { __, s__ } from '~/locale';
import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue'; 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 LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; 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 { export default {
name: 'JiraIssuesSidebar', name: 'JiraIssuesSidebar',
......
import { shallowMount } from '@vue/test-utils'; 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 { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { mockJiraIssueComment } from '../mock_data'; import { mockExternalIssueComment } from '../mock_data';
describe('JiraIssuesNote', () => { describe('JiraIssuesNote', () => {
let wrapper; let wrapper;
...@@ -15,11 +15,11 @@ describe('JiraIssuesNote', () => { ...@@ -15,11 +15,11 @@ describe('JiraIssuesNote', () => {
wrapper = extendedWrapper( wrapper = extendedWrapper(
shallowMount(JiraIssueNote, { shallowMount(JiraIssueNote, {
propsData: { propsData: {
authorName: mockJiraIssueComment.author.name, authorName: mockExternalIssueComment.author.name,
authorWebUrl: mockJiraIssueComment.author.web_url, authorWebUrl: mockExternalIssueComment.author.web_url,
authorAvatarUrl: mockJiraIssueComment.author.avatar_url, authorAvatarUrl: mockExternalIssueComment.author.avatar_url,
noteCreatedAt: mockJiraIssueComment.created_at, noteCreatedAt: mockExternalIssueComment.created_at,
noteBodyHtml: mockJiraIssueComment.body_html, noteBodyHtml: mockExternalIssueComment.body_html,
...props, ...props,
}, },
slots, slots,
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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>
<div <div
class="hide-collapsed" class="hide-collapsed"
...@@ -44,7 +44,7 @@ exports[`JiraIssuesSidebarAssignee with assignee template renders avatar compone ...@@ -44,7 +44,7 @@ exports[`JiraIssuesSidebarAssignee with assignee template renders avatar compone
</div> </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>
<div <div
class="hide-collapsed" class="hide-collapsed"
......
import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui'; import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; 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 { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue'; 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; let wrapper;
const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text'); const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
......
import { shallowMount } from '@vue/test-utils'; 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 { useFakeDate } from 'helpers/fake_date';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
......
import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils'; 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', () => { describe('IssueFieldDropdown', () => {
let wrapper; let wrapper;
...@@ -31,9 +31,9 @@ describe('IssueFieldDropdown', () => { ...@@ -31,9 +31,9 @@ describe('IssueFieldDropdown', () => {
it.each` it.each`
loading | items loading | items
${true} | ${[]} ${true} | ${[]}
${true} | ${mockJiraIssueStatuses} ${true} | ${mockExternalIssueStatuses}
${false} | ${[]} ${false} | ${[]}
${false} | ${mockJiraIssueStatuses} ${false} | ${mockExternalIssueStatuses}
`('with loading = $loading, items = $items', ({ loading, items }) => { `('with loading = $loading, items = $items', ({ loading, items }) => {
createComponent({ createComponent({
props: { props: {
...@@ -47,7 +47,7 @@ describe('IssueFieldDropdown', () => { ...@@ -47,7 +47,7 @@ describe('IssueFieldDropdown', () => {
if (!loading) { if (!loading) {
if (items.length) { if (items.length) {
findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => { findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => {
expect(itemWrapper.text()).toBe(mockJiraIssueStatuses[index].title); expect(itemWrapper.text()).toBe(mockExternalIssueStatuses[index].title);
}); });
} else { } else {
expect(wrapper.text()).toBe(emptyText); expect(wrapper.text()).toBe(emptyText);
......
import { GlButton, GlIcon } from '@gitlab/ui'; 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 { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
......
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' }];
import { shallowMount } from '@vue/test-utils'; 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 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 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 Sidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue'; import Sidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue'; import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
......
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