Fleet UI bug fix: Show software card with no vulnerabilities (#11431)

changes/11413-dashboard-vuln-card-bug

@@ -0,0 +1 @@
+- Bug fix: If there is software but no vulnerabilities, still show software card on dashboard when clicking on vulnerabilities

frontend/pages/DashboardPage/DashboardPage.tsx

@@ -22,13 +22,16 @@ import {
   IMdmSummaryResponse,
 } from "interfaces/mdm";
 import { ISelectedPlatform } from "interfaces/platform";
-import { ISoftwareResponse } from "interfaces/software";
+import { ISoftwareResponse, ISoftwareCountResponse } from "interfaces/software";
 import { ITeam } from "interfaces/team";
 import { useTeamIdParam } from "hooks/useTeamIdParam";
 import enrollSecretsAPI from "services/entities/enroll_secret";
 import hostSummaryAPI from "services/entities/host_summary";
 import macadminsAPI from "services/entities/macadmins";
-import softwareAPI, { ISoftwareQueryKey } from "services/entities/software";
+import softwareAPI, {
+  ISoftwareQueryKey,
+  ISoftwareCountQueryKey,
+} from "services/entities/software";
 import teamsAPI, { ILoadTeamsResponse } from "services/entities/teams";
 import hosts from "services/entities/hosts";
 import sortUtils from "utilities/sort";
@@ -126,6 +129,7 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
   const [softwareActionUrl, setSoftwareActionUrl] = useState<string>();
   const [showMunkiCard, setShowMunkiCard] = useState(true);
   const [showMdmCard, setShowMdmCard] = useState(true);
+  const [showSoftwareCard, setShowSoftwareCard] = useState(false);
   const [showAddHostsModal, setShowAddHostsModal] = useState(false);
   const [showOperatingSystemsUI, setShowOperatingSystemsUI] = useState(false);
   const [showHostsUI, setShowHostsUI] = useState(false); // Hides UI on first load only
@@ -267,7 +271,7 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
       keepPreviousData: true,
       staleTime: 30000, // stale time can be adjusted if fresher data is desired based on software inventory interval
       onSuccess: (data) => {
-        if (data.software?.length !== 0) {
+        if (data.software?.length > 0) {
           setSoftwareTitleDetail &&
             setSoftwareTitleDetail(
               <LastUpdatedText
@@ -275,11 +279,38 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
                 whatToRetrieve={"software"}
               />
             );
+          setShowSoftwareCard(true);
+        } else {
+          setShowSoftwareCard(false);
         }
       },
     }
   );
 
+  // If no vulnerable software, !software?.software can return undefined
+  // Must check non-vuln software count > 0 to show software card iff API returning undefined
+  const { data: softwareCount } = useQuery<
+    ISoftwareCountResponse,
+    Error,
+    number,
+    ISoftwareCountQueryKey[]
+  >(
+    [
+      {
+        scope: "softwareCount",
+        teamId: teamIdForApi,
+      },
+    ],
+    ({ queryKey }) => softwareAPI.count(queryKey[0]),
+    {
+      enabled: isRouteOk && !software?.software,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false,
+      retry: 1,
+      select: (data) => data.count,
+    }
+  );
+
   const { isFetching: isMdmFetching, error: errorMdm } = useQuery<
     IMdmSummaryResponse,
     Error
@@ -354,6 +385,12 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
     },
   });
 
+  useEffect(() => {
+    softwareCount && softwareCount > 0
+      ? setShowSoftwareCard(true)
+      : setShowSoftwareCard(false);
+  }, [softwareCount]);
+
   // Sets selected platform label id for links to filtered manage host page
   useEffect(() => {
     if (labels) {
@@ -596,7 +633,7 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
               {LearnFleetCard}
             </>
           )}
-        {software?.software && SoftwareCard}
+        {showSoftwareCard && SoftwareCard}
         {!isAnyTeamSelected && isOnGlobalTeam && <>{ActivityFeedCard}</>}
         {showMdmCard && <>{MDMCard}</>}
       </div>