Merge branch 'ph/vueFilePrefetch' into 'master'

Preload data before Vue route navigation

See merge request gitlab-org/gitlab!19754

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"

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>

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

app/assets/javascripts/repository/components/table/parent_row.vue

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

app/assets/javascripts/repository/components/table/row.vue

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

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>

app/assets/javascripts/repository/mixins/preload.js

+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());
+    },
+  },
+};

app/assets/javascripts/repository/pages/tree.vue

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

ee/spec/features/projects/path_locks_spec.rb

@@ -22,7 +22,8 @@ describe 'Path Locks', :js do
     within '.tree-content-holder' do
       click_link "encoding"
     end
-    click_link "Lock"
+
+    find('.js-path-lock').click
 
     expect(page).to have_link('Unlock')
   end

spec/features/projects/files/user_browses_files_spec.rb

@@ -41,6 +41,11 @@ describe "User browses files" do
 
     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")

spec/features/projects/files/user_browses_lfs_files_spec.rb

@@ -19,7 +19,17 @@ describe 'Projects > Files > User browses LFS files' do
 
     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 @@ describe 'Projects > Files > User browses LFS files' do
 
     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')
 

spec/frontend/repository/components/table/parent_row_spec.js

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

spec/frontend/repository/components/table/row_spec.js

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