Adjust SAR dashboard error logic (#643)

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"
     );

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