Merge e3e0076 into 0322e93

kbase · Oct 23, 2020 · 8294b05 · 8294b05
2 parents 0322e93 + e3e0076
commit 8294b05
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 47 deletions.
diff --git a/kbase-extension/static/kbase/css/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css
@@ -17,7 +17,7 @@
   margin: 2em 4.5em;
 }
 
-.text-button {
+.btn__text {
     background: #FFFFFF;
     box-sizing: border-box;
     border-radius: 4px;
@@ -35,26 +35,26 @@
     height: 34px;
 }
 
-.text-button:hover {
+.btn__text:hover {
     color: #36618E;
     border: 1px solid #ECF2F7;
     background-color: #ECF2F7;
     cursor: pointer;
 }
 
-.text-button:focus {
+.btn__text:focus {
     color: #36618E;
     border: 1px solid #E3EBF3;
     background-color: #E3EBF3;
 }
 
-.text-button:active {
+.btn__text:active {
     color: #36618E;
     border: 1px solid #D9E4EF;
     background-color: #D9E4EF;
 }
 
-.text-button:disabled {
+.btn__text:disabled {
     color: #929292;
     border: 1px solid #FAFAFA;
     background-color: #FAFAFA;
@@ -64,6 +64,55 @@
     margin: 6px;
 }
 
+.dz-file {
+  width:100%;
+  border: 1px solid #EEEEEE;
+  margin: 2px 0px;
+  padding: 5px 0px;
+  font-family: Oxygen, Arial, sans-serif;
+  font-style: normal;
+  font-size: 16px;
+}
+
+.dz-file__row {
+  display: flex;
+  align-items: center;
+}
+
+.dz-file__name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 20px;
+}
+
+.dz-file__msg {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+
+.dz-file__msg__success {
+  display:none;
+  color: #4BAF4F;
+}
+
+.dz-file__progress__bar {
+  margin-bottom: inherit;
+  margin-left: 5px;
+}
+
+.dz-file__icon {
+  margin: 0 2px 0 2px;
+  display: none;
+  font-weight: bold;
+  align-items: center;
+}
+
+.dz-file__icon__success {
+  color: #4BAF4F;
+}
+
 #kb-data-staging-table_wrapper {
     margin-top: 44px;
 }

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
@@ -85,20 +85,23 @@ define([
                     $dropzoneElem.find('#global-info').css({'display': 'inline'});
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
 
+                    // If there is a button already in the area, it has to be removed,
+                    // and appened to the new document when additional errored files are added.
+                    if ($dropzoneElem.find('#clear-all-btn').length){
+                        this.deleteClearAllButton();
+                        $dropzoneElem.append(this.makeClearAllButton());
+                    }
+
                 })
                 .on('success', (file, serverResponse) => {
+                    var $successElem = $(file.previewElement);
+                    $successElem.find('#upload_progress_and_cancel').hide();
+                    $successElem.find('#dz_file_row_1').css({'display': 'flex', 'align-items': 'center'});
+                    $successElem.find('#success_icon').css('display', 'flex');
+                    $successElem.find('#success_message').css('display', 'inline');
                     $dropzoneElem.find('#upload-message').text(this.makeUploadMessage());
-                    file.previewElement.querySelector('#status-message').textContent = 'Completed';
-                    file.previewElement.querySelector('.progress').style.display = 'none';
-                    file.previewElement.querySelector('#status-message').style.display = 'inline';
-                    $(file.previewElement.querySelector('.fa-ban')).removeClass('fa-ban').addClass('fa-check');
-                    $(file.previewElement.querySelector('.btn-danger')).removeClass('btn-danger').addClass('btn-success');
-                    if (this.dropzone.getQueuedFiles().length === 0 &&
-                        this.dropzone.getUploadingFiles().length === 0) {
-                        $($dropzoneElem.find('#total-progress')).fadeOut(1000, function() {
-                            $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
-                        });
-                    }
+
+                    this.removeProgressBar($dropzoneElem);
                     $(file.previewElement).fadeOut(1000, function() {
                         $(file.previewElement.querySelector('.btn')).trigger('click');
                     });
@@ -124,30 +127,31 @@ define([
                     $dropzoneElem.find('#global-info').css({'display': 'none'});
                     $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
                 })
-                .on('error', (err) => {
+                .on('error', (erroredFile) => {
+                    var $errorElem = $(erroredFile.previewElement);
+                    $errorElem.find('#upload_progress_and_cancel').hide();
+                    $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);
                     let errorText = 'unable to upload file!';
-                    if (err && err.xhr && err.xhr.responseText) {
-                        errorText = err.xhr.responseText;
+                    if (erroredFile && erroredFile.xhr && erroredFile.xhr.responseText) {
+                        errorText = erroredFile.xhr.responseText;
                     }
-                    $dropzoneElem.find('.error.text-danger').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){
                         $dropzoneElem.append(this.makeClearAllButton());
-
-                    } else {
-                        // If there is a button already in the area, it has to be removed,
-                        // and appened to the new document when additional errored files are added.
-                        this.deleteClearAllButton();
-                        $dropzoneElem.append(this.makeClearAllButton());
                     }
                 });
         },
 
         makeClearAllButton: function() {
             var $clearAllBtn = $('<button>')
                 .text('Clear All')
-                .addClass('text-button clear-all-dropzone')
+                .addClass('btn__text clear-all-dropzone')
                 .attr('aria-label', 'clear all errored files from the dropzone')
                 .attr('id', 'clear-all-btn')
                 .click(function(){
@@ -168,6 +172,15 @@ define([
             $('#clear-all-btn').remove();
         },
 
+        removeProgressBar: function($dropzoneElem) {
+            if (this.dropzone.getQueuedFiles().length === 0 &&
+            this.dropzone.getUploadingFiles().length === 0) {
+                $($dropzoneElem.find('#total-progress')).fadeOut(1000, function() {
+                    $($dropzoneElem.find('#total-progress .progress-bar')).css({'width': '0%'});
+                });
+            }
+        },
+
         makeUploadMessage: function() {
             if (!this.dropzone) {
                 return 'No files uploading.';

diff --git a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html
@@ -1,22 +1,40 @@
-<div class="row file-row" style="width:100%; border: 1px solid #EEE; margin: 2px 0; padding: 5px 0">
-    <div class="col-md-7" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-        <span class="name" data-dz-name></span>
-        <strong class="error text-danger" data-dz-errormessage></strong>
-    </div>
-    <div class="col-md-1">
-        <span class="size pull-right" data-dz-size></span>
-    </div>
-    <div class="col-md-3 text-center">
-        <div id="status-message" style="display:none"></div>
-        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="margin-bottom: inherit; margin-left: 5px">
-            <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
+<div class="row file-row dz-file">
+    <div id="dz_file_row_1" class="row">
+        <div class="col-md-7">
+            <div class="dz-file__name" data-dz-name></div>
+        </div>
+        <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 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" style="width:0%;" data-dz-uploadprogress></div>
+                </div>
+            </div>
+            <div class="col-md-1">
+                <div class="pull-right">
+                    <button data-dz-remove class="btn btn-xs btn-danger cancel">
+                        <i class="fa fa-lg fa-fw fa-ban"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div id="error_icon" class="pull-right dz-file__icon">
+                <span>Error</span>
+                <i class="fa fa-2x fa-exclamation-triangle" aria-hidden="true"></i>
+            </div>
+            <div id="success_icon" class="pull-right dz-file__icon dz-file__icon__success">
+                <span>Completed</span>
+                <i class="fa fa-2x fa-check-circle" aria-hidden="true"></i>
+            </div>
         </div>
     </div>
-    <div class="col-md-1">
-        <div class="pull-right">
-            <button data-dz-remove class="btn btn-xs btn-danger cancel">
-                <i class="fa fa-lg fa-fw fa-ban"></i>
-            </button>
+    <div class="row">
+        <div class="col-md-7">
+            <div id="error_message" class="dz-file__msg" data-dz-errormessage></div>
+            <div id="success_message" class="dz-file__msg dz-file__msg__success">Successfully moved to stagin area!</div>
         </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
@@ -145,7 +145,7 @@ define([
             });
         });
 
-        it('Should create a clear all button when a file upload error occurs', (done) => {
+        it('Should render properly when a file upload error occurs', (done) => {
             // Set the file max size to 0
             fuWidget.dropzone.options.maxFilesize = 1;
 
@@ -164,8 +164,9 @@ define([
             fuWidget.dropzone.addFile(mockFile);
             setTimeout(() => {
                 expect(adderMock).toHaveBeenCalled();
-                var clearAllButton = document.getElementById('clear-all-btn');
-                expect(clearAllButton).toBeDefined();
+                expect(document.getElementById('clear-all-btn')).toBeDefined();
+                expect(document.getElementById('upload_progress_and_cancel')).toBeNull();
+                expect(document.getElementById('error_icon')).toBeDefined();
                 done();
             });
         });