Fix user status text shows in pipeline header

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -5,6 +5,7 @@ import {
   GlSafeHtmlDirective,
   GlAvatarLink,
   GlAvatarLabeled,
+  GlTooltip,
 } from '@gitlab/ui';
 import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { glEmojiTag } from '../../emoji';
@@ -26,6 +27,7 @@ export default {
     GlButton,
     GlAvatarLink,
     GlAvatarLabeled,
+    GlTooltip,
   },
   directives: {
     GlTooltip: GlTooltipDirective,

spec/frontend/vue_shared/components/header_ci_component_spec.js

-import { GlButton, GlAvatarLink } from '@gitlab/ui';
+import { GlButton, GlAvatarLink, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import CiIconBadge from '~/vue_shared/components/ci_badge_link.vue';
@@ -32,6 +32,7 @@ describe('Header CI Component', () => {
   const findTimeAgo = () => wrapper.findComponent(TimeagoTooltip);
   const findUserLink = () => wrapper.findComponent(GlAvatarLink);
   const findSidebarToggleBtn = () => wrapper.findComponent(GlButton);
+  const findStatusTooltip = () => wrapper.findComponent(GlTooltip);
   const findActionButtons = () => wrapper.findByTestId('ci-header-action-buttons');
   const findHeaderItemText = () => wrapper.findByTestId('ci-header-item-text');
 
@@ -91,6 +92,21 @@ describe('Header CI Component', () => {
       });
     });
 
+    describe('when the user has a status', () => {
+      const STATUS_MESSAGE = 'Working on exciting features...';
+
+      beforeEach(() => {
+        createComponent({
+          itemName: 'Pipeline',
+          user: { ...defaultProps.user, status: { message: STATUS_MESSAGE } },
+        });
+      });
+
+      it('renders a tooltip', () => {
+        expect(findStatusTooltip().text()).toBe(STATUS_MESSAGE);
+      });
+    });
+
     describe('with data from GraphQL', () => {
       const userId = 1;