Add table view for CSV files

9 files changed, 83 insertions, 1 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index f49d7b92a00..7320d191ca7 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -168,6 +168,13 @@
     &.code {
       padding: 0;
     }
+
+    table, th, td {
+      border-collapse: collapse;
+      padding-top: 0;
+      padding-bottom: 5.5px;
+      line-height: 0.5;
+    }
   }
 }
 
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 07ff6fb9488..3a9fd90d636 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -1,3 +1,5 @@
+require 'csv'
+
 module BlobHelper
   def highlight(blob_name, blob_content, repository: nil, plain: false)
     highlighted = Gitlab::Highlight.highlight(blob_name, blob_content, plain: plain, repository: repository)
@@ -8,6 +10,14 @@ module BlobHelper
     %w(credits changelog news copying copyright license authors)
   end
 
+  def blob_to_csv(blob, options = {})
+    begin
+      CSV.parse(blob.data, options)
+    rescue CSV::MalformedCSVError
+      nil
+    end
+  end
+
   def edit_blob_link(project = @project, ref = @ref, path = @path, options = {})
     return unless current_user
 
diff --git a/app/models/blob.rb b/app/models/blob.rb
index ab92e820335..224642631fa 100644
--- a/app/models/blob.rb
+++ b/app/models/blob.rb
@@ -59,6 +59,8 @@ class Blob < SimpleDelegator
       'download'
     elsif image? || svg?
       'image'
+    elsif csv?
+      'csv'
     elsif text?
       'text'
     else
diff --git a/app/views/projects/blob/_csv.html.haml b/app/views/projects/blob/_csv.html.haml
new file mode 100644
index 00000000000..05c8c485ae4
--- /dev/null
+++ b/app/views/projects/blob/_csv.html.haml
@@ -0,0 +1,22 @@
+.file-content.code
+  .file-content.code.js-syntax-highlight{ class: user_color_scheme }
+    - if blob.csv?
+      - unless blob.empty?
+        .line-numbers
+          - blob.data.lines.each_index do |index|
+            - offset = defined?(first_line_number) ? first_line_number : 1
+            - i = index + offset
+            -# We're not using `link_to` because it is too slow once we get to thousands of lines.
+            %a{ href: "#L#{ i }", id: "L#{ i }", data: { line_number: "#{ i }" } }
+              %i.fa.fa-link
+              = i
+        .blob-content{ data: { blob_id: blob.id } }
+          %pre.code.highlight
+            %table
+              - blob_to_csv(blob).each_with_index do |row, i|
+                %tr
+                  - row.each do |col|
+                    %td
+                      = col
+    - else
+      .nothing-here-block Empty file
\ No newline at end of file
diff --git a/changelogs/unreleased/bengood-gitlab-ce-table-view.yml b/changelogs/unreleased/bengood-gitlab-ce-table-view.yml
new file mode 100644
index 00000000000..968a66c4351
--- /dev/null
+++ b/changelogs/unreleased/bengood-gitlab-ce-table-view.yml
@@ -0,0 +1,4 @@
+---
+title: Display CSV files as tabular data
+merge_request:
+author: Ben Good
diff --git a/features/project/source/browse_files.feature b/features/project/source/browse_files.feature
index d4b91fec6e8..f92e77f447c 100644
--- a/features/project/source/browse_files.feature
+++ b/features/project/source/browse_files.feature
@@ -19,6 +19,10 @@ Feature: Project Source Browse Files
     Given I visit blob file from repo
     And I click link "Raw"
     Then I should see raw file content
+    
+  Scenario: I browse a csv file
+    Given I browse a csv file
+    Then I should see a table
 
   Scenario: I can create file
     Given I click on "New file" link in repo
diff --git a/features/steps/project/source/browse_files.rb b/features/steps/project/source/browse_files.rb
index 1cc9e37b075..6aad5c01c45 100644
--- a/features/steps/project/source/browse_files.rb
+++ b/features/steps/project/source/browse_files.rb
@@ -54,6 +54,14 @@ class Spinach::Features::ProjectSourceBrowseFiles < Spinach::FeatureSteps
   step 'I should see raw file content' do
     expect(source).to eq '' # Body is filled in by gitlab-workhorse
   end
+  
+  step 'I browse a csv file' do
+    visit namespace_project_blob_path(@project.namespace, @project, File.join(sample_csv_commit.id, sample_csv_blob.path))
+  end
+  
+  step 'I should see a table' do
+    expect(find(:css,'div.blob-content')).to have_css('table')
+  end
 
   step 'I click button "Edit"' do
     click_link 'Edit'
diff --git a/spec/models/blob_spec.rb b/spec/models/blob_spec.rb
index 03d02b4d382..27f072dcf84 100644
--- a/spec/models/blob_spec.rb
+++ b/spec/models/blob_spec.rb
@@ -76,7 +76,8 @@ describe Blob do
         language: nil,
         lfs_pointer?: false,
         svg?: false,
-        text?: false
+        text?: false,
+        csv?: false
       )
 
       described_class.decorate(double).tap do |blob|
@@ -102,6 +103,12 @@ describe Blob do
       expect(blob.to_partial_path).to eq 'image'
     end
 
+    it 'handles csv' do
+      blob = stubbed_blob(csv?: true)
+
+      expect(blob.to_partial_path).to eq 'csv'
+    end
+    
     it 'handles text' do
       blob = stubbed_blob(text?: true)
 
diff --git a/spec/support/repo_helpers.rb b/spec/support/repo_helpers.rb
index 73f375c481b..4ec8319c5b5 100644
--- a/spec/support/repo_helpers.rb
+++ b/spec/support/repo_helpers.rb
@@ -115,4 +115,22 @@ eos
       commits: commits
     )
   end
+  
+  def sample_csv_commit
+    OpenStruct.new(
+      id: 'b0343abfb4530c065cd57b74879ee52d1a540e99'
+    )
+  end
+  
+  def sample_csv_blob
+    OpenStruct.new(
+      path: "files/csv/Book1.csv"
+    )
+  end
+      
+  def invalid_csv_commit
+    OpenStruct.new(
+      id: '6ff234d2889b27d91c3442924ef6a100b1fc6f2b'
+    )
+  end
 end