Commit c2957bce authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera

Merge branch '235605-convert-group-members-view-user-status' into 'master'

Add status emoji to member avatar

See merge request gitlab-org/gitlab!44064
parents 6d0685af f1029dff
......@@ -8,11 +8,13 @@ import {
import { generateBadges } from 'ee_else_ce/vue_shared/components/members/utils';
import { __ } from '~/locale';
import { AVATAR_SIZE } from '../constants';
import { glEmojiTag } from '~/emoji';
export default {
name: 'UserAvatar',
avatarSize: AVATAR_SIZE,
orphanedUserLabel: __('Orphaned member'),
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
components: {
GlAvatarLink,
GlAvatarLabeled,
......@@ -38,6 +40,12 @@ export default {
badges() {
return generateBadges(this.member, this.isCurrentUser).filter(badge => badge.show);
},
statusEmoji() {
return this.user?.status?.emoji;
},
},
methods: {
glEmojiTag,
},
};
</script>
......@@ -60,6 +68,9 @@ export default {
:entity-id="user.id"
>
<template #meta>
<div v-if="statusEmoji" class="gl-p-1">
<span v-safe-html:[$options.safeHtmlConfig]="glEmojiTag(statusEmoji)"></span>
</div>
<div v-for="badge in badges" :key="badge.text" class="gl-p-1">
<gl-badge size="sm" :variant="badge.variant">
{{ badge.text }}
......
......@@ -22,6 +22,8 @@ describe('UserAvatar', () => {
const getByText = (text, options) =>
createWrapper(within(wrapper.element).findByText(text, options));
const findStatusEmoji = emoji => wrapper.find(`gl-emoji[data-name="${emoji}"]`);
afterEach(() => {
wrapper.destroy();
});
......@@ -82,4 +84,32 @@ describe('UserAvatar', () => {
expect(getByText("It's you").exists()).toBe(true);
});
});
describe('user status', () => {
const emoji = 'island';
describe('when set', () => {
it('displays the status emoji', () => {
createComponent({
member: {
...memberMock,
user: {
...memberMock.user,
status: { emoji, messageHtml: 'On vacation' },
},
},
});
expect(findStatusEmoji(emoji).exists()).toBe(true);
});
});
describe('when not set', () => {
it('does not display status emoji', () => {
createComponent();
expect(findStatusEmoji(emoji).exists()).toBe(false);
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment