Allow warnings to be set from inside properties to change appearance

js/components/ascribe_forms/input_fineuploader.js

@@ -25,6 +25,7 @@ const InputFineUploader = React.createClass({
 
         // Props for ReactS3FineUploader
         areAssetsDownloadable: bool,
+        setWarning: func,
         showErrorPrompt: bool,
 
         handleChangedFile: func, // TODO: rename to onChangedFile
@@ -122,6 +123,7 @@ const InputFineUploader = React.createClass({
                 fileClassToUpload,
                 uploadMethod,
                 handleChangedFile,
+                setWarning,
                 showErrorPrompt,
                 disabled } = this.props;
         let editable = isFineUploaderActive;
@@ -144,6 +146,7 @@ const InputFineUploader = React.createClass({
                 isReadyForFormSubmission={isReadyForFormSubmission}
                 areAssetsDownloadable={areAssetsDownloadable}
                 areAssetsEditable={editable}
+                setWarning={setWarning}
                 showErrorPrompt={showErrorPrompt}
                 signature={{
                     endpoint: AppConstants.serverUrl + 's3/signature/',

js/components/ascribe_forms/property.js

@@ -71,7 +71,8 @@ const Property = React.createClass({
             initialValue: null,
             value: null,
             isFocused: false,
-            errors: null
+            errors: null,
+            hasWarning: false
         };
     },
 
@@ -209,17 +210,20 @@ const Property = React.createClass({
         this.setState({errors: null});
     },
 
+    setWarning(hasWarning) {
+        this.setState({ hasWarning });
+    },
+
     getClassName() {
-        if(!this.state.expanded && !this.props.checkboxLabel){
+        if (!this.state.expanded && !this.props.checkboxLabel) {
             return 'is-hidden';
-        }
-        if(!this.props.editable){
+        } else if (!this.props.editable) {
             return 'is-fixed';
-        }
-        if (this.state.errors){
+        } else if (this.state.errors) {
             return 'is-error';
-        }
-        if(this.state.isFocused) {
+        } else if (this.state.hasWarning) {
+            return 'is-warning';
+        } else if (this.state.isFocused) {
             return 'is-focused';
         } else {
             return '';
@@ -245,6 +249,7 @@ const Property = React.createClass({
                     onChange: this.handleChange,
                     onFocus: this.handleFocus,
                     onBlur: this.handleBlur,
+                    setWarning: this.setWarning,
                     disabled: !this.props.editable,
                     ref: 'input',
                     name: this.props.name

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -8,10 +8,13 @@ import S3Fetcher from '../../fetchers/s3_fetcher';
 
 import FileDragAndDrop from './ascribe_file_drag_and_drop/file_drag_and_drop';
 
+import ErrorQueueStore from '../../stores/error_queue_store';
+
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import AppConstants from '../../constants/application_constants';
+import { ErrorClasses, testErrorAgainstAll } from '../../constants/error_constants';
 
 import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
 import { computeHashOfFile } from '../../utils/file_utils';
@@ -31,12 +34,16 @@ const { shape,
         element,
         arrayOf } = React.PropTypes;
 
+// After 5 manual retries, show the contact us prompt.
+const RETRY_ATTEMPT_TO_SHOW_CONTACT_US = 5;
+
 const ReactS3FineUploader = React.createClass({
     propTypes: {
         areAssetsDownloadable: bool,
         areAssetsEditable: bool,
         errorNotificationMessage: string,
         showErrorPrompt: bool,
+        setWarning: func, // for when the parent component wants to be notified of uploader warnings (ie. upload failed)
 
         handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
         submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
@@ -301,6 +308,9 @@ const ReactS3FineUploader = React.createClass({
         // proclaim that upload is not ready
         this.props.setIsUploadReady(false);
 
+        // reset any warnings propagated to parent
+        this.setWarning(false);
+
         // reset internal data structures of component
         this.setState(this.getInitialState());
     },
@@ -423,6 +433,12 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
+    setWarning(hasWarning) {
+        if (typeof this.props.setWarning === 'function') {
+            this.props.setWarning(hasWarning);
+        }
+    },
+
     checkFormSubmissionReady() {
         const { isReadyForFormSubmission, setIsUploadReady } = this.props;
 
@@ -597,6 +613,7 @@ const ReactS3FineUploader = React.createClass({
                 });
 
                 this.setState({ errorState });
+                this.setWarning(true);
             }
         } else {
             notificationMessage = errorReason || errorNotificationMessage;
@@ -766,6 +783,8 @@ const ReactS3FineUploader = React.createClass({
             },
             filesToUpload
         });
+
+        this.setWarning(false);
     },
 
     handleUploadFile(files) {

sass/ascribe_property.scss

@@ -37,7 +37,6 @@ $ascribe-red-error: rgb(169, 68, 66);
                 margin-right: 1em;
             }
         }
-        
 
         > input,
         > textarea {
@@ -50,6 +49,10 @@ $ascribe-red-error: rgb(169, 68, 66);
     }
 }
 
+.is-warning {
+    border-left: 3px solid $ascribe-pink
+}
+
 .is-fixed {
     cursor: default;
 
@@ -233,4 +236,4 @@ $ascribe-red-error: rgb(169, 68, 66);
     > span > span {
         margin-top: 0;
     }
-}
+}