Add latest changes from gitlab-org/gitlab@master

3 files changed, 61 insertions, 1 deletions

diff --git a/app/assets/javascripts/admin/users/components/user_avatar.vue b/app/assets/javascripts/admin/users/components/user_avatar.vue
new file mode 100644
index 00000000000..4f79c4fd451
--- /dev/null
+++ b/app/assets/javascripts/admin/users/components/user_avatar.vue
@@ -0,0 +1,53 @@
+<script>
+import { GlAvatarLink, GlAvatarLabeled, GlBadge } from '@gitlab/ui';
+import { USER_AVATAR_SIZE } from '../constants';
+
+export default {
+  components: {
+    GlAvatarLink,
+    GlAvatarLabeled,
+    GlBadge,
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true,
+    },
+    adminUserPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    adminUserHref() {
+      return this.adminUserPath.replace('id', this.user.username);
+    },
+  },
+  USER_AVATAR_SIZE,
+};
+</script>
+
+<template>
+  <gl-avatar-link
+    v-if="user"
+    class="js-user-link"
+    :href="adminUserHref"
+    :data-user-id="user.id"
+    :data-username="user.username"
+  >
+    <gl-avatar-labeled
+      :size="$options.USER_AVATAR_SIZE"
+      :src="user.avatarUrl"
+      :label="user.name"
+      :sub-label="user.email"
+    >
+      <template #meta>
+        <div v-for="(badge, idx) in user.badges" :key="idx" class="gl-p-1">
+          <gl-badge class="gl-display-flex!" size="sm" :variant="badge.variant">{{
+            badge.text
+          }}</gl-badge>
+        </div>
+      </template>
+    </gl-avatar-labeled>
+  </gl-avatar-link>
+</template>
diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue
index 61c4f1ed8a8..15e31935a4c 100644
--- a/app/assets/javascripts/admin/users/components/users_table.vue
+++ b/app/assets/javascripts/admin/users/components/users_table.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlTable } from '@gitlab/ui';
 import { __ } from '~/locale';
+import UserAvatar from './user_avatar.vue';
 
 const DEFAULT_TH_CLASSES =
   'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
@@ -9,6 +10,7 @@ const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
 export default {
   components: {
     GlTable,
+    UserAvatar,
   },
   props: {
     users: {
@@ -58,6 +60,10 @@ export default {
       :empty-text="s__('AdminUsers|No users found')"
       show-empty
       stacked="md"
-    />
+    >
+      <template #cell(name)="{ item: user }">
+        <UserAvatar :user="user" :admin-user-path="paths.adminUser" />
+      </template>
+    </gl-table>
   </div>
 </template>
diff --git a/app/assets/javascripts/admin/users/constants.js b/app/assets/javascripts/admin/users/constants.js
new file mode 100644
index 00000000000..675fcf00c39
--- /dev/null
+++ b/app/assets/javascripts/admin/users/constants.js
@@ -0,0 +1 @@
+export const USER_AVATAR_SIZE = 32;