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,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>

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,

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/__snapshots__/last_commit_spec.js.snap

@@ -27,8 +27,8 @@ exports[`Repository last commit component renders commit widget 1`] = `
         href="https://test.com/commit/123"
       >
         
-        Commit title
-      
+          Commit title
+        
       </gllink-stub>
        
       <!---->
@@ -41,12 +41,12 @@ exports[`Repository last commit component renders commit widget 1`] = `
           href="https://test.com/test"
         >
           
-          Test
-        
+            Test
+          
         </gllink-stub>
         
-        authored
-        
+          authored
+          
         <timeagotooltip-stub
           cssclass=""
           time="2019-01-01"
@@ -81,8 +81,8 @@ exports[`Repository last commit component renders commit widget 1`] = `
           class="label label-monospace monospace"
         >
           
-          12345678
-        
+            12345678
+          
         </div>
          
         <clipboardbutton-stub

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 }));