Commit 9dd753c1 authored by Tim Zallmann's avatar Tim Zallmann

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

Add "GitLab Team Member" badge to MR, Issue, and Epic notes/comments

See merge request gitlab-org/gitlab!28243
parents 16d8efd1 b68a35b5
<script>
import { mapActions } from 'vuex';
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';
export default {
components: {
timeAgoTooltip,
GitlabTeamMemberBadge,
},
props: {
author: {
......@@ -48,6 +50,9 @@ export default {
hasAuthor() {
return this.author && Object.keys(this.author).length;
},
showGitlabTeamMemberBadge() {
return this.author?.is_gitlab_employee;
},
},
methods: {
...mapActions(['setTargetNoteHash']),
......@@ -73,19 +78,21 @@ export default {
{{ __('Toggle thread') }}
</button>
</div>
<a
v-if="hasAuthor"
v-once
:href="author.path"
class="js-user-link"
:data-user-id="author.id"
:data-username="author.username"
>
<slot name="note-header-info"></slot>
<span class="note-header-author-name bold">{{ author.name }}</span>
<span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
<span class="note-headline-light">@{{ author.username }}</span>
</a>
<template v-if="hasAuthor">
<a
v-once
:href="author.path"
class="js-user-link"
:data-user-id="author.id"
:data-username="author.username"
>
<slot name="note-header-info"></slot>
<span class="note-header-author-name bold">{{ author.name }}</span>
<span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
<span class="note-headline-light">@{{ author.username }}</span>
</a>
<gitlab-team-member-badge v-if="showGitlabTeamMemberBadge" />
</template>
<span v-else>{{ __('A deleted user') }}</span>
<span class="note-headline-light note-headline-meta">
<span class="system-note-message"> <slot></slot> </span>
......
<script>
import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
const GITLAB_TEAM_MEMBER_LABEL = __('GitLab Team Member');
export default {
name: 'GitlabTeamMemberBadge',
directives: {
GlTooltip: GlTooltipDirective,
},
components: { GlIcon },
gitlabTeamMemberLabel: GITLAB_TEAM_MEMBER_LABEL,
};
</script>
<template>
<span
v-gl-tooltip.hover
:title="$options.gitlabTeamMemberLabel"
role="img"
:aria-label="$options.gitlabTeamMemberLabel"
class="d-inline-block align-middle"
>
<gl-icon name="tanuki-verified" class="gl-text-purple d-block" />
</span>
</template>
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import NoteHeader from '~/notes/components/note_header.vue';
import GitlabTeamMemberBadge from '~/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -17,6 +18,15 @@ describe('NoteHeader component', () => {
const findActionText = () => wrapper.find({ ref: 'actionText' });
const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
const author = {
avatar_url: null,
id: 1,
name: 'Root',
path: '/root',
state: 'active',
username: 'root',
};
const createComponent = props => {
wrapper = shallowMount(NoteHeader, {
localVue,
......@@ -83,16 +93,7 @@ describe('NoteHeader component', () => {
});
it('renders an author link if author is passed to props', () => {
createComponent({
author: {
avatar_url: null,
id: 1,
name: 'Root',
path: '/root',
state: 'active',
username: 'root',
},
});
createComponent({ author });
expect(wrapper.find('.js-user-link').exists()).toBe(true);
});
......@@ -138,4 +139,18 @@ describe('NoteHeader component', () => {
expect(actions.setTargetNoteHash).toHaveBeenCalled();
});
});
test.each`
props | expected | message1 | message2
${{ author: { ...author, is_gitlab_employee: true } }} | ${true} | ${'renders'} | ${'true'}
${{ author: { ...author, is_gitlab_employee: false } }} | ${false} | ${"doesn't render"} | ${'false'}
${{ author }} | ${false} | ${"doesn't render"} | ${'undefined'}
`(
'$message1 GitLab team member badge when `is_gitlab_employee` is $message2',
({ props, expected }) => {
createComponent(props);
expect(wrapper.find(GitlabTeamMemberBadge).exists()).toBe(expected);
},
);
});
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