From 8d050a94a24eb9cf2e5d013cd777cb0976b130ea Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 10 Jul 2025 13:04:16 -0700
Subject: [PATCH] Fleet UI: Add truncation to versions cell for 1 version
 (#30748)

---
 .../tables/VersionCell/VersionCell.tsx        | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/frontend/pages/SoftwarePage/components/tables/VersionCell/VersionCell.tsx b/frontend/pages/SoftwarePage/components/tables/VersionCell/VersionCell.tsx
index 3143eb32ba..cf3ebe4e67 100644
--- a/frontend/pages/SoftwarePage/components/tables/VersionCell/VersionCell.tsx
+++ b/frontend/pages/SoftwarePage/components/tables/VersionCell/VersionCell.tsx
@@ -1,16 +1,8 @@
 import React from "react";
-
 import TextCell from "components/TableContainer/DataTable/TextCell";
 import TooltipWrapper from "components/TooltipWrapper";
-
-const generateText = <T extends { version: string }>(versions: T[] | null) => {
-  if (!versions) {
-    return <TextCell value="---" grey />;
-  }
-  const text =
-    versions.length !== 1 ? `${versions.length} versions` : versions[0].version;
-  return <TextCell value={text} italic={versions.length !== 1} />;
-};
+import TooltipTruncatedTextCell from "components/TableContainer/DataTable/TooltipTruncatedTextCell";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 interface IVersionCellProps<T extends { version: string }> {
   versions: T[] | null;
@@ -19,12 +11,15 @@ interface IVersionCellProps<T extends { version: string }> {
 const VersionCell = <T extends { version: string }>({
   versions,
 }: IVersionCellProps<T>) => {
-  // only one version, no need for tooltip
-  const cellText = generateText(versions);
-  if (!versions || versions.length <= 1) {
-    return <>{cellText}</>;
+  if (!versions || versions.length === 0) {
+    return <TextCell value={DEFAULT_EMPTY_CELL_VALUE} grey />;
   }
 
+  if (versions.length === 1) {
+    return <TooltipTruncatedTextCell value={versions[0].version} />;
+  }
+
+  // Multiple versions: show count, tooltip with versions list
   return (
     <TooltipWrapper
       tipContent={<>{versions.map((version) => version.version).join(", ")}</>}
@@ -33,7 +28,7 @@ const VersionCell = <T extends { version: string }>({
       showArrow
       underline={false}
     >
-      {cellText}
+      <TextCell value={`${versions.length} versions`} italic />
     </TooltipWrapper>
   );
 };