Skip to content

Commit

Permalink
Merge 48c6fbb into abd2004
Browse files Browse the repository at this point in the history
  • Loading branch information
@eamahanna
eamahanna authored Oct 29, 2020
2 parents abd2004 + 48c6fbb commit a634c1f
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 39 deletions.
13 changes: 4 additions & 9 deletions kbase-extension/static/kbase/css/kbaseNarrative.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,22 +72,17 @@
font: normal, 16px, Oxygen, Arial, sans-serif;
}

.dz-file__progress__bar {
width: 0;
}

.dz-file__row {
display: flex;
align-items: center;
}

.dz-file__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 20px;
}

.dz-file__upload-progress {
display: inline;
}

.dz-file__msg {
overflow: hidden;
text-overflow: ellipsis;
Expand Down
88 changes: 64 additions & 24 deletions kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,33 +36,17 @@ define([

render: function() {
const uploadConfig = Config.get('upload');
const globusUrlLinked = uploadConfig.globus_upload_url + '&destination_path=' + this.userInfo.user;
const $dropzoneElem = $(this.dropzoneTmpl({
userInfo: this.userInfo,
globusUrl: uploadConfig.globus_upload_url + '&destination_path=' + this.userInfo.user
globusUrl: globusUrlLinked
}));

// there are two anchor elements with same class name .globus_linked.
// One link takes the user to globus site,
// and the other link takes user to how to link globus account.
$dropzoneElem.find('globus_linked').click(e => {
e.stopPropagation();
e.preventDefault();

if(e.target.href === uploadConfig.globus_upload_url + '&destination_path=' + this.userInfo.user) {
let stagingServiceClient = new StagingServiceClient({
root: this.stagingUrl,
token: Runtime.make().authToken()
});
var globusWindow = window.open('', 'dz-globus');
globusWindow.document.write('<html><body><h2 style="text-align:center; font-family:\'Oxygen\', arial, sans-serif;">Loading Globus...</h2></body></html>');
stagingServiceClient.addAcl()
.done(() => {
window.open($(e.target).attr('href'), 'dz-globus');
return true;
});
} else {
window.open(e.target.href, '_blank');
}
$dropzoneElem.find('globus_linked').click(function(e) {
this.uploadGlobusClickEvent(e, globusUrlLinked);
});
this.$elem.append($dropzoneElem);
this.dropzone = new Dropzone($dropzoneElem.get(0), {
Expand All @@ -77,6 +61,7 @@ define([
parallelUploads: uploadConfig.parallel_uploads,
maxFilesize: uploadConfig.max_file_size,
timeout: uploadConfig.timeout,
userInfo: this.userInfo
})
.on('totaluploadprogress', (progress) => {
$($dropzoneElem.find('#total-progress .progress-bar')).css({'width': progress + '%'});
Expand All @@ -93,7 +78,7 @@ define([
}

})
.on('success', (file, serverResponse) => {
.on('success', (file) => {
var $successElem = $(file.previewElement);
$successElem.find('#upload_progress_and_cancel').hide();
$successElem.find('#dz_file_row_1').css({'display': 'flex', 'align-items': 'center'});
Expand Down Expand Up @@ -133,13 +118,23 @@ define([
$errorElem.find('#dz_file_row_1').css({'display': 'flex', 'align-items': 'center'});
$errorElem.css('color', '#DF0002');
$errorElem.find('#error_icon').css('display', 'flex');

this.removeProgressBar($dropzoneElem);

// Set error message
let errorText = 'unable to upload file!';
if (erroredFile && erroredFile.xhr && erroredFile.xhr.responseText) {
var $errorMessage = $errorElem.find('#error_message');

// I don't know how to determine if the file was too big other than looking at the preview message
if ($errorMessage.html().search('File is too big') !== -1){
errorText = 'File size exceeds maximum of 20GB. Please ';
$errorMessage.text('Error: ' + errorText);
$errorMessage.append(this.makeGlobusErrorLink(globusUrlLinked));
} else if (erroredFile && erroredFile.xhr && erroredFile.xhr.responseText) {
errorText = erroredFile.xhr.responseText;
$errorMessage.text('Error: ' + errorText);
} else {
$errorMessage.text('Error: ' + errorText);
}
$dropzoneElem.find('#error_message').text('Error: ' + errorText);

// Check to see if there already a button in the dropzone area
if (!$dropzoneElem.find('#clear-all-btn').length){
Expand All @@ -148,6 +143,27 @@ define([
});
},

uploadGlobusClickEvent: function(e, globusUrlLinked) {
e.stopPropagation();
e.preventDefault();

if(e.target.href === globusUrlLinked) {
let stagingServiceClient = new StagingServiceClient({
root: this.stagingUrl,
token: Runtime.make().authToken()
});
var globusWindow = window.open('', 'dz-globus');
globusWindow.document.write('<html><body><h2 style="text-align:center; font-family:\'Oxygen\', arial, sans-serif;">Loading Globus...</h2></body></html>');
stagingServiceClient.addAcl()
.done(() => {
window.open($(e.target).attr('href'), 'dz-globus');
return true;
});
} else {
window.open(e.target.href, '_blank');
}
},

makeClearAllButton: function() {
var $clearAllBtn = $('<button>')
.text('Clear All')
Expand All @@ -172,6 +188,30 @@ define([
$('#clear-all-btn').remove();
},

makeGlobusErrorLink: function(globusUrlLinked) {
const url = 'https://docs.kbase.us/data/globus';

const $globusErrorLink = $('<a>')
.attr({
'id': 'globus_error_link',
'href': url,
'aria-label': 'opens new window to kbase globus upload docs'
}).text('upload with Globus.')
.click(function(e) {
this.uploadGlobusClickEvent(e, globusUrlLinked);
}.bind(this));

if (this.userInfo.globusLinked){
$globusErrorLink
.attr({
'href': globusUrlLinked,
'aria-label': 'opens new window to upload via globus'
});
}

return $globusErrorLink;
},

removeProgressBar: function($dropzoneElem) {
if (!this.dropzone.getQueuedFiles().length &&
!this.dropzone.getUploadingFiles().length) {
Expand Down
4 changes: 2 additions & 2 deletions kbase-extension/static/kbase/templates/data_staging/dropped_file.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
<div class="col-md-1 ">
<span class="size pull-right" data-dz-size></span>
</div>
<div id="upload_progress_and_cancel" style="display: inline;">
<div id="upload_progress_and_cancel" class ="dz-file__upload-progress">
<div class="col-md-3 text-center">
<div class="progress progress-striped active dz-file__progress__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success dz-file__progress__bar" data-dz-uploadprogress></div>
<div class="progress-bar progress-bar-success" data-dz-uploadprogress></div>
</div>
</div>
<div class="col-md-1">
Expand Down
42 changes: 38 additions & 4 deletions test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,10 +163,44 @@ define([

fuWidget.dropzone.addFile(mockFile);
setTimeout(() => {
expect(adderMock).toHaveBeenCalled();
expect(document.getElementById('clear-all-btn')).toBeDefined();
expect(document.getElementById('upload_progress_and_cancel')).toBeNull();
expect(document.getElementById('error_icon')).toBeDefined();
let $fileTemplate = fuWidget.$elem;
expect(document.getElementById('clear_all_button')).toBeDefined();
expect($fileTemplate.find('#upload_progress_and_cancel').css('display')).toEqual('none');
expect($fileTemplate.find('#error_icon').css('display')).toEqual('flex');
expect($fileTemplate.find('#globus_error_link').attr('href')).toEqual('https://docs.kbase.us/data/globus');
done();
});
});

it('Should provide a link to a globus accout when file upload maxfile size error occurs', (done) => {
$targetNode = $('<div>');
var uploadWidget = new FileUploadWidget($targetNode, {
path: '/',
userInfo: {
user: fakeUser,
globusLinked: true
}
});

// Set the file max size to 0
uploadWidget.dropzone.options.maxFilesize = 1;

// Create file
const filename='foo.txt';
mockUploadEndpoint(filename, fakeUser, false);
var mockFile = createMockFile(filename);
Object.defineProperty(mockFile, 'size', {value: Math.pow(1024, 4), writable: false});

// Create mock calls
const adderMock = jasmine.createSpy('adderMock');
uploadWidget.dropzone.on('addedfile', () => {
adderMock();
});

uploadWidget.dropzone.addFile(mockFile);
setTimeout(() => {
let $fileTemplate = uploadWidget.$elem;
expect($fileTemplate.find('#globus_error_link').attr('href')).toEqual('https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a&destination_path=' + fakeUser);
done();
});
});
Expand Down

0 comments on commit a634c1f

Please sign in to comment.