BDMS-285: Well Inventory CSV validation/upload

cypress/e2e/ocotillo/well-inventory-bulk.cy.ts

@@ -0,0 +1,51 @@
+/// <reference types="cypress" />
+
+describe('Well Inventory Bulk Import Page', () => {
+    beforeEach(() => {
+        cy.login()
+        cy.visit('/ocotillo/well-inventory-bulk-import')
+    })
+
+    it('should render the well inventory bulk import page UI without errors', () => {
+        cy.get('input').should('have.length.at.least', 1)
+        cy.contains('Well Inventory Bulk Import').should('exist')
+        cy.get('label').contains(/upload csv/i).should('exist')
+        cy.get('button').contains(/submit/i).should('exist')
+    })
+
+    it('should preserve CSV data through parse and unparse cycle', () => {
+        cy.readFile('cypress/fixtures/well-inventory.csv').then((originalCsv) => {
+            cy.intercept('POST', '**/well-inventory-csv', (req) => {
+                // For data sent as multipart string, check body contains CSV content
+                const body = req.body as string
+                const originalLines = originalCsv.split('\n')
+
+                // Check that key data from original CSV is in the submitted body
+                originalLines.forEach(line => {
+                    if (line.trim()) {
+                        //check all original csv fields for exact match in body
+                        const fields = line.split(',')
+                        fields.forEach(field => {
+                            console.log("checking field: ", field.trim())
+                            expect(body).to.include(field.trim())
+                        })
+                    }
+                })
+
+                req.reply({ 
+                    statusCode: 200, 
+                    body: { 
+                        summary: { total_rows_processed: 1, total_rows_imported: 1, validation_errors_or_warnings: 0 }, 
+                        wells: [], 
+                        validation_errors: [] 
+                    } 
+                })
+            }).as('submitCSV')
+
+            cy.get('input[type="file"]').selectFile('cypress/fixtures/well-inventory.csv', { force: true })
+            cy.wait(1500)
+            cy.get('button').contains(/submit/i).click()
+            cy.wait('@submitCSV')
+        })
+    })
+})

cypress/fixtures/well-inventory.csv

@@ -0,0 +1,2 @@
+project,well_name_point_id,site_name,date_time,field_staff,utm_easting,utm_northing,utm_zone,elevation_ft,elevation_method,measuring_point_height_ft,measuring_point_description
+Test Project_2,WELL-002,SITE-001,2024-01-15 10:30:00,John Smith,352342,4040485,13N,5500.5,Survey-grade GPS,2.5,Top of casing

package.json

@@ -58,6 +58,7 @@
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
     "@turf/turf": "^7.2.0",
+    "@types/papaparse": "^5.5.0",
     "axios-auth-refresh": "^3.3.6",
     "d3-polygon": "^3.0.1",
     "echarts": "^5.6.0",
@@ -68,6 +69,7 @@
     "mapbox-gl": "^3.0.0",
     "mapbox-gl-style-switcher": "^1.0.11",
     "pako": "^2.1.0",
+    "papaparse": "^5.5.3",
     "proj4": "^2.15.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/pages/ocotillo/well-inventory-bulk-import/grid-defs.tsx

@@ -0,0 +1,57 @@
+import { GridColDef } from '@mui/x-data-grid'
+import { IconButton } from '@mui/material'
+import DeleteIcon from '@mui/icons-material/Delete'
+import { allFieldNames, requiredFields, numericFields, booleanFields } from './utils'
+import type { TableRow } from './index'
+
+export function createGridColumns(
+  getCellError: (rowId: number, fieldName: string) => boolean,
+  handleDeleteRow: (id: number) => void
+): GridColDef<TableRow>[] {
+  // Create columns for all fields from schema
+  const dataColumns: GridColDef<TableRow>[] = allFieldNames.map((fieldName) => {
+    const isRequired = requiredFields.includes(fieldName)
+    const isNumeric = numericFields.includes(fieldName)
+    const isBoolean = booleanFields.includes(fieldName)
+
+    const baseColumn: GridColDef<TableRow> = {
+      field: fieldName,
+      headerName: fieldName,
+      width: 150,
+      editable: true,
+      cellClassName: (params) => {
+        return getCellError(params.row.id, fieldName) ? 'error-cell' : ''
+      },
+    }
+
+    if (isNumeric) {
+      baseColumn.type = 'number'
+      baseColumn.width = 130
+    } else if (isBoolean) {
+      baseColumn.type = 'boolean'
+      baseColumn.width = 120
+    }
+
+    return baseColumn
+  })
+
+  // Add actions column at the beginning
+  const actionsColumn: GridColDef<TableRow> = {
+    field: 'actions',
+    headerName: 'Actions',
+    width: 100,
+    sortable: false,
+    renderCell: (params) => (
+      <IconButton
+        size="small"
+        onClick={() => handleDeleteRow(params.row.id)}
+        color="error"
+      >
+        <DeleteIcon />
+      </IconButton>
+    ),
+  }
+
+  return [actionsColumn, ...dataColumns]
+}
+