Add latest changes from gitlab-org/gitlab@master

6 files changed, 196 insertions, 101 deletions

diff --git a/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue b/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
deleted file mode 100644
index 66b5ced1fa9..00000000000
--- a/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script>
-import { s__, __, sprintf } from '~/locale';
-import { parseUserDeletionObstacles } from '~/vue_shared/components/user_deletion_obstacles/utils';
-import ActionButtonGroup from './action_button_group.vue';
-import LeaveButton from './leave_button.vue';
-import RemoveMemberButton from './remove_member_button.vue';
-
-export default {
-  name: 'UserActionButtons',
-  i18n: {
-    title: __('Remove member'),
-  },
-  components: {
-    ActionButtonGroup,
-    RemoveMemberButton,
-    LeaveButton,
-    LdapOverrideButton: () =>
-      import('ee_component/members/components/ldap/ldap_override_button.vue'),
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-    isCurrentUser: {
-      type: Boolean,
-      required: true,
-    },
-    permissions: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    message() {
-      const { user, source } = this.member;
-
-      if (user) {
-        return sprintf(
-          s__('Members|Are you sure you want to remove %{usersName} from "%{source}"?'),
-          {
-            usersName: user.name,
-            source: source.fullName,
-          },
-          false,
-        );
-      }
-
-      return sprintf(
-        s__('Members|Are you sure you want to remove this orphaned member from "%{source}"?'),
-        {
-          source: source.fullName,
-        },
-      );
-    },
-    userDeletionObstaclesUserData() {
-      return {
-        name: this.member.user?.name,
-        obstacles: parseUserDeletionObstacles(this.member.user),
-      };
-    },
-  },
-};
-</script>
-
-<template>
-  <action-button-group>
-    <div v-if="permissions.canRemove" class="gl-px-1">
-      <leave-button v-if="isCurrentUser" :member="member" />
-      <remove-member-button
-        v-else
-        :member-id="member.id"
-        :member-type="member.type"
-        :user-deletion-obstacles="userDeletionObstaclesUserData"
-        :message="message"
-        :title="$options.i18n.title"
-      />
-    </div>
-    <div v-else-if="permissions.canOverride && !member.isOverridden" class="gl-px-1">
-      <ldap-override-button :member="member" />
-    </div>
-  </action-button-group>
-</template>
diff --git a/app/assets/javascripts/members/components/action_dropdowns/constants.js b/app/assets/javascripts/members/components/action_dropdowns/constants.js
new file mode 100644
index 00000000000..f6718713e2b
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/constants.js
@@ -0,0 +1,14 @@
+import { __, s__ } from '~/locale';
+
+export const I18N = {
+  actions: __('More actions'),
+  editPermissions: s__('Members|Edit permissions'),
+  leaveGroup: __('Leave group'),
+  removeMember: __('Remove member'),
+  confirmNormalUserRemoval: s__(
+    'Members|Are you sure you want to remove %{userName} from "%{group}"?',
+  ),
+  confirmOrphanedUserRemoval: s__(
+    'Members|Are you sure you want to remove this orphaned member from "%{group}"?',
+  ),
+};
diff --git a/app/assets/javascripts/members/components/action_buttons/leave_button.vue b/app/assets/javascripts/members/components/action_dropdowns/leave_group_dropdown_item.vue
index 6713819c382..b5e0317d54f 100644
--- a/app/assets/javascripts/members/components/action_buttons/leave_button.vue
+++ b/app/assets/javascripts/members/components/action_dropdowns/leave_group_dropdown_item.vue
@@ -1,20 +1,17 @@
 <script>
