Morecast Reset Button Dialog (#3497)

- adds dialog to confirm reset of morecast grid and delete saved drafts
- closes #3484

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

@@ -1,24 +1,61 @@
 import React from 'react'
-import { Button } from '@mui/material'
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText } from '@mui/material'
 
 export interface ResetForecastButtonProps {
   className?: string
   enabled: boolean
   label: string
+  showResetDialog: boolean
+  setShowResetDialog: React.Dispatch<React.SetStateAction<boolean>>
+  handleResetButtonConfirm: () => void
   onClick: () => void
 }
 
-const ResetForecastButton = ({ className, enabled, label, onClick }: ResetForecastButtonProps) => {
+const ResetForecastButton = ({
+  className,
+  enabled,
+  label,
+  showResetDialog,
+  setShowResetDialog,
+  handleResetButtonConfirm,
+  onClick
+}: ResetForecastButtonProps) => {
+  const handleResetDialogClose = () => {
+    setShowResetDialog(false)
+  }
   return (
-    <Button
-      className={className}
-      variant="contained"
-      data-testid={'reset-forecast-button'}
-      disabled={!enabled}
-      onClick={onClick}
-    >
-      {label}
-    </Button>
+    <>
+      <Button
+        className={className}
+        variant="contained"
+        data-testid={'reset-forecast-button'}
+        disabled={!enabled}
+        onClick={onClick}
+      >
+        {label}
+      </Button>
+      <Dialog
+        open={showResetDialog}
+        onClose={handleResetDialogClose}
+        data-testid={'reset-dialog'}
+        PaperProps={{ sx: { border: 2, borderColor: '#808080' } }}
+      >
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to delete your unsaved forecasts? This will reset all forecasts that have not been
+            published to WF1.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="outlined" onClick={handleResetButtonConfirm} data-testid={'reset-forecast-confirm-button'}>
+            Reset
+          </Button>
+          <Button variant="contained" onClick={handleResetDialogClose} data-testid={'reset-forecast-cancel-button'}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
   )
 }
 

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

@@ -136,6 +136,8 @@ const TabbedDataGrid = ({ morecast2Rows, fromTo, setFromTo, fetchWeatherIndeterm
   const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>('success')
   const [columnGroupingModel, setColumnGroupingModel] = useState<GridColumnGroupingModel>([])
 
+  const [showResetDialog, setShowResetDialog] = useState(false)
+
   const handleColumnHeaderClick: GridEventListener<'columnHeaderClick'> = (params, event) => {
     if (
       !isEqual(params.colDef.field, 'stationName') &&
@@ -457,9 +459,14 @@ const TabbedDataGrid = ({ morecast2Rows, fromTo, setFromTo, fetchWeatherIndeterm
     }
   }
 
-  const handleResetClick = () => {
+  const handleResetButtonConfirm = () => {
     fetchWeatherIndeterminates()
     storedDraftForecast.clearDraftForecasts()
+    setShowResetDialog(false)
+  }
+
+  const handleResetClick = () => {
+    setShowResetDialog(true)
   }
 
   // Checks if the displayed rows includes non-Actual rows
@@ -495,6 +502,9 @@ const TabbedDataGrid = ({ morecast2Rows, fromTo, setFromTo, fetchWeatherIndeterm
             <ResetForecastButton
               label={'Reset'}
               enabled={storedDraftForecast.hasDraftForecastStored()}
+              showResetDialog={showResetDialog}
+              setShowResetDialog={setShowResetDialog}
+              handleResetButtonConfirm={handleResetButtonConfirm}
               onClick={handleResetClick}
             />
             <SaveForecastButton

web/src/features/moreCast2/components/resetForecastButton.test.tsx

@@ -1,15 +1,28 @@
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import store from 'app/store'
-import ResetForecastButton from 'features/moreCast2/components/ResetForecastButton'
+import ResetForecastButton, { ResetForecastButtonProps } from 'features/moreCast2/components/ResetForecastButton'
 import React from 'react'
 import { Provider } from 'react-redux'
 
 describe('SaveForecastButton', () => {
+  const mockHandleResetClick = jest.fn()
+  const mockHandleResetButtonConfirm = jest.fn()
+  const mockSetShowResetDialog = jest.fn()
+
+  const defaultProps: ResetForecastButtonProps = {
+    enabled: true,
+    label: 'Reset',
+    showResetDialog: false,
+    setShowResetDialog: mockSetShowResetDialog,
+    handleResetButtonConfirm: mockHandleResetButtonConfirm,
+    onClick: mockHandleResetClick
+  }
+
   it('should render the button as enabled', () => {
     const { getByTestId } = render(
       <Provider store={store}>
-        <ResetForecastButton enabled={true} label="test" onClick={() => undefined} />
+        <ResetForecastButton {...defaultProps} />
       </Provider>
     )
 
@@ -18,9 +31,10 @@ describe('SaveForecastButton', () => {
     expect(resetForecastButton).toBeEnabled()
   })
   it('should render the button as disabled', () => {
+    const propsWithEnabledFalse = { ...defaultProps, enabled: false }
     const { getByTestId } = render(
       <Provider store={store}>
-        <ResetForecastButton enabled={false} label="test" onClick={() => undefined} />
+        <ResetForecastButton {...propsWithEnabledFalse} />
       </Provider>
     )
 
@@ -29,14 +43,37 @@ describe('SaveForecastButton', () => {
     expect(manageStationsButton).toBeDisabled()
   })
   it('should call the reset click handler when clicked', async () => {
-    const handleResetClickMock = jest.fn()
     const { getByTestId } = render(
       <Provider store={store}>
-        <ResetForecastButton enabled={true} label="test" onClick={handleResetClickMock} />
+        <ResetForecastButton {...defaultProps} />
       </Provider>
     )
     const resetForecastButton = getByTestId('reset-forecast-button')
     userEvent.click(resetForecastButton)
-    await waitFor(() => expect(handleResetClickMock).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(mockHandleResetClick).toHaveBeenCalledTimes(1))
+  })
+  it('should call the reset button confirm handler when Confirm is clicked', async () => {
+    const propsWithResetDialog = { ...defaultProps, showResetDialog: true }
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ResetForecastButton {...propsWithResetDialog} />
+      </Provider>
+    )
+    const resetDialog = getByTestId('reset-dialog')
+    expect(resetDialog).toBeInTheDocument()
+    const confirmButton = getByTestId('reset-forecast-confirm-button')
+    userEvent.click(confirmButton)
+    await waitFor(() => expect(mockHandleResetButtonConfirm).toHaveBeenCalledTimes(1))
+  })
+  it('should close the dialog when the Cancel button is clicked', async () => {
+    const propsWithResetDialog = { ...defaultProps, showResetDialog: true }
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ResetForecastButton {...propsWithResetDialog} />
+      </Provider>
+    )
+    const cancelButton = getByTestId('reset-forecast-cancel-button')
+    userEvent.click(cancelButton)
+    await waitFor(() => expect(mockSetShowResetDialog).toHaveBeenCalledWith(false))
   })
 })

web/src/setupTests.ts

@@ -8,3 +8,9 @@ Object.defineProperty(global, 'crypto', {
     randomUUID: () => crypto.randomUUID()
   }
 })
+
+jest.mock('@mui/x-license-pro', () => ({
+  ...jest.requireActual('@mui/x-license-pro'),
+  useLicenseVerifier: () => 'Valid',
+  Watermark: () => null
+}))