[wip] add last commit section

app/assets/javascripts/repo/components/repo.vue

@@ -4,6 +4,7 @@ import RepoCommitSection from './repo_commit_section.vue';
 import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoFileFooter from './repo_file_footer.vue';
+import RepoFileLastCommit from './repo_file_last_commit.vue';
 import RepoPreview from './repo_preview.vue';
 import RepoMixin from '../mixins/repo_mixin';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
@@ -19,6 +20,7 @@ export default {
     RepoTabs,
     RepoFileButtons,
     RepoFileFooter,
+    RepoFileLastCommit,
     'repo-editor': MonacoLoaderHelper.repoEditorLoader,
     RepoCommitSection,
     PopupDialog,
@@ -60,6 +62,10 @@ export default {
           :mime-type="activeFile.mime_type"
         />
         <repo-file-buttons/>
+        <repo-file-last-commit
+          :auxiliary="activeFile.auxiliary"
+          :last-commit="activeFile.last_commit"
+        />
       </div>
     </div>
     <repo-commit-section/>

app/assets/javascripts/repo/components/repo_file_last_commit.vue

+<script>
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  name: 'repo-file-last-commit',
+  components: {
+    userAvatarLink,
+    timeAgoTooltip,
+  },
+  props: {
+    auxiliary: {
+      type: String,
+      required: true,
+    },
+    lastCommit: {
+      type: Object,
+      required: true,
+    }
+  },
+  computed: {
+    committerProfileUrl() {
+      // TODO: Get from backend
+      return '/root';
+    },
+    committerAvatarUrl() {
+      // TODO: Get from backend
+      return 'http://www.gravatar.com/avatar/d30c6eb41f9082697c13b5bc35b89cc2?s=48&d=identicon';
+    },
+    committerAvatarAlt() {
+      return `${this.lastCommit.committer_name}'s avatar`;
+    },
+    commitUrl() {
+      // TODO: Get from backend
+      return "/gitlab-org/gitlab-ce/commit/6f0f65becbbe968bd26a5a3872044d7b8633bf2e";
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="last-commit-container">
+    <div class="commit flex-row">
+      <user-avatar-link
+        :link-href="committerProfileUrl"
+        :img-src="committerAvatarUrl"
+        :img-alt="committerAvatarAlt"
+        :img-size="36"
+        :tooltip-text="lastCommit.committer_name"
+        tooltip-placement="bottom"
+      />
+      <div class="commit-detail">
+        <div class="commit-content">
+          <a class="item-title" :href="commitUrl">{{lastCommit.message}}</a>
+          <div>
+            <a class="commit-author-link has-tooltip" :href="committerProfileUrl" :data-original-title="lastCommit.committer_email">{{lastCommit.committer_name}}</a> committed
+            <time-ago-tooltip
+              tooltipPlacement="bottom"
+              :time="lastCommit.committed_date"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-html="auxiliary" />
+  </div>
+</template>

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -21,6 +21,7 @@ const RepoHelper = {
       newContent: '',
       changed: false,
       loading: false,
+      auxiliary: '',
     };
   },
 
@@ -130,6 +131,11 @@ const RepoHelper = {
     return isRoot;
   },
 
+  saveAuxiliary(response) {
+    const data = response.data;
+    Store.activeFile.auxiliary = data.html;
+  },
+
   getContent(treeOrFile) {
     let file = treeOrFile;
     return Service.getContent()
@@ -140,6 +146,13 @@ const RepoHelper = {
         if (!file) file = data;
         Store.binary = data.binary;
 
+        if (data.auxiliary_viewer) {
+          const auxiliaryPath = data.auxiliary_viewer.path;
+          Service.get(auxiliaryPath)
+            .then(RepoHelper.saveAuxiliary)
+            .catch(RepoHelper.loadingError)
+        }
+
         if (data.binary) {
           // file might be undefined
           RepoHelper.setBinaryDataAsBase64(data);

app/assets/javascripts/repo/services/repo_service.js

@@ -13,6 +13,10 @@ const RepoService = {
   },
   richExtensionRegExp: /md/,
 
+  get(url) {
+    return axios.get(url);
+  },
+
   getRaw(url) {
     return axios.get(url, {
       // Stop Axios from parsing a JSON file into a JS object

app/assets/stylesheets/pages/repo.scss

@@ -326,3 +326,16 @@
   padding: 5px 10px;
   border-top: 1px solid $white-normal;
 }
+
+.last-commit-container {
+  background-color: $gray-light;
+
+  .commit {
+    padding: $gl-padding;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .blob-viewer {
+    padding: $gl-padding;
+  }
+}