Add latest changes from gitlab-org/gitlab@master

1 files changed, 38 insertions, 22 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 41613bb3307..6ace0bd88f8 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,16 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton, GlTooltip, GlSafeHtmlDirective } from '@gitlab/ui';
+import {
+  GlTooltipDirective,
+  GlButton,
+  GlSafeHtmlDirective,
+  GlAvatarLink,
+  GlAvatarLabeled,
+} from '@gitlab/ui';
+import { isGid, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { glEmojiTag } from '../../emoji';
 import { __, sprintf } from '../../locale';
 import CiIconBadge from './ci_badge_link.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
-import UserAvatarImage from './user_avatar/user_avatar_image.vue';
 
 /**
  * Renders header component for job and pipeline page based on UI mockups
@@ -17,10 +23,9 @@ export default {
   components: {
     CiIconBadge,
     TimeagoTooltip,
-    UserAvatarImage,
-    GlLink,
     GlButton,
-    GlTooltip,
+    GlAvatarLink,
+    GlAvatarLabeled,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -94,6 +99,9 @@ export default {
 
       return this.itemName;
     },
+    userId() {
+      return isGid(this.user?.id) ? getIdFromGraphQLId(this.user?.id) : this.user?.id;
+    },
   },
 
   methods: {
@@ -124,24 +132,32 @@ export default {
       {{ __('by') }}
 
       <template v-if="user">
-        <gl-link
-          v-gl-tooltip
-          :href="userPath"
-          :title="user.email"
-          class="js-user-link commit-committer-link"
+        <gl-avatar-link
+          :data-user-id="userId"
+          :data-username="user.username"
+          :data-name="user.name"
+          :href="user.webUrl"
+          target="_blank"
+          class="js-user-link gl-vertical-align-middle gl-mx-2 gl-align-items-center"
         >
-          <user-avatar-image :img-src="avatarUrl" :img-alt="userAvatarAltText" :size="24" />
-          {{ user.name }}
-        </gl-link>
-        <gl-tooltip v-if="message" :target="() => $refs[$options.EMOJI_REF]">
-          {{ message }}
-        </gl-tooltip>
-        <span
-          v-if="statusTooltipHTML"
-          :ref="$options.EMOJI_REF"
-          v-safe-html:[$options.safeHtmlConfig]="statusTooltipHTML"
-          :data-testid="message"
-        ></span>
+          <gl-avatar-labeled
+            :size="24"
+            :src="avatarUrl"
+            :label="user.name"
+            class="gl-display-none gl-sm-display-inline-flex gl-mx-1"
+          />
+          <strong class="author gl-display-inline gl-sm-display-none!">@{{ user.username }}</strong>
+          <gl-tooltip v-if="message" :target="() => $refs[$options.EMOJI_REF]">
+            {{ message }}
+          </gl-tooltip>
+          <span
+            v-if="statusTooltipHTML"
+            :ref="$options.EMOJI_REF"
+            v-safe-html:[$options.safeHtmlConfig]="statusTooltipHTML"
+            class="gl-ml-2"
+            :data-testid="message"
+          ></span>
+        </gl-avatar-link>
       </template>
     </section>