Merge branch 'move-gitlab-team-member-badge-to-ee' into 'master'

Move `gitlab_team_member_badge.vue` to EE directory

See merge request gitlab-org/gitlab!31278

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

 <script>
 import { mapActions } from 'vuex';
 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,
+    GitlabTeamMemberBadge: () =>
+      import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
   },
   props: {
     author: {
@@ -62,9 +62,6 @@ export default {
     hasAuthor() {
       return this.author && Object.keys(this.author).length;
     },
-    showGitlabTeamMemberBadge() {
-      return this.author?.is_gitlab_employee;
-    },
     authorLinkClasses() {
       return {
         hover: this.isUsernameLinkHovered,
@@ -156,7 +153,7 @@ export default {
           @mouseleave="handleUsernameMouseLeave"
           ><span class="note-headline-light">@{{ author.username }}</span>
         </a>
-        <gitlab-team-member-badge v-if="showGitlabTeamMemberBadge" />
+        <gitlab-team-member-badge v-if="author && author.is_gitlab_employee" />
       </span>
     </template>
     <span v-else>{{ __('A deleted user') }}</span>

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

@@ -8,7 +8,6 @@ import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.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';
@@ -22,7 +21,8 @@ export default {
     GlDeprecatedButton,
     UserAvatarLink,
     TimeagoTooltip,
-    GitlabTeamMemberBadge,
+    GitlabTeamMemberBadge: () =>
+      import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
   },
   computed: {
     ...mapState([
@@ -51,9 +51,6 @@ export default {
     actionButtonText() {
       return this.isEpicOpen ? __('Close epic') : __('Reopen epic');
     },
-    showGitlabTeamMemberBadge() {
-      return this.author?.isGitlabEmployee;
-    },
   },
   mounted() {
     /**
@@ -101,7 +98,10 @@ export default {
             :username="author.name"
             img-css-classes="avatar-inline"
           />
-          <gitlab-team-member-badge v-if="showGitlabTeamMemberBadge" ref="gitlabTeamMemberBadge" />
+          <gitlab-team-member-badge
+            v-if="author && author.isGitlabEmployee"
+            ref="gitlabTeamMemberBadge"
+          />
         </strong>
       </div>
     </div>

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

@@ -87,21 +87,6 @@ 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', () => {
@@ -149,7 +134,8 @@ describe('EpicHeaderComponent', () => {
     it('renders GitLab team member badge when `author.isGitlabEmployee` is `true`', () => {
       vm.$store.state.author.isGitlabEmployee = true;
 
-      return vm.$nextTick().then(() => {
+      // Wait for dynamic imports to resolve
+      return new Promise(setImmediate).then(() => {
         expect(vm.$refs.gitlabTeamMemberBadge).not.toBeUndefined();
       });
     });

ee/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 'ee/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('NoteHeader component', () => {
+  let wrapper;
+
+  const author = {
+    avatar_url: null,
+    id: 1,
+    name: 'Root',
+    path: '/root',
+    state: 'active',
+    username: 'root',
+  };
+
+  const createComponent = props => {
+    wrapper = shallowMount(NoteHeader, {
+      localVue,
+      store: new Vuex.Store(),
+      propsData: { ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  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);
+
+      // Wait for dynamic imports to resolve
+      return new Promise(setImmediate).then(() => {
+        expect(wrapper.find(GitlabTeamMemberBadge).exists()).toBe(expected);
+      });
+    },
+  );
+});

spec/frontend/notes/components/note_header_spec.js

@@ -2,7 +2,6 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { nextTick } from 'vue';
 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);
@@ -141,20 +140,6 @@ describe('NoteHeader component', () => {
     });
   });
 
-  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);
-    },
-  );
-
   describe('loading spinner', () => {
     it('shows spinner when showSpinner is true', () => {
       createComponent();