diff --git a/changes/48987-vulnerabilities-tooltip b/changes/48987-vulnerabilities-tooltip new file mode 100644 index 0000000000..9a4b384868 --- /dev/null +++ b/changes/48987-vulnerabilities-tooltip @@ -0,0 +1 @@ +- Fixed an issue where the truncated vulnerabilities list in the Update details modal did not show a tooltip listing the remaining CVEs. diff --git a/frontend/components/TruncatedTextList/TruncatedTextList.tsx b/frontend/components/TruncatedTextList/TruncatedTextList.tsx index 48c52feab1..c8319e0174 100644 --- a/frontend/components/TruncatedTextList/TruncatedTextList.tsx +++ b/frontend/components/TruncatedTextList/TruncatedTextList.tsx @@ -119,10 +119,6 @@ const renderVisibleRow = ({ const isTruncatedFirst = visibleCount === 0; const content = isTruncatedFirst ? truncatedFirstContent : standardContent; - const rowStyle: React.CSSProperties = { - whiteSpace: "nowrap", - overflow: "hidden", - }; const rowClass = classnames(`${baseClass}__visible`, { [`${baseClass}__visible--truncated`]: isTruncatedFirst, }); @@ -130,16 +126,12 @@ const renderVisibleRow = ({ if (onClick) { return ( ); } - return ( - - {content} - - ); + return {content}; }; const TruncatedTextList = ({ @@ -207,24 +199,9 @@ const TruncatedTextList = ({ const hidden = items.slice(visibleCount); return ( -
+
{/* Hidden measurement layer — same font/size as the visible row */} -
+
{items.map((item, i) => ( { - const first3 = vulnerabilities.slice(0, 3); - const rest = vulnerabilities.slice(3); - - const first3Text = first3.join(", "); - const restText = `, +${rest.length} more`; - - return ( - <> - {`${first3Text}${rest.length > 0 ? restText : ""}`} - - ); -}; +import TruncatedTextList from "components/TruncatedTextList"; const baseClass = "inventory-versions"; @@ -97,15 +84,14 @@ const InventoryVersion = ({ textOnly /> )} -
- {vulnerabilities && vulnerabilities.length !== 0 && ( -
+ {vulnerabilities && vulnerabilities.length !== 0 && ( } /> -
- )} + )} +
{!!installedPaths?.length && installedPaths.map((path) => { // Find the signature info for this path diff --git a/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss b/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss index 1ee0af3886..684fb92521 100644 --- a/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss +++ b/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss @@ -3,8 +3,8 @@ flex-direction: column; gap: $pad-small; - .data-set dd { - white-space: initial; + dt { + white-space: nowrap; } &__versions { @@ -20,9 +20,22 @@ } &__row { display: flex; + flex-wrap: wrap; gap: $pad-xxlarge; } + // Fill the row so TruncatedTextList has a bounded width to measure against. + &__vulnerabilities { + flex: 1; + min-width: 0; + + // dd is display:flex, so TruncatedTextList's outer div would size to its + // content by default and truncate too early. Stretch it to fill. + .truncated-text-list { + min-width: 100%; + } + } + &__sig-info { display: flex; flex-direction: column; diff --git a/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx b/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx index 850979d98b..6bb61e0a1c 100644 --- a/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx +++ b/frontend/pages/hosts/details/modals/InventoryVersionsModal/InventoryVersionsModal.tests.tsx @@ -39,8 +39,9 @@ describe("SoftwareDetailsModal", () => { expect(screen.getByText("Hash:")).toBeVisible(); expect(screen.getByText("mockhashhere")).toBeVisible(); - // Vulnerabilities - expect(screen.getByText(/CVE-2020-0001/)).toBeVisible(); + // Vulnerabilities — TruncatedTextList renders items in both a hidden + // measure layer and the visible row, so match all occurrences. + expect(screen.getAllByText(/CVE-2020-0001/).length).toBeGreaterThan(0); // Close button expect(screen.getByRole("button", { name: "Close" })).toBeVisible();