From c387054af1454ad7e0b8d67fc02d4de4af02f3f3 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 12 Feb 2024 14:15:27 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=20Add=20row=20select=20to=20vuln?=
 =?UTF-8?q?=20details=20tables=20(#16748)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../SoftwareVulnOSVersions.tsx                | 29 +++++++++++++++++--
 .../SwVulnOSTableConfig.tsx                   |  6 +++-
 .../SoftwareVulnSoftwareVersions.tsx          | 29 +++++++++++++++++--
 .../SwVulnSwTableConfig.tsx                   | 13 +--------
 .../SoftwareVulnerabilityDetailsPage.tsx      |  2 ++
 .../_styles.scss                              |  8 -----
 .../details/cards/Queries/HostQueries.tsx     |  2 +-
 7 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx
index 3a4dd631d2..e18fe84096 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SoftwareVulnOSVersions.tsx
+++ b/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}
       />
     );
   };
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx
index f70d062779..4764338b03 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnOSVersions/SwVulnOSTableConfig.tsx
+++ b/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
+            />
           </>
         );
       },
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx
index de2be0ee24..3f4b0d36b1 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SoftwareVulnSoftwareVersions.tsx
+++ b/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}
       />
     );
   };
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx
index aa15c555cd..86116b523f 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnSoftwareVersions/SwVulnSwTableConfig.tsx
+++ b/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
             />
           </>
         );
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx
index a3c62264a3..f47f06800a 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx
+++ b/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}
           />
         )}
       </>
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss b/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss
index 3e6a7bdf02..bbe910cd13 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss
+++ b/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;
diff --git a/frontend/pages/hosts/details/cards/Queries/HostQueries.tsx b/frontend/pages/hosts/details/cards/Queries/HostQueries.tsx
index 6e1ebee7a9..dc9030215e 100644
--- a/frontend/pages/hosts/details/cards/Queries/HostQueries.tsx
+++ b/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>
       )}