diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
index c2f3d51190..8ca6f507f0 100644
--- a/kbase-extension/static/kbase/css/kbaseNarrative.css
+++ b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -5,6 +5,18 @@
font-weight: bold;
}
+.kb-dropzone .dz-message {
+ font-family: Roboto;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 24px;
+ line-height: 28px;
+ text-align: center;
+ color: #000000;
+ mix-blend-mode: normal;
+ margin: 2em 4.5em;
+}
+
#kb-data-staging-table_wrapper{
margin-top: 15px;
}
@@ -3079,6 +3091,42 @@ button.kb-data-obj {
border: none;
}
+.kb-import-content .upload-options button {
+ background: #FFFFFF;
+ border: 1px solid #C4C4C4;
+ box-sizing: border-box;
+ border-radius: 6px;
+ font-family: Oxygen;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 18px;
+ /* identical to box height */
+ text-align: center;
+ color: #000000;
+ width: 140px;
+ height: 42px;
+ margin: 0 6px;
+}
+
+.kb-import-content .upload-options button:hover {
+ border: 1px solid #CFCFCF;
+ background-color: #FAFAFA;
+}
+
+.kb-import-content .upload-options button:focus {
+ background-color: #F2F2F2;
+}
+
+.kb-import-content .upload-options button:active {
+ background-color: #E6E6E6;
+}
+
+.kb-import-content .upload-options button:disabled {
+ background-color: #FAFAFA;
+ color: #929292;
+}
+
.kb-overlay-footer {
position: absolute;
width: 100%;
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
index 4f73fc4a91..faf693048f 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js
@@ -41,12 +41,13 @@ define([
globusUrl: uploadConfig.globus_upload_url + '&destination_path=' + this.userInfo.user
}));
- // there are two anchor elements with same class name .globus_link.
+ // 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('a.globus_link').click(e => {
+ $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,
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
index bd96ad5a62..cd49c9c020 100644
--- a/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
+++ b/kbase-extension/static/kbase/js/widgets/narrative_core/upload/stagingAreaViewer.js
@@ -167,7 +167,7 @@ define([
// Add ACL before going to the staging area
// If it fails, it'll just do so silently.
- var $globusLink = this.$elem.find('.globus_link');
+ var $globusLink = this.$elem.find('a.globus_linked');
$globusLink.click((e) => {
var globusWindow = window.open('', 'globus');
globusWindow.document.write('
'),
- fuw = new FileUploadWidget($node, {
- path: '/',
- userInfo: {
- user: fakeUser,
- globusLinked: true
- }
- }),
- renderedMsg = $node.find('.dz-message').html();
- expect(renderedMsg).toContain('
Three ways to add data to the staging area:
');
- expect(renderedMsg).toContain('
Click in this box.');
- expect(renderedMsg).toContain('
Drag and drop data files.');
- expect(renderedMsg).toContain('For large files (over 20GB) or a large number of files use');
- expect(renderedMsg).toContain(Config.get('upload').globus_upload_url);
- expect(renderedMsg).toContain(fakeUser);
- expect(renderedMsg).not.toContain('For large files (over 20GB), use Globus. Click');
- expect(renderedMsg).not.toContain('https://docs.kbase.us/data/globus');
- });
-
- it('Should render properly when not linked to globus', () => {
- const $node = $('
'),
- fuw = new FileUploadWidget($node, {
- path: '/',
- userInfo: {
- user: fakeUser,
- globusLinked: false
- }
- }),
- renderedMsg = $node.find('.dz-message').html();
- expect(renderedMsg).toContain('
Three ways to add data to the staging area:
');
- expect(renderedMsg).toContain('
Click in this box.');
- expect(renderedMsg).toContain('
Drag and drop data files.');
- expect(renderedMsg).toContain('For large files (over 20GB), use Globus. Click');
- expect(renderedMsg).toContain('https://docs.kbase.us/data/globus');
- expect(renderedMsg).not.toContain('For large files (over 20GB) or a large number of files use');
- expect(renderedMsg).not.toContain(Config.get('upload').globus_upload_url);
- });
-
it('Should be able to set and retrieve the path', () => {
const $node = $('
'),
fuw = new FileUploadWidget($node, {
@@ -157,23 +118,5 @@ define([
fuWidget.dropzone.addFile(mockFile);
});
- it('Should open a Globus window on click', () => {
- // first pass = no globus link.
- const unlinkedLink = 'https://docs.kbase.us/data/globus';
- spyOn(window, 'open').and.callThrough();
- fuWidget.$elem.find('a.globus_link').click();
- expect(window.open).toHaveBeenCalledWith(unlinkedLink, '_blank');
- const $node = $('
'),
- fuw = new FileUploadWidget($node, {
- path: '/',
- userInfo: {
- user: fakeUser,
- globusLinked: true
- }
- });
- fuw.$elem.find('a.globus_link').click();
- expect(window.open).toHaveBeenCalledWith('', 'dz-globus');
- });
-
});
});
diff --git a/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js b/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
index 7a16f4ae72..125181d09a 100644
--- a/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
+++ b/test/unit/spec/narrative_core/upload/stagingAreaViewer-spec.js
@@ -88,7 +88,7 @@ define ([
expect(stagingViewer).not.toBeNull();
});
- it('Should render properly with a Globus linked account', async () => {
+ it('Should render properly with a Globus linked account', async (done) => {
let $node = $('
'),
linkedStagingViewer = new StagingAreaViewer($node, {
path: startingPath,
@@ -98,16 +98,33 @@ define ([
globusLinked: true
}
});
- await linkedStagingViewer.render();
- expect($node.html()).toContain('Or upload to this staging area by using');
- expect($node.html()).toContain('https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a&destination_path=' + fakeUser);
+ await linkedStagingViewer.render()
+ .then(() => {
+ var $globusButton = $node.find('.globus_linked');
+ expect($globusButton).toBeDefined();
+ expect($globusButton.html()).toContain('Upload with Globus');
+ expect($globusButton.html()).toContain('https://app.globus.org/file-manager?destination_id=c3c0a65f-5827-4834-b6c9-388b0b19953a&destination_path=' + fakeUser);
+ done();
+ });
+ });
+
+ it('Should render properly without a Globus linked account', async () => {
+ await stagingViewer.render();
+ var $globusButton = $targetNode.find('.globus_not_linked');
+ expect($globusButton).toBeDefined();
+ expect($globusButton.html()).toContain('Upload with Globus');
+ expect($globusButton.html()).toContain('https://docs.kbase.us/data/globus');
});
- it('Should render properly without a Globus linked account', () => {
- expect($targetNode.html()).not.toContain('Or upload to this staging area by using');
+ it('Should render a url button', async () => {
+ await stagingViewer.render();
+ var $urlButton = $targetNode.find('.web_upload_div');
+ expect($urlButton).toBeDefined();
+ expect($urlButton.html()).toContain('Upload with URL');
});
- it('Should start a help tour', () => {
+
+ it('Should start a help tour', function() {
stagingViewer.render();
stagingViewer.startTour();
expect(stagingViewer.tour).not.toBeNull();