Commit 420e57ab authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch '212259-add-gitlab-employee-badge-to-epic-header' into 'master'

Add "GitLab Team Member"  badge to epic headers

See merge request gitlab-org/gitlab!28359
parents 4e50a22a d3165ce0
...@@ -9,6 +9,7 @@ import Icon from '~/vue_shared/components/icon.vue'; ...@@ -9,6 +9,7 @@ import Icon from '~/vue_shared/components/icon.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue'; import LoadingButton from '~/vue_shared/components/loading_button.vue';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import GitlabTeamMemberBadge from '~/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
import epicUtils from '../utils/epic_utils'; import epicUtils from '../utils/epic_utils';
import { statusType } from '../constants'; import { statusType } from '../constants';
...@@ -23,6 +24,7 @@ export default { ...@@ -23,6 +24,7 @@ export default {
LoadingButton, LoadingButton,
UserAvatarLink, UserAvatarLink,
TimeagoTooltip, TimeagoTooltip,
GitlabTeamMemberBadge,
}, },
computed: { computed: {
...mapState([ ...mapState([
...@@ -51,6 +53,9 @@ export default { ...@@ -51,6 +53,9 @@ export default {
actionButtonText() { actionButtonText() {
return this.isEpicOpen ? __('Close epic') : __('Reopen epic'); return this.isEpicOpen ? __('Close epic') : __('Reopen epic');
}, },
showGitlabTeamMemberBadge() {
return this.author?.isGitlabEmployee;
},
}, },
mounted() { mounted() {
/** /**
...@@ -89,7 +94,7 @@ export default { ...@@ -89,7 +94,7 @@ export default {
{{ __('Opened') }} {{ __('Opened') }}
<timeago-tooltip :time="created" /> <timeago-tooltip :time="created" />
{{ __('by') }} {{ __('by') }}
<strong> <strong class="text-nowrap">
<user-avatar-link <user-avatar-link
:link-href="author.url" :link-href="author.url"
:img-src="author.src" :img-src="author.src"
...@@ -98,6 +103,7 @@ export default { ...@@ -98,6 +103,7 @@ export default {
:username="author.name" :username="author.name"
img-css-classes="avatar-inline" img-css-classes="avatar-inline"
/> />
<gitlab-team-member-badge v-if="showGitlabTeamMemberBadge" ref="gitlabTeamMemberBadge" />
</strong> </strong>
</div> </div>
</div> </div>
......
...@@ -130,7 +130,8 @@ class EpicPresenter < Gitlab::View::Presenter::Delegated ...@@ -130,7 +130,8 @@ class EpicPresenter < Gitlab::View::Presenter::Delegated
name: epic.author.name, name: epic.author.name,
url: user_path(epic.author), url: user_path(epic.author),
username: "@#{epic.author.username}", username: "@#{epic.author.username}",
src: author_icon src: author_icon,
is_gitlab_employee: epic.author.gitlab_employee?
} }
end end
......
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
"name", "name",
"url", "url",
"username", "username",
"src" "src",
"is_gitlab_employee"
], ],
"properties": { "properties": {
"name": { "name": {
...@@ -40,6 +41,9 @@ ...@@ -40,6 +41,9 @@
}, },
"src": { "src": {
"type": "string" "type": "string"
},
"is_gitlab_employee": {
"type": "boolean"
} }
} }
}, },
......
...@@ -87,6 +87,21 @@ describe('EpicHeaderComponent', () => { ...@@ -87,6 +87,21 @@ describe('EpicHeaderComponent', () => {
expect(vm.actionButtonText).toBe('Reopen epic'); expect(vm.actionButtonText).toBe('Reopen epic');
}); });
}); });
describe('showGitlabTeamMemberBadge', () => {
test.each`
isGitlabEmployeeValue | expected
${true} | ${true}
${false} | ${false}
`(
'returns $expected when `author.isGitlabEmployee` is $isGitlabEmployeeValue',
({ isGitlabEmployeeValue, expected }) => {
vm.$store.state.author.isGitlabEmployee = isGitlabEmployeeValue;
expect(vm.showGitlabTeamMemberBadge).toBe(expected);
},
);
});
}); });
describe('template', () => { describe('template', () => {
...@@ -132,5 +147,13 @@ describe('EpicHeaderComponent', () => { ...@@ -132,5 +147,13 @@ describe('EpicHeaderComponent', () => {
expect(toggleButtonEl.classList.contains('d-sm-none')).toBe(true); expect(toggleButtonEl.classList.contains('d-sm-none')).toBe(true);
expect(toggleButtonEl.classList.contains('gutter-toggle')).toBe(true); expect(toggleButtonEl.classList.contains('gutter-toggle')).toBe(true);
}); });
it('renders GitLab team member badge when `author.isGitlabEmployee` is `true`', () => {
vm.$store.state.author.isGitlabEmployee = true;
return vm.$nextTick().then(() => {
expect(vm.$refs.gitlabTeamMemberBadge).not.toBeUndefined();
});
});
}); });
}); });
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