Fleet UI: Move view all host link onto host count (#28042)

changes/27533-move-view-all-host-link

@@ -0,0 +1 @@
+- Fleet UI: Moved View all host link onto host count of software, OS, and vulnerability details pages

frontend/components/LastUpdatedHostCount/LastUpdatedHostCount.tsx

@@ -4,7 +4,7 @@ import LastUpdatedText from "components/LastUpdatedText";
 const baseClass = "last-updated-host-count";
 
 interface ILastUpdatedHostCount {
-  hostCount?: string | number;
+  hostCount?: string | number | JSX.Element;
   lastUpdatedAt?: string;
 }
 

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSummary/SoftwareVulnSummary.tsx

@@ -3,12 +3,13 @@
 import React from "react";
 
 import { IVulnerability } from "interfaces/vulnerability";
+import paths from "router/paths";
+import { getPathWithQueryParams } from "utilities/url";
 
 import CustomLink from "components/CustomLink";
 import Card from "components/Card";
 import DataSet from "components/DataSet";
 import TooltipWrapper from "components/TooltipWrapper";
-import ViewAllHostsLink from "components/ViewAllHostsLink";
 import ProbabilityOfExploit from "components/ProbabilityOfExploit";
 import { HumanTimeDiffWithDateTip } from "components/HumanTimeDiffWithDateTip";
 import LastUpdatedHostCount from "components/LastUpdatedHostCount";
@@ -39,16 +40,17 @@ const SoftwareVulnSummary = ({
     hosts_count_updated_at,
   } = vuln;
 
+  const hostCountPath = getPathWithQueryParams(paths.MANAGE_HOSTS, {
+    vulnerability: cve,
+    team_id: teamIdForApi,
+  });
+
   return (
     <Card borderRadiusSize="xxlarge" includeShadow className={baseClass}>
       <span className={`${baseClass}__header`}>
         <h1>{cve}</h1>
         <span className={`${baseClass}__header__links`}>
           <CustomLink url={details_link} text="Visit NVD page" newTab />
-          <ViewAllHostsLink
-            customText="View affected hosts"
-            queryParams={{ vulnerability: cve, team_id: teamIdForApi }}
-          />
         </span>
       </span>
       {isPremiumTier && cve_description && (
@@ -132,7 +134,14 @@ const SoftwareVulnSummary = ({
           title="Affected hosts"
           value={
             <LastUpdatedHostCount
-              hostCount={hosts_count}
+              hostCount={
+                <TooltipWrapper tipContent="View all affected hosts">
+                  <CustomLink
+                    url={hostCountPath}
+                    text={hosts_count.toString()}
+                  />
+                </TooltipWrapper>
+              }
               lastUpdatedAt={hosts_count_updated_at}
             />
           }

frontend/pages/SoftwarePage/components/SoftwareDetailsSummary/SoftwareDetailsSummary.tsx

@@ -6,11 +6,13 @@ software/os/:id > Top section
 
 import React from "react";
 
-import { QueryParams } from "utilities/url";
+import { getPathWithQueryParams, QueryParams } from "utilities/url";
+import paths from "router/paths";
 
-import ViewAllHostsLink from "components/ViewAllHostsLink";
 import DataSet from "components/DataSet";
 import LastUpdatedHostCount from "components/LastUpdatedHostCount";
+import TooltipWrapper from "components/TooltipWrapper";
+import CustomLink from "components/CustomLink";
 
 import SoftwareIcon from "../icons/SoftwareIcon";
 
@@ -40,6 +42,8 @@ const SoftwareDetailsSummary = ({
   versions,
   iconUrl,
 }: ISoftwareDetailsSummaryProps) => {
+  const hostCountPath = getPathWithQueryParams(paths.MANAGE_HOSTS, queryParams);
+
   return (
     <div className={baseClass}>
       <SoftwareIcon name={name} source={source} url={iconUrl} size="xlarge" />
@@ -53,19 +57,17 @@ const SoftwareDetailsSummary = ({
             title="Hosts"
             value={
               <LastUpdatedHostCount
-                hostCount={hosts === 0 ? "---" : hosts}
+                hostCount={
+                  <TooltipWrapper tipContent="View all hosts">
+                    <CustomLink url={hostCountPath} text={hosts.toString()} />
+                  </TooltipWrapper>
+                }
                 lastUpdatedAt={countsUpdatedAt}
               />
             }
           />
         </dl>
       </dl>
-      <div>
-        <ViewAllHostsLink
-          queryParams={queryParams}
-          className={`${baseClass}__hosts-link`}
-        />
-      </div>
     </div>
   );
 };