From 7ccccfc6d5eb74dfa9ebdec832e27614d8de0d05 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Mon, 18 Jan 2016 19:43:26 +0000 Subject: [PATCH] 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 --- CHANGELOG | 1 - .../artifacts/_tree_directory.html.haml | 6 ++-- .../projects/artifacts/_tree_file.html.haml | 10 +++---- app/views/projects/artifacts/browse.html.haml | 26 ++++++++++-------- features/project/builds/artifacts.feature | 2 +- features/steps/project/builds/artifacts.rb | 4 +-- spec/fixtures/ci_build_artifacts_metadata.gz | Bin 415 -> 461 bytes 7 files changed, 27 insertions(+), 22 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index d9ef490a4d..43d7a74952 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -66,7 +66,6 @@ v 8.4.0 (unreleased) 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 5b87d55efd..e4b7979949 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 92c1648f72..3dfc09cc49 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 1add7ef6bf..9dc7b2c2e1 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 7a7dbb71b1..4f68e44fd7 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 f2c87da471..25f2f4e837 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 fe9d4c8c661ebd27c55c589aafd8ff1a0e5ecbdc..e6d17e4595d61ff48dcd459f48183fa7f7c75757 100644 GIT binary patch literal 461 zcmV;;0W$s{iwFP!32ul0|D2Q0Zqq;z#v_hg=!qjT7H}a+clNKhaDfZrpOAO~Yh$m& zBFDDuwM1L>DY)_qycAEu7`m9oPD@dw$QsXl-}hV3E*6U?ubh8pHqp!8m3j1{^{z0P z@1pnCo7{L4ku_PvUF^Jbeu4i-nM+ORTKg{^Yj4lvU7fqa**rc0E`Vw+7+J-eEF~FK0hs1O|(@G-p5$u#}bd23Vss;|0!le^Yt zzHUzsAxX-oNY8JfyD=610_xTkIREilREpn-@C29+s0zvT$f|$?nbJPHMJl^%{Av1s z^!L2&P~BD;wpZJ^St>M9bF&ZkW_w>G(NK#pOZ4O0*F$Prkg3}7jcTpk_N8gl!j(3q zIPzwy4MfSXWkhJiCS*MNzm9!+>!q%M0QSG01JU84 zGbROaM&!S79JR)kU0Bl3&GyD6WuPQw9C#8O7)B7I3j+;u&*^6X00960^T;u!any42q`V3?i1{}iz z8HU8R*{AU8EBI1Ai65i{+wNjFBpkl^{rzS(o6YOb)_>94;L~91BKYXMEp_hu;H&Yv z&|U{9K?yzs)jV{s*yT$o}u8NE4dq?>6T_rtcZ&g8yzS1WPfouIPS4SaKr%9g=j^8H}?4e1bo} zey(sY{>ycy8fxvb($*#;K#>oW=9@=c5v34XR`$=jCc78+?3%WTN6Q%8;@>Mdqjln) zkQngdSV&4!ju}Pi(TwL#+q$2h$@i{WdnOc%lu(A5ob@PHI9)U;C!Fuk{ssU5|Nq@y J