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('

Loading Globus...

'); @@ -414,14 +414,12 @@ define([ if ($(e.currentTarget).hasClass('fa-caret-down')) { $('.kb-dropzone').css('min-height', '75px'); - $('.dz-message').css('margin', '0em 0'); this.openFileInfo[fileName] = myFile; $tr.after( this.renderMoreFileInfo(myFile) ); } else { $('.kb-dropzone').css('min-height', '200px'); - $('.dz-message').css('margin', '3em 0'); $tr.next().detach(); delete this.openFileInfo[fileName]; } diff --git a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html index 9c7778411e..7136539f72 100644 --- a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html +++ b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html @@ -10,24 +10,5 @@ -
-

Three ways to add data to the staging area:

- -

Click the below for help. -

+
Drag and drop files and folders in this box, or select from your computer.
diff --git a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html index 6c44d60c60..f167504e7d 100644 --- a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html +++ b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html @@ -1,16 +1,17 @@
- {{#if userInfo.globusLinked}} -
- Or upload to this staging area by using - - Globus Online - -
- {{/if}} -
- Or click here to use an App to upload from a public URL. +
+ Other ways to upload: + {{#if userInfo.globusLinked}} + + {{else}} + + {{/if}} +
@@ -18,4 +19,4 @@
-
+
\ No newline at end of file diff --git a/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js b/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js index 0bc75af341..0450fc2a80 100644 --- a/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js +++ b/test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js @@ -62,45 +62,6 @@ define([ jasmine.Ajax.uninstall(); }); - it('Should render properly when linked to globus', () => { - const $node = $('
'), - 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();