1 files changed, 38 insertions, 6 deletions

diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 6ff6f10f786..4679d922861 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,10 +1,11 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
-import { __, sprintf } from '~/locale';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlTooltip } from '@gitlab/ui';
 import CiIconBadge from './ci_badge_link.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
 import UserAvatarImage from './user_avatar/user_avatar_image.vue';
+import { glEmojiTag } from '../../emoji';
+import { __, sprintf } from '../../locale';
 
 /**
  * Renders header component for job and pipeline page based on UI mockups
@@ -20,10 +21,12 @@ export default {
     UserAvatarImage,
     GlLink,
     GlDeprecatedButton,
+    GlTooltip,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
   },
+  EMOJI_REF: 'EMOJI_REF',
   props: {
     status: {
       type: Object,
@@ -62,6 +65,27 @@ export default {
     userAvatarAltText() {
       return sprintf(__(`%{username}'s avatar`), { username: this.user.name });
     },
+    userPath() {
+      // GraphQL returns `webPath` and Rest `path`
+      return this.user?.webPath || this.user?.path;
+    },
+    avatarUrl() {
+      // GraphQL returns `avatarUrl` and Rest `avatar_url`
+      return this.user?.avatarUrl || this.user?.avatar_url;
+    },
+    statusTooltipHTML() {
+      // Rest `status_tooltip_html` which is a ready to work
+      // html for the emoji and the status text inside a tooltip.
+      // GraphQL returns `status.emoji` and `status.message` which
+      // needs to be combined to make the html we want.
+      const { emoji } = this.user?.status || {};
+      const emojiHtml = emoji ? glEmojiTag(emoji) : '';
+
+      return emojiHtml || this.user?.status_tooltip_html;
+    },
+    message() {
+      return this.user?.status?.message;
+    },
   },
 
   methods: {
@@ -73,7 +97,7 @@ export default {
 </script>
 
 <template>
-  <header class="page-content-header ci-header-container">
+  <header class="page-content-header ci-header-container" data-testid="pipeline-header-content">
     <section class="header-main-content">
       <ci-icon-badge :status="status" />
 
@@ -89,12 +113,12 @@ export default {
       <template v-if="user">
         <gl-link
           v-gl-tooltip
-          :href="user.path"
+          :href="userPath"
           :title="user.email"
           class="js-user-link commit-committer-link"
         >
           <user-avatar-image
-            :img-src="user.avatar_url"
+            :img-src="avatarUrl"
             :img-alt="userAvatarAltText"
             :tooltip-text="user.name"
             :img-size="24"
@@ -102,7 +126,15 @@ export default {
 
           {{ user.name }}
         </gl-link>
-        <span v-if="user.status_tooltip_html" v-html="user.status_tooltip_html"></span>
+        <gl-tooltip v-if="message" :target="() => $refs[$options.EMOJI_REF]">
+          {{ message }}
+        </gl-tooltip>
+        <span
+          v-if="statusTooltipHTML"
+          :ref="$options.EMOJI_REF"
+          :data-testid="message"
+          v-html="statusTooltipHTML"
+        ></span>
       </template>
     </section>