From 8caa62e6b36d38058a840d48f27f38f88b2f87ec Mon Sep 17 00:00:00 2001 From: Samantha Ming Date: Wed, 5 Aug 2020 10:58:29 -0700 Subject: [PATCH 1/2] Add stop point for repo files with more button Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/222685 --- .../lib/utils/axios_startup_calls.js | 19 ++++--- .../repository/components/tree_content.vue | 33 ++++++++++-- app/graphql/types/tree/tree_type.rb | 1 + ...2685-improve-rendering-in-file-browser.yml | 5 ++ locale/gitlab.pot | 3 ++ .../components/tree_content_spec.js | 51 +++++++++++++++++-- 6 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 changelogs/unreleased/222685-improve-rendering-in-file-browser.yml diff --git a/app/assets/javascripts/lib/utils/axios_startup_calls.js b/app/assets/javascripts/lib/utils/axios_startup_calls.js index cb2e8a76c08c84..a047cebc8abf1c 100644 --- a/app/assets/javascripts/lib/utils/axios_startup_calls.js +++ b/app/assets/javascripts/lib/utils/axios_startup_calls.js @@ -34,14 +34,17 @@ const setupAxiosStartupCalls = axios => { }); // eslint-disable-next-line promise/no-nesting - return res.json().then(data => ({ - data, - status: res.status, - statusText: res.statusText, - headers: fetchHeaders, - config: req, - request: req, - })); + return res + .clone() + .json() + .then(data => ({ + data, + status: res.status, + statusText: res.statusText, + headers: fetchHeaders, + config: req, + request: req, + })); }); } diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index 721cc6787dcc83..913a8d2cc1287f 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -1,4 +1,5 @@ @@ -124,6 +136,19 @@ export default { :is-loading="isLoadingFiles" :loading-path="loadingPath" /> +
+ + + + +
diff --git a/app/graphql/types/tree/tree_type.rb b/app/graphql/types/tree/tree_type.rb index b9fb6b28e716ea..ba64daf3990ed5 100644 --- a/app/graphql/types/tree/tree_type.rb +++ b/app/graphql/types/tree/tree_type.rb @@ -25,6 +25,7 @@ class TreeType < BaseObject field :blobs, Types::Tree::BlobType.connection_type, null: false, description: 'Blobs of the tree', + max_page_size: 1000, calls_gitaly: true, resolve: -> (obj, args, ctx) do Gitlab::Graphql::Representation::TreeEntry.decorate(obj.blobs, obj.repository) end diff --git a/changelogs/unreleased/222685-improve-rendering-in-file-browser.yml b/changelogs/unreleased/222685-improve-rendering-in-file-browser.yml new file mode 100644 index 00000000000000..c806c42c1cec83 --- /dev/null +++ b/changelogs/unreleased/222685-improve-rendering-in-file-browser.yml @@ -0,0 +1,5 @@ +--- +title: Improve rendering of very large files in the Repo File Browser +merge_request: 38733 +author: +type: fixed diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 4114d77773f861..d23f22206c648e 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -18730,6 +18730,9 @@ msgstr "" msgid "ProjectFileTree|Name" msgstr "" +msgid "ProjectFileTree|Show more" +msgstr "" + msgid "ProjectLastActivity|Never" msgstr "" diff --git a/spec/frontend/repository/components/tree_content_spec.js b/spec/frontend/repository/components/tree_content_spec.js index da892ce51d8e9b..634987584dee0d 100644 --- a/spec/frontend/repository/components/tree_content_spec.js +++ b/spec/frontend/repository/components/tree_content_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; import TreeContent from '~/repository/components/tree_content.vue'; import FilePreview from '~/repository/components/preview/index.vue'; @@ -25,14 +26,14 @@ describe('Repository table component', () => { vm.destroy(); }); - it('renders file preview', () => { + it('renders file preview', async () => { factory('/'); vm.setData({ entries: { blobs: [{ name: 'README.md' }] } }); - return vm.vm.$nextTick().then(() => { - expect(vm.find(FilePreview).exists()).toBe(true); - }); + await vm.vm.$nextTick(); + + expect(vm.find(FilePreview).exists()).toBe(true); }); describe('normalizeData', () => { @@ -70,4 +71,46 @@ describe('Repository table component', () => { expect(output).toEqual({ hasNextPage: true, nextCursor: 'test' }); }); }); + + describe('Show more button', () => { + const showMoreButton = () => vm.find(GlButton); + + describe('when is present', () => { + beforeEach(async () => { + factory('/'); + vm.setData({ isOverLimit: true, clickedShowMore: false }); + await vm.vm.$nextTick(); + }); + + it('is rendered', async () => { + expect(showMoreButton().exists()).toBe(true); + }); + + it('has initial pageSize of 1000', () => { + expect(vm.vm.pageSize).toBe(1000); + }); + + it('changes pageSize and clickedShowMore when show more button is clicked', async () => { + showMoreButton().vm.$emit('click'); + + expect(vm.vm.pageSize).toBe(100); + expect(vm.vm.clickedShowMore).toBe(true); + }); + + it('triggers fetchFiles when show more button is clicked', async () => { + jest.spyOn(vm.vm, 'fetchFiles'); + showMoreButton().vm.$emit('click'); + + expect(vm.vm.fetchFiles).toBeCalled(); + }); + }); + + it('when is not present', async () => { + vm.setData({ isOverLimit: false, clickedShowMore: true }); + + await vm.vm.$nextTick(); + + expect(showMoreButton().exists()).toBe(false); + }); + }); }); -- GitLab From e8dbab975b860e0be1d0ecf65ab8a2c3ddff086c Mon Sep 17 00:00:00 2001 From: Samantha Ming Date: Mon, 10 Aug 2020 18:03:45 -0700 Subject: [PATCH 2/2] Change to load in chunks instead of single 1000 - Remove BE changes - Update spec & component --- .../repository/components/tree_content.vue | 27 +++++++----- app/graphql/types/tree/tree_type.rb | 1 - .../components/tree_content_spec.js | 43 ++++++++++++++----- 3 files changed, 50 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue index 913a8d2cc1287f..702df42d655c7c 100644 --- a/app/assets/javascripts/repository/components/tree_content.vue +++ b/app/assets/javascripts/repository/components/tree_content.vue @@ -1,5 +1,5 @@