UI – Add row select to vuln details tables (#16748)

## Follow-up for new specs to #16472 

- Make rows in both tables clickable
<img width="1277" alt="Screenshot 2024-02-12 at 12 21 07 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/4392b514-6144-4b00-bcd6-1ce833b14185">
<img width="1277" alt="Screenshot 2024-02-12 at 12 21 11 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/1ce6ecb8-cf26-41bb-a725-d078a60658b1">

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx

@@ -1,9 +1,13 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 
+import { InjectedRouter } from "react-router";
+
+import PATHS from "router/paths";
 import { IVulnerability } from "interfaces/vulnerability";
-
+import { buildQueryStringFromParams } from "utilities/url";
 import Card from "components/Card";
 import TableContainer from "components/TableContainer";
+
 import generateColumnConfigs from "./SwVulnOSTableConfig";
 
 const baseClass = "software-vuln-os-versions";
@@ -11,13 +15,30 @@ const baseClass = "software-vuln-os-versions";
 interface ISoftwareVulnOSVersions {
   osVersions: IVulnerability["os_versions"];
   isPremiumTier: boolean;
+  router: InjectedRouter;
 }
 
 const SoftwareVulnOSVersions = ({
   osVersions,
   isPremiumTier,
+  router,
 }: ISoftwareVulnOSVersions) => {
-  const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), []);
+  const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), [
+    isPremiumTier,
+  ]);
+
+  const onSelectSingleRow = useCallback(
+    ({ original: { os_version_id } }) => {
+      if (!os_version_id) {
+        return;
+      }
+
+      router.push(
+        `${PATHS.MANAGE_HOSTS}?${buildQueryStringFromParams({ os_version_id })}`
+      );
+    },
+    [router]
+  );
 
   const renderVulnerableOSTable = () => {
     return (
@@ -32,6 +53,8 @@ const SoftwareVulnOSVersions = ({
         emptyComponent={() => <></>}
         showMarkAllPages={false}
         isAllPagesSelected={false}
+        disableMultiRowSelect
+        onSelectSingleRow={onSelectSingleRow}
       />
     );
   };

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx

@@ -69,7 +69,11 @@ const generateColumnConfigs = (isPremiumTier: boolean): Column[] => {
         return (
           <>
             <TextCell value={hosts_count} />
-            <ViewAllHostsLink queryParams={{ os_version_id }} responsive />
+            <ViewAllHostsLink
+              queryParams={{ os_version_id }}
+              responsive
+              rowHover
+            />
           </>
         );
       },

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx

@@ -1,7 +1,12 @@
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
+
+import { InjectedRouter } from "react-router";
 
 import { IVulnerability } from "interfaces/vulnerability";
 
+import PATHS from "router/paths";
+import { buildQueryStringFromParams } from "utilities/url";
+
 import Card from "components/Card";
 import TableContainer from "components/TableContainer";
 
@@ -12,14 +17,32 @@ const baseClass = "software-vuln-software-versions";
 interface ISoftwareVulnSoftwareVersions {
   vulnSoftware: IVulnerability["software"];
   isPremiumTier: boolean;
+  router: InjectedRouter;
 }
 
 const SoftwareVulnSoftwareVersions = ({
   vulnSoftware,
   isPremiumTier,
+  router,
 }: ISoftwareVulnSoftwareVersions) => {
-  const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), []);
+  const columnConfigs = useMemo(() => generateColumnConfigs(isPremiumTier), [
+    isPremiumTier,
+  ]);
 
+  const onSelectSingleRow = useCallback(
+    ({ original: { id: software_title_id } }) => {
+      if (!software_title_id) {
+        return;
+      }
+
+      router.push(
+        `${PATHS.MANAGE_HOSTS}?${buildQueryStringFromParams({
+          software_title_id,
+        })}`
+      );
+    },
+    [router]
+  );
   const renderVulnerableSoftwareTable = () => {
     return (
       <TableContainer
@@ -33,6 +56,8 @@ const SoftwareVulnSoftwareVersions = ({
         emptyComponent={() => <></>}
         showMarkAllPages={false}
         isAllPagesSelected={false}
+        disableMultiRowSelect
+        onSelectSingleRow={onSelectSingleRow}
       />
     );
   };

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx

@@ -25,18 +25,6 @@ interface IStringCellProps extends ICellProps {
   };
 }
 
-interface INumberCellProps extends ICellProps {
-  cell: {
-    value: number;
-  };
-}
-
-interface IVulnSoftwareCellProps extends ICellProps {
-  cell: {
-    value: IVulnerabilitySoftware;
-  };
-}
-
 const generateColumnConfigs = (isPremiumTier: boolean): Column[] => {
   const configs = [
     {
@@ -86,6 +74,7 @@ const generateColumnConfigs = (isPremiumTier: boolean): Column[] => {
             <ViewAllHostsLink
               queryParams={{ software_title_id: id }}
               responsive
+              rowHover
             />
           </>
         );

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx

@@ -74,12 +74,14 @@ const SoftwareVulnerabilityDetailsPage = ({
           <SoftwareVulnOSVersions
             osVersions={vuln.os_versions}
             isPremiumTier={isPremiumTier ?? false}
+            router={router}
           />
         )}
         {!!vuln.software && vuln.software.length > 0 && (
           <SoftwareVulnSoftwareVersions
             vulnSoftware={vuln.software}
             isPremiumTier={isPremiumTier ?? false}
+            router={router}
           />
         )}
       </>

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss

@@ -47,14 +47,6 @@
           justify-content: space-between;
           align-items: center;
 
-          // for showing and hiding "view all hosts" link on hover
-          .view-all-hosts-link {
-            opacity: 0;
-            transition: opacity 250ms;
-            &:hover {
-              opacity: 1;
-            }
-          }
           .w250 {
             min-width: initial;
             height: min-content;

frontend/pages/hosts/details/cards/Queries/HostQueries.tsx

@@ -107,7 +107,7 @@ const HostQueries = ({
             disableCount
             disableMultiRowSelect
             isLoading={false} // loading state handled at parent level
-            {...{ onSelectSingleRow }}
+            onSelectSingleRow={onSelectSingleRow}
           />
         </div>
       )}