- Add css class for reprocessed modal

- Add ReprocessedModal component
- Use new component for submission history tables

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 ? (
@@ -24,15 +25,28 @@ const MonthSubRow = ({ data }) =>
     </>
   )
 
+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 CaseAggregatesRow = ({ file }) => {
   const dispatch = useDispatch()
-
+  const reprocessedOn = formatDate(getReprocessedDate(file))
   return (
     <>
       <tr>
-        <th scope="rowgroup" rowSpan={3}>
+        <th scope="rowgroup" rowSpan={5}>
           {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,46 @@
+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>
+      <br />
+      <button className="reprocessed" onClick={() => setModalVisible(true)}>
+        Reprocessed <span>&#9432;</span>
+      </button>
+      <br />
+      <br />
+      <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/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 (