Fix/992 notify data file search selection changes

tdrs-frontend/src/components/Button/Button.jsx

@@ -43,6 +43,7 @@ function Button({
         onClick={onClick}
         data-testid="button"
         disabled={disabled}
+        aria-disabled={disabled}
       >
         {children}
       </button>

tdrs-frontend/src/components/Modal/Modal.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Button from '../Button'
+
+const Modal = ({ title, message, buttons = [], isVisible = false }) =>
+  isVisible ? (
+    <div id="modal" className="modal display-block">
+      <div className="modal-content">
+        <h1
+          className="font-serif-xl margin-4 margin-bottom-0 text-normal"
+          tabIndex="-1"
+        >
+          {title}
+        </h1>
+        <p className="margin-4 margin-top-1">{message}</p>
+        <div className="margin-x-4 margin-bottom-4">
+          {buttons.map((b) => (
+            <Button
+              key={b.key}
+              type="button"
+              className="mobile:margin-bottom-1 mobile-lg:margin-bottom-0"
+              onClick={b.onClick}
+            >
+              {b.text}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  ) : null
+
+export default Modal

tdrs-frontend/src/components/Modal/index.js

@@ -0,0 +1,3 @@
+import Modal from './Modal'
+
+export default Modal

tdrs-frontend/src/components/Reports/Reports.jsx

@@ -13,6 +13,7 @@ import {
 import UploadReport from '../UploadReport'
 import STTComboBox from '../STTComboBox'
 import { fetchSttList } from '../../actions/sttList'
+import Modal from '../Modal'
 
 /**
  * Reports is the home page for users to file a report.
@@ -23,16 +24,23 @@ import { fetchSttList } from '../../actions/sttList'
 function Reports() {
   // The selected year in the dropdown tied to our redux `reports` state
   const selectedYear = useSelector((state) => state.reports.year)
+  const [yearInputValue, setYearInputValue] = useState(selectedYear)
   // The selected stt in the dropdown tied to our redux `reports` state
   const selectedStt = useSelector((state) => state.reports.stt)
+  const [sttInputValue, setSttInputValue] = useState(selectedStt)
   // The selected quarter in the dropdown tied to our redux `reports` state
   const selectedQuarter = useSelector((state) => state.reports.quarter)
+  const [quarterInputValue, setQuarterInputValue] = useState(selectedQuarter)
   // The logged in user saved in our redux `auth` state object
   const user = useSelector((state) => state.auth.user)
   const isOFAAdmin =
     user && user.roles.some((role) => role.name === 'OFA Admin')
   const sttList = useSelector((state) => state?.stts?.sttList)
 
+  const [errorModalVisible, setErrorModalVisible] = useState(false)
+  const files = useSelector((state) => state.reports.files)
+  const uploadedFiles = files.filter((file) => file.fileName && !file.id)
+
   const userProfileStt = user?.stt?.name
 
   const dispatch = useDispatch()
@@ -51,21 +59,29 @@ function Reports() {
   const currentStt = isOFAAdmin ? selectedStt : userProfileStt
 
   const stt = sttList?.find((stt) => stt?.name === currentStt)
-  const [submittedHeader, setSubmittedHeader] = useState('')
 
   const errorsCount = formValidation.errors
 
   const missingStt = !isOFAAdmin && !currentStt
 
   const errorsRef = useRef(null)
 
+  const resetPreviousValues = () => {
+    setQuarterInputValue(selectedQuarter || '')
+    setYearInputValue(selectedYear || '')
+    setSttInputValue(selectedStt || '')
+  }
+
   const handleSearch = () => {
     // Clear previous errors
     setFormValidationState({})
 
-    // Filter out non-truthy values
-    const form = [selectedYear, currentStt, selectedQuarter].filter(Boolean)
-    const reportHeader = `${currentStt} - Fiscal Year ${selectedYear} - ${quarters[selectedQuarter]}`
+    // Filter out non-truthy values]
+    const form = [
+      yearInputValue,
+      sttInputValue || currentStt,
+      quarterInputValue,
+    ].filter(Boolean)
 
     if (form.length === 3) {
       // Hide upload sections while submitting search
@@ -76,6 +92,11 @@ function Reports() {
       // Clear existing file list from state to ensure fresh results
       dispatch(clearFileList())
 
+      // update state to the new search values
+      dispatch(setYear(yearInputValue))
+      dispatch(setQuarter(quarterInputValue))
+      dispatch(setStt(sttInputValue))
+
       // Retrieve the files matching the selected year and quarter.
       dispatch(
         getAvailableFileList({
@@ -85,16 +106,13 @@ function Reports() {
         })
       )
 
-      // Update the section header to reflect selections
-      setSubmittedHeader(reportHeader)
-
       // Restore upload sections to the page
       setTimeout(() => setIsToggled(true), 0)
     } else {
       // create error state
       setFormValidationState({
         year: !selectedYear,
-        stt: !currentStt,
+        stt: !(sttInputValue || currentStt),
         quarter: !selectedQuarter,
         errors: 3 - form.length,
       })
@@ -109,19 +127,19 @@ function Reports() {
   }
 
   const selectYear = ({ target: { value } }) => {
-    dispatch(setYear(value))
+    setYearInputValue(value)
     setTouched((currentForm) => ({ ...currentForm, year: true }))
   }
 
   const selectQuarter = ({ target: { value } }) => {
-    dispatch(setQuarter(value))
+    setQuarterInputValue(value)
     setTouched((currentForm) => ({ ...currentForm, quarter: true }))
   }
   // Non-OFA Admin users will be unable to select an STT
   // prefer => `auth.user.stt`
 
   const selectStt = (value) => {
-    dispatch(setStt(value))
+    setSttInputValue(value)
     setTouched((currentForm) => ({ ...currentForm, stt: true }))
   }
 
@@ -151,25 +169,27 @@ function Reports() {
 
   useEffect(() => {
     if (!isUploadReportToggled) {
-      const form = [selectedYear, currentStt, selectedQuarter].filter(Boolean)
+      const form = [yearInputValue, sttInputValue, quarterInputValue].filter(
+        Boolean
+      )
       const touchedFields = Object.keys(touched).length
 
       const errors = touchedFields === 3 ? 3 - form.length : 0
 
       setFormValidationState((currentState) => ({
         ...currentState,
-        year: touched.year && !selectedYear,
-        stt: touched.stt && !currentStt,
-        quarter: touched.quarter && !selectedQuarter,
+        year: touched.year && !yearInputValue,
+        stt: touched.stt && !sttInputValue,
+        quarter: touched.quarter && !quarterInputValue,
         errors,
       }))
     }
   }, [
-    currentStt,
+    sttInputValue,
     isUploadReportToggled,
-    selectedYear,
+    yearInputValue,
     selectedStt,
-    selectedQuarter,
+    quarterInputValue,
     setFormValidationState,
     touched,
   ])
@@ -201,7 +221,7 @@ function Reports() {
               })}
             >
               <STTComboBox
-                selectedStt={selectedStt}
+                selectedStt={sttInputValue}
                 selectStt={selectStt}
                 error={formValidation.stt}
               />
@@ -231,7 +251,7 @@ function Reports() {
                 name="reportingYears"
                 id="reportingYears"
                 onChange={selectYear}
-                value={selectedYear}
+                value={yearInputValue}
                 aria-describedby="years-error-alert"
               >
                 <option value="" disabled hidden>
@@ -264,7 +284,7 @@ function Reports() {
                 name="quarter"
                 id="quarter"
                 onChange={selectQuarter}
-                value={selectedQuarter}
+                value={quarterInputValue}
                 aria-describedby="quarter-error-alert"
               >
                 <option value="" disabled hidden>
@@ -280,18 +300,54 @@ function Reports() {
               </select>
             </label>
           </div>
-          <Button className="margin-y-4" type="button" onClick={handleSearch}>
+          <Button
+            className="margin-y-4"
+            type="button"
+            onClick={() => {
+              if (uploadedFiles.length > 0) {
+                setErrorModalVisible(true)
+              } else {
+                handleSearch()
+              }
+            }}
+          >
             Search
           </Button>
         </form>
       </div>
       {isUploadReportToggled && (
         <UploadReport
           stt={stt?.id}
-          header={submittedHeader}
-          handleCancel={() => setIsToggled(false)}
+          header={`${currentStt} - Fiscal Year ${selectedYear} - ${quarters[selectedQuarter]}`}
+          handleCancel={() => {
+            setIsToggled(false)
+            resetPreviousValues()
+          }}
         />
       )}
+      <Modal
+        title="Files Not Submitted"
+        message="Your uploaded files have not been submitted. Searching without submitting will discard your changes and remove any uploaded files."
+        isVisible={errorModalVisible}
+        buttons={[
+          {
+            key: 1,
+            text: 'Cancel',
+            onClick: () => {
+              setErrorModalVisible(false)
+              resetPreviousValues()
+            },
+          },
+          {
+            key: 2,
+            text: 'Discard and Search',
+            onClick: () => {
+              setErrorModalVisible(false)
+              handleSearch()
+            },
+          },
+        ]}
+      />
     </>
   )
 }