Display errors on invalid files when uploading boxes from CSV (#1951)

* Display errors on invalid files when uploading boxes from CSV

* Fixes PR review

* Fixes robucop offense

Author: leandroradusky

app/assets/javascripts/components/upload_csv_box.js.jsx

@@ -8,7 +8,7 @@ var UploadCsvBox = React.createClass({
       hideListItems: "hidden",
       hideErrorMessage: "hidden",
       errorMessage:'',
-       fileValue: ''
+      fileValue: ''
     };
   },
 
@@ -35,12 +35,14 @@ var UploadCsvBox = React.createClass({
       .then(responseJson => {
         const not_found_batches = responseJson.not_found_batches;
         const samples_nbr = responseJson.samples_nbr;
-        
+        const error_message = responseJson.error_message;
+
         // Create row from template with filename and upload info
         const filename = file.name;
-        const uploadInfo = {
+        const uploadInfo =  {
           uploadedSamplesCount: samples_nbr,
-          notFoundUuids: not_found_batches
+          notFoundUuids: not_found_batches,
+          errorMessage: error_message
         };
 
         // Add the new row to the state
@@ -88,30 +90,37 @@ var UploadCsvBox = React.createClass({
 
   renderUploadRow: function(rowData, index) {
   const { filename, uploadInfo, showTooltip } = rowData;
-  const { uploadedSamplesCount, notFoundUuids } = uploadInfo;
+  const { uploadedSamplesCount, notFoundUuids, errorMessage } = uploadInfo;
   const batchesNotFound = notFoundUuids.length;
   const batchesText = batchesNotFound == 1 ? 'batch' : 'batches';
   const samplesText = uploadedSamplesCount == 1 ? 'sample' : 'samples';
 
   const tooltipText = notFoundUuids.slice(0, 5).map((batch_number) => <div>{batch_number}</div>);
 
+  const rowContent = errorMessage == "" ?
+    <div className="uploaded-samples-count">
+      {uploadedSamplesCount} {samplesText}
+      {batchesNotFound > 0 && (
+        <span className="dashed-underline">
+          {" ("}{batchesNotFound} {batchesText} not found{")"}
+        </span>
+      )}
+    </div> :
+    <div className="uploaded-samples-count">
+      {errorMessage}
+    </div>;
+
+
   return (
     <div className="items-row" key={filename}>
       <div className="items-item gap-5">
         <div className="icon-circle-minus icon-gray remove_file" onClick={() => this.handleRemove(index)}></div>
         <div className="file-name">{filename}</div>
       </div>
-      <div className={`items-row-action gap-5 not_found_message ${batchesNotFound > 0 ? 'ttip input-required' : ''}`}
+      <div className={`items-row-action gap-5 not_found_message ${batchesNotFound > 0 ? ' ttip ' : ' '} ${batchesNotFound > 0 || errorMessage != "" ? ' input-required ' : ' '}}`}
            onClick={() => this.handleClick(index)}>
-        <div className="uploaded-samples-count">
-          {uploadedSamplesCount} {samplesText}
-          {batchesNotFound > 0 && (
-            <span className="dashed-underline">
-              {" ("}{batchesNotFound} {batchesText} not found{")"}
-            </span>
-          )}
-        </div>
-        <div className={`upload-icon bigger ${batchesNotFound > 0 ? 'icon-alert icon-red' : 'icon-check'}`}></div>
+        {rowContent}  
+        <div className={`upload-icon bigger ${batchesNotFound > 0 || errorMessage != "" ? 'icon-alert icon-red' : 'icon-check'}`}></div>
         {batchesNotFound > 0 && (
           <div className={`ttext not-found-uuids ${showTooltip ? '' : 'hidden'}`}>
             {tooltipText}

app/controllers/csv_validations_controller.rb

@@ -5,15 +5,32 @@ def create
       csv_text = uploaded_file.read
       institution = @navigation_context.institution
       csv_table = CSV.parse(csv_text, headers: true)
+
+      unless csv_table.headers == ["Batch", "Concentration", "Distractor", "Instructions"]
+        render_invalid_format
+        return
+      end
+
       batch_values = csv_table.map { |row| row["Batch"] }
       found_batches = institution.batches.where(batch_number: batch_values).pluck(:batch_number)
       not_found_batches = (batch_values - found_batches).uniq
 
       render json: { found_batches: found_batches,
                      not_found_batches: not_found_batches,
-                     samples_nbr: csv_table.size }
+                     samples_nbr: csv_table.size,
+                     error_message: "" }
     else
-      render json: { error: "Invalid file format. Please upload a CSV file." }, status: :unprocessable_entity
+      render_invalid_format
     end
   end
+
+  private
+
+  def render_invalid_format
+    render json: { found_batches: [],
+                   not_found_batches: [],
+                   samples_nbr: 0, 
+                   error_message: "Invalid file format." }
+  end
+
 end