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} 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 ; + } + if (isError) { return ; } 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 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