From 36485bed7e56abb77a92eb1ba96ef6fddfb79bef Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 3 Jul 2024 09:35:59 -0700
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=203=20bugs=20on=20Software=20pag?=
 =?UTF-8?q?es=20(#20098)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #19694

<img width="1100" alt="Screenshot 2024-06-28 at 12 22 02 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/527f3744-b532-4fdb-b43a-f7e10bb62189">
<img width="999" alt="Screenshot 2024-06-28 at 12 15 04 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/407701ba-6d81-43b2-b193-217df1a93698">
<img width="999" alt="Screenshot 2024-06-28 at 12 12 10 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/0e6aa2e3-a190-4db9-9468-d8dc3ad6ddcb">

- [x] Changes file added for user-visible changes in `changes/`,
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/19694-vul-page-bugs                                | 1 +
 frontend/components/TooltipWrapper/TooltipWrapper.tsx      | 7 +++++++
 .../SoftwareVulnerabilities/SoftwareVulnerabilities.tsx    | 7 ++++++-
 .../VulnerabilitiesTableConfig.tsx                         | 1 +
 .../SoftwareVulnerabilitiesTableConfig.tsx                 | 1 +
 5 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 changes/19694-vul-page-bugs

diff --git a/changes/19694-vul-page-bugs b/changes/19694-vul-page-bugs
new file mode 100644
index 0000000000..433891d953
--- /dev/null
+++ b/changes/19694-vul-page-bugs
@@ -0,0 +1 @@
+* Fix 3 UI bugs on the Software page
diff --git a/frontend/components/TooltipWrapper/TooltipWrapper.tsx b/frontend/components/TooltipWrapper/TooltipWrapper.tsx
index c5b2a5fddb..d5fff19206 100644
--- a/frontend/components/TooltipWrapper/TooltipWrapper.tsx
+++ b/frontend/components/TooltipWrapper/TooltipWrapper.tsx
@@ -32,6 +32,11 @@ interface ITooltipWrapper {
    * @default false
    */
   showArrow?: boolean;
+  /** Corresponds to the react tooltip 5 `positionStrategy` option - see https://react-tooltip.com/docs/options.
+   * Setting as `true` will set the tooltip's `positionStrategy` to `"fixed"`. The default strategy is "absolute".
+   * Do this if you run into issues with `overflow: hidden` on the tooltip parent container
+   * */
+  fixedPositionStrategy?: boolean;
 }
 
 const baseClass = "component__tooltip-wrapper";
@@ -51,6 +56,7 @@ const TooltipWrapper = ({
   clickable = true,
   disableTooltip = false,
   showArrow = false,
+  fixedPositionStrategy = false,
 }: ITooltipWrapper) => {
   const wrapperClassNames = classnames(baseClass, className, {
     "show-arrow": showArrow,
@@ -85,6 +91,7 @@ const TooltipWrapper = ({
           disableStyleInjection
           clickable={clickable}
           offset={tipOffset}
+          positionStrategy={fixedPositionStrategy ? "fixed" : "absolute"}
         >
           {tipContent}
         </ReactTooltip5>
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
index 73762c2b55..845275db5b 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
@@ -10,6 +10,7 @@ import {
 } from "services/entities/vulnerabilities";
 
 import TableDataError from "components/DataError";
+import Spinner from "components/Spinner";
 
 import SoftwareVulnerabilitiesTable from "./SoftwareVulnerabilitiesTable";
 
@@ -50,7 +51,7 @@ const SoftwareVulnerabilities = ({
     exploit: showExploitedVulnerabilitiesOnly,
   };
 
-  const { data, isFetching, isError } = useQuery<
+  const { data, isFetching, isLoading, isError } = useQuery<
     IVulnerabilitiesResponse,
     Error,
     IVulnerabilitiesResponse,
@@ -69,6 +70,10 @@ const SoftwareVulnerabilities = ({
     }
   );
 
+  if (isLoading) {
+    return <Spinner />;
+  }
+
   if (isError) {
     return <TableDataError className={`${baseClass}__table-error`} />;
   }
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/VulnerabilitiesTableConfig.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/VulnerabilitiesTableConfig.tsx
index c87feb95f7..92881a3c47 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/VulnerabilitiesTableConfig.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilitiesTable/VulnerabilitiesTableConfig.tsx
@@ -144,6 +144,7 @@ const generateTableHeaders = (
                 This data is reported by FIRST.org.
               </>
             }
+            fixedPositionStrategy
           >
             Probability of exploit
           </TooltipWrapper>
diff --git a/frontend/pages/SoftwarePage/components/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTableConfig.tsx b/frontend/pages/SoftwarePage/components/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTableConfig.tsx
index cc888d0aca..c4a1d19618 100644
--- a/frontend/pages/SoftwarePage/components/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTableConfig.tsx
+++ b/frontend/pages/SoftwarePage/components/SoftwareVulnerabilitiesTable/SoftwareVulnerabilitiesTableConfig.tsx
@@ -128,6 +128,7 @@ const generateTableConfig = (
                 This data is reported by FIRST.org.
               </>
             }
+            fixedPositionStrategy
           >
             Probability of exploit
           </TooltipWrapper>