Merge branch '34102-online-view-of-artifacts-fe' into 'master'

Add external link for online artifacts

Closes #34102

See merge request gitlab-org/gitlab-ce!14399

7 files changed, 100 insertions, 15 deletions

diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js
index bd479700fd3..19388f1f9ae 100644
--- a/app/assets/javascripts/build_artifacts.js
+++ b/app/assets/javascripts/build_artifacts.js
@@ -1,9 +1,12 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, no-return-assign, max-len */
+import { visitUrl } from './lib/utils/url_utility';
+import { convertPermissionToBoolean } from './lib/utils/common_utils';
 
 window.BuildArtifacts = (function() {
   function BuildArtifacts() {
     this.disablePropagation();
     this.setupEntryClick();
+    this.setupTooltips();
   }
 
   BuildArtifacts.prototype.disablePropagation = function() {
@@ -17,9 +20,28 @@ window.BuildArtifacts = (function() {
 
   BuildArtifacts.prototype.setupEntryClick = function() {
     return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
-      return window.location = this.dataset.link;
+      visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink));
     });
   };
 
+  BuildArtifacts.prototype.setupTooltips = function() {
+    $('.js-artifact-tree-tooltip').tooltip({
+      placement: 'bottom',
+      // Stop the tooltip from hiding when we stop hovering the element directly
+      // We handle all the showing/hiding below
+      trigger: 'manual',
+    });
+
+    // We want the tooltip to show if you hover anywhere on the row
+    // But be placed below and in the middle of the file name
+    $('.js-artifact-tree-row')
+      .on('mouseenter', (e) => {
+        $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('show');
+      })
+      .on('mouseleave', (e) => {
+        $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide');
+      });
+  };
+
   return BuildArtifacts;
 })();
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 3328ff9cc23..78c7a094127 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -1,4 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, one-var, one-var-declaration-per-line, no-void, guard-for-in, no-restricted-syntax, prefer-template, quotes, max-len */
+
 var base;
 var w = window;
 if (w.gl == null) {
@@ -86,6 +87,21 @@ w.gl.utils.getLocationHash = function(url) {
 
 w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href);
 
-w.gl.utils.visitUrl = (url) => {
-  document.location.href = url;
+// eslint-disable-next-line import/prefer-default-export
+export function visitUrl(url, external = false) {
+  if (external) {
+    // Simulate `target="blank" rel="noopener noreferrer"`
+    // See https://mathiasbynens.github.io/rel-noopener/
+    const otherWindow = window.open();
+    otherWindow.opener = null;
+    otherWindow.location = url;
+  } else {
+    document.location.href = url;
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.utils = {
+  ...(window.gl.utils || {}),
+  visitUrl,
 };
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 224eee90a3f..e2f6e511c86 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -169,6 +169,14 @@
       }
     }
 
+    .tree-item-file-external-link {
+      margin-right: 4px;
+
+      span {
+        text-decoration: inherit;
+      }
+    }
+
     .tree_commit {
       max-width: 320px;
 
diff --git a/app/controllers/projects/artifacts_controller.rb b/app/controllers/projects/artifacts_controller.rb
index eb010923466..0837451cc49 100644
--- a/app/controllers/projects/artifacts_controller.rb
+++ b/app/controllers/projects/artifacts_controller.rb
@@ -29,13 +29,17 @@ class Projects::ArtifactsController < Projects::ApplicationController
     blob = @entry.blob
     conditionally_expand_blob(blob)
 
-    respond_to do |format|
-      format.html do
-        render 'file'
-      end
-
-      format.json do
-        render_blob_json(blob)
+    if blob.external_link?(build)
+      redirect_to blob.external_url(@project, build)
+    else
+      respond_to do |format|
+        format.html do
+          render 'file'
+        end
+
+        format.json do
+          render_blob_json(blob)
+        end
       end
     end
   end
diff --git a/app/models/ci/artifact_blob.rb b/app/models/ci/artifact_blob.rb
index b35febc9ac5..8b66531ec7b 100644
--- a/app/models/ci/artifact_blob.rb
+++ b/app/models/ci/artifact_blob.rb
@@ -2,6 +2,8 @@ module Ci
   class ArtifactBlob
     include BlobLike
 
+    EXTENTIONS_SERVED_BY_PAGES = %w[.html .htm .txt .json].freeze
+
     attr_reader :entry
 
     def initialize(entry)
@@ -17,6 +19,7 @@ module Ci
     def size
       entry.metadata[:size]
     end
+    alias_method :external_size, :size
 
     def data
       "Build artifact #{path}"
@@ -30,6 +33,27 @@ module Ci
       :build_artifact
     end
 
-    alias_method :external_size, :size
+    def external_url(project, job)
+      return unless external_link?(job)
+
+      components = project.full_path_components
+      components << "-/jobs/#{job.id}/artifacts/file/#{path}"
+      artifact_path = components[1..-1].join('/')
+
+      "#{pages_config.protocol}://#{components[0]}.#{pages_config.host}/#{artifact_path}"
+    end
+
+    def external_link?(job)
+      pages_config.enabled &&
+        pages_config.artifacts_server &&
+        EXTENTIONS_SERVED_BY_PAGES.include?(File.extname(name)) &&
+        job.project.public?
+    end
+
+    private
+
+    def pages_config
+      Gitlab.config.pages
+    end
   end
 end
diff --git a/app/models/concerns/routable.rb b/app/models/concerns/routable.rb
index f5048d17d80..12e93be2104 100644
--- a/app/models/concerns/routable.rb
+++ b/app/models/concerns/routable.rb
@@ -106,6 +106,10 @@ module Routable
     RequestStore[full_path_key] ||= uncached_full_path
   end
 
+  def full_path_components
+    full_path.split('/')
+  end
+
   def expires_full_path_cache
     RequestStore.delete(full_path_key) if RequestStore.active?
     @full_path = nil
diff --git a/app/views/projects/artifacts/_tree_file.html.haml b/app/views/projects/artifacts/_tree_file.html.haml
index 8edb9be049a..a97ddb3c377 100644
--- a/app/views/projects/artifacts/_tree_file.html.haml
+++ b/app/views/projects/artifacts/_tree_file.html.haml
@@ -1,10 +1,17 @@
+- blob = file.blob
 - path_to_file = file_project_job_artifacts_path(@project, @build, path: file.path)
+- external_link = blob.external_link?(@build)
 
-%tr.tree-item{ 'data-link' => path_to_file }
-  - blob = file.blob
+%tr.tree-item.js-artifact-tree-row{ data: { link: path_to_file, external_link: "#{external_link}" } }
   %td.tree-item-file-name
     = tree_icon('file', blob.mode, blob.name)
-    = link_to path_to_file do
-      %span.str-truncated= blob.name
+    - if external_link
+      = link_to path_to_file, class: 'tree-item-file-external-link js-artifact-tree-tooltip',
+          target: '_blank', rel: 'noopener noreferrer', title: _('Opens in a new window') do
+        %span.str-truncated>= blob.name
+      = icon('external-link', class: 'js-artifact-tree-external-icon')
+    - else
+      = link_to path_to_file do
+        %span.str-truncated= blob.name
   %td
     = number_to_human_size(blob.size, precision: 2)