Dataup 187 move globus upload below drag and drop (#1855)

* initial commit, updated text in dropzone, updated button behavior, still needs work * removing globus tests from file upload widget * making select a link * changing class name so its slightly more clear, adding case where globus is not linked * update tests * fix indentation * minor tweaks * oops * Address sonarcloud error * Address codacy * Updates from pr review * Add other button styles * quick updates * fix tests Co-authored-by: leia-sefkin <leia.sefkin@gmail.com>
kbase · Oct 14, 2020 · ceb1c0b · ceb1c0b
1 parent 0294cb5
commit ceb1c0b
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 101 deletions.
diff --git 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
@@ -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
@@ -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('<html><body><h2 style="text-align:center; font-family:\'Oxygen\', arial, sans-serif;">Loading Globus...</h2></body></html>');
@@ -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
@@ -10,24 +10,5 @@
             </div>
         </div>
     </div>
-    <div class="dz-message" style="text-align:left; margin-left: 15%">
-        <p>Three ways to add data to the staging area:</p>
-        <ul>
-            <li>Click in this box.</li>
-            <li>Drag and drop data files.</li>
-            <li>{{#if userInfo.globusLinked}}For large files (over 20GB) or a large number of files use
-                <a href="{{globusUrl}}" class="globus_link">
-                    <i class="fa fa-cloud-upload"></i> Globus.
-                </a>
-                {{else}}
-                For large files (over 20GB), use Globus. Click
-                <a href="https://docs.kbase.us/data/globus" class="globus_link">
-                    here <i class="fa fa-external-link"></i>
-                </a>
-                for directions.
-                {{/if}}
-            </li>
-        </ul>
-        <p>Click the <i class="fa fa-question-circle"></i> below for help.
-    </div>
+    <div class="dz-message">Drag and drop files and folders in this box, or <a>select</a> from your computer.</div>
 </form>
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
@@ -1,21 +1,22 @@
 <div class="row" style="margin-bottom: 5px">
     <div class="pull-left">
-        {{#if userInfo.globusLinked}}
-        <div class="globus_div">
-            Or upload to this staging area by using
-            <a href="{{globusUrl}}"
-               target="_blank" class="globus_link">
-                <i class="fa fa-cloud-upload"></i> Globus Online
-            </a>
-        </div>
-        {{/if}}
-        <div class="web_upload_div">
-            Or click <a id="web-upload" style="cursor:pointer">here</a> to use an App to upload from a public URL.
+        <div class="upload-options">
+            Other ways to upload:
+            {{#if userInfo.globusLinked}}
+            <button class="globus_linked">
+                <a href="{{globusUrl}}" target="_blank" aria-label="opens new window to upload via globus">Upload with Globus</a>
+            </button>
+            {{else}}
+            <button class="globus_not_linked">
+                <a href="https://docs.kbase.us/data/globus" rel="noopener noreferrer" target="_blank"  aria-label="opens new window to kbase globus upload docs">Upload with Globus</a>
+            </button>
+            {{/if}}
+            <button class="web_upload_div">Upload with URL</button>
         </div>
     </div>
     <div class="pull-right">
         <button id="help" class="btn btn-xs btn-default">
             <span><i class="fa fa-question-circle fa-lg"></i></span>
         </button>
     </div>
-</div>
+</div>
diff --git 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 = $('<div>'),
-                fuw = new FileUploadWidget($node, {
-                    path: '/',
-                    userInfo: {
-                        user: fakeUser,
-                        globusLinked: true
-                    }
-                }),
-                renderedMsg = $node.find('.dz-message').html();
-            expect(renderedMsg).toContain('<p>Three ways to add data to the staging area:</p>');
-            expect(renderedMsg).toContain('<li>Click in this box.</li>');
-            expect(renderedMsg).toContain('<li>Drag and drop data files.</li>');
-            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 = $('<div>'),
-                fuw = new FileUploadWidget($node, {
-                    path: '/',
-                    userInfo: {
-                        user: fakeUser,
-                        globusLinked: false
-                    }
-                }),
-                renderedMsg = $node.find('.dz-message').html();
-            expect(renderedMsg).toContain('<p>Three ways to add data to the staging area:</p>');
-            expect(renderedMsg).toContain('<li>Click in this box.</li>');
-            expect(renderedMsg).toContain('<li>Drag and drop data files.</li>');
-            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 = $('<div>'),
                 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 = $('<div>'),
-                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
@@ -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 = $('<div>'),
                 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&amp;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&amp;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();