Add latest changes from gitlab-org/gitlab@master

5 files changed, 170 insertions, 80 deletions

diff --git a/spec/frontend/members/components/action_buttons/leave_button_spec.js b/spec/frontend/members/components/action_buttons/leave_button_spec.js
deleted file mode 100644
index ecfbf4460a6..00000000000
--- a/spec/frontend/members/components/action_buttons/leave_button_spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import LeaveButton from '~/members/components/action_buttons/leave_button.vue';
-import LeaveModal from '~/members/components/modals/leave_modal.vue';
-import { LEAVE_MODAL_ID } from '~/members/constants';
-import { member } from '../../mock_data';
-
-describe('LeaveButton', () => {
-  let wrapper;
-
-  const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(LeaveButton, {
-      propsData: {
-        member,
-        ...propsData,
-      },
-      directives: {
-        GlTooltip: createMockDirective(),
-        GlModal: createMockDirective(),
-      },
-    });
-  };
-
-  const findButton = () => wrapper.findComponent(GlButton);
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('displays a tooltip', () => {
-    const button = findButton();
-
-    expect(getBinding(button.element, 'gl-tooltip')).not.toBeUndefined();
-    expect(button.attributes('title')).toBe('Leave');
-  });
-
-  it('sets `aria-label` attribute', () => {
-    expect(findButton().attributes('aria-label')).toBe('Leave');
-  });
-
-  it('renders leave modal', () => {
-    const leaveModal = wrapper.findComponent(LeaveModal);
-
-    expect(leaveModal.exists()).toBe(true);
-    expect(leaveModal.props('member')).toEqual(member);
-  });
-
-  it('triggers leave modal', () => {
-    const binding = getBinding(findButton().element, 'gl-modal');
-
-    expect(binding).not.toBeUndefined();
-    expect(binding.value).toBe(LEAVE_MODAL_ID);
-  });
-});
diff --git a/spec/frontend/members/components/action_dropdowns/leave_group_dropdown_item_spec.js b/spec/frontend/members/components/action_dropdowns/leave_group_dropdown_item_spec.js
new file mode 100644
index 00000000000..4b47b156cba
--- /dev/null
+++ b/spec/frontend/members/components/action_dropdowns/leave_group_dropdown_item_spec.js
@@ -0,0 +1,53 @@
+import { GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import LeaveGroupDropdownItem from '~/members/components/action_dropdowns/leave_group_dropdown_item.vue';
+import LeaveModal from '~/members/components/modals/leave_modal.vue';
+import { LEAVE_MODAL_ID } from '~/members/constants';
+import { member } from '../../mock_data';
+
+describe('LeaveGroupDropdownItem', () => {
+  let wrapper;
+  const text = 'dummy';
+
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMount(LeaveGroupDropdownItem, {
+      propsData: {
+        member,
+        ...propsData,
+      },
+      directives: {
+        GlModal: createMockDirective(),
+      },
+      slots: {
+        default: text,
+      },
+    });
+  };
+
+  const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a slot with red text', () => {
+    expect(findDropdownItem().html()).toContain(`<span class="gl-text-red-500">${text}</span>`);
+  });
+
+  it('contains LeaveModal component', () => {
+    const leaveModal = wrapper.findComponent(LeaveModal);
+
+    expect(leaveModal.props('member')).toEqual(member);
+  });
+
+  it('binds to the LeaveModal component', () => {
+    const binding = getBinding(findDropdownItem().element, 'gl-modal');
+
+    expect(binding.value).toBe(LEAVE_MODAL_ID);
+  });
+});
diff --git a/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js b/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js
new file mode 100644
index 00000000000..2cf3d3fb17b
--- /dev/null
+++ b/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js
@@ -0,0 +1,74 @@
+import { GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { modalData } from 'jest/members/mock_data';
+import RemoveMemberDropdownItem from '~/members/components/action_dropdowns/remove_member_dropdown_item.vue';
+import { MEMBER_TYPES } from '~/members/constants';
+
+Vue.use(Vuex);
+
+describe('RemoveMemberDropdownItem', () => {
+  let wrapper;
+  const text = 'dummy';
+
+  const actions = {
+    showRemoveMemberModal: jest.fn(),
+  };
+
+  const createStore = (state = {}) => {
+    return new Vuex.Store({
+      modules: {
+        [MEMBER_TYPES.user]: {
+          namespaced: true,
+          state: {
+            memberPath: '/groups/foo-bar/-/group_members/:id',
+            ...state,
+          },
+          actions,
+        },
+      },
+    });
+  };
+
+  const createComponent = (propsData = {}, state) => {
+    wrapper = shallowMount(RemoveMemberDropdownItem, {
+      store: createStore(state),
+      provide: {
+        namespace: MEMBER_TYPES.user,
+      },
+      propsData: {
+        memberId: 1,
+        memberType: 'GroupMember',
+        modalMessage: 'Are you sure you want to remove John Smith?',
+        isAccessRequest: true,
+        isInvite: true,
+        userDeletionObstacles: { name: 'user', obstacles: [] },
+        ...propsData,
+      },
+      slots: {
+        default: text,
+      },
+    });
+  };
+
+  const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a slot with red text', () => {
+    expect(findDropdownItem().html()).toContain(`<span class="gl-text-red-500">${text}</span>`);
+  });
+
+  it('calls Vuex action to show `remove member` modal when clicked', () => {
+    findDropdownItem().vm.$emit('click');
+
+    expect(actions.showRemoveMemberModal).toHaveBeenCalledWith(expect.any(Object), modalData);
+  });
+});
diff --git a/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js b/spec/frontend/members/components/action_dropdowns/user_action_dropdown_spec.js
index 08132df6fd9..23c2ce3f555 100644
--- a/spec/frontend/members/components/action_buttons/user_action_buttons_spec.js
+++ b/spec/frontend/members/components/action_dropdowns/user_action_dropdown_spec.js
@@ -1,25 +1,31 @@
 import { shallowMount } from '@vue/test-utils';
