Add external link FE for online artifacts
FE for https://gitlab.com/gitlab-org/gitlab-ce/issues/34102
This commit is contained in:
parent
aec1586c05
commit
3265ccfc5a
|
@ -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;
|
||||
})();
|
||||
|
|
|
@ -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" 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,
|
||||
};
|
||||
|
|
|
@ -169,6 +169,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tree-item-file-external-link {
|
||||
span {
|
||||
text-decoration: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tree_commit {
|
||||
max-width: 320px;
|
||||
|
||||
|
|
|
@ -1,10 +1,19 @@
|
|||
- 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)
|
||||
|
|
Loading…
Reference in New Issue