ASA Radio Buttons (#3861)

Changes actual/forecast dropdown to radio buttons

web/src/features/fba/components/ActualForecastControl.tsx

@@ -0,0 +1,61 @@
+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material'
+import React from 'react'
+import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage'
+import { isNull } from 'lodash'
+import { theme } from 'app/theme'
+
+export interface ActualForecastControlProps {
+  runType: RunType
+  setRunType: React.Dispatch<React.SetStateAction<RunType>>
+}
+const ActualForecastControl = ({ runType, setRunType }: ActualForecastControlProps) => {
+  const changeHandler = (_: React.ChangeEvent<{}>, value: any | null) => {
+    if (!isNull(value)) {
+      setRunType(value)
+    }
+  }
+  return (
+    <FormControl
+      variant="outlined"
+      sx={{
+        border: '1px solid rgba(0, 0, 0, 0.23)',
+        borderRadius: '4px',
+        padding: '8px 12px 4px',
+        position: 'relative',
+        margin: theme.spacing(1)
+      }}
+    >
+      <FormLabel
+        sx={{
+          fontSize: '0.75rem',
+          color: 'rgba(0, 0, 0, 0.6)',
+          position: 'absolute',
+          top: '-10px',
+          left: '12px',
+          backgroundColor: 'white',
+          padding: '0 4px'
+        }}
+      >
+        Time Frame
+      </FormLabel>
+      <RadioGroup row defaultValue={runType} onChange={changeHandler}>
+        <FormControlLabel
+          value={RunType.ACTUAL}
+          control={
+            <Radio inputProps={{ 'data-testid': 'actual-radio' } as React.InputHTMLAttributes<HTMLInputElement>} />
+          }
+          label="Actual"
+        />
+        <FormControlLabel
+          value={RunType.FORECAST}
+          control={
+            <Radio inputProps={{ 'data-testid': 'forecast-radio' } as React.InputHTMLAttributes<HTMLInputElement>} />
+          }
+          label="Forecast"
+        />
+      </RadioGroup>
+    </FormControl>
+  )
+}
+
+export default React.memo(ActualForecastControl)

web/src/features/fba/components/actualForecastControl.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import ActualForecastControl from './ActualForecastControl'
+import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage'
+
+describe('ActualForecastControl', () => {
+  const mockSetRunType = jest.fn()
+
+  it('should render the radio button selector with the correct default', () => {
+    const { getByTestId } = render(<ActualForecastControl runType={RunType.FORECAST} setRunType={mockSetRunType} />)
+    const forecastButton = getByTestId('forecast-radio')
+    expect(forecastButton).toBeChecked()
+  })
+
+  it('should call setRunType with the correct value when a radio button is selected', () => {
+    const { getByTestId } = render(<ActualForecastControl runType={RunType.FORECAST} setRunType={mockSetRunType} />)
+    fireEvent.click(getByTestId('actual-radio'))
+    expect(mockSetRunType).toHaveBeenCalledWith(RunType.ACTUAL)
+    fireEvent.click(getByTestId('forecast-radio'))
+    expect(mockSetRunType).toHaveBeenCalledWith(RunType.FORECAST)
+  })
+})

web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx

@@ -21,7 +21,7 @@ import { ASA_DOC_TITLE, FIRE_BEHAVIOUR_ADVISORY_NAME, PST_UTC_OFFSET } from 'uti
 import WPSDatePicker from 'components/WPSDatePicker'
 import { AppDispatch } from 'app/store'
 import AdvisoryThresholdSlider from 'features/fba/components/map/AdvisoryThresholdSlider'
-import AdvisoryMetadata from 'features/fba/components/AdvisoryMetadata'
+import ActualForecastControl from 'features/fba/components/ActualForecastControl'
 import { fetchSFMSRunDates } from 'features/fba/slices/runDatesSlice'
 import { isNull, isUndefined } from 'lodash'
 import { fetchHighHFIFuels } from 'features/fba/slices/hfiFuelTypesSlice'
@@ -45,11 +45,6 @@ export const FireCentreFormControl = styled(FormControl)({
   minWidth: 280
 })
 
-export const ForecastActualDropdownFormControl = styled(FormControl)({
-  margin: theme.spacing(1),
-  minWidth: 280
-})
-
 const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
   const dispatch: AppDispatch = useDispatch()
   const { fireCenters } = useSelector(selectFireCenters)
@@ -191,6 +186,11 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
               <WPSDatePicker date={dateOfInterest} updateDate={updateDate} />
             </StyledFormControl>
           </Grid>
+          <ErrorBoundary>
+            <Grid item>
+              <ActualForecastControl runType={runType} setRunType={setRunType} />
+            </Grid>
+          </ErrorBoundary>
           <Grid item>
             <FireCentreFormControl>
               <FireCenterDropdown
@@ -202,13 +202,6 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
               />
             </FireCentreFormControl>
           </Grid>
-          <ErrorBoundary>
-            <Grid item>
-              <ForecastActualDropdownFormControl>
-                <AdvisoryMetadata runType={runType.toString()} setRunType={setRunType} />
-              </ForecastActualDropdownFormControl>
-            </Grid>
-          </ErrorBoundary>
           <Grid item>
             <StyledFormControl>
               <FormControlLabel