-import LeaveButton from '~/members/components/action_buttons/leave_button.vue';
-import RemoveMemberButton from '~/members/components/action_buttons/remove_member_button.vue';
-import UserActionButtons from '~/members/components/action_buttons/user_action_buttons.vue';
+import { sprintf } from '~/locale';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import LeaveGroupDropdownItem from '~/members/components/action_dropdowns/leave_group_dropdown_item.vue';
+import RemoveMemberDropdownItem from '~/members/components/action_dropdowns/remove_member_dropdown_item.vue';
+import UserActionDropdown from '~/members/components/action_dropdowns/user_action_dropdown.vue';
+import { I18N } from '~/members/components/action_dropdowns/constants';
 import { parseUserDeletionObstacles } from '~/vue_shared/components/user_deletion_obstacles/utils';
 import { member, orphanedMember } from '../../mock_data';
 
-describe('UserActionButtons', () => {
+describe('UserActionDropdown', () => {
   let wrapper;
 
   const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(UserActionButtons, {
+    wrapper = shallowMount(UserActionDropdown, {
       propsData: {
         member,
         isCurrentUser: false,
         isInvitedUser: false,
         ...propsData,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
-  const findRemoveMemberButton = () => wrapper.findComponent(RemoveMemberButton);
+  const findRemoveMemberDropdownItem = () => wrapper.findComponent(RemoveMemberDropdownItem);
 
   afterEach(() => {
     wrapper.destroy();
@@ -34,16 +40,30 @@ describe('UserActionButtons', () => {
       });
     });
 
-    it('renders remove member button', () => {
-      expect(findRemoveMemberButton().exists()).toBe(true);
+    it('renders remove member dropdown with correct text', () => {
+      const removeMemberDropdownItem = findRemoveMemberDropdownItem();
+      expect(removeMemberDropdownItem.exists()).toBe(true);
+      expect(removeMemberDropdownItem.html()).toContain(I18N.removeMember);
+    });
+
+    it('displays a tooltip', () => {
+      const tooltip = getBinding(wrapper.element, 'gl-tooltip');
+      expect(tooltip).not.toBeUndefined();
+      expect(tooltip.value).toBe(I18N.actions);
     });
 
     it('sets props correctly', () => {
-      expect(findRemoveMemberButton().props()).toEqual({
+      expect(findRemoveMemberDropdownItem().props()).toEqual({
         memberId: member.id,
         memberType: 'GroupMember',
-        message: `Are you sure you want to remove ${member.user.name} from "${member.source.fullName}"?`,
-        title: UserActionButtons.i18n.title,
+        modalMessage: sprintf(
+          I18N.confirmNormalUserRemoval,
+          {
+            userName: member.user.name,
+            group: member.source.fullName,
+          },
+          false,
+        ),
         isAccessRequest: false,
         isInvite: false,
         userDeletionObstacles: {
@@ -62,14 +82,14 @@ describe('UserActionButtons', () => {
           },
         });
 
-        expect(findRemoveMemberButton().props('message')).toBe(
-          `Are you sure you want to remove this orphaned member from "${orphanedMember.source.fullName}"?`,
+        expect(findRemoveMemberDropdownItem().props('modalMessage')).toBe(
+          sprintf(I18N.confirmOrphanedUserRemoval, { group: orphanedMember.source.fullName }),
         );
       });
     });
 
     describe('when member is the current user', () => {
-      it('renders leave button', () => {
+      it('renders leave dropdown with correct text', () => {
         createComponent({
           isCurrentUser: true,
           permissions: {
@@ -77,20 +97,22 @@ describe('UserActionButtons', () => {
           },
         });
 
-        expect(wrapper.findComponent(LeaveButton).exists()).toBe(true);
+        const leaveGroupDropdownItem = wrapper.findComponent(LeaveGroupDropdownItem);
+        expect(leaveGroupDropdownItem.exists()).toBe(true);
+        expect(leaveGroupDropdownItem.html()).toContain(I18N.leaveGroup);
       });
     });
   });
 
   describe('when user does not have `canRemove` permissions', () => {
-    it('does not render remove member button', () => {
+    it('does not render remove member dropdown', () => {
       createComponent({
         permissions: {
           canRemove: false,
         },
       });
 
-      expect(findRemoveMemberButton().exists()).toBe(false);
+      expect(findRemoveMemberDropdownItem().exists()).toBe(false);
     });
   });
 
@@ -108,7 +130,7 @@ describe('UserActionButtons', () => {
     });
 
     it('sets member type correctly', () => {
-      expect(findRemoveMemberButton().props().memberType).toBe('GroupMember');
+      expect(findRemoveMemberDropdownItem().props().memberType).toBe('GroupMember');
     });
   });
 
@@ -126,7 +148,7 @@ describe('UserActionButtons', () => {
     });
 
     it('sets member type correctly', () => {
-      expect(findRemoveMemberButton().props().memberType).toBe('ProjectMember');
+      expect(findRemoveMemberDropdownItem().props().memberType).toBe('ProjectMember');
     });
   });
 });
diff --git a/spec/frontend/members/components/table/member_action_buttons_spec.js b/spec/frontend/members/components/table/member_action_buttons_spec.js
index 03cfc6ca0f6..402a5e9db27 100644
--- a/spec/frontend/members/components/table/member_action_buttons_spec.js
+++ b/spec/frontend/members/components/table/member_action_buttons_spec.js
@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import AccessRequestActionButtons from '~/members/components/action_buttons/access_request_action_buttons.vue';
 import GroupActionButtons from '~/members/components/action_buttons/group_action_buttons.vue';
 import InviteActionButtons from '~/members/components/action_buttons/invite_action_buttons.vue';
-import UserActionButtons from '~/members/components/action_buttons/user_action_buttons.vue';
+import UserActionDropdown from '~/members/components/action_dropdowns/user_action_dropdown.vue';
 import MemberActionButtons from '~/members/components/table/member_action_buttons.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 import { member as memberMock, group, invite, accessRequest } from '../../mock_data';
@@ -29,7 +29,7 @@ describe('MemberActionButtons', () => {
 
   it.each`
     memberType                    | member           | expectedComponent             | expectedComponentName
-    ${MEMBER_TYPES.user}          | ${memberMock}    | ${UserActionButtons}          | ${'UserActionButtons'}
+    ${MEMBER_TYPES.user}          | ${memberMock}    | ${UserActionDropdown}         | ${'UserActionDropdown'}
     ${MEMBER_TYPES.group}         | ${group}         | ${GroupActionButtons}         | ${'GroupActionButtons'}
     ${MEMBER_TYPES.invite}        | ${invite}        | ${InviteActionButtons}        | ${'InviteActionButtons'}
     ${MEMBER_TYPES.accessRequest} | ${accessRequest} | ${AccessRequestActionButtons} | ${'AccessRequestActionButtons'}