Render viewer error synchronously so that 'view the source' link will work

app/assets/javascripts/blob/viewer/index.js

@@ -2,7 +2,8 @@
 /* global Flash */
 export default class BlobViewer {
   constructor() {
-    this.switcherBtns = document.querySelectorAll('.js-blob-viewer-switcher');
+    this.switcher = document.querySelector('.js-blob-viewer-switcher');
+    this.switcherBtns = document.querySelectorAll('.js-blob-viewer-switch-btn');
     this.copySourceBtn = document.querySelector('.js-copy-blob-source-btn');
     this.simpleViewer = document.querySelector('.blob-viewer[data-type="simple"]');
     this.richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
@@ -10,22 +11,22 @@ export default class BlobViewer {
 
     let initialViewerName = document.querySelector('.blob-viewer:not(.hidden)').getAttribute('data-type');
 
-    if (this.switcherBtns.length) {
-      this.initBindings();
+    this.initBindings();
 
-      if (location.hash.indexOf('#L') === 0) {
-        initialViewerName = 'simple';
-      }
+    if (this.switcher && location.hash.indexOf('#L') === 0) {
+      initialViewerName = 'simple';
     }
 
     this.switchToViewer(initialViewerName);
   }
 
   initBindings() {
-    Array.from(this.switcherBtns)
-      .forEach((el) => {
-        el.addEventListener('click', this.switchViewHandler.bind(this));
-      });
+    if (this.switcherBtns.length) {
+      Array.from(this.switcherBtns)
+        .forEach((el) => {
+          el.addEventListener('click', this.switchViewHandler.bind(this));
+        });
+    }
 
     if (this.copySourceBtn) {
       this.copySourceBtn.addEventListener('click', () => {
@@ -91,8 +92,8 @@ export default class BlobViewer {
     const newViewer = document.querySelector(`.blob-viewer[data-type='${name}']`);
     if (this.activeViewer === newViewer) return;
 
-    const oldButton = document.querySelector('.js-blob-viewer-switcher.active');
-    const newButton = document.querySelector(`.js-blob-viewer-switcher[data-viewer='${name}']`);
+    const oldButton = document.querySelector('.js-blob-viewer-switch-btn.active');
+    const newButton = document.querySelector(`.js-blob-viewer-switch-btn[data-viewer='${name}']`);
     const oldViewer = document.querySelector(`.blob-viewer:not([data-type='${name}'])`);
 
     if (oldButton) {

app/controllers/concerns/renders_blob.rb

@@ -11,7 +11,7 @@ module RendersBlob
     return render_404 unless viewer
 
     render json: {
-      html: view_to_html_string("projects/blob/_viewer", viewer: viewer)
+      html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_asynchronously: false)
     }
   end
 end

app/helpers/blob_helper.rb

@@ -233,7 +233,7 @@ module BlobHelper
     end
 
     if viewer.rich? && viewer.blob.rendered_as_text?(override_max_size: true)
-      options << link_to('view the source', '#', class: 'js-blob-viewer-switcher', data: { viewer: 'simple' })
+      options << link_to('view the source', '#', class: 'js-blob-viewer-switch-btn', data: { viewer: 'simple' })
     end
 
     options << link_to('download it', blob_raw_url, target: '_blank', rel: 'noopener noreferrer')

app/views/projects/blob/_content.html.haml

@@ -2,7 +2,7 @@
 - rich_viewer = blob.rich_viewer
 - rich_viewer_active = rich_viewer && params[:viewer] != 'simple'
 
-= render 'projects/blob/viewer_wrapper', viewer: simple_viewer, hidden: rich_viewer_active
+= render 'projects/blob/viewer', viewer: simple_viewer, hidden: rich_viewer_active
 
 - if rich_viewer
-  = render 'projects/blob/viewer_wrapper', viewer: rich_viewer, hidden: !rich_viewer_active
+  = render 'projects/blob/viewer', viewer: rich_viewer, hidden: !rich_viewer_active

app/views/projects/blob/_viewer.html.haml

-- if error = viewer.render_error(override_max_size: params[:override_max_size])
-  = render 'projects/blob/render_error', viewer: viewer, error: error
-- else
-  - viewer.prepare!
-  = render viewer.partial_path, viewer: viewer
+- hidden = local_assigns.fetch(:hidden, false)
+- render_error = viewer.render_error(override_max_size: params[:override_max_size])
+- 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) }
+  - if load_asynchronously
+    .text-center.prepend-top-default.append-bottom-default
+      = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content')
+  - elsif render_error
+    = render 'projects/blob/render_error', viewer: viewer, error: render_error
+  - else
+    - viewer.prepare!
+    = render viewer.partial_path, viewer: viewer

app/views/projects/blob/_viewer_switcher.html.haml

@@ -2,11 +2,11 @@
   - simple_viewer = blob.simple_viewer
   - rich_viewer = blob.rich_viewer
 
-  .btn-group{ role: "group" }
+  .btn-group.js-blob-viewer-switcher{ role: "group" }
     - simple_label = "Display #{simple_viewer.switcher_title}"
-    %button.btn.btn-default.btn-sm.js-blob-viewer-switcher.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
+    %button.btn.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
       = icon(simple_viewer.switcher_icon)
 
     - rich_label = "Display #{rich_viewer.switcher_title}"
-    %button.btn.btn-default.btn-sm.js-blob-viewer-switcher.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
+    %button.btn.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => rich_label, title: rich_label, data: { viewer: 'rich', container: 'body' } }>
       = icon(rich_viewer.switcher_icon)

app/views/projects/blob/_viewer_wrapper.html.haml

-- hidden = local_assigns.fetch(:hidden, false)
-- url = url_for(params.merge(format: :json, viewer: viewer.type)) if viewer.server_side?
-.blob-viewer{ data: { type: viewer.type, url: url }, class: ('hidden' if hidden) }
-  - if viewer.server_side?
-    .text-center.prepend-top-default.append-bottom-default
-      = icon('spinner spin 2x', 'aria-hidden' => 'true', 'aria-label' => 'Loading content')
-  - else
-    = render 'projects/blob/viewer', viewer: viewer

spec/features/projects/blobs/blob_show_spec.rb

@@ -19,7 +19,7 @@ feature 'File blob', feature: true do
     it 'switches to code view' do
       visit_blob('files/images/wm.svg')
 
-      first('.js-blob-viewer-switcher').click
+      first('.js-blob-viewer-switch-btn').click
 
       expect(page).to have_selector('.blob-viewer[data-type="rich"]', visible: false)
       expect(page).to have_selector('.blob-viewer[data-type="simple"]')

spec/javascripts/blob/viewer/index_spec.js

@@ -26,12 +26,12 @@ describe('Blob viewer', () => {
   });
 
   it('loads source file after switching views', (done) => {
-    document.querySelector('.js-blob-viewer-switcher[data-viewer="simple"]').click();
+    document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
     setTimeout(() => {
       expect($.ajax).toHaveBeenCalled();
       expect(
-        document.querySelector('.js-blob-viewer-switcher[data-viewer="simple"]')
+        document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
       ).toBeFalsy();
 
@@ -47,7 +47,7 @@ describe('Blob viewer', () => {
     setTimeout(() => {
       expect($.ajax).toHaveBeenCalled();
       expect(
-        document.querySelector('.js-blob-viewer-switcher[data-viewer="simple"]')
+        document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]')
           .classList.contains('hidden'),
       ).toBeFalsy();
 
@@ -57,7 +57,7 @@ describe('Blob viewer', () => {
 
   it('doesnt reload file if already loaded', (done) => {
     const asyncClick = () => new Promise((resolve) => {
-      document.querySelector('.js-blob-viewer-switcher[data-viewer="simple"]').click();
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(resolve);
     });
@@ -91,7 +91,7 @@ describe('Blob viewer', () => {
     });
 
     it('enables after switching to simple view', (done) => {
-      document.querySelector('.js-blob-viewer-switcher[data-viewer="simple"]').click();
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
         expect($.ajax).toHaveBeenCalled();
@@ -104,7 +104,7 @@ describe('Blob viewer', () => {
     });
 
     it('updates tooltip after switching to simple view', (done) => {
-      document.querySelector('.js-blob-viewer-switcher[data-viewer="simple"]').click();
+      document.querySelector('.js-blob-viewer-switch-btn[data-viewer="simple"]').click();
 
       setTimeout(() => {
         expect($.ajax).toHaveBeenCalled();

spec/views/projects/blob/_viewer_wrapper.html.haml_spoc.rb

-require 'spec_helper'
-
-describe 'app/views/projects/blob/_viewer_wrapper.html.haml' do
-  # TODO: Test
-end