diff options
author | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2021-01-20 13:34:23 -0600 |
commit | 6438df3a1e0fb944485cebf07976160184697d72 (patch) | |
tree | 00b09bfd170e77ae9391b1a2f5a93ef6839f2597 /app/assets/javascripts/admin/users/components | |
parent | 42bcd54d971da7ef2854b896a7b34f4ef8601067 (diff) | |
download | gitlab-ce-6438df3a1e0fb944485cebf07976160184697d72.tar.gz |
Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42
Diffstat (limited to 'app/assets/javascripts/admin/users/components')
-rw-r--r-- | app/assets/javascripts/admin/users/components/user_avatar.vue | 53 | ||||
-rw-r--r-- | app/assets/javascripts/admin/users/components/users_table.vue | 10 |
2 files changed, 61 insertions, 2 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 a2d68972519..15e31935a4c 100644 --- a/app/assets/javascripts/admin/users/components/users_table.vue +++ b/app/assets/javascripts/admin/users/components/users_table.vue @@ -1,14 +1,16 @@ <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!'; -const thWidthClass = width => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`; +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> |