From 22147a5b464a532dd34772a0737a51d0308e05e3 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 28 Jul 2025 06:07:21 -0700
Subject: [PATCH] FE: Add optional label to `InventoryVersions` (#31302)

---
 .../SoftwareUpdateModal.tests.tsx             |  4 +--
 .../SoftwareUpdateModal.tsx                   | 11 +-----
 .../Software/SoftwareUpdateModal/_styles.scss |  6 ----
 .../InventoryVersions/InventoryVersions.tsx   | 35 ++++++++++++-------
 .../components/InventoryVersions/_styles.scss |  8 ++++-
 5 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tests.tsx b/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tests.tsx
index 2622e875d4..66325b34ff 100644
--- a/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tests.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tests.tsx
@@ -129,7 +129,7 @@ describe("SoftwareUpdateModal", () => {
     expect(screen.getByText("Current version:")).toBeInTheDocument();
   });
 
-  it("renders 'Current Versions' if more than one installed", () => {
+  it("renders 'Current versions' if more than one installed", () => {
     const mockSoftware = createMockHostSoftware({
       installed_versions: [
         {
@@ -156,7 +156,7 @@ describe("SoftwareUpdateModal", () => {
         onUpdate={noop}
       />
     );
-    expect(screen.getByText("Current Versions:")).toBeInTheDocument();
+    expect(screen.getByText("Current versions:")).toBeInTheDocument();
   });
 
   // Shouldn't happen, unless tarballs or weird edge case
diff --git a/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tsx b/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tsx
index f9640de226..4aee7649e7 100644
--- a/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/SoftwareUpdateModal.tsx
@@ -116,16 +116,7 @@ const SoftwareUpdateModal = ({
             installerName={installerName}
             installerVersion={installerVersion}
           />
-          {showCurrentVersions && (
-            <div className={`${baseClass}__current-versions`}>
-              <div className={`${baseClass}__current-versions--header`}>
-                {installed_versions.length === 1
-                  ? "Current version:"
-                  : "Current Versions:"}
-              </div>
-              <InventoryVersions hostSoftware={software} />
-            </div>
-          )}
+          {showCurrentVersions && <InventoryVersions hostSoftware={software} />}
         </div>
         <ModalFooter
           primaryButtons={
diff --git a/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/_styles.scss b/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/_styles.scss
index 897691e925..ab51b3e270 100644
--- a/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Software/SoftwareUpdateModal/_styles.scss
@@ -5,12 +5,6 @@
     gap: $pad-large;
   }
 
-  &__current-versions {
-    display: flex;
-    flex-direction: column;
-    gap: $pad-small;
-  }
-
   &__status-message {
     display: flex;
     align-items: center;
diff --git a/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx b/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx
index cba3416e9a..6bc7638748 100644
--- a/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx
+++ b/frontend/pages/hosts/details/components/InventoryVersions/InventoryVersions.tsx
@@ -95,13 +95,17 @@ const InventoryVersion = ({
 
 interface IInventoryVersionsProps {
   hostSoftware: IHostSoftware;
+  showLabel?: boolean;
 }
-const InventoryVersions = ({ hostSoftware }: IInventoryVersionsProps) => {
+const InventoryVersions = ({
+  hostSoftware,
+  showLabel = true,
+}: IInventoryVersionsProps) => {
   const installedVersions = hostSoftware.installed_versions;
 
   if (!installedVersions || installedVersions.length === 0) {
     return (
-      <div className={`${baseClass}__software-details`}>
+      <div className={baseClass}>
         <Card
           className={`${baseClass}__version-details`}
           color="grey"
@@ -120,16 +124,23 @@ const InventoryVersions = ({ hostSoftware }: IInventoryVersionsProps) => {
 
   return (
     <div className={baseClass}>
-      {installedVersions.map((installedVersion) => {
-        return (
-          <InventoryVersion
-            key={installedVersion.version}
-            version={installedVersion}
-            source={hostSoftware.source}
-            bundleIdentifier={hostSoftware.bundle_identifier}
-          />
-        );
-      })}
+      {showLabel && (
+        <div className={`${baseClass}__label`}>
+          Current version{installedVersions.length > 1 && "s"}:
+        </div>
+      )}
+      <div className={`${baseClass}__versions`}>
+        {installedVersions.map((installedVersion) => {
+          return (
+            <InventoryVersion
+              key={installedVersion.version}
+              version={installedVersion}
+              source={hostSoftware.source}
+              bundleIdentifier={hostSoftware.bundle_identifier}
+            />
+          );
+        })}
+      </div>
     </div>
   );
 };
diff --git a/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss b/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss
index d8f19eb645..a3082bd118 100644
--- a/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss
+++ b/frontend/pages/hosts/details/components/InventoryVersions/_styles.scss
@@ -1,12 +1,18 @@
 .inventory-versions {
   display: flex;
   flex-direction: column;
-  gap: $pad-medium;
+  gap: $pad-small;
 
   .data-set dd {
     white-space: initial;
   }
 
+  &__versions {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-medium;
+  }
+
   &__version {
     display: flex;
     flex-direction: column;