Reprocessed Modal: Submission History

tdrs-frontend/src/assets/Reports.scss

@@ -42,6 +42,19 @@
   cursor: pointer;
 }
 
+.reprocessed {
+  background-color: transparent;
+  border: none;
+  color: #264A64;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+}
+
+.reprocessed:hover {
+  cursor: pointer;
+}
+
 .usa-table caption {
   width: 100%;
 }

tdrs-frontend/src/components/SubmissionHistory/CaseAggregatesTable.jsx

@@ -8,6 +8,7 @@ import {
   downloadFile,
   getErrorReportStatus,
 } from './helpers'
+import ReprocessedModal from './ReprocessedModal'
 
 const MonthSubRow = ({ data }) =>
   data ? (
@@ -26,13 +27,13 @@ const MonthSubRow = ({ data }) =>
 
 const CaseAggregatesRow = ({ file }) => {
   const dispatch = useDispatch()
-
+  const reprocessedOn = formatDate(getReprocessedDate(file))
   return (
     <>
       <tr>
         <th scope="rowgroup" rowSpan={3}>
           {formatDate(file.createdAt) + ' by ' + file.submittedBy}
-          {hasReparsed(file) && <></>}
+          {hasReparsed(file) && <ReprocessedModal date={reprocessedOn} />}
         </th>
 
         <th scope="rowgroup" rowSpan={3}>

tdrs-frontend/src/components/SubmissionHistory/ReprocessedModal.jsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import Modal from '../Modal'
+
+const Message = ({ date }) => {
+  return (
+    <>
+      We've reprocessed your submission with updated validation criteria, based
+      on system improvements, to improve accuracy of error reports. No changes
+      have been made to your original data submission.
+      <br />
+      <br />
+      Data was reprocessed on: {date}
+    </>
+  )
+}
+
+const ReprocessedModal = ({ date }) => {
+  const [modalVisible, setModalVisible] = useState(false)
+  const message = <Message date={date} />
+  return (
+    <div>
+      <button className="reprocessed" onClick={() => setModalVisible(true)}>
+        Reprocessed &#9432;
+      </button>
+      <Modal
+        title="Most Recent Reprocessed Date"
+        message={message}
+        isVisible={modalVisible}
+        buttons={[
+          {
+            key: '1',
+            text: 'Close',
+            onClick: () => {
+              setModalVisible(false)
+            },
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default ReprocessedModal

tdrs-frontend/src/components/SubmissionHistory/SubmissionHistory.test.js

@@ -474,4 +474,45 @@ describe('SubmissionHistory', () => {
       }
     }
   )
+
+  it('Shows Reprocessed button', () => {
+    const state = {
+      reports: {
+        files: [
+          {
+            id: '123',
+            fileName: 'test1.txt',
+            fileType: 'TANF',
+            quarter: 'Q1',
+            section: 'Active Case Data',
+            uuid: '123-4-4-321',
+            year: '2023',
+            s3_version_id: '321-0-0-123',
+            createdAt: '12/12/2012 12:12',
+            submittedBy: '[email protected]',
+            latest_reparse_file_meta: {
+              finished: true,
+              success: true,
+              started_at: '2024-12-09T18:38:14+0000',
+              finished_at: '2024-12-09T18:38:16+0000',
+            },
+          },
+        ],
+      },
+    }
+
+    const store = appConfigureStore(state)
+    const dispatch = jest.fn(store.dispatch)
+    store.dispatch = dispatch
+
+    setup(store)
+
+    expect(screen.queryByText('test1.txt')).toBeInTheDocument()
+
+    const reprocessedBtn = screen.queryByText('Reprocessed ⓘ')
+    expect(reprocessedBtn).toBeInTheDocument()
+
+    fireEvent.click(reprocessedBtn)
+    expect(screen.queryByText('Data was reprocessed on: 12/9/2024, 1:38:16 PM'))
+  })
 })

tdrs-frontend/src/components/SubmissionHistory/TotalAggregatesTable.jsx

@@ -8,6 +8,7 @@ import {
   downloadFile,
   getErrorReportStatus,
 } from './helpers'
+import ReprocessedModal from './ReprocessedModal'
 
 const MonthSubRow = ({ data }) =>
   data ? (
@@ -24,13 +25,13 @@ const MonthSubRow = ({ data }) =>
 
 const TotalAggregatesRow = ({ file }) => {
   const dispatch = useDispatch()
-
+  const reprocessedOn = formatDate(getReprocessedDate(file))
   return (
     <>
       <tr>
         <th scope="rowgroup" rowSpan={3}>
           {formatDate(file.createdAt) + ' by ' + file.submittedBy}
-          {hasReparsed(file) && <></>}
+          {hasReparsed(file) && <ReprocessedModal date={reprocessedOn} />}
         </th>
 
         <th scope="rowgroup" rowSpan={3}>

tdrs-frontend/src/components/SubmissionHistory/helpers.jsx

@@ -31,7 +31,8 @@ export const hasReparsed = (f) =>
   f.latest_reparse_file_meta.finished_at &&
   f.latest_reparse_file_meta.finished_at !== null
 
-export const getReprocessedDate = (f) => f.latest_reparse_file_meta.finished_at
+export const getReprocessedDate = (f) =>
+  f?.latest_reparse_file_meta?.finished_at
 
 export const getErrorReportStatus = (file) => {
   if (