Load tree readme asynchronously

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();

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

app/models/readme_blob.rb

+class ReadmeBlob < SimpleDelegator
+  attr_reader :repository
+
+  def initialize(blob, repository)
+    @repository = repository
+
+    super(blob)
+  end
+
+  def rendered_markup
+    repository.rendered_readme
+  end
+end

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

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

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

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

app/views/projects/tree/_readme.html.haml

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

changelogs/unreleased/dm-async-tree-readme.yml

+---
+title: Load tree readme asynchronously
+merge_request:
+author:

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

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

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

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

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

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