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

Add status emoji to member avatar

See merge request gitlab-org/gitlab!44064

app/assets/javascripts/vue_shared/components/members/avatars/user_avatar.vue

@@ -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 }}

spec/frontend/vue_shared/components/members/avatars/user_avatar_spec.js

@@ -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);
+      });
+    });
+  });
 });