Use GraphQL API to fetch last commit data for tree

app/assets/javascripts/lib/graphql.js

@@ -22,7 +22,7 @@ export default (resolvers = {}, config = {}) => {
 
   return new ApolloClient({
     link: ApolloLink.split(
-      operation => operation.getContext().hasUpload,
+      operation => operation.getContext().hasUpload || operation.getContext().isSingleRequest,
       createUploadLink(httpOptions),
       new BatchHttpLink(httpOptions),
     ),

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

 <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,7 +80,9 @@ export default {
 </script>
 
 <template>
-  <div v-if="!isLoading" class="info-well d-none d-sm-flex project-last-commit commit p-3">
+  <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"
@@ -121,25 +125,30 @@ export default {
         </div>
         <div class="commit-actions flex-row">
           <gl-link
-          v-if="commit.pipeline"
+            v-if="commit.latestPipeline"
             v-gl-tooltip
-          :href="commit.pipeline.detailedStatus.detailsPath"
+            :href="commit.latestPipeline.detailedStatus.detailsPath"
             :title="statusTitle"
             class="js-commit-pipeline"
           >
-          <ci-icon :status="commit.pipeline.detailedStatus" :size="24" :aria-label="statusTitle" />
+            <ci-icon
+              :status="commit.latestPipeline.detailedStatus"
+              :size="24"
+              :aria-label="statusTitle"
+            />
           </gl-link>
           <div class="commit-sha-group d-flex">
             <div class="label label-monospace monospace">
               {{ showCommitId }}
             </div>
             <clipboard-button
-            :text="commit.id"
+              :text="commit.sha"
               :title="__('Copy commit SHA to clipboard')"
               tooltip-placement="bottom"
             />
           </div>
         </div>
       </div>
+    </template>
   </div>
 </template>

app/assets/javascripts/repository/index.js

@@ -50,12 +50,9 @@ export default function setupVueRepositoryList() {
     },
   });
 
-  const commitEl = document.getElementById('js-last-commit');
-
-  if (commitEl) {
   // eslint-disable-next-line no-new
   new Vue({
-      el: commitEl,
+    el: document.getElementById('js-last-commit'),
     router,
     apolloProvider,
     render(h) {
@@ -66,7 +63,6 @@ export default function setupVueRepositoryList() {
       });
     },
   });
-  }
 
   return new Vue({
     el,

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

app/views/projects/_files.html.haml

@@ -9,7 +9,9 @@
   .nav-block
     = render 'projects/tree/tree_header', tree: @tree
 
-  - if commit
+  - if vue_file_list_enabled?
+    #js-last-commit
+  - elsif commit
     = render 'shared/commit_well', commit: commit, ref: ref, project: project
 
   - if is_project_overview

spec/features/projects/files/user_reads_pipeline_status_spec.rb

@@ -7,6 +7,8 @@ describe 'user reads pipeline status', :js do
   let(:x110_pipeline) { create_pipeline('x1.1.0', 'failed') }
 
   before do
+    stub_feature_flags(vue_file_list: false)
+
     project.add_maintainer(user)
 
     project.repository.add_tag(user, 'x1.1.0', 'v1.1.0')

spec/features/projects/show/user_sees_last_commit_ci_status_spec.rb

@@ -3,6 +3,10 @@ require 'spec_helper'
 describe 'Projects > Show > User sees last commit CI status' do
   set(:project) { create(:project, :repository, :public) }
 
+  before do
+    stub_feature_flags(vue_file_list: false)
+  end
+
   it 'shows the project README', :js do
     project.enable_ci
     pipeline = create(:ci_pipeline, project: project, sha: project.commit.sha, ref: 'master')

spec/frontend/repository/components/last_commit_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import LastCommit from '~/repository/components/last_commit.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
@@ -6,7 +7,7 @@ let vm;
 
 function createCommitData(data = {}) {
   return {
-    id: '123456789',
+    sha: '123456789',
     title: 'Commit title',
     message: 'Commit message',
     webUrl: 'https://test.com/commit/123',
@@ -16,7 +17,7 @@ function createCommitData(data = {}) {
       avatarUrl: 'https://test.com',
       webUrl: 'https://test.com/test',
     },
-    pipeline: {
+    latestPipeline: {
       detailedStatus: {
         detailsPath: 'https://test.com/pipeline',
         icon: 'failed',
@@ -52,12 +53,12 @@ describe('Repository last commit component', () => {
 
   it.each`
     loading  | label
-    ${true}  | ${'hides'}
-    ${false} | ${'shows'}
-  `('$label when $loading is true', ({ loading }) => {
+    ${true}  | ${'shows'}
+    ${false} | ${'hides'}
+  `('$label when loading icon $loading is true', ({ loading }) => {
     factory(createCommitData(), loading);
 
-    expect(vm.isEmpty()).toBe(loading);
+    expect(vm.find(GlLoadingIcon).exists()).toBe(loading);
   });
 
   it('renders commit widget', () => {
@@ -73,11 +74,17 @@ describe('Repository last commit component', () => {
   });
 
   it('hides pipeline components when pipeline does not exist', () => {
-    factory(createCommitData({ pipeline: null }));
+    factory(createCommitData({ latestPipeline: null }));
 
     expect(vm.find('.js-commit-pipeline').exists()).toBe(false);
   });
 
+  it('renders pipeline components', () => {
+    factory();
+
+    expect(vm.find('.js-commit-pipeline').exists()).toBe(true);
+  });
+
   it('hides author component when author does not exist', () => {
     factory(createCommitData({ author: null }));