Commit 03bc1b05 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch 'fix/external-issues-always-showing-jira-user' into 'master'

Fix external issues sidebar avatar sub-label error

See merge request gitlab-org/gitlab!72418
parents 3e2beaf6 1a2d9645
...@@ -21,6 +21,11 @@ export default { ...@@ -21,6 +21,11 @@ export default {
required: false, required: false,
default: null, default: null,
}, },
avatarSubLabel: {
type: String,
required: false,
default: null,
},
}, },
computed: { computed: {
tooltipTitle() { tooltipTitle() {
...@@ -60,7 +65,7 @@ export default { ...@@ -60,7 +65,7 @@ export default {
:alt="assignee.name" :alt="assignee.name"
:entity-name="assignee.name" :entity-name="assignee.name"
:label="assignee.name" :label="assignee.name"
:sub-label="__('Jira user')" :sub-label="avatarSubLabel"
/> />
</gl-avatar-link> </gl-avatar-link>
<span v-else class="gl-text-gray-500" data-testid="no-assignee-text">{{ __('None') }}</span> <span v-else class="gl-text-gray-500" data-testid="no-assignee-text">{{ __('None') }}</span>
......
...@@ -83,6 +83,7 @@ export default { ...@@ -83,6 +83,7 @@ export default {
statusDropdownEmpty: s__('JiraService|No available statuses'), statusDropdownEmpty: s__('JiraService|No available statuses'),
statusDropdownTitle: __('Change status'), statusDropdownTitle: __('Change status'),
referenceName: __('Reference'), referenceName: __('Reference'),
avatarSubLabel: __('Jira user'),
}, },
mounted() { mounted() {
this.sidebarEl = document.querySelector('aside.right-sidebar'); this.sidebarEl = document.querySelector('aside.right-sidebar');
...@@ -131,7 +132,7 @@ export default { ...@@ -131,7 +132,7 @@ export default {
<template> <template>
<div> <div>
<assignee class="block" :assignee="assignee" /> <assignee class="block" :assignee="assignee" :avatar-sub-label="$options.i18n.avatarSubLabel" />
<issue-due-date :due-date="issue.dueDate" /> <issue-due-date :due-date="issue.dueDate" />
<issue-field <issue-field
icon="progress" icon="progress"
......
...@@ -31,13 +31,14 @@ export default { ...@@ -31,13 +31,14 @@ export default {
i18n: { i18n: {
statusTitle: __('Status'), statusTitle: __('Status'),
referenceName: __('Reference'), referenceName: __('Reference'),
avatarSubLabel: __('Zentao user'),
}, },
}; };
</script> </script>
<template> <template>
<div> <div>
<assignee class="block" :assignee="assignee" /> <assignee class="block" :assignee="assignee" :avatar-sub-label="$options.i18n.avatarSubLabel" />
<issue-due-date :due-date="issue.dueDate" /> <issue-due-date :due-date="issue.dueDate" />
<issue-field icon="progress" :title="$options.i18n.statusTitle" :value="issue.status" /> <issue-field icon="progress" :title="$options.i18n.statusTitle" :value="issue.status" />
<labels-select <labels-select
......
...@@ -21,7 +21,6 @@ exports[`ExternalIssuesSidebarAssignee with assignee template renders avatar com ...@@ -21,7 +21,6 @@ exports[`ExternalIssuesSidebarAssignee with assignee template renders avatar com
labellink="" labellink=""
size="32" size="32"
src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90" src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
sublabel="Jira user"
sublabellink="" sublabellink=""
/> />
</gl-avatar-link-stub> </gl-avatar-link-stub>
......
...@@ -14,27 +14,24 @@ describe('ExternalIssuesSidebarAssignee', () => { ...@@ -14,27 +14,24 @@ describe('ExternalIssuesSidebarAssignee', () => {
const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text'); const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
const findNoAssigneeIcon = () => wrapper.findByTestId('no-assignee-text'); const findNoAssigneeIcon = () => wrapper.findByTestId('no-assignee-text');
const findAvatar = () => wrapper.find(GlAvatar); const findAvatar = () => wrapper.findComponent(GlAvatar);
const findAvatarLabeled = () => wrapper.find(GlAvatarLabeled); const findAvatarLabeled = () => wrapper.findComponent(GlAvatarLabeled);
const findAvatarLink = () => wrapper.find(GlAvatarLink); const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
const findSidebarCollapsedIconWrapper = () => const findSidebarCollapsedIconWrapper = () =>
wrapper.findByTestId('sidebar-collapsed-icon-wrapper'); wrapper.findByTestId('sidebar-collapsed-icon-wrapper');
const createComponent = ({ assignee } = {}) => { const createComponent = (props) => {
wrapper = extendedWrapper( wrapper = extendedWrapper(
shallowMount(Assignee, { shallowMount(Assignee, {
propsData: { propsData: {
assignee, ...props,
}, },
}), }),
); );
}; };
afterEach(() => { afterEach(() => {
if (wrapper) { wrapper.destroy();
wrapper.destroy();
wrapper = null;
}
}); });
describe('with assignee', () => { describe('with assignee', () => {
...@@ -102,6 +99,18 @@ describe('ExternalIssuesSidebarAssignee', () => { ...@@ -102,6 +99,18 @@ describe('ExternalIssuesSidebarAssignee', () => {
}); });
}); });
describe('with assignee and avatarSubLabel', () => {
it('renders avatar with sub-label', () => {
const mockSubLabel = 'Another Sub Label';
createComponent({
assignee: mockAssignee,
avatarSubLabel: mockSubLabel,
});
expect(findAvatarLabeled().props('subLabel')).toBe(mockSubLabel);
});
});
describe('with no assignee', () => { describe('with no assignee', () => {
beforeEach(() => { beforeEach(() => {
createComponent({ assignee: undefined }); createComponent({ assignee: undefined });
......
...@@ -46,6 +46,7 @@ describe('JiraIssuesSidebar', () => { ...@@ -46,6 +46,7 @@ describe('JiraIssuesSidebar', () => {
const assignee = findAssignee(); const assignee = findAssignee();
expect(assignee.props('assignee')).toBe(mockJiraIssue.assignees[0]); expect(assignee.props('assignee')).toBe(mockJiraIssue.assignees[0]);
expect(assignee.props('avatarSubLabel')).toBe('Jira user');
}); });
it('renders IssueDueDate', () => { it('renders IssueDueDate', () => {
......
...@@ -44,6 +44,7 @@ describe('ZentaoIssuesSidebar', () => { ...@@ -44,6 +44,7 @@ describe('ZentaoIssuesSidebar', () => {
const assignee = findAssignee(); const assignee = findAssignee();
expect(assignee.props('assignee')).toBe(mockZentaoIssue.assignees[0]); expect(assignee.props('assignee')).toBe(mockZentaoIssue.assignees[0]);
expect(assignee.props('avatarSubLabel')).toBe('Zentao user');
}); });
it('renders IssueDueDate', () => { it('renders IssueDueDate', () => {
......
...@@ -39681,6 +39681,9 @@ msgstr "" ...@@ -39681,6 +39681,9 @@ msgstr ""
msgid "Zentao issues" msgid "Zentao issues"
msgstr "" msgstr ""
msgid "Zentao user"
msgstr ""
msgid "ZentaoIntegration|An error occurred while requesting data from the ZenTao service." msgid "ZentaoIntegration|An error occurred while requesting data from the ZenTao service."
msgstr "" 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