Commit 1d5f96cf authored by Grzegorz Bizon's avatar Grzegorz Bizon

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
parents 21ac92b8 121866a3
...@@ -62,10 +62,11 @@ v 8.4.0 (unreleased) ...@@ -62,10 +62,11 @@ v 8.4.0 (unreleased)
- Add reporters ability to download and browse build artifacts (Andrew Johnson) - Add reporters ability to download and browse build artifacts (Andrew Johnson)
- Autofill referring url in message box when reporting user abuse. (Josh Frye) - 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) - 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 v 8.3.4
- Use gitlab-workhorse 0.5.4 (fixes API routing bug) - Use gitlab-workhorse 0.5.4 (fixes API routing bug)
- Add build artifacts browser
v 8.3.3 v 8.3.3
- Preserve CE behavior with JIRA integration by only calling API if URL is set - Preserve CE behavior with JIRA integration by only calling API if URL is set
......
%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 %td.tree-item-file-name
= tree_icon('folder', '755', directory.name) = tree_icon('folder', '755', directory.name)
%span.str-truncated %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
%td %td
%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 %td.tree-item-file-name
= tree_icon('file', '664', file.name) = tree_icon('file', '664', file.name)
%span.str-truncated %span.str-truncated
= file.name = link_to file.name, path_to_file
%td %td
= number_to_human_size(file.metadata[:size], precision: 2) = number_to_human_size(file.metadata[:size], precision: 2)
%td %td
= link_to file_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: file.path), = number_to_human_size(file.metadata[:zipped], precision: 2)
class: 'btn btn-xs btn-default artifact-download' do
= icon('download')
- page_title 'Artifacts', "#{@build.name} (##{@build.id})", 'Builds' - page_title 'Artifacts', "#{@build.name} (##{@build.id})", 'Builds'
= render 'projects/builds/header_title' = render 'projects/builds/header_title'
#tree-holder.tree-holder .top-block.gray-content-block.clearfix
.gray-content-block.top-block.clearfix .pull-right
.pull-right = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build),
= link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-default' do
class: 'btn btn-default' do = icon('download')
= icon('download') Download artifacts archive
Download artifacts archive
%div.tree-content-holder .tree-holder
.table-holder %div.tree-content-holder
%table.table.tree-table.table-striped %table.table.tree-table
%thead %thead
%tr %tr
%th Name %th Name
%th Size %th Size
%th Download %th Compressed to
= render partial: 'tree_directory', collection: @entry.directories(parent: true), as: :directory = render partial: 'tree_directory', collection: @entry.directories(parent: true), as: :directory
= render partial: 'tree_file', collection: @entry.files, as: :file = render partial: 'tree_file', collection: @entry.files, as: :file
- if @entry.empty? - if @entry.empty?
.center Empty .center Empty
:javascript
$(document).on('click', 'tr[data-link]', function(e) {
window.location = this.dataset.link;
});
...@@ -49,5 +49,5 @@ Feature: Project Builds Artifacts ...@@ -49,5 +49,5 @@ Feature: Project Builds Artifacts
And recent build has artifacts metadata available And recent build has artifacts metadata available
When I visit recent build summary page When I visit recent build summary page
And I click artifacts browse button 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 Then download of a file extracted from build artifacts should start
...@@ -63,8 +63,8 @@ class Spinach::Features::ProjectBuildsArtifacts < Spinach::FeatureSteps ...@@ -63,8 +63,8 @@ class Spinach::Features::ProjectBuildsArtifacts < Spinach::FeatureSteps
end end
end end
step 'I click download button for a file within build artifacts' do step 'I click a link to file within build artifacts' do
page.within('.tree-table') { first('.artifact-download').click } page.within('.tree-table') { find_link('ci_artifacts.txt').click }
end end
step 'download of a file extracted from build artifacts should start' do step 'download of a file extracted from build artifacts should start' do
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment