From 707266036880ad9630be198cabadaa169b5f2543 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 14 Jan 2020 09:46:29 +0000
Subject: [PATCH] Preload data before Vue route navigation

Preloads the next tree routes data before navigating
---
 .../repository/components/last_commit.vue     |  2 +-
 .../repository/components/preview/index.vue   |  2 +-
 .../repository/components/table/index.vue     | 13 ++++++-
 .../components/table/parent_row.vue           | 25 +++++++++++--
 .../repository/components/table/row.vue       | 16 +++++++--
 .../repository/components/tree_content.vue    | 12 ++++++-
 .../javascripts/repository/mixins/preload.js  | 36 +++++++++++++++++++
 .../javascripts/repository/pages/tree.vue     |  4 ++-
 ee/spec/features/projects/path_locks_spec.rb  |  3 +-
 .../projects/files/user_browses_files_spec.rb |  5 +++
 .../files/user_browses_lfs_files_spec.rb      | 15 ++++++++
 .../components/table/parent_row_spec.js       | 10 +++++-
 .../repository/components/table/row_spec.js   | 15 +++++++-
 13 files changed, 145 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/repository/mixins/preload.js

diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 70678b0db37f39..8e7529899c098b 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -90,7 +90,7 @@ export default {
 
 <template>
   <div class="info-well d-none d-sm-flex project-last-commit commit p-3">
-    <gl-loading-icon v-if="isLoading" size="md" class="m-auto" />
+    <gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" />
     <template v-else>
       <user-avatar-link
         v-if="commit.author"
diff --git a/app/assets/javascripts/repository/components/preview/index.vue b/app/assets/javascripts/repository/components/preview/index.vue
index 6b3822151ff7ae..2bc93c3f1c1def 100644
--- a/app/assets/javascripts/repository/components/preview/index.vue
+++ b/app/assets/javascripts/repository/components/preview/index.vue
@@ -44,7 +44,7 @@ export default {
       </div>
     </div>
     <div class="blob-viewer">
-      <gl-loading-icon v-if="loading > 0" size="md" class="my-4 mx-auto" />
+      <gl-loading-icon v-if="loading > 0" size="md" color="dark" class="my-4 mx-auto" />
       <div v-else-if="readme" v-html="readme.html"></div>
     </div>
   </article>
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 8f2e9264bcab11..29a3340b83d542 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -34,6 +34,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -69,7 +74,12 @@ export default {
       <table :aria-label="tableCaption" class="table tree-table qa-file-tree" aria-live="polite">
         <table-header v-once />
         <tbody>
-          <parent-row v-show="showParentRow" :commit-ref="ref" :path="path" />
+          <parent-row
+            v-show="showParentRow"
+            :commit-ref="ref"
+            :path="path"
+            :loading-path="loadingPath"
+          />
           <template v-for="val in entries">
             <table-row
               v-for="entry in val"
@@ -84,6 +94,7 @@ export default {
               :url="entry.webUrl"
               :submodule-tree-url="entry.treeUrl"
               :lfs-oid="entry.lfsOid"
+              :loading-path="loadingPath"
             />
           </template>
           <template v-if="isLoading">
diff --git a/app/assets/javascripts/repository/components/table/parent_row.vue b/app/assets/javascripts/repository/components/table/parent_row.vue
index 3c39f4042266fd..70a188f98cc794 100644
--- a/app/assets/javascripts/repository/components/table/parent_row.vue
+++ b/app/assets/javascripts/repository/components/table/parent_row.vue
@@ -1,5 +1,10 @@
 <script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
 export default {
+  components: {
+    GlLoadingIcon,
+  },
   props: {
     commitRef: {
       type: String,
@@ -9,13 +14,21 @@ export default {
       type: String,
       required: true,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
-    parentRoute() {
+    parentPath() {
       const splitArray = this.path.split('/');
       splitArray.pop();
 
-      return { path: `/tree/${this.commitRef}/${splitArray.join('/')}` };
+      return splitArray.join('/');
+    },
+    parentRoute() {
+      return { path: `/tree/${this.commitRef}/${this.parentPath}` };
     },
   },
   methods: {
@@ -29,7 +42,13 @@ export default {
 <template>
   <tr class="tree-item">
     <td colspan="3" class="tree-item-file-name" @click.self="clickRow">
-      <router-link :to="parentRoute" :aria-label="__('Go to parent')">
+      <gl-loading-icon
+        v-if="parentPath === loadingPath"
+        size="sm"
+        inline
+        class="d-inline-block align-text-bottom"
+      />
+      <router-link v-else :to="parentRoute" :aria-label="__('Go to parent')">
         ..
       </router-link>
     </td>
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index cf0457a2abfbb4..a8e13241c3724a 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
+import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -12,6 +12,7 @@ export default {
     GlBadge,
     GlLink,
     GlSkeletonLoading,
+    GlLoadingIcon,
     TimeagoTooltip,
     Icon,
   },
@@ -76,6 +77,11 @@ export default {
       required: false,
       default: null,
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -125,7 +131,13 @@ export default {
 <template>
   <tr :class="`file_${id}`" class="tree-item" @click="openRow">
     <td class="tree-item-file-name">
-      <i :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
+      <gl-loading-icon
+        v-if="path === loadingPath"
+        size="sm"
+        inline
+        class="d-inline-block align-text-bottom fa-fw"
+      />
+      <i v-else :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
       <component :is="linkComponent" :to="routerLinkTo" :href="url" class="str-truncated">
         {{ fullPath }}
       </component>
diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index 949e653fc8f38c..c30d6f05c6a627 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -27,6 +27,11 @@ export default {
       required: false,
       default: '/',
     },
+    loadingPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -109,7 +114,12 @@ export default {
 
 <template>
   <div>
-    <file-table :path="path" :entries="entries" :is-loading="isLoadingFiles" />
+    <file-table
+      :path="path"
+      :entries="entries"
+      :is-loading="isLoadingFiles"
+      :loading-path="loadingPath"
+    />
     <file-preview v-if="readme" :blob="readme" />
   </div>
 </template>
diff --git a/app/assets/javascripts/repository/mixins/preload.js b/app/assets/javascripts/repository/mixins/preload.js
new file mode 100644
index 00000000000000..e68996245a8947
--- /dev/null
+++ b/app/assets/javascripts/repository/mixins/preload.js
@@ -0,0 +1,36 @@
+import getFiles from '../queries/getFiles.query.graphql';
+import getRefMixin from './get_ref';
+import getProjectPath from '../queries/getProjectPath.query.graphql';
+
+export default {
+  mixins: [getRefMixin],
+  apollo: {
+    projectPath: {
+      query: getProjectPath,
+    },
+  },
+  data() {
+    return { projectPath: '', loadingPath: null };
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.preload(to.params.pathMatch, next);
+  },
+  methods: {
+    preload(path, next) {
+      this.loadingPath = path.replace(/^\//, '');
+
+      return this.$apollo
+        .query({
+          query: getFiles,
+          variables: {
+            projectPath: this.projectPath,
+            ref: this.ref,
+            path: this.loadingPath,
+            nextPageCursor: '',
+            pageSize: 100,
+          },
+        })
+        .then(() => next());
+    },
+  },
+};
diff --git a/app/assets/javascripts/repository/pages/tree.vue b/app/assets/javascripts/repository/pages/tree.vue
index dd4d437f4ddf9c..adc332fa370ecf 100644
--- a/app/assets/javascripts/repository/pages/tree.vue
+++ b/app/assets/javascripts/repository/pages/tree.vue
@@ -1,11 +1,13 @@
 <script>
 import TreeContent from '../components/tree_content.vue';
 import { updateElementsVisibility } from '../utils/dom';
+import preloadMixin from '../mixins/preload';
 
 export default {
   components: {
     TreeContent,
   },
+  mixins: [preloadMixin],
   props: {
     path: {
       type: String,
@@ -34,5 +36,5 @@ export default {
 </script>
 
 <template>
-  <tree-content :path="path" />
+  <tree-content :path="path" :loading-path="loadingPath" />
 </template>
diff --git a/ee/spec/features/projects/path_locks_spec.rb b/ee/spec/features/projects/path_locks_spec.rb
index 877543a95c267b..a713a3086a7d44 100644
--- a/ee/spec/features/projects/path_locks_spec.rb
+++ b/ee/spec/features/projects/path_locks_spec.rb
@@ -22,7 +22,8 @@
     within '.tree-content-holder' do
       click_link "encoding"
     end
-    click_link "Lock"
+
+    find('.js-path-lock').click
 
     expect(page).to have_link('Unlock')
   end
diff --git a/spec/features/projects/files/user_browses_files_spec.rb b/spec/features/projects/files/user_browses_files_spec.rb
index 657513431e58f4..b8efabb0cabc18 100644
--- a/spec/features/projects/files/user_browses_files_spec.rb
+++ b/spec/features/projects/files/user_browses_files_spec.rb
@@ -41,6 +41,11 @@
 
     it "shows the `Browse Directory` link" do
       click_link("files")
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
       click_link("History")
 
       expect(page).to have_link("Browse Directory").and have_no_link("Browse Code")
diff --git a/spec/features/projects/files/user_browses_lfs_files_spec.rb b/spec/features/projects/files/user_browses_lfs_files_spec.rb
index 618290416bd3ae..dbeec973865a65 100644
--- a/spec/features/projects/files/user_browses_lfs_files_spec.rb
+++ b/spec/features/projects/files/user_browses_lfs_files_spec.rb
@@ -19,7 +19,17 @@
 
     it 'is possible to see raw content of LFS pointer' do
       click_link 'files'
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
       click_link 'lfs'
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('lfs')
+      end
+
       click_link 'lfs_object.iso'
 
       expect(page).to have_content 'version https://git-lfs.github.com/spec/v1'
@@ -38,6 +48,11 @@
 
     it 'shows an LFS object' do
       click_link('files')
+
+      page.within('.repo-breadcrumb') do
+        expect(page).to have_link('files')
+      end
+
       click_link('lfs')
       click_link('lfs_object.iso')
 
diff --git a/spec/frontend/repository/components/table/parent_row_spec.js b/spec/frontend/repository/components/table/parent_row_spec.js
index 7020055271fb9a..439c7ff080cae5 100644
--- a/spec/frontend/repository/components/table/parent_row_spec.js
+++ b/spec/frontend/repository/components/table/parent_row_spec.js
@@ -1,10 +1,11 @@
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import ParentRow from '~/repository/components/table/parent_row.vue';
 
 let vm;
 let $router;
 
-function factory(path) {
+function factory(path, loadingPath) {
   $router = {
     push: jest.fn(),
   };
@@ -13,6 +14,7 @@ function factory(path) {
     propsData: {
       commitRef: 'master',
       path,
+      loadingPath,
     },
     stubs: {
       RouterLink: RouterLinkStub,
@@ -61,4 +63,10 @@ describe('Repository parent row component', () => {
       path: '/tree/master/app',
     });
   });
+
+  it('renders loading icon when loading parent', () => {
+    factory('app/assets', 'app');
+
+    expect(vm.find(GlLoadingIcon).exists()).toBe(true);
+  });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 067bad0dab6334..b60560366a6674 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
-import { GlBadge, GlLink } from '@gitlab/ui';
+import { GlBadge, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TableRow from '~/repository/components/table/row.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -198,4 +198,17 @@ describe('Repository table row component', () => {
       expect(vm.find(Icon).exists()).toBe(true);
     });
   });
+
+  it('renders loading icon when path is loading', () => {
+    factory({
+      id: '1',
+      sha: '1',
+      path: 'test',
+      type: 'tree',
+      currentPath: '/',
+      loadingPath: 'test',
+    });
+
+    expect(vm.find(GlLoadingIcon).exists()).toBe(true);
+  });
 });
-- 
GitLab