Adapts last commit badge to updated user_avatar_link that uses GlAvatar

app/assets/javascripts/repository/components/last_commit.vue

@@ -14,6 +14,7 @@ import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
 
@@ -27,6 +28,7 @@ export default {
     GlButtonGroup,
     GlLink,
     GlLoadingIcon,
+    UserAvatarImage,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -111,24 +113,24 @@ export default {
 </script>
 
 <template>
-  <div class="well-segment commit gl-p-5 gl-w-full">
+  <div class="well-segment commit gl-p-5 gl-w-full gl-display-flex">
     <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" />
     <template v-else-if="commit">
       <user-avatar-link
         v-if="commit.author"
         :link-href="commit.author.webPath"
         :img-src="commit.author.avatarUrl"
-        :img-size="40"
-        class="avatar-cell"
+        :img-size="32"
+        :img-css-classes="'gl-mr-0!' /* NOTE: this is needed only while we migrate user-avatar-image to GlAvatar (7731 epics) */"
+        class="gl-my-2 gl-mr-4"
+      />
+      <user-avatar-image
+        v-else
+        class="gl-my-2 gl-mr-4"
+        :img-src="commit.authorGravatar || $options.defaultAvatarUrl"
+        :css-classes="'gl-mr-0!' /* NOTE: this is needed only while we migrate user-avatar-image to GlAvatar (7731 epics) */"
+        :size="32"
       />
-      <span v-else class="avatar-cell user-avatar-link">
-        <img
-          :src="commit.authorGravatar || $options.defaultAvatarUrl"
-          width="40"
-          height="40"
-          class="avatar s40"
-        />
-      </span>
       <div class="commit-detail flex-list">
         <div class="commit-content qa-commit-content">
           <gl-link
@@ -168,7 +170,10 @@ export default {
             class="commit-row-description gl-mb-3"
           ></pre>
         </div>
-        <div class="commit-actions flex-row">
+        <div class="gl-flex-grow-1"></div>
+        <div
+          class="commit-actions gl-display-flex gl-flex-align gl-align-items-center gl-flex-direction-row"
+        >
           <div
             v-if="commit.signatureHtml"
             v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */"

spec/features/projects/tree/tree_show_spec.rb

@@ -81,7 +81,7 @@
       wait_for_requests
 
       page.within('.project-last-commit') do
-        expect(page).to have_selector('.user-avatar-link')
+        expect(page).to have_selector('.gl-avatar')
         expect(page).to have_content('Merge branch')
       end
     end

spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap

@@ -2,13 +2,13 @@
 
 exports[`Repository last commit component renders commit widget 1`] = `
 <div
-  class="well-segment commit gl-p-5 gl-w-full"
+  class="well-segment commit gl-p-5 gl-w-full gl-display-flex"
 >
   <user-avatar-link-stub
-    class="avatar-cell"
+    class="gl-my-2 gl-mr-4"
     imgalt=""
-    imgcssclasses=""
-    imgsize="40"
+    imgcssclasses="gl-mr-0!"
+    imgsize="32"
     imgsrc="https://test.com"
     linkhref="/test"
     tooltipplacement="top"
@@ -55,7 +55,11 @@ exports[`Repository last commit component renders commit widget 1`] = `
     </div>
      
     <div
-      class="commit-actions flex-row"
+      class="gl-flex-grow-1"
+    />
+     
+    <div
+      class="commit-actions gl-display-flex gl-flex-align gl-align-items-center gl-flex-direction-row"
     >
       <!---->