Add external link FE for online artifacts

FE for https://gitlab.com/gitlab-org/gitlab-ce/issues/34102

app/assets/javascripts/build_artifacts.js

 /* 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,7 +20,26 @@ 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');
       });
   };
 

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

 /* 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) => {
+// eslint-disable-next-line import/prefer-default-export
+export function visitUrl(url, external = false) {
+  if (external) {
+    // Simulate `target="blank" ref="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,
 };

app/assets/stylesheets/pages/tree.scss

@@ -169,6 +169,12 @@
       }
     }
 
+    .tree-item-file-external-link {
+      span {
+        text-decoration: inherit;
+      }
+    }
+
     .tree_commit {
       max-width: 320px;
 

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

-- path_to_file = file_project_job_artifacts_path(@project, @build, path: file.path)
+- todo_external_artifacts_path = 'https://google.com'
+- is_external_link = !todo_external_artifacts_path.blank?
+- path_to_file = todo_external_artifacts_path || file_project_job_artifacts_path(@project, @build, path: file.path)
 
-%tr.tree-item{ 'data-link' => path_to_file }
+%tr.tree-item.js-artifact-tree-row{ data: { link: path_to_file, external_link: "#{is_external_link}" } }
   - blob = file.blob
   %td.tree-item-file-name
     = tree_icon('file', blob.mode, blob.name)
-    = link_to path_to_file do
-      %span.str-truncated= blob.name
+    = link_to path_to_file,
+        class: 'tree-item-file-external-link js-artifact-tree-tooltip',
+        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')
   %td
     = number_to_human_size(blob.size, precision: 2)