FE: Add optional label to InventoryVersions (#31302)

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

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={

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;

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>
   );
 };

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;