Merge branch 'last-commit-widget-api-call' into 'master'

Use GraphQL API to fetch last commit data See merge request gitlab-org/gitlab-ce!29934
2019-06-28 14:37:28 +00:00 · 2019-06-28 14:37:28 +00:00 · c124e553f3
parent c5da0b86d2 df3d9361e5
commit c124e553f3
9 changed files with 122 additions and 102 deletions
--- a/app/assets/javascripts/lib/graphql.js
+++ b/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),
    ),
--- 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">
-          <gl-link
-            v-if="commit.author"
-            :href="commit.author.webUrl"
-            class="commit-author-link js-user-link"
-          >
-            {{ commit.author.name }}
+  <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>
-          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 }}
+          <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.latestPipeline"
+            v-gl-tooltip
+            :href="commit.latestPipeline.detailedStatus.detailsPath"
+            :title="statusTitle"
+            class="js-commit-pipeline"
+          >
+            <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.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>
--- 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,
--- 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
--- a/app/views/projects/_files.html.haml
+++ b/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
--- a/spec/features/projects/files/user_reads_pipeline_status_spec.rb
+++ b/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')
--- a/spec/features/projects/show/user_sees_last_commit_ci_status_spec.rb
+++ b/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')
--- a/spec/frontend/repository/components/snapshots/last_commit_spec.js.snap
+++ b/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
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@ -1,4 +1,5 @@
 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 }));