Revert "Morecast: Empty Cell validation" (#3979)

.sonarcloud.properties

@@ -16,7 +16,7 @@ sonar.test.exclusions=*.feature
 sonar.tests.inclusions=**/*.test.tsx
 
 # Exclude duplication in fba tests due to many similar calculation numbers, ignore sample code as it's temporary, ignore sfms entrypoint, ignore util tests, ignore temporary fwi folder
-sonar.cpd.exclusions=api/app/tests/fba_calc/*.py, api/app/weather_models/wind_direction_sample.py, web/src/features/moreCast2/util.test.ts, web/src/features/moreCast2/components/gridComponentRenderer.test.tsx, web/src/utils/fwi
+sonar.cpd.exclusions=api/app/tests/fba_calc/*.py, api/app/weather_models/wind_direction_sample.py, web/src/features/moreCast2/util.test.ts, web/src/utils/fwi
 
 # Encoding of the source code. Default is default system encoding
 sonar.sourceEncoding=UTF-8

.vscode/settings.json

@@ -75,7 +75,6 @@
         "ffmc",
         "fireweather",
         "firezone",
-        "FWIs",
         "GDPS",
         "geoalchemy",
         "GEOGCS",
@@ -86,7 +85,6 @@
         "grib",
         "gribs",
         "HAINES",
-        "Hasher",
         "hourlies",
         "HRDPS",
         "idir",

web/src/features/moreCast2/components/EditInputCell.tsx

@@ -14,9 +14,7 @@ export const EditInputCell = (props: GridRenderEditCellParams) => {
   const inputRef = useRef<HTMLInputElement | null>(null)
   const dispatch: AppDispatch = useDispatch()
 
-  useEffect(() => {
-    dispatch(setInputValid(isEmpty(error)))
-  }, [])
+  dispatch(setInputValid(isEmpty(error)))
 
   useEffect(() => {
     if (hasFocus && inputRef.current) {
@@ -45,7 +43,7 @@ export const EditInputCell = (props: GridRenderEditCellParams) => {
   }
 
   return (
-    <InvalidCellToolTip invalid={error}>
+    <InvalidCellToolTip error={error}>
       <TextField
         data-testid="forecast-edit-cell"
         type="number"

web/src/features/moreCast2/components/ForecastCell.tsx

@@ -19,7 +19,6 @@ const ForecastCell = ({ disabled, label, showGreaterThan, showLessThan, value, v
   if (showGreaterThan && showLessThan) {
     throw Error('ForecastCell cannot show both greater than and less than icons at the same time.')
   }
-
   return (
     <Grid container sx={{ justifyContent: 'center', alignItems: 'center' }}>
       <Grid item xs={2}>

web/src/features/moreCast2/components/GridComponentRenderer.tsx

@@ -22,8 +22,7 @@ import ForecastHeader from 'features/moreCast2/components/ForecastHeader'
 import { ColumnClickHandlerProps } from 'features/moreCast2/components/TabbedDataGrid'
 import { cloneDeep, isNumber } from 'lodash'
 import ForecastCell from 'features/moreCast2/components/ForecastCell'
-import ValidatedGrassCureForecastCell from '@/features/moreCast2/components/ValidatedGrassCureForecastCell'
-import ValidatedWindDirectionForecastCell from '@/features/moreCast2/components/ValidatedWindDirectionForecastCell'
+import ValidatedForecastCell from '@/features/moreCast2/components/ValidatedForecastCell'
 
 export const NOT_AVAILABLE = 'N/A'
 export const NOT_REPORTING = 'N/R'
@@ -121,16 +120,7 @@ export class GridComponentRenderer {
     // The grass curing 'forecast' field is rendered differently
     if (isGrassField) {
       return (
-        <ValidatedGrassCureForecastCell
-          disabled={isActual || isPreviousDate}
-          label={label}
-          value={params.formattedValue}
-          validator={validator}
-        />
-      )
-    } else if (field.includes('windDirection')) {
-      return (
-        <ValidatedWindDirectionForecastCell
+        <ValidatedForecastCell
           disabled={isActual || isPreviousDate}
           label={label}
           value={params.formattedValue}

web/src/features/moreCast2/components/InvalidCellToolTip.tsx

@@ -4,16 +4,16 @@ import { isEmpty } from 'lodash'
 import { theme } from '@/app/theme'
 
 export interface InvalidCellToolTipProps {
-  invalid: string
+  error: string
   children: React.ReactNode
 }
 
-const InvalidCellToolTip = ({ invalid, children }: InvalidCellToolTipProps) => {
+const InvalidCellToolTip = ({ error, children }: InvalidCellToolTipProps) => {
   return (
     <Tooltip
       data-testid="validation-tooltip"
-      title={invalid}
-      open={!isEmpty(invalid)}
+      title={error}
+      open={!isEmpty(error)}
       arrow
       sx={{
         '& .MuiTooltip-tooltip': {

web/src/features/moreCast2/components/MoreCast2Column.tsx

@@ -1,4 +1,4 @@
-import { GridValueFormatterParams } from '@mui/x-data-grid-pro'
+import { GridPreProcessEditCellProps, GridValueFormatterParams } from '@mui/x-data-grid-pro'
 import { DateTime } from 'luxon'
 import {
   ColDefGenerator,

web/src/features/moreCast2/components/TabbedDataGrid.tsx

@@ -1,7 +1,5 @@
 import { AlertColor, Grid, List, Stack, Typography } from '@mui/material'
 import { styled } from '@mui/material/styles'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppDispatch } from '@/app/store'
 import {
   GridCellParams,
   GridColDef,
@@ -22,6 +20,7 @@ import ForecastSummaryDataGrid from 'features/moreCast2/components/ForecastSumma
 import SelectableButton from 'features/moreCast2/components/SelectableButton'
 import { selectAllMoreCast2Rows, selectWeatherIndeterminatesLoading } from 'features/moreCast2/slices/dataSlice'
 import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
 import { MoreCast2ForecastRow, MoreCast2Row, PredictionItem } from 'features/moreCast2/interfaces'
 import { selectSelectedStations } from 'features/moreCast2/slices/selectedStationsSlice'
 import { cloneDeep, groupBy, isEqual, isNull, isUndefined } from 'lodash'
@@ -30,15 +29,14 @@ import { ROLES } from 'features/auth/roles'
 import { selectAuthentication } from 'app/rootReducer'
 import { DateRange } from 'components/dateRangePicker/types'
 import MoreCast2Snackbar from 'features/moreCast2/components/MoreCast2Snackbar'
-import { isForecastRowPredicate, getRowsToSave, isRequiredInputSet } from 'features/moreCast2/saveForecasts'
+import { isForecastRowPredicate, getRowsToSave, isForecastValid } from 'features/moreCast2/saveForecasts'
 import MoreCast2DateRangePicker from 'features/moreCast2/components/MoreCast2DateRangePicker'
 import { filterAllVisibleRowsForSimulation, filterRowsForSimulationFromEdited } from 'features/moreCast2/rowFilters'
 import { fillStationGrassCuringForward, simulateFireWeatherIndices } from 'features/moreCast2/util'
 import { MoreCastParams, theme } from 'app/theme'
 import { MorecastDraftForecast } from 'features/moreCast2/forecastDraft'
 import ResetForecastButton from 'features/moreCast2/components/ResetForecastButton'
 import { getDateTimeNowPST } from 'utils/date'
-import { setRequiredInputEmpty } from '@/features/moreCast2/slices/validInputSlice'
 
 export interface ColumnClickHandlerProps {
   colDef: GridColDef | null
@@ -58,7 +56,7 @@ export const Root = styled('div')({
 
 const FORECAST_ERROR_MESSAGE = 'The forecast was not saved; an unexpected error occurred.'
 const FORECAST_SAVED_MESSAGE = 'Forecast was successfully saved and sent to Wildfire One.'
-const FORECAST_WARN_MESSAGE = 'Invalid forecast values, check highlighted cells for further information.'
+const FORECAST_WARN_MESSAGE = 'Forecast not submitted. A forecast can only contain N/A values for the Wind Direction.'
 
 const SHOW_HIDE_COLUMNS_LOCAL_STORAGE_KEY = 'showHideColumnsModel'
 
@@ -73,7 +71,6 @@ interface TabbedDataGridProps {
 export type handleShowHideChangeType = (weatherParam: keyof MoreCastParams, columnName: string, value: boolean) => void
 
 const TabbedDataGrid = ({ fromTo, setFromTo, fetchWeatherIndeterminates }: TabbedDataGridProps) => {
-  const dispatch: AppDispatch = useDispatch()
   const selectedStations = useSelector(selectSelectedStations)
   const loading = useSelector(selectWeatherIndeterminatesLoading)
   const { roles, isAuthenticated } = useSelector(selectAuthentication)
@@ -448,9 +445,8 @@ const TabbedDataGrid = ({ fromTo, setFromTo, fetchWeatherIndeterminates }: Tabbe
   }
 
   const handleSaveClick = async () => {
-    const rowsToSave: MoreCast2ForecastRow[] = getRowsToSave(visibleRows)
-
-    if (isRequiredInputSet(rowsToSave)) {
+    if (isForecastValid(visibleRows)) {
+      const rowsToSave: MoreCast2ForecastRow[] = getRowsToSave(visibleRows)
       const result = await submitMoreCastForecastRecords(rowsToSave)
       if (result.success) {
         setSnackbarMessage(FORECAST_SAVED_MESSAGE)
@@ -463,7 +459,6 @@ const TabbedDataGrid = ({ fromTo, setFromTo, fetchWeatherIndeterminates }: Tabbe
         setSnackbarOpen(true)
       }
     } else {
-      dispatch(setRequiredInputEmpty({ empty: true }))
       setSnackbarMessage(FORECAST_WARN_MESSAGE)
       setSnackbarSeverity('warning')
       setSnackbarOpen(true)

web/src/features/moreCast2/components/ValidatedForecastCell.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
+import { TextField } from '@mui/material'
 import { GridRenderCellParams } from '@mui/x-data-grid-pro'
-import { selectMorecastRequiredInputEmpty } from '@/features/moreCast2/slices/validInputSlice'
-import { useSelector } from 'react-redux'
-import { isNil } from 'lodash'
-import ValidatedCell from '@/features/moreCast2/components/ValidatedCell'
+import { theme } from 'app/theme'
+import InvalidCellToolTip from '@/features/moreCast2/components/InvalidCellToolTip'
 
 interface ValidatedForecastCellProps {
   disabled: boolean
@@ -13,10 +12,41 @@ interface ValidatedForecastCellProps {
 }
 
 const ValidatedForecastCell = ({ disabled, label, value, validator }: ValidatedForecastCellProps) => {
-  const isRequiredInputEmpty = useSelector(selectMorecastRequiredInputEmpty)
-  const invalid = validator ? validator(value as string) : ''
-  const error = (isRequiredInputEmpty.empty && (value as string) === '') || isNil(value) || invalid !== ''
-  return <ValidatedCell disabled={disabled} label={label} value={value} error={error} invalid={invalid} />
+  const error = validator ? validator(value as string) : ''
+  return (
+    <InvalidCellToolTip error={error}>
+      <TextField
+        disabled={disabled}
+        size="small"
+        label={label}
+        InputLabelProps={{
+          shrink: true
+        }}
+        sx={{
+          '& .MuiOutlinedInput-root': {
+            backgroundColor: `${theme.palette.common.white}`,
+            '& fieldset': {
+              borderColor: error ? theme.palette.error.main : '#737373',
+              borderWidth: '2px'
+            },
+            '&:hover fieldset': {
+              borderColor: error ? theme.palette.error.main : '#737373'
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: error ? theme.palette.error.main : '#737373',
+              borderWidth: '2px'
+            }
+          },
+          '& .Mui-disabled': {
+            '& fieldset': {
+              borderWidth: '1px'
+            }
+          }
+        }}
+        value={value}
+      ></TextField>
+    </InvalidCellToolTip>
+  )
 }
 
 export default React.memo(ValidatedForecastCell)