Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

24 files changed, 540 insertions, 240 deletions

diff --git a/app/assets/javascripts/members/components/action_buttons/access_request_action_buttons.vue b/app/assets/javascripts/members/components/action_buttons/access_request_action_buttons.vue
index f4893721b9e..164fed308ff 100644
--- a/app/assets/javascripts/members/components/action_buttons/access_request_action_buttons.vue
+++ b/app/assets/javascripts/members/components/action_buttons/access_request_action_buttons.vue
@@ -49,8 +49,6 @@ export default {
         :message="message"
         :title="s__('Member|Deny access')"
         :is-access-request="true"
-        icon="close"
-        button-category="primary"
       />
     </div>
   </action-button-group>
diff --git a/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue b/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue
index 112f722c632..90034f46e7c 100644
--- a/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/approve_access_request_button.vue
@@ -40,7 +40,6 @@ export default {
       :title="$options.title"
       :aria-label="$options.title"
       icon="check"
-      variant="confirm"
       type="submit"
     />
   </gl-form>
diff --git a/app/assets/javascripts/members/components/action_buttons/invite_action_buttons.vue b/app/assets/javascripts/members/components/action_buttons/invite_action_buttons.vue
index ab9abfd38c6..91062c222f4 100644
--- a/app/assets/javascripts/members/components/action_buttons/invite_action_buttons.vue
+++ b/app/assets/javascripts/members/components/action_buttons/invite_action_buttons.vue
@@ -41,8 +41,6 @@ export default {
       <remove-member-button
         :member-id="member.id"
         :message="message"
-        icon="remove"
-        button-category="primary"
         :title="s__('Member|Revoke invite')"
         is-invite
       />
diff --git a/app/assets/javascripts/members/components/action_buttons/leave_button.vue b/app/assets/javascripts/members/components/action_buttons/leave_button.vue
deleted file mode 100644
index f600a207b8d..00000000000
--- a/app/assets/javascripts/members/components/action_buttons/leave_button.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
-import { LEAVE_MODAL_ID } from '../../constants';
-import LeaveModal from '../modals/leave_modal.vue';
-
-export default {
-  name: 'LeaveButton',
-  title: __('Leave'),
-  modalId: LEAVE_MODAL_ID,
-  components: {
-    GlButton,
-    LeaveModal,
-  },
-  directives: {
-    GlModal: GlModalDirective,
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    member: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-button
-      v-gl-tooltip.hover
-      v-gl-modal="$options.modalId"
-      :title="$options.title"
-      :aria-label="$options.title"
-      icon="leave"
-      variant="danger"
-    />
-    <leave-modal :member="member" />
-  </div>
-</template>
diff --git a/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue b/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue
index fef7940eaa2..24500fbe44d 100644
--- a/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/remove_group_link_button.vue
@@ -32,7 +32,6 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip.hover
-    variant="danger"
     :title="$options.i18n.buttonTitle"
     :aria-label="$options.i18n.buttonTitle"
     icon="remove"
diff --git a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
index 27c67e84675..4b3bb89da55 100644
--- a/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/remove_member_button.vue
@@ -14,34 +14,13 @@ export default {
       type: Number,
       required: true,
     },
-    memberType: {
-      type: String,
-      required: false,
-      default: null,
-    },
     message: {
       type: String,
       required: true,
     },
     title: {
       type: String,
-      required: false,
-      default: null,
-    },
-    icon: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    buttonText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    buttonCategory: {
-      type: String,
-      required: false,
-      default: 'secondary',
+      required: true,
     },
     isAccessRequest: {
       type: Boolean,
@@ -70,7 +49,6 @@ export default {
         isAccessRequest: this.isAccessRequest,
         isInvite: this.isInvite,
         memberPath: this.memberPath.replace(':id', this.memberId),
-        memberType: this.memberType,
         message: this.message,
         userDeletionObstacles: this.userDeletionObstacles,
       };
@@ -89,13 +67,10 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip
-    variant="danger"
-    :category="buttonCategory"
     :title="title"
     :aria-label="title"
-    :icon="icon"
+    icon="remove"
     data-qa-selector="delete_member_button"
     @click="showRemoveMemberModal(modalData)"
-    ><template v-if="buttonText">{{ buttonText }}</template></gl-button
-  >
+  />
 </template>
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 122e0a142a9..00000000000
--- a/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
+++ /dev/null
@@ -1,95 +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',
-  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,
-    },
-    isInvitedUser: {
-      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),
-      };
-    },
-    removeMemberButtonText() {
-      return this.isInvitedUser ? null : __('Remove member');
-    },
-    removeMemberButtonIcon() {
-      return this.isInvitedUser ? 'remove' : '';
-    },
-    removeMemberButtonCategory() {
-      return this.isInvitedUser ? 'primary' : 'secondary';
-    },
-  },
-};
-</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"
-        :icon="removeMemberButtonIcon"
-        :button-text="removeMemberButtonText"
-        :button-category="removeMemberButtonCategory"
-      />
-    </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..8ccfc57dc28
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/constants.js
@@ -0,0 +1,22 @@
+import { __, s__ } from '~/locale';
+
+export const I18N = {
+  actions: __('More actions'),
+  disableTwoFactor: s__('Members|Disable two-factor authentication'),
+  editPermissions: s__('Members|Edit permissions'),
+  leaveGroup: __('Leave group'),
+  removeMember: __('Remove member'),
+  confirmDisableTwoFactor: s__(
+    'Members|Are you sure you want to disable the two-factor authentication for %{userName}?',
+  ),
+  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}"?',
+  ),
+  personalProjectOwnerCannotBeRemoved: s__("Members|A personal project's owner cannot be removed."),
+  lastGroupOwnerCannotBeRemoved: s__(
+    'Members|A group must have at least one owner. To remove the member, assign a new owner.',
+  ),
+};
diff --git a/app/assets/javascripts/members/components/action_dropdowns/leave_group_dropdown_item.vue b/app/assets/javascripts/members/components/action_dropdowns/leave_group_dropdown_item.vue
new file mode 100644
index 00000000000..15606ad567c
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/leave_group_dropdown_item.vue
@@ -0,0 +1,36 @@
+<script>
+import { GlDropdownItem, GlModalDirective } from '@gitlab/ui';
+import { LEAVE_MODAL_ID } from '../../constants';
+import LeaveModal from '../modals/leave_modal.vue';
+
+export default {
+  name: 'LeaveGroupDropdownItem',
+  modalId: LEAVE_MODAL_ID,
+  components: {
+    GlDropdownItem,
+    LeaveModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  props: {
+    member: {
+      type: Object,
+      required: true,
+    },
+    permissions: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown-item v-gl-modal="$options.modalId">
+    <span class="gl-text-red-500">
+      <slot></slot>
+    </span>
+    <leave-modal :member="member" :permissions="permissions" />
+  </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..f224aaa31f7
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/remove_member_dropdown_item.vue
@@ -0,0 +1,86 @@
+<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,
+    },
+    /**
+     * `GroupMember` (`app/models/members/group_member.rb`)
+     * or
+     * `ProjectMember` (`app/models/members/project_member.rb`).
+     */
+    memberModelType: {
+      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: () => ({}),
+    },
+    preventRemoval: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState({
+      memberPath(state) {
+        return state[this.namespace].memberPath;
+      },
+    }),
+    modalData() {
+      return {
+        isAccessRequest: this.isAccessRequest,
+        isInvite: this.isInvite,
+        memberPath: this.memberPath.replace(':id', this.memberId),
+        memberModelType: this.memberModelType,
+        message: this.modalMessage,
+        userDeletionObstacles: this.userDeletionObstacles,
+        preventRemoval: this.preventRemoval,
+      };
+    },
+  },
+  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..8f5c32956a2
--- /dev/null
+++ b/app/assets/javascripts/members/components/action_dropdowns/user_action_dropdown.vue
@@ -0,0 +1,134 @@
+<script>
+import { GlDropdown, GlTooltipDirective } from '@gitlab/ui';
+import { sprintf } from '~/locale';
+import { parseUserDeletionObstacles } from '~/vue_shared/components/user_deletion_obstacles/utils';
+import {
+  MEMBER_MODEL_TYPE_GROUP_MEMBER,
+  MEMBER_MODEL_TYPE_PROJECT_MEMBER,
+} from '~/members/constants';
+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,
+    DisableTwoFactorDropdownItem: () =>
+      import(
+        'ee_component/members/components/action_dropdowns/disable_two_factor_dropdown_item.vue'
+      ),
+    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: {
+    modalDisableTwoFactor() {
+      const userName = this.member.user.username;
+      return sprintf(this.$options.i18n.confirmDisableTwoFactor, { userName }, false);
+    },
+    modalRemoveUser() {
+      const { user, source } = this.member;
+
+      if (this.permissions.canRemoveBlockedByLastOwner) {
+        if (this.member.type === MEMBER_MODEL_TYPE_PROJECT_MEMBER) {
+          return I18N.personalProjectOwnerCannotBeRemoved;
+        }
+
+        if (this.member.type === MEMBER_MODEL_TYPE_GROUP_MEMBER) {
+          return I18N.lastGroupOwnerCannotBeRemoved;
+        }
+      }
+
+      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.canDisableTwoFactor || this.showLeaveOrRemove || this.showLdapOverride
+      );
+    },
+    showLeaveOrRemove() {
+      return this.permissions.canRemove || this.permissions.canRemoveBlockedByLastOwner;
+    },
+    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"
+  >
+    <disable-two-factor-dropdown-item
+      v-if="permissions.canDisableTwoFactor"
+      :modal-message="modalDisableTwoFactor"
+      :user-id="member.user.id"
+    >
+      {{ $options.i18n.disableTwoFactor }}
+    </disable-two-factor-dropdown-item>
+
+    <template v-if="showLeaveOrRemove">
+      <leave-group-dropdown-item v-if="isCurrentUser" :member="member" :permissions="permissions">{{
+        $options.i18n.leaveGroup
+      }}</leave-group-dropdown-item>
+
+      <remove-member-dropdown-item
+        v-else
+        :member-id="member.id"
+        :member-model-type="member.type"
+        :user-deletion-obstacles="userDeletionObstaclesUserData"
+        :modal-message="modalRemoveUser"
+        :prevent-removal="permissions.canRemoveBlockedByLastOwner"
+        >{{ $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/modals/leave_modal.vue b/app/assets/javascripts/members/components/modals/leave_modal.vue
index e39669e17dd..8bc6aca9cc1 100644
--- a/app/assets/javascripts/members/components/modals/leave_modal.vue
+++ b/app/assets/javascripts/members/components/modals/leave_modal.vue
@@ -5,22 +5,30 @@ import csrf from '~/lib/utils/csrf';
 import { __, s__, sprintf } from '~/locale';
 import UserDeletionObstaclesList from '~/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue';
 import { parseUserDeletionObstacles } from '~/vue_shared/components/user_deletion_obstacles/utils';
-import { LEAVE_MODAL_ID } from '../../constants';
+import {
+  LEAVE_MODAL_ID,
+  MEMBER_MODEL_TYPE_GROUP_MEMBER,
+  MEMBER_MODEL_TYPE_PROJECT_MEMBER,
+} from '../../constants';
 
 export default {
   name: 'LeaveModal',
   actionCancel: {
     text: __('Cancel'),
   },
-  actionPrimary: {
-    text: __('Leave'),
-    attributes: {
-      variant: 'danger',
-    },
-  },
   csrf,
   modalId: LEAVE_MODAL_ID,
-  modalContent: s__('Members|Are you sure you want to leave "%{source}"?'),
+  i18n: {
+    title: s__('Members|Leave "%{source}"'),
+    body: s__('Members|Are you sure you want to leave "%{source}"?'),
+    preventedTitle: s__('Members|Cannot leave "%{source}"'),
+    preventedBodyProjectMemberModelType: s__(
+      'Members|You cannot remove yourself from a personal project.',
+    ),
+    preventedBodyGroupMemberModelType: s__(
+      'Members|A group must have at least one owner. To leave this group, assign a new owner.',
+    ),
+  },
   components: { GlModal, GlForm, GlSprintf, UserDeletionObstaclesList },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -31,6 +39,10 @@ export default {
       type: Object,
       required: true,
     },
+    permissions: {
+      type: Object,
+      required: true,
+    },
   },
   computed: {
     ...mapState({
@@ -42,7 +54,35 @@ export default {
       return this.memberPath.replace(/:id$/, 'leave');
     },
     modalTitle() {
-      return sprintf(s__('Members|Leave "%{source}"'), { source: this.member.source.fullName });
+      return sprintf(
+        this.permissions.canRemoveBlockedByLastOwner
+          ? this.$options.i18n.preventedTitle
+          : this.$options.i18n.title,
+        { source: this.member.source.fullName },
+      );
+    },
+    preventedModalBody() {
+      if (this.member.type === MEMBER_MODEL_TYPE_PROJECT_MEMBER) {
+        return this.$options.i18n.preventedBodyProjectMemberModelType;
+      }
+
+      if (this.member.type === MEMBER_MODEL_TYPE_GROUP_MEMBER) {
+        return this.$options.i18n.preventedBodyGroupMemberModelType;
+      }
+
+      return null;
+    },
+    actionPrimary() {
+      if (this.permissions.canRemoveBlockedByLastOwner) {
+        return null;
+      }
+
+      return {
+        text: __('Leave'),
+        attributes: {
+          variant: 'danger',
+        },
+      };
     },
     obstacles() {
       return parseUserDeletionObstacles(this.member.user);
@@ -64,13 +104,14 @@ export default {
     v-bind="$attrs"
     :modal-id="$options.modalId"
     :title="modalTitle"
-    :action-primary="$options.actionPrimary"
+    :action-primary="actionPrimary"
     :action-cancel="$options.actionCancel"
     @primary="handlePrimary"
   >
     <gl-form ref="form" :action="leavePath" method="post">
       <p>
-        <gl-sprintf :message="$options.modalContent">
+        <template v-if="permissions.canRemoveBlockedByLastOwner">{{ preventedModalBody }}</template>
+        <gl-sprintf v-else :message="$options.i18n.body">
           <template #source>{{ member.source.fullName }}</template>
         </gl-sprintf>
       </p>
diff --git a/app/assets/javascripts/members/components/modals/remove_member_modal.vue b/app/assets/javascripts/members/components/modals/remove_member_modal.vue
index 1bb1f90302c..337379d8b4e 100644
--- a/app/assets/javascripts/members/components/modals/remove_member_modal.vue
+++ b/app/assets/javascripts/members/components/modals/remove_member_modal.vue
@@ -4,6 +4,7 @@ import { mapActions, mapState } from 'vuex';
 import csrf from '~/lib/utils/csrf';
 import { s__, __ } from '~/locale';
 import UserDeletionObstaclesList from '~/vue_shared/components/user_deletion_obstacles/user_deletion_obstacles_list.vue';
+import { MEMBER_MODEL_TYPE_GROUP_MEMBER } from '../../constants';
 
 export default {
   actionCancel: {
@@ -27,8 +28,13 @@ export default {
       memberPath(state) {
         return state[this.namespace].removeMemberModalData.memberPath;
       },
-      memberType(state) {
-        return state[this.namespace].removeMemberModalData.memberType;
+      /**
+       * `GroupMember` (`app/models/members/group_member.rb`)
+       * or
+       * `ProjectMember` (`app/models/members/project_member.rb`).
+       */
+      memberModelType(state) {
+        return state[this.namespace].removeMemberModalData.memberModelType;
       },
       message(state) {
         return state[this.namespace].removeMemberModalData.message;
@@ -36,12 +42,15 @@ export default {
       userDeletionObstacles(state) {
         return state[this.namespace].removeMemberModalData.userDeletionObstacles ?? {};
       },
+      preventRemoval(state) {
+        return state[this.namespace].removeMemberModalData.preventRemoval;
+      },
       removeMemberModalVisible(state) {
         return state[this.namespace].removeMemberModalVisible;
       },
     }),
     isGroupMember() {
-      return this.memberType === 'GroupMember';
+      return this.memberModelType === MEMBER_MODEL_TYPE_GROUP_MEMBER;
     },
     actionText() {
       if (this.isAccessRequest) {
@@ -53,6 +62,10 @@ export default {
       return __('Remove member');
     },
     actionPrimary() {
+      if (this.preventRemoval) {
+        return null;
+      }
+
       return {
         text: this.actionText,
         attributes: {
@@ -95,21 +108,22 @@ export default {
   >
     <form ref="form" :action="memberPath" method="post">
       <p>{{ message }}</p>
+      <template v-if="!preventRemoval">
+        <user-deletion-obstacles-list
+          v-if="hasObstaclesToUserDeletion"
+          :obstacles="userDeletionObstacles.obstacles"
+          :user-name="userDeletionObstacles.name"
+        />
 
-      <user-deletion-obstacles-list
-        v-if="hasObstaclesToUserDeletion"
-        :obstacles="userDeletionObstacles.obstacles"
-        :user-name="userDeletionObstacles.name"
-      />
-
-      <input ref="method" type="hidden" name="_method" value="delete" />
-      <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
-      <gl-form-checkbox v-if="isGroupMember" name="remove_sub_memberships">
-        {{ __('Also remove direct user membership from subgroups and projects') }}
-      </gl-form-checkbox>
-      <gl-form-checkbox v-if="hasWorkspaceAccess" name="unassign_issuables">
-        {{ __('Also unassign this user from related issues and merge requests') }}
-      </gl-form-checkbox>
+        <input ref="method" type="hidden" name="_method" value="delete" />
+        <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+        <gl-form-checkbox v-if="isGroupMember" name="remove_sub_memberships">
+          {{ __('Also remove direct user membership from subgroups and projects') }}
+        </gl-form-checkbox>
+        <gl-form-checkbox v-if="hasWorkspaceAccess" name="unassign_issuables">
+          {{ __('Also unassign this user from related issues and merge requests') }}
+        </gl-form-checkbox>
+      </template>
     </form>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/members/components/table/created_at.vue b/app/assets/javascripts/members/components/table/created_at.vue
index 0bad70894f9..44d124ad0db 100644
--- a/app/assets/javascripts/members/components/table/created_at.vue
+++ b/app/assets/javascripts/members/components/table/created_at.vue
@@ -1,10 +1,10 @@
 <script>
 import { GlSprintf } from '@gitlab/ui';
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserDate from '~/vue_shared/components/user_date.vue';
 
 export default {
   name: 'CreatedAt',
-  components: { GlSprintf, TimeAgoTooltip },
+  components: { GlSprintf, UserDate },
   props: {
     date: {
       type: String,
@@ -29,12 +29,12 @@ export default {
   <span>
     <gl-sprintf v-if="showCreatedBy" :message="s__('Members|%{time} by %{user}')">
       <template #time>
-        <time-ago-tooltip :time="date" />
+        <user-date :date="date" />
       </template>
       <template #user>
         <a :href="createdBy.webUrl">{{ createdBy.name }}</a>
       </template>
     </gl-sprintf>
-    <time-ago-tooltip v-else :time="date" />
+    <user-date v-else :date="date" />
   </span>
 </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 ecc2ed82ad0..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,
@@ -32,15 +32,11 @@ export default {
       type: Boolean,
       required: true,
     },
-    isInvitedUser: {
-      type: Boolean,
-      required: true,
-    },
   },
   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',
@@ -60,6 +56,5 @@ export default {
     :member="member"
     :permissions="permissions"
     :is-current-user="isCurrentUser"
-    :is-invited-user="isInvitedUser"
   />
 </template>
diff --git a/app/assets/javascripts/members/components/table/member_activity.vue b/app/assets/javascripts/members/components/table/member_activity.vue
new file mode 100644
index 00000000000..3b223cb1afa
--- /dev/null
+++ b/app/assets/javascripts/members/components/table/member_activity.vue
@@ -0,0 +1,38 @@
+<script>
+import UserDate from '~/vue_shared/components/user_date.vue';
+
+export default {
+  components: { UserDate },
+  props: {
+    member: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    userCreated() {
+      return this.member.user?.createdAt;
+    },
+    lastActivity() {
+      return this.member.user?.lastActivityOn;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="userCreated">
+      <strong>{{ s__('Members|User created') }}:</strong>
+      <user-date :date="userCreated" />
+    </div>
+    <div v-if="member.createdAt">
+      <strong>{{ s__('Members|Access granted') }}:</strong>
+      <user-date :date="member.createdAt" />
+    </div>
+    <div v-if="lastActivity">
+      <strong>{{ s__('Members|Last activity') }}:</strong>
+      <user-date :date="lastActivity" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/members/components/table/member_source.vue b/app/assets/javascripts/members/components/table/member_source.vue
index 30fcbfcd3f8..ed1971d020b 100644
--- a/app/assets/javascripts/members/components/table/member_source.vue
+++ b/app/assets/javascripts/members/components/table/member_source.vue
@@ -1,11 +1,19 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
 
 export default {
   name: 'MemberSource',
+  i18n: {
+    inherited: __('Inherited'),
+    directMember: __('Direct member'),
+    directMemberWithCreatedBy: s__('Members|Direct member by %{createdBy}'),
+    inheritedMemberWithCreatedBy: s__('Members|%{group} by %{createdBy}'),
+  },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  components: { GlSprintf },
   props: {
     memberSource: {
       type: Object,
@@ -15,13 +23,40 @@ export default {
       type: Boolean,
       required: true,
     },
+    createdBy: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    showCreatedBy() {
+      return this.createdBy?.name && this.createdBy?.webUrl;
+    },
+    messageWithCreatedBy() {
+      return this.isDirectMember
+        ? this.$options.i18n.directMemberWithCreatedBy
+        : this.$options.i18n.inheritedMemberWithCreatedBy;
+    },
   },
 };
 </script>
 
 <template>
-  <span v-if="isDirectMember">{{ __('Direct member') }}</span>
-  <a v-else v-gl-tooltip.hover :title="__('Inherited')" :href="memberSource.webUrl">{{
+  <span v-if="showCreatedBy">
+    <gl-sprintf :message="messageWithCreatedBy">
+      <template #group>
+        <a v-gl-tooltip.hover="$options.i18n.inherited" :href="memberSource.webUrl">{{
+          memberSource.fullName
+        }}</a>
+      </template>
+      <template #createdBy>
+        <a :href="createdBy.webUrl">{{ createdBy.name }}</a>
+      </template>
+    </gl-sprintf>
+  </span>
+  <span v-else-if="isDirectMember">{{ $options.i18n.directMember }}</span>
+  <a v-else v-gl-tooltip.hover="$options.i18n.inherited" :href="memberSource.webUrl">{{
     memberSource.fullName
   }}</a>
 </template>
diff --git a/app/assets/javascripts/members/components/table/members_table.vue b/app/assets/javascripts/members/components/table/members_table.vue
index 0512bc04085..8f03a298e63 100644
--- a/app/assets/javascripts/members/components/table/members_table.vue
+++ b/app/assets/javascripts/members/components/table/members_table.vue
@@ -2,14 +2,20 @@
 import { GlTable, GlBadge, GlPagination } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import MembersTableCell from 'ee_else_ce/members/components/table/members_table_cell.vue';
-import { canUnban, canOverride, canRemove, canResend, canUpdate } from 'ee_else_ce/members/utils';
+import {
+  canDisableTwoFactor,
+  canUnban,
+  canOverride,
+  canRemove,
+  canRemoveBlockedByLastOwner,
+  canResend,
+  canUpdate,
+} from 'ee_else_ce/members/utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
-import UserDate from '~/vue_shared/components/user_date.vue';
 import {
   FIELD_KEY_ACTIONS,
   FIELDS,
   ACTIVE_TAB_QUERY_PARAM_NAME,
-  TAB_QUERY_PARAM_VALUES,
   MEMBER_STATE_AWAITING,
   MEMBER_STATE_ACTIVE,
   USER_STATE_BLOCKED,
@@ -23,6 +29,7 @@ import ExpirationDatepicker from './expiration_datepicker.vue';
 import MemberActionButtons from './member_action_buttons.vue';
 import MemberAvatar from './member_avatar.vue';
 import MemberSource from './member_source.vue';
+import MemberActivity from './member_activity.vue';
 import RoleDropdown from './role_dropdown.vue';
 
 export default {
@@ -40,11 +47,13 @@ export default {
     RemoveGroupLinkModal,
     RemoveMemberModal,
     ExpirationDatepicker,
-    UserDate,
+    MemberActivity,
+    DisableTwoFactorModal: () =>
+      import('ee_component/members/components/modals/disable_two_factor_modal.vue'),
     LdapOverrideConfirmationModal: () =>
       import('ee_component/members/components/ldap/ldap_override_confirmation_modal.vue'),
   },
-  inject: ['namespace', 'currentUserId'],
+  inject: ['namespace', 'currentUserId', 'canManageMembers'],
   props: {
     tabQueryParamValue: {
       type: String,
@@ -80,18 +89,17 @@ export default {
 
       return paramName && currentPage && perPage && totalItems;
     },
-    isInvitedUser() {
-      return this.tabQueryParamValue === TAB_QUERY_PARAM_VALUES.invite;
-    },
   },
   methods: {
     hasActionButtons(member) {
       return (
         canRemove(member) ||
+        canRemoveBlockedByLastOwner(member, this.canManageMembers) ||
         canResend(member) ||
         canUpdate(member, this.currentUserId) ||
         canOverride(member) ||
-        canUnban(member)
+        canUnban(member) ||
+        canDisableTwoFactor(member)
       );
     },
     showField(field) {
@@ -249,7 +257,11 @@ export default {
 
       <template #cell(source)="{ item: member }">
         <members-table-cell #default="{ isDirectMember }" :member="member">
-          <member-source :is-direct-member="isDirectMember" :member-source="member.source" />
+          <member-source
+            :is-direct-member="isDirectMember"
+            :member-source="member.source"
+            :created-by="member.createdBy"
+          />
         </members-table-cell>
       </template>
 
@@ -281,12 +293,8 @@ export default {
         </members-table-cell>
       </template>
 
-      <template #cell(userCreatedAt)="{ item: member }">
-        <user-date :date="member.user.createdAt" />
-      </template>
-
-      <template #cell(lastActivityOn)="{ item: member }">
-        <user-date :date="member.user.lastActivityOn" />
+      <template #cell(activity)="{ item: member }">
+        <member-activity :member="member" />
       </template>
 
       <template #cell(actions)="{ item: member }">
@@ -294,7 +302,6 @@ export default {
           <member-action-buttons
             :member-type="memberType"
             :is-current-user="isCurrentUser"
-            :is-invited-user="isInvitedUser"
             :permissions="permissions"
             :member="member"
           />
@@ -317,6 +324,7 @@ export default {
       :label-prev-page="__('Go to previous page')"
       align="center"
     />
+    <disable-two-factor-modal />
     <remove-group-link-modal />
     <remove-member-modal />
     <ldap-override-confirmation-modal />
diff --git a/app/assets/javascripts/members/components/table/members_table_cell.vue b/app/assets/javascripts/members/components/table/members_table_cell.vue
index 51eff428d63..407cbc55dd3 100644
--- a/app/assets/javascripts/members/components/table/members_table_cell.vue
+++ b/app/assets/javascripts/members/components/table/members_table_cell.vue
@@ -5,13 +5,14 @@ import {
   isDirectMember,
   isCurrentUser,
   canRemove,
+  canRemoveBlockedByLastOwner,
   canResend,
   canUpdate,
 } from '../../utils';
 
 export default {
   name: 'MembersTableCell',
-  inject: ['currentUserId'],
+  inject: ['currentUserId', 'canManageMembers'],
   props: {
     member: {
       type: Object,
@@ -45,6 +46,9 @@ export default {
     isCurrentUser() {
       return isCurrentUser(this.member, this.currentUserId);
     },
+    canRemoveBlockedByLastOwner() {
+      return canRemoveBlockedByLastOwner(this.member, this.canManageMembers);
+    },
     canRemove() {
       return canRemove(this.member);
     },
@@ -62,6 +66,7 @@ export default {
       isCurrentUser: this.isCurrentUser,
       permissions: {
         canRemove: this.canRemove,
+        canRemoveBlockedByLastOwner: this.canRemoveBlockedByLastOwner,
         canResend: this.canResend,
         canUpdate: this.canUpdate,
       },
diff --git a/app/assets/javascripts/members/components/table/role_dropdown.vue b/app/assets/javascripts/members/components/table/role_dropdown.vue
index 6cd8bf57313..70808587d56 100644
--- a/app/assets/javascripts/members/components/table/role_dropdown.vue
+++ b/app/assets/javascripts/members/components/table/role_dropdown.vue
@@ -2,7 +2,9 @@
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { mapActions } from 'vuex';
+import * as Sentry from '@sentry/browser';
 import { s__ } from '~/locale';
+import { guestOverageConfirmAction } from 'ee_else_ce/members/guest_overage_confirm_action';
 
 export default {
   name: 'RoleDropdown',
@@ -11,7 +13,7 @@ export default {
     GlDropdownItem,
     LdapDropdownItem: () => import('ee_component/members/components/ldap/ldap_dropdown_item.vue'),
   },
-  inject: ['namespace'],
+  inject: ['namespace', 'group'],
   props: {
     member: {
       type: Object,
@@ -30,7 +32,7 @@ export default {
   },
   computed: {
     disabled() {
-      return this.busy || (this.permissions.canOverride && !this.member.isOverridden);
+      return this.permissions.canOverride && !this.member.isOverridden;
     },
   },
   mounted() {
@@ -50,22 +52,45 @@ export default {
         return dispatch(`${this.namespace}/updateMemberRole`, payload);
       },
     }),
-    handleSelect(value, name) {
-      if (value === this.member.accessLevel.integerValue) {
+    async handleOverageConfirm(currentRoleValue, newRoleValue, newRoleName) {
+      return guestOverageConfirmAction({
+        currentRoleValue,
+        newRoleValue,
+        newRoleName,
+        group: this.group,
+        memberId: this.member.id,
+        memberType: this.namespace,
+      });
+    },
+    async handleSelect(newRoleValue, newRoleName) {
+      const currentRoleValue = this.member.accessLevel.integerValue;
+      if (newRoleValue === currentRoleValue) {
         return;
       }
 
       this.busy = true;
 
+      const confirmed = await this.handleOverageConfirm(
+        currentRoleValue,
+        newRoleValue,
+        newRoleName,
+      );
+      if (!confirmed) {
+        this.busy = false;
+        return;
+      }
+
       this.updateMemberRole({
         memberId: this.member.id,
-        accessLevel: { integerValue: value, stringValue: name },
+        accessLevel: { integerValue: newRoleValue, stringValue: newRoleName },
       })
         .then(() => {
           this.$toast.show(s__('Members|Role updated successfully.'));
-          this.busy = false;
         })
-        .catch(() => {
+        .catch((error) => {
+          Sentry.captureException(error);
+        })
+        .finally(() => {
           this.busy = false;
         });
     },
@@ -80,6 +105,7 @@ export default {
     :text="member.accessLevel.stringValue"
     :header-text="__('Change role')"
     :disabled="disabled"
+    :loading="busy"
   >
     <gl-dropdown-item
       v-for="(value, name) in member.validRoles"
diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js
index dab544c7cbc..68c5831db62 100644
--- a/app/assets/javascripts/members/constants.js
+++ b/app/assets/javascripts/members/constants.js
@@ -20,6 +20,7 @@ export const FIELD_KEY_MAX_ROLE = 'maxRole';
 export const FIELD_KEY_USER_CREATED_AT = 'userCreatedAt';
 export const FIELD_KEY_LAST_ACTIVITY_ON = 'lastActivityOn';
 export const FIELD_KEY_EXPIRATION = 'expiration';
+export const FIELD_KEY_ACTIVITY = 'activity';
 export const FIELD_KEY_LAST_SIGN_IN = 'lastSignIn';
 export const FIELD_KEY_ACTIONS = 'actions';
 
@@ -41,8 +42,6 @@ export const FIELDS = [
   {
     key: FIELD_KEY_GRANTED,
     label: __('Access granted'),
-    thClass: 'col-meta',
-    tdClass: 'col-meta',
     sort: {
       asc: 'last_joined',
       desc: 'oldest_joined',
@@ -77,8 +76,14 @@ export const FIELDS = [
     tdClass: 'col-expiration',
   },
   {
+    key: FIELD_KEY_ACTIVITY,
+    label: s__('Members|Activity'),
+    thClass: 'col-activity',
+    tdClass: 'col-activity',
+  },
+  {
     key: FIELD_KEY_USER_CREATED_AT,
-    label: __('Created on'),
+    label: s__('Members|User created'),
     sort: {
       asc: 'oldest_created_user',
       desc: 'recent_created_user',
@@ -158,6 +163,12 @@ export const MEMBER_TYPES = {
   accessRequest: 'accessRequest',
 };
 
+// `app/models/members/group_member.rb`
+export const MEMBER_MODEL_TYPE_GROUP_MEMBER = 'GroupMember';
+
+// `app/models/members/project_member.rb`
+export const MEMBER_MODEL_TYPE_PROJECT_MEMBER = 'ProjectMember';
+
 export const TAB_QUERY_PARAM_VALUES = {
   group: 'groups',
   invite: 'invited',
diff --git a/app/assets/javascripts/members/guest_overage_confirm_action.js b/app/assets/javascripts/members/guest_overage_confirm_action.js
new file mode 100644
index 00000000000..2205c3ad792
--- /dev/null
+++ b/app/assets/javascripts/members/guest_overage_confirm_action.js
@@ -0,0 +1,3 @@
+export const guestOverageConfirmAction = () => {
+  return true;
+};
diff --git a/app/assets/javascripts/members/index.js b/app/assets/javascripts/members/index.js
index 359239c5c0c..c7398127727 100644
--- a/app/assets/javascripts/members/index.js
+++ b/app/assets/javascripts/members/index.js
@@ -21,6 +21,8 @@ export const initMembersApp = (el, options) => {
     canExportMembers,
     canFilterByEnterprise,
     exportCsvPath,
+    groupName,
+    groupPath,
     ...vuexStoreAttributes
   } = parseDataAttributes(el);
 
@@ -66,6 +68,10 @@ export const initMembersApp = (el, options) => {
       canFilterByEnterprise,
       canExportMembers,
       exportCsvPath,
+      group: {
+        name: groupName,
+        path: groupPath,
+      },
     },
     render: (createElement) => createElement('members-tabs'),
   });
diff --git a/app/assets/javascripts/members/utils.js b/app/assets/javascripts/members/utils.js
index bf87ab53d36..09e4b5e8a6f 100644
--- a/app/assets/javascripts/members/utils.js
+++ b/app/assets/javascripts/members/utils.js
@@ -51,6 +51,9 @@ export const canRemove = (member) => {
   return isDirectMember(member) && member.canRemove;
 };
 
+export const canRemoveBlockedByLastOwner = (member, canManageMembers) =>
+  isDirectMember(member) && canManageMembers && member.isLastOwner;
+
 export const canResend = (member) => {
   return Boolean(member.invite?.canResend);
 };
@@ -106,6 +109,9 @@ export const buildSortHref = ({
 };
 
 // Defined in `ee/app/assets/javascripts/members/utils.js`
+export const canDisableTwoFactor = () => false;
+
+// Defined in `ee/app/assets/javascripts/members/utils.js`
 export const canOverride = () => false;
 
 // Defined in `ee/app/assets/javascripts/members/utils.js`