Show status of snippet author in header

app/assets/javascripts/snippets/components/snippet_header.vue

@@ -200,6 +200,13 @@ export default {
               <gl-avatar :size="24" :src="snippet.author.avatarUrl" />
               <span class="bold">{{ snippet.author.name }}</span>
             </a>
+            <gl-emoji
+              v-if="snippet.author.status"
+              v-gl-tooltip
+              class="gl-vertical-align-baseline font-size-inherit gl-mr-1"
+              :title="snippet.author.status.message"
+              :data-name="snippet.author.status.emoji"
+            />
           </template>
         </gl-sprintf>
       </div>

app/graphql/queries/snippet/snippet.query.graphql

@@ -59,6 +59,11 @@ query GetSnippetQuery($ids: [SnippetID!]) {
         name
         username
         webUrl
+        status {
+          __typename
+          emoji
+          message
+        }
       }
     }
   }

changelogs/unreleased/262394-show-status-of-snippet-author.yml

+---
+title: Show status of snippet author in header
+merge_request: 51030
+author: Kev @KevSlashNull
+type: fixed

spec/frontend/snippets/components/snippet_header_spec.js

@@ -17,6 +17,8 @@ describe('Snippet header component', () => {
   let err;
   const originalRelativeUrlRoot = gon.relative_url_root;
 
+  const GlEmoji = { template: '<img/>' };
+
   function createComponent({
     loading = false,
     permissions = {},
@@ -47,10 +49,15 @@ describe('Snippet header component', () => {
       },
       stubs: {
         ApolloMutation,
+        GlEmoji,
       },
     });
   }
 
+  const findAuthorEmoji = () => wrapper.find(GlEmoji);
+  const findAuthoredMessage = () => wrapper.find('[data-testid="authored-message"]').text();
+  const buttonCount = () => wrapper.findAll(GlButton).length;
+
   beforeEach(() => {
     gon.relative_url_root = '/foo/';
     snippet = {
@@ -66,6 +73,7 @@ describe('Snippet header component', () => {
       project: null,
       author: {
         name: 'Thor Odinson',
+        status: null,
       },
       blobs: [Blob],
       createdAt: new Date(differenceInMilliseconds(32 * 24 * 3600 * 1000)).toISOString(),
@@ -100,17 +108,36 @@ describe('Snippet header component', () => {
   it('renders a message showing snippet creation date and author', () => {
     createComponent();
 
-    const text = wrapper.find('[data-testid="authored-message"]').text();
+    const text = findAuthoredMessage();
     expect(text).toContain('Authored 1 month ago by');
     expect(text).toContain('Thor Odinson');
   });
 
+  describe('author status', () => {
+    it('is rendered when it is set', () => {
+      snippet.author.status = {
+        message: 'At work',
+        emoji: 'hammer',
+      };
+      createComponent();
+
+      expect(findAuthorEmoji().attributes('title')).toBe(snippet.author.status.message);
+      expect(findAuthorEmoji().attributes('data-name')).toBe(snippet.author.status.emoji);
+    });
+
+    it('is not rendered when the user has no status', () => {
+      createComponent();
+
+      expect(findAuthorEmoji().exists()).toBe(false);
+    });
+  });
+
   it('renders a message showing only snippet creation date if author is null', () => {
     snippet.author = null;
 
     createComponent();
 
-    const text = wrapper.find('[data-testid="authored-message"]').text();
+    const text = findAuthoredMessage();
     expect(text).toBe('Authored 1 month ago');
   });
 
@@ -121,7 +148,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlButton).length).toEqual(0);
+    expect(buttonCount()).toEqual(0);
 
     createComponent({
       permissions: {
@@ -129,7 +156,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(wrapper.findAll(GlButton).length).toEqual(1);
+    expect(buttonCount()).toEqual(1);
 
     createComponent({
       permissions: {
@@ -137,7 +164,7 @@ describe('Snippet header component', () => {
         updateSnippet: true,
       },
     });
-    expect(wrapper.findAll(GlButton).length).toEqual(2);
+    expect(buttonCount()).toEqual(2);
 
     createComponent({
       permissions: {
@@ -149,7 +176,7 @@ describe('Snippet header component', () => {
       canCreateSnippet: true,
     });
     return wrapper.vm.$nextTick().then(() => {
-      expect(wrapper.findAll(GlButton).length).toEqual(3);
+      expect(buttonCount()).toEqual(3);
     });
   });