Use GraphQL API to fetch last commit data for tree

3 files changed, 88 insertions, 83 deletions

diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index f25cee9bb57..26493556063 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -1,10 +1,9 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import Icon from '../../vue_shared/components/icon.vue';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
-import CommitPipelineStatus from '../../projects/tree/components/commit_pipeline_status_component.vue';
 import CiIcon from '../../vue_shared/components/ci_icon.vue';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import getRefMixin from '../mixins/get_ref';
@@ -16,11 +15,11 @@ export default {
     Icon,
     UserAvatarLink,
     TimeagoTooltip,
-    CommitPipelineStatus,
     ClipboardButton,
     CiIcon,
     GlLink,
     GlButton,
+    GlLoadingIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -39,7 +38,10 @@ export default {
           path: this.currentPath.replace(/^\//, ''),
         };
       },
-      update: data => data.project.repository.tree.commit,
+      update: data => data.project.repository.tree.lastCommit,
+      context: {
+        isSingleRequest: true,
+      },
     },
   },
   props: {
@@ -59,14 +61,14 @@ export default {
   computed: {
     statusTitle() {
       return sprintf(s__('Commits|Commit: %{commitText}'), {
-        commitText: this.commit.pipeline.detailedStatus.text,
+        commitText: this.commit.latestPipeline.detailedStatus.text,
       });
     },
     isLoading() {
       return this.$apollo.queries.commit.loading;
     },
     showCommitId() {
-      return this.commit.id.substr(0, 8);
+      return this.commit.sha.substr(0, 8);
     },
   },
   methods: {
@@ -78,68 +80,75 @@ export default {
 </script>
 
 <template>
-  <div v-if="!isLoading" class="info-well d-none d-sm-flex project-last-commit commit p-3">
-    <user-avatar-link
-      v-if="commit.author"
-      :link-href="commit.author.webUrl"
-      :img-src="commit.author.avatarUrl"
-      :img-size="40"
-      class="avatar-cell"
-    />
-    <div class="commit-detail flex-list">
-      <div class="commit-content qa-commit-content">
-        <gl-link :href="commit.webUrl" class="commit-row-message item-title">
-          {{ commit.title }}
-        </gl-link>
-        <gl-button
-          v-if="commit.description"
-          :class="{ open: showDescription }"
-          :aria-label="__('Show commit description')"
-          class="text-expander"
-          @click="toggleShowDescription"
-        >
-          <icon name="ellipsis_h" />
-        </gl-button>
-        <div class="committer">
+  <div class="info-well d-none d-sm-flex project-last-commit commit p-3">
+    <gl-loading-icon v-if="isLoading" size="md" class="mx-auto" />
+    <template v-else>
+      <user-avatar-link
+        v-if="commit.author"
+        :link-href="commit.author.webUrl"
+        :img-src="commit.author.avatarUrl"
+        :img-size="40"
+        class="avatar-cell"
+      />
+      <div class="commit-detail flex-list">
+        <div class="commit-content qa-commit-content">
+          <gl-link :href="commit.webUrl" class="commit-row-message item-title">
+            {{ commit.title }}
+          </gl-link>
+          <gl-button
+            v-if="commit.description"
+            :class="{ open: showDescription }"
+            :aria-label="__('Show commit description')"
+            class="text-expander"
+            @click="toggleShowDescription"
+          >
+            <icon name="ellipsis_h" />
+          </gl-button>
+          <div class="committer">
+            <gl-link
+              v-if="commit.author"
+              :href="commit.author.webUrl"
+              class="commit-author-link js-user-link"
+            >
+              {{ commit.author.name }}
+            </gl-link>
+            authored
+            <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" />
+          </div>
+          <pre
+            v-if="commit.description"
+            v-show="showDescription"
+            class="commit-row-description append-bottom-8"
+          >
+            {{ commit.description }}
+          </pre>
+        </div>
+        <div class="commit-actions flex-row">
           <gl-link
-            v-if="commit.author"
-            :href="commit.author.webUrl"
-            class="commit-author-link js-user-link"
+            v-if="commit.latestPipeline"
+            v-gl-tooltip
+            :href="commit.latestPipeline.detailedStatus.detailsPath"
+            :title="statusTitle"
+            class="js-commit-pipeline"
           >
-            {{ commit.author.name }}
+            <ci-icon
+              :status="commit.latestPipeline.detailedStatus"
+              :size="24"
+              :aria-label="statusTitle"
+            />
           </gl-link>
-          authored
-          <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" />
-        </div>
-        <pre
-          v-if="commit.description"
-          v-show="showDescription"
-          class="commit-row-description append-bottom-8"
-        >
-          {{ commit.description }}
-        </pre>
-      </div>
-      <div class="commit-actions flex-row">
-        <gl-link
-          v-if="commit.pipeline"
-          v-gl-tooltip
-          :href="commit.pipeline.detailedStatus.detailsPath"
-          :title="statusTitle"
-          class="js-commit-pipeline"
-        >
-          <ci-icon :status="commit.pipeline.detailedStatus" :size="24" :aria-label="statusTitle" />
-        </gl-link>
-        <div class="commit-sha-group d-flex">
-          <div class="label label-monospace monospace">
-            {{ showCommitId }}
+          <div class="commit-sha-group d-flex">
+            <div class="label label-monospace monospace">
+              {{ showCommitId }}
+            </div>
+            <clipboard-button
+              :text="commit.sha"
+              :title="__('Copy commit SHA to clipboard')"
+              tooltip-placement="bottom"
+            />
           </div>
-          <clipboard-button
-            :text="commit.id"
-            :title="__('Copy commit SHA to clipboard')"
-            tooltip-placement="bottom"
-          />
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 6280977b05b..ea051eaa414 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -50,23 +50,19 @@ export default function setupVueRepositoryList() {
     },
   });
 
-  const commitEl = document.getElementById('js-last-commit');
-
-  if (commitEl) {
-    // eslint-disable-next-line no-new
-    new Vue({
-      el: commitEl,
-      router,
-      apolloProvider,
-      render(h) {
-        return h(LastCommit, {
-          props: {
-            currentPath: this.$route.params.pathMatch,
-          },
-        });
-      },
-    });
-  }
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: document.getElementById('js-last-commit'),
+    router,
+    apolloProvider,
+    render(h) {
+      return h(LastCommit, {
+        props: {
+          currentPath: this.$route.params.pathMatch,
+        },
+      });
+    },
+  });
 
   return new Vue({
     el,
diff --git a/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql b/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql
index 90901f54d54..3bdfd979fa4 100644
--- a/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql
+++ b/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql
@@ -2,8 +2,8 @@ query pathLastCommit($projectPath: ID!, $path: String, $ref: String!) {
   project(fullPath: $projectPath) {
     repository {
       tree(path: $path, ref: $ref) {
-        commit {
-          id
+        lastCommit {
+          sha
           title
           message
           webUrl
@@ -13,7 +13,7 @@ query pathLastCommit($projectPath: ID!, $path: String, $ref: String!) {
             avatarUrl
             webUrl
           }
-          pipeline {
+          latestPipeline {
             detailedStatus {
               detailsPath
               icon