Merge e570123 into 01d935f

kbase-extension/static/kbase/css/kbaseNarrative.css

@@ -17,6 +17,52 @@
     margin: 2em 4.5em;
 }
 
+.text-button {
+    background: #FFFFFF;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1px solid #FFFFFF;
+    font-family: Oxygen;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 18px;
+    outline: none;
+
+    text-transform: uppercase;
+    text-align: center;
+    color: #4379B1;
+    height: 34px;
+}
+
+.text-button:hover {
+    color: #36618E;
+    border: 1px solid #ECF2F7;
+    background-color: #ECF2F7;
+}
+
+.text-button:focus {
+    color: #36618E;
+    border: 1px solid #E3EBF3;
+    background-color: #E3EBF3;
+}
+
+.text-button:active {
+    color: #36618E;
+    border: 1px solid #D9E4EF;
+    background-color: #D9E4EF;
+}
+
+.text-button:disabled {
+    color: #929292;
+    border: 1px solid #FAFAFA;
+    background-color: #FAFAFA;
+}
+
+.clear-all-dropzone {
+    margin: 6px;
+}
+
 #kb-data-staging-table_wrapper{
     margin-top: 15px;
 }
@@ -1118,12 +1164,6 @@ p span.notification{
     background-image: none;
 }
 
-.btn-default {
-    /** not sure why this is here, but it makes buttons look fuzzy.
-        commenting out until answers come around. - WJR **/
-    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);*/
-}
-
 #menus {
     padding-left: 0px;
 }

kbase-extension/static/kbase/js/widgets/narrative_core/upload/fileUploadWidget.js

@@ -80,10 +80,12 @@ define([
             })
                 .on('totaluploadprogress', (progress) => {
                     $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': progress + '%'});
+                    console.log("TOTAL UPLOADING PROGRESS")
                 })
                 .on('addedfile', (file) => {
                     $dropzoneElem.find('#global-info').css({'display': 'inline'});
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
+
                 })
                 .on('success', (file, serverResponse) => {
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
@@ -127,9 +129,36 @@ define([
                         errorText = err.xhr.responseText;
                     }
                     $dropzoneElem.find('.error.text-danger').text('Error: ' + errorText);
+                    if (!$dropzoneElem.find('#clear-all-btn').length){
+                        $dropzoneElem.append(this.makeClearAllButton());
+                    } else {
+                        $('#clear-all-btn-container').remove();
+                        $('#clear-all-btn').remove();
+                        $dropzoneElem.append(this.makeClearAllButton());
+                    }
                 });
         },
 
+        makeClearAllButton: function() {
+            var $clearAllBtn = $('<button>')
+                .text('Clear All')
+                .addClass('text-button clear-all-dropzone')
+                .attr('aria-label', 'clear all files from the dropzone')
+                .attr('id', 'clear-all-btn')
+                .click(function(){
+                    this.dropzone.removeAllFiles();
+                    $('#clear-all-btn-container').remove();
+                    $('#clear-all-btn').remove();
+                }.bind(this));
+
+            var $buttonContainer = $('<div>')
+                .attr('id', 'clear-all-btn-container')
+                .addClass('text-center')
+                .append($clearAllBtn);
+
+                return $buttonContainer;
+        },
+
         makeUploadMessage: function() {
             if (!this.dropzone) {
                 return 'No files uploading.';

kbase-extension/static/kbase/templates/data_staging/dropped_file.html

@@ -3,7 +3,7 @@
         <span class="name" data-dz-name></span>
         <strong class="error text-danger" data-dz-errormessage></strong>
     </div>
-    <div class="col-md-1" style="">
+    <div class="col-md-1">
         <span class="size pull-right" data-dz-size></span>
     </div>
     <div class="col-md-3 text-center">
@@ -19,4 +19,4 @@
             </button>
         </div>
     </div>
-</div>
+</div>

kbase-extension/static/kbase/templates/data_staging/dropzone_area.html

@@ -11,4 +11,8 @@
         </div>
     </div>
     <div class="dz-message">Drag and drop files and folders in this box, or <a>select</a> from your computer.</div>
+    <!-- <div class="text-center">
+        <button id="clear-all" class="text-button clear-all-dropzone" aria-label="clear all files from the dropzone">Clear All</button>
+    </div> -->
 </form>
+

src/config.json

@@ -103,7 +103,7 @@
         "google_ad_conversion": "kR9OCLas4JgBEOy2pucC"
     },
     "comm_wait_timeout": 600000,
-    "config": "narrative-refactor",
+    "config": "dev",
     "data_panel": {
         "initial_sort_limit": 10000,
         "max_name_length": 33,

test/unit/spec/narrative_core/upload/fileUploadWidget-spec.js

@@ -118,5 +118,57 @@ define([
             fuWidget.dropzone.addFile(mockFile);
         });
 
+        it('Should error when too large of a file is uploaded', (done) => {
+            // Set the file max size to 0
+            fuWidget.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');
+            const errorMock = jasmine.createSpy('errorMock');
+            fuWidget.dropzone.on('addedfile', () => {
+                adderMock();
+            });
+            fuWidget.dropzone.on('error', () => {
+                errorMock();
+            });
+            fuWidget.dropzone.addFile(mockFile);
+            setTimeout(() => {
+                expect(adderMock).toHaveBeenCalled();
+                expect(errorMock).toHaveBeenCalled();
+                done();
+            });
+        });
+
+        it('Should create a clear all button when a file upload error occurs', (done) => {
+            // Set the file max size to 0
+            fuWidget.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');
+            fuWidget.dropzone.on('addedfile', () => {
+                adderMock();
+            });
+
+            fuWidget.dropzone.addFile(mockFile);
+            setTimeout(() => {
+                expect(adderMock).toHaveBeenCalled();
+                var clearAllButton = document.getElementById('clear-all-btn');
+                expect(clearAllButton).toBeDefined();
+                done();
+            });
+        });
+
     });
 });