Add latest changes from gitlab-org/gitlab@master

13 files changed, 105 insertions, 75 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
index f600a207b8d..6713819c382 100644
--- a/app/assets/javascripts/members/components/action_buttons/leave_button.vue
+++ b/app/assets/javascripts/members/components/action_buttons/leave_button.vue
@@ -33,7 +33,6 @@ export default {
       :title="$options.title"
       :aria-label="$options.title"
       icon="leave"
-      variant="danger"
     />
     <leave-modal :member="member" />
   </div>
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..e7d813279a2 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
@@ -25,23 +25,7 @@ export default {
     },
     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,
@@ -89,13 +73,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
index 122e0a142a9..66b5ced1fa9 100644
--- a/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
+++ b/app/assets/javascripts/members/components/action_buttons/user_action_buttons.vue
@@ -1,5 +1,5 @@
 <script>
-import { __, s__, sprintf } from '~/locale';
+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';
@@ -7,6 +7,9 @@ import RemoveMemberButton from './remove_member_button.vue';
 
 export default {
   name: 'UserActionButtons',
+  i18n: {
+    title: __('Remove member'),
+  },
   components: {
     ActionButtonGroup,
     RemoveMemberButton,
@@ -23,10 +26,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    isInvitedUser: {
-      type: Boolean,
-      required: true,
-    },
     permissions: {
       type: Object,
       required: true,
@@ -60,15 +59,6 @@ export default {
         obstacles: parseUserDeletionObstacles(this.member.user),
       };
     },
-    removeMemberButtonText() {
-      return this.isInvitedUser ? null : __('Remove member');
-    },
-    removeMemberButtonIcon() {
-      return this.isInvitedUser ? 'remove' : '';
-    },
-    removeMemberButtonCategory() {
-      return this.isInvitedUser ? 'primary' : 'secondary';
-    },
   },
 };
 </script>
@@ -83,9 +73,7 @@ export default {
         :member-type="member.type"
         :user-deletion-obstacles="userDeletionObstaclesUserData"
         :message="message"
-        :icon="removeMemberButtonIcon"
-        :button-text="removeMemberButtonText"
-        :button-category="removeMemberButtonCategory"
+        :title="$options.i18n.title"
       />
     </div>
     <div v-else-if="permissions.canOverride && !member.isOverridden" class="gl-px-1">
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..81981bfc2ca 100644
--- a/app/assets/javascripts/members/components/table/member_action_buttons.vue
+++ b/app/assets/javascripts/members/components/table/member_action_buttons.vue
@@ -32,10 +32,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    isInvitedUser: {
-      type: Boolean,
-      required: true,
-    },
   },
   computed: {
     actionButtonComponent() {
@@ -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..c847f9c8311 100644
--- a/app/assets/javascripts/members/components/table/members_table.vue
+++ b/app/assets/javascripts/members/components/table/members_table.vue
@@ -4,12 +4,10 @@ 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 { 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 +21,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,7 +39,7 @@ export default {
     RemoveGroupLinkModal,
     RemoveMemberModal,
     ExpirationDatepicker,
-    UserDate,
+    MemberActivity,
     LdapOverrideConfirmationModal: () =>
       import('ee_component/members/components/ldap/ldap_override_confirmation_modal.vue'),
   },
@@ -80,9 +79,6 @@ export default {
 
       return paramName && currentPage && perPage && totalItems;
     },
-    isInvitedUser() {
-      return this.tabQueryParamValue === TAB_QUERY_PARAM_VALUES.invite;
-    },
   },
   methods: {
     hasActionButtons(member) {
@@ -249,7 +245,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 +281,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 +290,6 @@ export default {
           <member-action-buttons
             :member-type="memberType"
             :is-current-user="isCurrentUser"
-            :is-invited-user="isInvitedUser"
             :permissions="permissions"
             :member="member"
           />
diff --git a/app/assets/javascripts/members/constants.js b/app/assets/javascripts/members/constants.js
index dab544c7cbc..5560348b803 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',