From 00fc9f260706cfd6d6f4261eea24eb3ff455b3e0 Mon Sep 17 00:00:00 2001 From: Douwe Maan Date: Mon, 8 May 2017 18:52:05 -0500 Subject: Load tree readme asynchronously --- app/assets/javascripts/blob/viewer/index.js | 5 ++++- app/assets/javascripts/dispatcher.js | 2 ++ app/models/readme_blob.rb | 13 +++++++++++++ app/models/repository.rb | 2 +- app/models/tree.rb | 5 +---- app/views/projects/_readme.html.haml | 6 +++--- app/views/projects/blob/_viewer.html.haml | 4 ++-- app/views/projects/tree/_readme.html.haml | 6 +++--- changelogs/unreleased/dm-async-tree-readme.yml | 4 ++++ features/project/project.feature | 1 + features/project/source/markdown_render.feature | 3 +++ features/steps/project/project.rb | 2 ++ features/steps/project/source/markdown_render.rb | 1 + spec/models/repository_spec.rb | 2 +- spec/views/projects/tree/show.html.haml_spec.rb | 2 +- 15 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 app/models/readme_blob.rb create mode 100644 changelogs/unreleased/dm-async-tree-readme.yml diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 07d67d49aa5..69ff2f95799 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -8,7 +8,10 @@ export default class BlobViewer { this.richViewer = document.querySelector('.blob-viewer[data-type="rich"]'); this.$fileHolder = $('.file-holder'); - let initialViewerName = document.querySelector('.blob-viewer:not(.hidden)').getAttribute('data-type'); + const initialViewer = document.querySelector('.blob-viewer:not(.hidden)'); + if (!initialViewer) return; + + let initialViewerName = initialViewer.getAttribute('data-type'); this.initBindings(); diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index abb871c3af0..43ad127a4db 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -246,6 +246,7 @@ const ShortcutsBlob = require('./shortcuts_blob'); new NotificationsForm(); if ($('#tree-slider').length) { new TreeView(); + new BlobViewer(); } break; case 'projects:pipelines:builds': @@ -300,6 +301,7 @@ const ShortcutsBlob = require('./shortcuts_blob'); case 'projects:tree:show': shortcut_handler = new ShortcutsNavigation(); new TreeView(); + new BlobViewer(); gl.TargetBranchDropDown.bootstrap(); break; case 'projects:find_file:show': diff --git a/app/models/readme_blob.rb b/app/models/readme_blob.rb new file mode 100644 index 00000000000..1863a08f1de --- /dev/null +++ b/app/models/readme_blob.rb @@ -0,0 +1,13 @@ +class ReadmeBlob < SimpleDelegator + attr_reader :repository + + def initialize(blob, repository) + @repository = repository + + super(blob) + end + + def rendered_markup + repository.rendered_readme + end +end diff --git a/app/models/repository.rb b/app/models/repository.rb index 0c797dd5814..0c36a9e8762 100644 --- a/app/models/repository.rb +++ b/app/models/repository.rb @@ -518,7 +518,7 @@ class Repository def readme if head = tree(:head) - head.readme + ReadmeBlob.new(head.readme, self) end end diff --git a/app/models/tree.rb b/app/models/tree.rb index fe148b0ec65..c89b8eca9be 100644 --- a/app/models/tree.rb +++ b/app/models/tree.rb @@ -40,10 +40,7 @@ class Tree readme_path = path == '/' ? readme_tree.name : File.join(path, readme_tree.name) - git_repo = repository.raw_repository - @readme = Gitlab::Git::Blob.find(git_repo, sha, readme_path) - @readme.load_all_data!(git_repo) - @readme + @readme = repository.blob_at(sha, readme_path) end def trees diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml index c0d12cbc66e..cf09d9db6b7 100644 --- a/app/views/projects/_readme.html.haml +++ b/app/views/projects/_readme.html.haml @@ -2,9 +2,9 @@ %article.readme-holder .pull-right - if can?(current_user, :push_code, @project) - = link_to icon('pencil'), namespace_project_edit_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.name)), class: 'light edit-project-readme' - .file-content.wiki - = markup(readme.name, readme.data, rendered: @repository.rendered_readme) + = link_to icon('pencil'), namespace_project_edit_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.path)), class: 'light edit-project-readme' + + = render 'projects/blob/viewer', viewer: readme.rich_viewer, viewer_url: namespace_project_blob_path(@project.namespace, @project, tree_join(@repository.root_ref, readme.path), viewer: :rich, format: :json) - else .row-content-block.second-block.center %h3.page-title diff --git a/app/views/projects/blob/_viewer.html.haml b/app/views/projects/blob/_viewer.html.haml index 5326bb3e0cf..41187d5ce66 100644 --- a/app/views/projects/blob/_viewer.html.haml +++ b/app/views/projects/blob/_viewer.html.haml @@ -2,8 +2,8 @@ - render_error = viewer.render_error - load_asynchronously = local_assigns.fetch(:load_asynchronously, viewer.server_side?) && render_error.nil? -- url = url_for(params.merge(viewer: viewer.type, format: :json)) if load_asynchronously -.blob-viewer{ data: { type: viewer.type, url: url }, class: ('hidden' if hidden) } +- viewer_url = local_assigns.fetch(:viewer_url) { url_for(params.merge(viewer: viewer.type, format: :json)) } if load_asynchronously +.blob-viewer{ data: { type: viewer.type, url: viewer_url }, class: ('hidden' if hidden) } - if load_asynchronously .text-center.prepend-top-default.append-bottom-default = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content') diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml index 01599060844..2c2f64283f5 100644 --- a/app/views/projects/tree/_readme.html.haml +++ b/app/views/projects/tree/_readme.html.haml @@ -1,8 +1,8 @@ %article.file-holder.readme-holder .js-file-title.file-title = blob_icon readme.mode, readme.name - = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, @path, readme.name)) do + = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, readme.path)) do %strong = readme.name - .file-content.wiki - = markup(readme.name, readme.data) + + = render 'projects/blob/viewer', viewer: readme.rich_viewer, viewer_url: namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, readme.path), viewer: :rich, format: :json) diff --git a/changelogs/unreleased/dm-async-tree-readme.yml b/changelogs/unreleased/dm-async-tree-readme.yml new file mode 100644 index 00000000000..fb1cfeb210a --- /dev/null +++ b/changelogs/unreleased/dm-async-tree-readme.yml @@ -0,0 +1,4 @@ +--- +title: Load tree readme asynchronously +merge_request: +author: diff --git a/features/project/project.feature b/features/project/project.feature index aa22401c88e..23817ef3ac9 100644 --- a/features/project/project.feature +++ b/features/project/project.feature @@ -18,6 +18,7 @@ Feature: Project Then I should see the default project avatar And I should not see the "Remove avatar" button + @javascript Scenario: I should have readme on page And I visit project "Shop" page Then I should see project "Shop" README diff --git a/features/project/source/markdown_render.feature b/features/project/source/markdown_render.feature index fd583618dcf..fe4466ad241 100644 --- a/features/project/source/markdown_render.feature +++ b/features/project/source/markdown_render.feature @@ -19,12 +19,14 @@ Feature: Project Source Markdown Render And I click on Gitlab API in README Then I should see correct document rendered + @javascript Scenario: I view README in markdown branch Then I should see files from repository in markdown And I should see rendered README which contains correct links And I click on Rake tasks in README Then I should see correct directory rendered + @javascript Scenario: I view README in markdown branch to see reference links to directory Then I should see files from repository in markdown And I should see rendered README which contains correct links @@ -74,6 +76,7 @@ Feature: Project Source Markdown Render And I click on Gitlab API in README Then I should see correct document rendered for markdown branch + @javascript Scenario: I browse directory from markdown branch When I visit markdown branch Then I should see files from repository in markdown branch diff --git a/features/steps/project/project.rb b/features/steps/project/project.rb index 280d70925f7..9c2196a8ef7 100644 --- a/features/steps/project/project.rb +++ b/features/steps/project/project.rb @@ -2,6 +2,7 @@ class Spinach::Features::Project < Spinach::FeatureSteps include SharedAuthentication include SharedProject include SharedPaths + include WaitForAjax step 'change project settings' do fill_in 'project_name_edit', with: 'NewName' @@ -86,6 +87,7 @@ class Spinach::Features::Project < Spinach::FeatureSteps end step 'I should see project "Shop" README' do + wait_for_ajax page.within('.readme-holder') do expect(page).to have_content 'testme' end diff --git a/features/steps/project/source/markdown_render.rb b/features/steps/project/source/markdown_render.rb index abdbd795cd5..ada0ff20585 100644 --- a/features/steps/project/source/markdown_render.rb +++ b/features/steps/project/source/markdown_render.rb @@ -120,6 +120,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps When 'I visit markdown branch' do visit namespace_project_tree_path(@project.namespace, @project, "markdown") + wait_for_ajax end When 'I visit markdown branch "README.md" blob' do diff --git a/spec/models/repository_spec.rb b/spec/models/repository_spec.rb index dd6514b3b50..cea8db7a926 100644 --- a/spec/models/repository_spec.rb +++ b/spec/models/repository_spec.rb @@ -1634,7 +1634,7 @@ describe Repository, models: true do context 'with an existing repository' do it 'returns the README' do - expect(repository.readme).to be_an_instance_of(Gitlab::Git::Blob) + expect(repository.readme).to be_an_instance_of(ReadmeBlob) end end end diff --git a/spec/views/projects/tree/show.html.haml_spec.rb b/spec/views/projects/tree/show.html.haml_spec.rb index 900f8d4732f..835a93e620e 100644 --- a/spec/views/projects/tree/show.html.haml_spec.rb +++ b/spec/views/projects/tree/show.html.haml_spec.rb @@ -31,7 +31,7 @@ describe 'projects/tree/show' do it 'displays correctly' do render expect(rendered).to have_css('.js-project-refs-dropdown .dropdown-toggle-text', text: ref) - expect(rendered).to have_css('.readme-holder .file-content', text: ref) + expect(rendered).to have_css('.readme-holder') end end end -- cgit v1.2.1