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

app/assets/javascripts/notes/components/note_header.vue

 <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,8 +78,8 @@ export default {
         {{ __('Toggle thread') }}
       </button>
     </div>
+    <template v-if="hasAuthor">
       <a
-      v-if="hasAuthor"
         v-once
         :href="author.path"
         class="js-user-link"
@@ -86,6 +91,8 @@ export default {
         <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>

app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue

+<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>

spec/frontend/notes/components/note_header_spec.js

 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);
+    },
+  );
 });