From 3e3c1f44b1770126884bd7a4a2d5fce45085a7f6 Mon Sep 17 00:00:00 2001
From: Garrett Rabian <57802560+gmrabian@users.noreply.github.com>
Date: Thu, 13 Jun 2024 09:33:31 -0400
Subject: [PATCH] Adjust SAR dashboard error logic (#643)

---
 .../pages/Dashboard/DashboardPage.test.tsx    |  2 +-
 .../pages/Dashboard/DashboardPage.tsx         | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/services/ui-src/src/components/pages/Dashboard/DashboardPage.test.tsx b/services/ui-src/src/components/pages/Dashboard/DashboardPage.test.tsx
index 529c82b61..78270a7c2 100644
--- a/services/ui-src/src/components/pages/Dashboard/DashboardPage.test.tsx
+++ b/services/ui-src/src/components/pages/Dashboard/DashboardPage.test.tsx
@@ -321,7 +321,7 @@ describe("Test error banner on SAR dashboard", () => {
   });
   test("Check that error banner is enabled in SAR when latest WP IS NOT approved", () => {
     mockedUseStore.mockReturnValue(mockReportStore);
-    render(sarDashboardViewWithReports);
+    render(sarDashboardWithNoReports);
     const errorBannerText = screen.queryByText(
       "You must have an approved MFP Work Plan not previously used in a MFP Semi-Annual Progress Report (SAR) in order to add a new MFP SAR"
     );
diff --git a/services/ui-src/src/components/pages/Dashboard/DashboardPage.tsx b/services/ui-src/src/components/pages/Dashboard/DashboardPage.tsx
index 63257c258..92c5e084c 100644
--- a/services/ui-src/src/components/pages/Dashboard/DashboardPage.tsx
+++ b/services/ui-src/src/components/pages/Dashboard/DashboardPage.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable multiline-comment-style */
 import { useContext, useEffect, useState } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { States } from "../../../constants";
@@ -92,6 +91,7 @@ export const DashboardPage = ({ reportType }: Props) => {
   const [selectedReport, setSelectedReport] = useState<AnyObject | undefined>(
     undefined
   );
+  const [showSarAlert, setShowSarAlert] = useState<boolean>(false);
 
   const dashboardVerbiageMap: any = {
     WP: wpVerbiage,
@@ -108,8 +108,22 @@ export const DashboardPage = ({ reportType }: Props) => {
   const activeState =
     userIsAdmin || userIsReadOnly ? adminSelectedState : userState;
 
-  const showSarAlert =
-    reportType === ReportType.SAR && !workPlanToCopyFrom && reportsToDisplay;
+  useEffect(() => {
+    let showAlert = false;
+    if (reportType === ReportType.SAR) {
+      const activeSarList = reportsToDisplay?.filter(
+        (report: ReportMetadataShape) => {
+          return (
+            report.reportType === ReportType.SAR &&
+            report.status !== ReportStatus.SUBMITTED &&
+            report?.archived !== true
+          );
+        }
+      );
+      showAlert = !workPlanToCopyFrom && activeSarList?.length === 0;
+    }
+    setShowSarAlert(showAlert);
+  }, [reportsToDisplay, workPlanToCopyFrom]);
 
   useEffect(() => {
     // if no activeState, go to homepage