Add external link for online artifacts

What does this MR do?

EE MR, https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/3050

• Adds UI hints for externally linked artifacts which open in a new tab safely

Are there points in the code the reviewer needs to double check?

• Add external option to visitUrl was added so we can mimic target="blank" rel="noopener noreferrer"
  • See https://mathiasbynens.github.io/rel-noopener/ (says it doesn't work in Safari but tested and seems to work fine), http://www.blakedietz.me/target-_blank-vulnerability/
• In order to show the tooltip when hovering anywhere on the tree row but position the tooltip below the file name itself, I needed some extra custom JavaScript.
  • I played around with the Bootstrap tooltip options for a while and looked into the source but no luck.
  • Bootstrap v4 does have a constraints -> to option that may work.

I need artifacts to test this

First, in config/gitlab.yml, enable pages and add pages -> artifacts_server: true

---

Run with RAILS_ENV=development ruby fixtures/fake-pipeline-build-artifacts.rb

# RAILS_ENV=development ruby fixtures/fake-pipeline-build-artifacts.rb

require File.expand_path('../../config/environment', __FILE__)
require 'factory_girl_rails'
include FactoryGirl::Syntax::Methods

# Replace with your own project
project = Project.find_by_full_path('root/fake-pipelines-jobs-artifacts')

commit_sha = project.repository.create_file(
  project.creator,
  "foo#{rand(0..9999)}.txt",
  'foo',
  message: 'Add foo',
  branch_name: 'feature/add-foo')

pipeline = create(:ci_pipeline, project: project, sha: commit_sha)
build = create(:ci_build, pipeline: pipeline, name: 'Some fake build', status: :success)

build.artifacts_file = fixture_file_upload(Rails.root.join('spec/fixtures/ci_build_artifacts.zip'), 'application/zip');
build.artifacts_metadata = fixture_file_upload(Rails.root.join('spec/fixtures/ci_build_artifacts_metadata.gz'), 'application/x-gzip');
build.save!

puts "pipeline, id #{pipeline.id}" # pipeline.attributes.keys
puts "build, id #{build.id}"

Visit the pages:

• Pipeline: http://localhost:3000/root/fake-pipelines-jobs-artifacts/pipelines/<pipeline_id>
• Job: http://localhost:3000/root/fake-pipelines-jobs-artifacts/-/jobs/<build_id>
• Artifacts: http://localhost:3000/root/fake-pipelines-jobs-artifacts/-/jobs/<build_id>/artifacts/browse/other_artifacts_0.1.2/

---

or...

Install gitlab-runner, and register a new runner (probably Docker executor). You can grab the runner URL and token from, http://localhost:3000/admin/runners

.gitlab-ci.yml

image: node:boron

stages:
  - test

test:
  stage: test
  script:
    - "mkdir -p selenium && echo '{ \"foo\": \"bar\" }' > selenium/some-log.json"
    - mkdir -p selenium && echo 'foo' > selenium/some-text.txt
    - mkdir -p selenium && echo 'foo' > selenium/some-page.html
  artifacts:
    when: always
    paths:
      - selenium/
  tags:
    - docker
    - shared

Why was this MR needed?

HTML artifacts that we want to show directly are linked externally and open in a new tab which required some new UI hints.

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
  • Has been reviewed by Backend
  • Has been reviewed by Database
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together

What are the relevant issue numbers?

Closes #34102