-import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlDropdownItem, GlModalDirective } from '@gitlab/ui';
 import { LEAVE_MODAL_ID } from '../../constants';
 import LeaveModal from '../modals/leave_modal.vue';
 
 export default {
-  name: 'LeaveButton',
-  title: __('Leave'),
+  name: 'LeaveGroupDropdownItem',
   modalId: LEAVE_MODAL_ID,
   components: {
-    GlButton,
+    GlDropdownItem,
     LeaveModal,
   },
   directives: {
     GlModal: GlModalDirective,
-    GlTooltip: GlTooltipDirective,
   },
   props: {
     member: {
@@ -26,14 +23,10 @@ export default {
 </script>
 
 <template>
-  <div>
-    <gl-button
-      v-gl-tooltip.hover
-      v-gl-modal="$options.modalId"
-      :title="$options.title"
-      :aria-label="$options.title"
-      icon="leave"
-    />
+  <gl-dropdown-item v-gl-modal="$options.modalId">
+    <span class="gl-text-red-500">
+      <slot></slot>
+    </span>
     <leave-modal :member="member" />
-  </div>
+  </gl-dropdown-item>
 </template>
diff --git a/app/assets/javascripts/members/components/action_dropdowns/remove_member_dropdown_item.vue b/app/assets/javascripts/members/components/action_dropdowns/remove_member_dropdown_item.vue
new file mode 100644
index 00000000000..cf1ba467772
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/remove_member_dropdown_item.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlDropdownItem } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+
+export default {
+  name: 'RemoveMemberDropdownItem',
+  components: { GlDropdownItem },
+  inject: ['namespace'],
+  props: {
+    memberId: {
+      type: Number,
+      required: true,
+    },
+    memberType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    modalMessage: {
+      type: String,
+      required: true,
+    },
+    isAccessRequest: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isInvite: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    userDeletionObstacles: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+    }),
+    modalData() {
+      return {
+        isAccessRequest: this.isAccessRequest,
+        isInvite: this.isInvite,
+        memberPath: this.memberPath.replace(':id', this.memberId),
+        memberType: this.memberType,
+        message: this.modalMessage,
+        userDeletionObstacles: this.userDeletionObstacles,
+      };
+    },
+  },
+  methods: {
+    ...mapActions({
+      showRemoveMemberModal(dispatch, payload) {
+        return dispatch(`${this.namespace}/showRemoveMemberModal`, payload);
+      },
+    }),
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown-item
+    data-qa-selector="delete_member_dropdown_item"
+    @click="showRemoveMemberModal(modalData)"
+  >
+    <span class="gl-text-red-500">
+      <slot></slot>
+    </span>
+  </gl-dropdown-item>
+</template>
diff --git a/app/assets/javascripts/members/components/action_dropdowns/user_action_dropdown.vue b/app/assets/javascripts/members/components/action_dropdowns/user_action_dropdown.vue
new file mode 100644
index 00000000000..1d77657d32b
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/user_action_dropdown.vue
@@ -0,0 +1,96 @@
+<script>
+import { GlDropdown, GlTooltipDirective } from '@gitlab/ui';
+import { sprintf } from '~/locale';
+import { parseUserDeletionObstacles } from '~/vue_shared/components/user_deletion_obstacles/utils';
+import { I18N } from './constants';
+import LeaveGroupDropdownItem from './leave_group_dropdown_item.vue';
+import RemoveMemberDropdownItem from './remove_member_dropdown_item.vue';
+
+export default {
+  name: 'UserActionDropdown',
+  i18n: I18N,
+  components: {
+    GlDropdown,
+    LdapOverrideDropdownItem: () =>
+      import('ee_component/members/components/ldap/ldap_override_dropdown_item.vue'),
+    LeaveGroupDropdownItem,
+    RemoveMemberDropdownItem,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    member: {
+      type: Object,
+      required: true,
+    },
+    isCurrentUser: {
+      type: Boolean,
+      required: true,
+    },
+    permissions: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    modalMessage() {
+      const { user, source } = this.member;
+
+      if (user) {
+        return sprintf(
+          this.$options.i18n.confirmNormalUserRemoval,
+          { userName: user.name, group: source.fullName },
+          false,
+        );
+      }
+
+      return sprintf(this.$options.i18n.confirmOrphanedUserRemoval, { group: source.fullName });
+    },
+    userDeletionObstaclesUserData() {
+      return {
+        name: this.member.user?.name,
+        obstacles: parseUserDeletionObstacles(this.member.user),
+      };
+    },
+    showDropdown() {
+      return this.permissions.canRemove || this.showLdapOverride;
+    },
+    showLdapOverride() {
+      return this.permissions.canOverride && !this.member.isOverridden;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    v-if="showDropdown"
+    v-gl-tooltip="$options.i18n.actions"
+    :text="$options.i18n.actions"
+    text-sr-only
+    icon="ellipsis_v"
+    category="tertiary"
+    no-caret
+    right
+    data-testid="user-action-dropdown"
+    data-qa-selector="user_action_dropdown"
+  >
+    <template v-if="permissions.canRemove">
+      <leave-group-dropdown-item v-if="isCurrentUser" :member="member">{{
+        $options.i18n.leaveGroup
+      }}</leave-group-dropdown-item>
+      <remove-member-dropdown-item
+        v-else
+        :member-id="member.id"
+        :member-type="member.type"
+        :user-deletion-obstacles="userDeletionObstaclesUserData"
+        :modal-message="modalMessage"
+        >{{ $options.i18n.removeMember }}</remove-member-dropdown-item
+      >
+    </template>
+    <ldap-override-dropdown-item v-else-if="showLdapOverride" :member="member">{{
+      $options.i18n.editPermissions
+    }}</ldap-override-dropdown-item>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/members/components/table/member_action_buttons.vue b/app/assets/javascripts/members/components/table/member_action_buttons.vue
index 81981bfc2ca..6ec7be608ba 100644
--- a/app/assets/javascripts/members/components/table/member_action_buttons.vue
+++ b/app/assets/javascripts/members/components/table/member_action_buttons.vue
@@ -3,12 +3,12 @@ import { MEMBER_TYPES, EE_ACTION_BUTTONS } from 'ee_else_ce/members/constants';
 import AccessRequestActionButtons from '../action_buttons/access_request_action_buttons.vue';
 import GroupActionButtons from '../action_buttons/group_action_buttons.vue';
 import InviteActionButtons from '../action_buttons/invite_action_buttons.vue';
-import UserActionButtons from '../action_buttons/user_action_buttons.vue';
+import UserActionDropdown from '../action_dropdowns/user_action_dropdown.vue';
 
 export default {
   name: 'MemberActionButtons',
   components: {
-    UserActionButtons,
+    UserActionDropdown,
     GroupActionButtons,
     InviteActionButtons,
     AccessRequestActionButtons,
@@ -36,7 +36,7 @@ export default {
   computed: {
     actionButtonComponent() {
       const dictionary = {
-        [MEMBER_TYPES.user]: 'user-action-buttons',
+        [MEMBER_TYPES.user]: 'user-action-dropdown',
         [MEMBER_TYPES.group]: 'group-action-buttons',
         [MEMBER_TYPES.invite]: 'invite-action-buttons',
         [MEMBER_TYPES.accessRequest]: 'access-request-action-buttons',