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

ee/app/assets/javascripts/epic/components/epic_header.vue

@@ -9,6 +9,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.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 { statusType } from '../constants';
@@ -23,6 +24,7 @@ export default {
     LoadingButton,
     UserAvatarLink,
     TimeagoTooltip,
+    GitlabTeamMemberBadge,
   },
   computed: {
     ...mapState([
@@ -51,6 +53,9 @@ export default {
     actionButtonText() {
       return this.isEpicOpen ? __('Close epic') : __('Reopen epic');
     },
+    showGitlabTeamMemberBadge() {
+      return this.author?.isGitlabEmployee;
+    },
   },
   mounted() {
     /**
@@ -89,7 +94,7 @@ export default {
         {{ __('Opened') }}
         <timeago-tooltip :time="created" />
         {{ __('by') }}
-        <strong>
+        <strong class="text-nowrap">
           <user-avatar-link
             :link-href="author.url"
             :img-src="author.src"
@@ -98,6 +103,7 @@ export default {
             :username="author.name"
             img-css-classes="avatar-inline"
           />
+          <gitlab-team-member-badge v-if="showGitlabTeamMemberBadge" ref="gitlabTeamMemberBadge" />
         </strong>
       </div>
     </div>

ee/app/presenters/epic_presenter.rb

@@ -130,7 +130,8 @@ class EpicPresenter < Gitlab::View::Presenter::Delegated
       name: epic.author.name,
       url: user_path(epic.author),
       username: "@#{epic.author.username}",
-      src: author_icon
+      src: author_icon,
+      is_gitlab_employee: epic.author.gitlab_employee?
     }
   end
 

ee/spec/fixtures/api/schemas/epic_meta_data.json

@@ -26,7 +26,8 @@
         "name",
         "url",
         "username",
-        "src"
+        "src",
+        "is_gitlab_employee"
       ],
       "properties": {
         "name": {
@@ -40,6 +41,9 @@
         },
         "src": {
           "type": "string"
+        },
+        "is_gitlab_employee": {
+          "type": "boolean"
         }
       }
     },

ee/spec/frontend/epic/components/epic_header_spec.js

@@ -87,6 +87,21 @@ describe('EpicHeaderComponent', () => {
         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', () => {
@@ -132,5 +147,13 @@ describe('EpicHeaderComponent', () => {
       expect(toggleButtonEl.classList.contains('d-sm-none')).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();
+      });
+    });
   });
 });