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

2 files changed, 15 insertions, 3 deletions

diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
index f1d40586903..ce577ae85b0 100644
--- a/app/assets/javascripts/ide/components/ide_status_bar.vue
+++ b/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>
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 553cc44fe83..1f24b8dfa9e 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/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 {