Display file name in software package card UI (#22120)

changes/22106-fix-software-package-name

@@ -0,0 +1 @@
+- Fixed UI design bug where software package file name was not displayed as expected.

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/helpers.tests.ts

@@ -0,0 +1,80 @@
+import { ISoftwareTitleDetails } from "interfaces/software";
+import { getPackageCardInfo } from "./helpers";
+
+describe("SoftwareTitleDetailsPage helpers", () => {
+  describe("getPackageCardInfo", () => {
+    it("returns the correct data for a software package", () => {
+      const softwareTitle: ISoftwareTitleDetails = {
+        id: 1,
+        name: "Test Software",
+        versions: [{ id: 1, version: "1.0.0", vulnerabilities: [] }],
+        software_package: {
+          name: "TestPackage.pkg",
+          version: "1.0.0",
+          self_service: true,
+          uploaded_at: "2021-01-01T00:00:00Z",
+          status: {
+            installed: 10,
+            pending_install: 5,
+            pending_uninstall: 3,
+            failed_install: 2,
+            failed_uninstall: 1,
+          },
+          install_script: "echo foo",
+          icon_url: "https://example.com/icon.png",
+        },
+        app_store_app: null,
+        source: "apps",
+        hosts_count: 10,
+      };
+      const packageCardInfo = getPackageCardInfo(softwareTitle);
+      expect(packageCardInfo).toEqual({
+        softwarePackage: softwareTitle.software_package,
+        name: "TestPackage.pkg", // packages should display the package name not the software title name
+        version: "1.0.0",
+        uploadedAt: "2021-01-01T00:00:00Z",
+        status: {
+          installed: 10,
+          pending: 8,
+          failed: 3,
+        },
+        isSelfService: true,
+      });
+    });
+    it("returns the correct data for an app store app", () => {
+      const softwareTitle: ISoftwareTitleDetails = {
+        id: 1,
+        name: "Test Software",
+        versions: [{ id: 1, version: "1.0.0", vulnerabilities: [] }],
+        software_package: null,
+        app_store_app: {
+          app_store_id: 1,
+          name: "Test App",
+          latest_version: "1.0.1",
+          self_service: false,
+          status: {
+            installed: 10,
+            pending: 5,
+            failed: 3,
+          },
+          icon_url: "https://example.com/icon.png",
+        },
+        source: "apps",
+        hosts_count: 10,
+      };
+      const packageCardInfo = getPackageCardInfo(softwareTitle);
+      expect(packageCardInfo).toEqual({
+        softwarePackage: undefined,
+        name: "Test Software", // apps should display the software title name (backend should ensure the app name and software title name match)
+        version: "1.0.1",
+        uploadedAt: "",
+        status: {
+          installed: 10,
+          pending: 5,
+          failed: 3,
+        },
+        isSelfService: false,
+      });
+    });
+  });
+});

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/helpers.ts

@@ -7,7 +7,12 @@ import {
 import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 /**
- * Generates the data needed to render the package card.
+ * Generates the data needed to render the package card. It differentiates between
+ * software packages and app store apps and returns the appropriate data.
+ *
+ * FIXME: This function ought to be refactored or renamed to better reflect its purpose.
+ * "PackageCard" is a bit ambiguous in this context (it refers to the card that displays
+ * package or app information, as applicable).
  */
 // eslint-disable-next-line import/prefer-default-export
 export const getPackageCardInfo = (softwareTitle: ISoftwareTitleDetails) => {
@@ -17,9 +22,11 @@ export const getPackageCardInfo = (softwareTitle: ISoftwareTitleDetails) => {
     ? softwareTitle.software_package
     : (softwareTitle.app_store_app as IAppStoreApp);
 
+  const isPackage = isSoftwarePackage(packageData);
+
   return {
-    softwarePackage: isSoftwarePackage(packageData) ? packageData : undefined,
-    name: softwareTitle.name,
+    softwarePackage: isPackage ? packageData : undefined,
+    name: (isPackage && packageData.name) || softwareTitle.name,
     version:
       (isSoftwarePackage(packageData)
         ? packageData.version