Merge branch '34102-online-view-of-artifacts-fe' of…

app/assets/javascripts/lib/utils/url_utility.js

@@ -90,7 +90,7 @@ w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href);
 // eslint-disable-next-line import/prefer-default-export
 export function visitUrl(url, external = false) {
   if (external) {
-    // Simulate `target="blank" ref="noopener noreferrer"`
+    // Simulate `target="blank" rel="noopener noreferrer"`
     // See https://mathiasbynens.github.io/rel-noopener/
     const otherWindow = window.open();
     otherWindow.opener = null;

app/assets/stylesheets/pages/tree.scss

@@ -170,6 +170,8 @@
     }
 
     .tree-item-file-external-link {
+      margin-right: 4px;
+
       span {
         text-decoration: inherit;
       }

app/views/projects/artifacts/_tree_file.html.haml

@@ -6,13 +6,12 @@
   %td.tree-item-file-name
     = tree_icon('file', blob.mode, blob.name)
     = link_to path_to_file,
-        class: 'tree-item-file-external-link js-artifact-tree-tooltip',
+        class: ('tree-item-file-external-link js-artifact-tree-tooltip' if is_external_link),
         target: ('_blank' if is_external_link),
         rel: ('noopener noreferrer' if is_external_link),
         title: ('Opens in a new window' if is_external_link) do
       %span.str-truncated>= blob.name
     - if is_external_link
-      = ' '
-      = icon('external-link')
+      = icon('external-link', class: 'js-artifact-tree-external-icon')
   %td
     = number_to_human_size(blob.size, precision: 2)

changelogs/unreleased/34102-online-view-of-artifacts-fe.yml

+---
+title: Add online view of HTML artifacts for public projects
+merge_request: 14399
+author:
+type: added

doc/user/project/pipelines/job_artifacts.md

@@ -50,6 +50,10 @@ For more examples on artifacts, follow the [artifacts reference in
 With GitLab 9.2, PDFs, images, videos and other formats can be previewed
 directly in the job artifacts browser without the need to download them.
 
+>**Note:**
+With [GitLab 10.1][ce-14399], HTML files in a public project can be previewed
+directly in a new tab without the need to download them.
+
 After a job finishes, if you visit the job's specific page, there are three
 buttons. You can download the artifacts archive or browse its contents, whereas
 the **Keep** button appears only if you have set an [expiry date] to the
@@ -64,7 +68,8 @@ archive. If your artifacts contained directories, then you are also able to
 browse inside them.
 
 Below you can see how browsing looks like. In this case we have browsed inside
-the archive and at this point there is one directory and one HTML file.
+the archive and at this point there is one directory, a couple files, and
+one HTML file that you can view directly online (opens in a new tab).
 
 ![Job artifacts browser](img/job_artifacts_browser.png)
 
@@ -158,3 +163,4 @@ information in the UI.
 
 
 [expiry date]: ../../../ci/yaml/README.md#artifacts-expire_in
+[ce-14399]: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14399

spec/features/projects/artifacts/browse_spec.rb

 require 'spec_helper'
 
 feature 'Browse artifact', :js do
+  include ArtifactHelper
+
   let(:project) { create(:project, :public) }
   let(:pipeline) { create(:ci_empty_pipeline, project: project) }
   let(:job) { create(:ci_build, :artifacts, pipeline: pipeline) }
+  let(:browse_url) do
+    browse_path('other_artifacts_0.1.2')
+  end
 
   def browse_path(path)
     browse_project_job_artifacts_path(project, job, path)
   end
 
   context 'when visiting old URL' do
-    let(:browse_url) do
-      browse_path('other_artifacts_0.1.2')
-    end
-
     before do
       visit browse_url.sub('/-/jobs', '/builds')
     end
@@ -22,4 +23,23 @@ feature 'Browse artifact', :js do
       expect(page.current_path).to eq(browse_url)
     end
   end
+
+  context 'when browsing a directory with an HTML file' do
+    let(:html_entry) { job.artifacts_metadata_entry("other_artifacts_0.1.2/index.html") }
+
+    before do
+      allow(Gitlab.config.pages).to receive(:enabled).and_return(true)
+      allow(Gitlab.config.pages).to receive(:artifacts_server).and_return(true)
+
+      visit browse_url
+    end
+
+    it "shows external link icon and styles" do
+      link = first('.tree-item-file-external-link')
+
+      expect(link).to have_content('index.html')
+      expect(link[:href]).to eq(html_artifact_url(project, job, html_entry.blob))
+      expect(page).to have_selector('.js-artifact-tree-external-icon')
+    end
+  end
 end

spec/requests/api/runner_spec.rb

@@ -470,7 +470,7 @@ describe API::Runner do
               expect(json_response['dependencies'].count).to eq(1)
               expect(json_response['dependencies']).to include(
                 { 'id' => job.id, 'name' => job.name, 'token' => job.token,
-                  'artifacts_file' => { 'filename' => 'ci_build_artifacts.zip', 'size' => 106365 } })
+                  'artifacts_file' => { 'filename' => 'ci_build_artifacts.zip', 'size' => 106633 } })
             end
           end