From cf5033719c8377fade6db626c3735ac26946c142 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Mon, 19 Aug 2024 14:15:35 -0700
Subject: [PATCH] ASA Radio Buttons (#3861)

Changes actual/forecast dropdown to radio buttons
---
 .../fba/components/ActualForecastControl.tsx  | 61 +++++++++++++++++++
 .../fba/components/AdvisoryMetadata.tsx       | 32 ----------
 .../components/actualForecastControl.test.tsx | 22 +++++++
 .../fba/pages/FireBehaviourAdvisoryPage.tsx   | 19 ++----
 4 files changed, 89 insertions(+), 45 deletions(-)
 create mode 100644 web/src/features/fba/components/ActualForecastControl.tsx
 delete mode 100644 web/src/features/fba/components/AdvisoryMetadata.tsx
 create mode 100644 web/src/features/fba/components/actualForecastControl.test.tsx

diff --git a/web/src/features/fba/components/ActualForecastControl.tsx b/web/src/features/fba/components/ActualForecastControl.tsx
new file mode 100644
index 000000000..ce86cf78e
--- /dev/null
+++ b/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)
diff --git a/web/src/features/fba/components/AdvisoryMetadata.tsx b/web/src/features/fba/components/AdvisoryMetadata.tsx
deleted file mode 100644
index c3f2178bd..000000000
--- a/web/src/features/fba/components/AdvisoryMetadata.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Autocomplete, TextField } from '@mui/material'
-import React from 'react'
-import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage'
-import { isNull } from 'lodash'
-
-export interface AdvisoryMetadataProps {
-  testId?: string
-  runType: string
-  setRunType: React.Dispatch<React.SetStateAction<RunType>>
-}
-const AdvisoryMetadata = ({ runType, setRunType }: AdvisoryMetadataProps) => {
-  const changeHandler = (_: React.ChangeEvent<{}>, value: any | null) => {
-    if (!isNull(value)) {
-      setRunType(value)
-    }
-  }
-  return (
-    <Autocomplete
-      disablePortal
-      disableClearable
-      autoComplete
-      size="small"
-      id="asa-forecast-actual-select"
-      options={[RunType.FORECAST, RunType.ACTUAL]}
-      defaultValue={runType}
-      onChange={changeHandler}
-      renderInput={params => <TextField {...params} label="Forecast or Actual" />}
-    />
-  )
-}
-
-export default React.memo(AdvisoryMetadata)
diff --git a/web/src/features/fba/components/actualForecastControl.test.tsx b/web/src/features/fba/components/actualForecastControl.test.tsx
new file mode 100644
index 000000000..bb8c69947
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx b/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx
index 0aae6a79c..306ade7ca 100644
--- a/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx
+++ b/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