Add GitLab employee badge to notes/comments

Adds a badge for users with a `@gitlab.com` email next to comments on
MR, Issues, and Epics

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

 <script>
 import { mapActions } from 'vuex';
 import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+import EmployeeBadge from '../../vue_shared/components/user_avatar/badges/employee_badge.vue';
 
 export default {
   components: {
     timeAgoTooltip,
+    EmployeeBadge,
   },
   props: {
     author: {
@@ -48,6 +50,9 @@ export default {
     hasAuthor() {
       return this.author && Object.keys(this.author).length;
     },
+    showGitLabEmployeeBadge() {
+      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>
+      <employee-badge v-if="showGitLabEmployeeBadge" />
+    </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/employee_badge.vue

+<script>
+import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+
+export default {
+  name: 'EmployeeBadge',
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: { GlIcon },
+};
+</script>
+
+<template>
+  <gl-icon
+    v-gl-tooltip.hover
+    :title="__('GitLab Employee')"
+    name="tanuki-verified"
+    class="gl-text-purple d-inline-block align-middle"
+  />
+</template>

locale/gitlab.pot

@@ -9617,6 +9617,12 @@ msgstr ""
 msgid "GitLab / Unsubscribe"
 msgstr ""
 
+msgid "GitLab CI Linter has been moved"
+msgstr ""
+
+msgid "GitLab Employee"
+msgstr ""
+
 msgid "GitLab Enterprise Edition %{plan}"
 msgstr ""
 

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 EmployeeBadge from '~/vue_shared/components/user_avatar/badges/employee_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,15 @@ 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 employee badge when `is_gitlab_employee` is $message2', ({ props, expected }) => {
+    createComponent(props);
+
+    expect(wrapper.find(EmployeeBadge).exists()).toBe(expected);
+  });
 });