From a32bd4dffa547124e9b54cd44ff6d1b16fc7f6ae Mon Sep 17 00:00:00 2001
From: peterhegman <phegman@gitlab.com>
Date: Wed, 6 May 2020 16:36:17 -0700
Subject: [PATCH] Move `gitlab_team_member_badge.vue` to EE
It is a `.com` only feature so it is not needed in the CE build
---
.../notes/components/note_header.vue | 9 ++--
.../epic/components/epic_header.vue | 12 ++---
.../badges/gitlab_team_member_badge.vue | 0
.../epic/components/epic_header_spec.js | 18 +------
.../notes/components/note_header_spec.js | 50 +++++++++++++++++++
.../notes/components/note_header_spec.js | 15 ------
6 files changed, 61 insertions(+), 43 deletions(-)
rename {app => ee/app}/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue (100%)
create mode 100644 ee/spec/frontend/notes/components/note_header_spec.js
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 74a0b69bc54a..a323e08d26d1 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -1,12 +1,12 @@
<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>
diff --git a/ee/app/assets/javascripts/epic/components/epic_header.vue b/ee/app/assets/javascripts/epic/components/epic_header.vue
index 6da7f2e0cbca..86661ee2b714 100644
--- a/ee/app/assets/javascripts/epic/components/epic_header.vue
+++ b/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>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue b/ee/app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue
similarity index 100%
rename from app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue
rename to ee/app/assets/javascripts/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue
diff --git a/ee/spec/frontend/epic/components/epic_header_spec.js b/ee/spec/frontend/epic/components/epic_header_spec.js
index 53ad84591eef..0e0d00947eff 100644
--- a/ee/spec/frontend/epic/components/epic_header_spec.js
+++ b/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();
});
});
diff --git a/ee/spec/frontend/notes/components/note_header_spec.js b/ee/spec/frontend/notes/components/note_header_spec.js
new file mode 100644
index 000000000000..31d4852e381c
--- /dev/null
+++ b/ee/spec/frontend/notes/components/note_header_spec.js
@@ -0,0 +1,50 @@
+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);
+ });
+ },
+ );
+});
diff --git a/spec/frontend/notes/components/note_header_spec.js b/spec/frontend/notes/components/note_header_spec.js
index 8cb78720c7ef..9b9ce0a8ed0b 100644
--- a/spec/frontend/notes/components/note_header_spec.js
+++ b/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();
--
GitLab