Merge branch '46111-add-avatar-of-last-commit-to-web-ide-status-bar' into 'master'

Resolve "Add Avatar from author of the last commit to WebIDE status bar"

Closes #46111

See merge request gitlab-org/gitlab-ce!24785

app/assets/javascripts/ide/components/ide_status_bar.vue

@@ -107,16 +107,23 @@ export default {
         class="commit-sha"
         >{{ lastCommit.short_id }}</a
       >
-      by {{ lastCommit.author_name }}
+      by
+      <user-avatar-image
+        css-classes="ide-status-avatar"
+        :size="18"
+        :img-src="latestPipeline && latestPipeline.commit.author_gravatar_url"
+        :img-alt="lastCommit.author_name"
+        :tooltip-text="lastCommit.author_name"
+      />
+      {{ lastCommit.author_name }}
       <time
         v-tooltip
         :datetime="lastCommit.committed_date"
         :title="tooltipTitle(lastCommit.committed_date)"
         data-placement="top"
         data-container="body"
+        >{{ lastCommitFormatedAge }}</time
       >
-        {{ lastCommitFormatedAge }}
-      </time>
     </div>
     <div v-if="file" class="ide-status-file">{{ file.name }}</div>
     <div v-if="file" class="ide-status-file">{{ file.eol }}</div>

app/assets/stylesheets/page_bundles/ide.scss

@@ -395,6 +395,11 @@ $ide-commit-header-height: 48px;
   svg {
     vertical-align: sub;
   }
+
+  .ide-status-avatar {
+    float: none;
+    margin: 0 0 1px;
+  }
 }
 
 .ide-status-file {

spec/javascripts/ide/components/ide_status_bar_spec.js

@@ -76,6 +76,9 @@ describe('ideStatusBar', () => {
             icon: 'status_success',
           },
         },
+        commit: {
+          author_gravatar_url: 'www',
+        },
       });
 
       vm.$nextTick()