Merge branch 'ux/improve-artifacts-browser' into 'master'

Improve UX in build artifacts browser

This improves UX in build artifacts browser, and makes it more consistent with repository tree browser we already have.

---
Before:

![ux_artifacts_before](/uploads/9869ff74afd5e6636f0df81c7823fb6f/ux_artifacts_before.png)

---
After:

![ux_artifacts_after](/uploads/cdb68925f4489bb852fd701870e6d6a0/ux_artifacts_after.png)

---

It is easier to click on a file/directory entry now, because we don't need to click on a entry's basename (that can be really short, like `..` parent directory). We also show `Compressed to` size that indicates how much storage does this entry really consume.

Row for an entry is also highlighted on hover and we do not have Download button (clicking on a file row / file basename is enough to download a file).

Closes #10242 

See merge request !2477

7 files changed, 29 insertions, 22 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 9c242cb44a8..18ccd56dec9 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -62,10 +62,11 @@ v 8.4.0 (unreleased)
   - Add reporters ability to download and browse build artifacts (Andrew Johnson)
   - Autofill referring url in message box when reporting user abuse. (Josh Frye)
   - Remove leading comma on award emoji when the user is the first to award the emoji (Zeger-Jan van de Weg)
+  - Add build artifacts browser
+  - Improve UX in builds artifacts browser
 
 v 8.3.4
   - Use gitlab-workhorse 0.5.4 (fixes API routing bug)
-  - Add build artifacts browser
 
 v 8.3.3
   - Preserve CE behavior with JIRA integration by only calling API if URL is set
diff --git a/app/views/projects/artifacts/_tree_directory.html.haml b/app/views/projects/artifacts/_tree_directory.html.haml
index 5b87d55efd5..e4b7979949c 100644
--- a/app/views/projects/artifacts/_tree_directory.html.haml
+++ b/app/views/projects/artifacts/_tree_directory.html.haml
@@ -1,7 +1,9 @@
-%tr{ class: 'tree-item' }
+- path_to_directory = browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: directory.path)
+
+%tr.tree-item{ 'data-link' => path_to_directory}
   %td.tree-item-file-name
     = tree_icon('folder', '755', directory.name)
     %span.str-truncated
-      = link_to directory.name, browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: directory.path)
+      = link_to directory.name, path_to_directory
   %td
   %td
diff --git a/app/views/projects/artifacts/_tree_file.html.haml b/app/views/projects/artifacts/_tree_file.html.haml
index 92c1648f726..3dfc09cc495 100644
--- a/app/views/projects/artifacts/_tree_file.html.haml
+++ b/app/views/projects/artifacts/_tree_file.html.haml
@@ -1,11 +1,11 @@
-%tr{ class: 'tree-item' }
+- path_to_file = file_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: file.path)
+
+%tr.tree-item{ 'data-link' => path_to_file }
   %td.tree-item-file-name
     = tree_icon('file', '664', file.name)
     %span.str-truncated
-      = file.name
+      = link_to file.name, path_to_file
   %td
     = number_to_human_size(file.metadata[:size], precision: 2)
   %td
-    = link_to file_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: file.path),
-      class: 'btn btn-xs btn-default artifact-download' do
-      = icon('download')
+    = number_to_human_size(file.metadata[:zipped], precision: 2)
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index 1add7ef6bfb..9dc7b2c2e1f 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -1,24 +1,28 @@
 - page_title 'Artifacts', "#{@build.name} (##{@build.id})", 'Builds'
 = render 'projects/builds/header_title'
 
-#tree-holder.tree-holder
-  .gray-content-block.top-block.clearfix
-    .pull-right
-      = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build),
-        class: 'btn btn-default' do
-        = icon('download')
-        Download artifacts archive
+.top-block.gray-content-block.clearfix
+  .pull-right
+    = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build),
+      class: 'btn btn-default' do
+      = icon('download')
+      Download artifacts archive
 
-%div.tree-content-holder
-  .table-holder
-    %table.table.tree-table.table-striped
+.tree-holder
+  %div.tree-content-holder
+    %table.table.tree-table
       %thead
         %tr
           %th Name
           %th Size
-          %th Download
+          %th Compressed to
       = render partial: 'tree_directory', collection: @entry.directories(parent: true), as: :directory
       = render partial: 'tree_file', collection: @entry.files, as: :file
 
 - if @entry.empty?
   .center Empty
+
+:javascript
+  $(document).on('click', 'tr[data-link]', function(e) {
+    window.location = this.dataset.link;
+  });
diff --git a/features/project/builds/artifacts.feature b/features/project/builds/artifacts.feature
index 7a7dbb71b18..4f68e44fd77 100644
--- a/features/project/builds/artifacts.feature
+++ b/features/project/builds/artifacts.feature
@@ -49,5 +49,5 @@ Feature: Project Builds Artifacts
     And recent build has artifacts metadata available
     When I visit recent build summary page
     And I click artifacts browse button
-    And I click download button for a file within build artifacts
+    And I click a link to file within build artifacts
     Then download of a file extracted from build artifacts should start
diff --git a/features/steps/project/builds/artifacts.rb b/features/steps/project/builds/artifacts.rb
index f2c87da4717..25f2f4e837c 100644
--- a/features/steps/project/builds/artifacts.rb
+++ b/features/steps/project/builds/artifacts.rb
@@ -63,8 +63,8 @@ class Spinach::Features::ProjectBuildsArtifacts < Spinach::FeatureSteps
     end
   end
 
-  step 'I click download button for a file within build artifacts' do
-    page.within('.tree-table') { first('.artifact-download').click }
+  step 'I click a link to file within build artifacts' do
+    page.within('.tree-table') { find_link('ci_artifacts.txt').click }
   end
 
   step 'download of a file extracted from build artifacts should start' do
diff --git a/spec/fixtures/ci_build_artifacts_metadata.gz b/spec/fixtures/ci_build_artifacts_metadata.gz
index fe9d4c8c661..e6d17e4595d 100644
--- a/spec/fixtures/ci_build_artifacts_metadata.gz
+++ b/spec/fixtures/ci_build_artifacts_metadata.gz