update software title page with new API response (#20566)

relates to #20536

quick update to the software titles page to integrate with new API
changes.


- [x] Manual QA for all new/changed functionality

frontend/__mocks__/softwareMock.ts

@@ -45,44 +45,6 @@ export const createMockSoftwareTitleVersion = (
   return { ...DEFAULT_SOFTWARE_TITLE_VERSION_MOCK, ...overrides };
 };
 
-const DEFAULT_SOFTWARE_TITLE_MOCK: ISoftwareTitle = {
-  id: 1,
-  name: "mock software 1.app",
-  available_for_install: false,
-  icon_url: "",
-  versions_count: 1,
-  source: "apps",
-  hosts_count: 1,
-  browser: "chrome",
-  versions: [createMockSoftwareTitleVersion()],
-  self_service: false,
-};
-
-export const createMockSoftwareTitle = (
-  overrides?: Partial<ISoftwareTitle>
-): ISoftwareTitle => {
-  return {
-    ...DEFAULT_SOFTWARE_TITLE_MOCK,
-    ...overrides,
-  };
-};
-
-const DEFAULT_SOFTWARE_TITLES_RESPONSE_MOCK: ISoftwareTitlesResponse = {
-  counts_updated_at: "2020-01-01T00:00:00.000Z",
-  count: 1,
-  software_titles: [createMockSoftwareTitle()],
-  meta: {
-    has_next_results: false,
-    has_previous_results: false,
-  },
-};
-
-export const createMockSoftwareTitlesReponse = (
-  overrides?: Partial<ISoftwareTitlesResponse>
-): ISoftwareTitlesResponse => {
-  return { ...DEFAULT_SOFTWARE_TITLES_RESPONSE_MOCK, ...overrides };
-};
-
 const DEFAULT_SOFTWARE_VULNERABILITY_MOCK = {
   cve: "CVE-2020-0001",
   details_link: "https://test.com",
@@ -191,7 +153,7 @@ export const createMockSoftwareVersionResponse = (
   return { ...DEFAULT_SOFTWARE_VERSION_RESPONSE, ...overrides };
 };
 
-const DEFAULT_SOFTWAREPACKAGE_MOCK: ISoftwarePackage = {
+const DEFAULT_SOFTWARE_PACKAGE_MOCK: ISoftwarePackage = {
   name: "TestPackage-1.2.3.pkg",
   version: "1.2.3",
   uploaded_at: "2020-01-01T00:00:00.000Z",
@@ -200,6 +162,7 @@ const DEFAULT_SOFTWAREPACKAGE_MOCK: ISoftwarePackage = {
   post_install_script:
     "sudo /Applications/Falcon.app/Contents/Resources/falconctl license abc123",
   self_service: false,
+  icon_url: null,
   status: {
     installed: 1,
     pending: 2,
@@ -210,5 +173,42 @@ const DEFAULT_SOFTWAREPACKAGE_MOCK: ISoftwarePackage = {
 export const createMockSoftwarePackage = (
   overrides?: Partial<ISoftwarePackage>
 ) => {
-  return { ...DEFAULT_SOFTWAREPACKAGE_MOCK, ...overrides };
+  return { ...DEFAULT_SOFTWARE_PACKAGE_MOCK, ...overrides };
+};
+
+const DEFAULT_SOFTWARE_TITLE_MOCK: ISoftwareTitle = {
+  id: 1,
+  name: "mock software 1.app",
+  versions_count: 1,
+  source: "apps",
+  hosts_count: 1,
+  browser: "chrome",
+  versions: [createMockSoftwareTitleVersion()],
+  software_package: createMockSoftwarePackage(),
+  app_store_app: null,
+};
+
+export const createMockSoftwareTitle = (
+  overrides?: Partial<ISoftwareTitle>
+): ISoftwareTitle => {
+  return {
+    ...DEFAULT_SOFTWARE_TITLE_MOCK,
+    ...overrides,
+  };
+};
+
+const DEFAULT_SOFTWARE_TITLES_RESPONSE_MOCK: ISoftwareTitlesResponse = {
+  counts_updated_at: "2020-01-01T00:00:00.000Z",
+  count: 1,
+  software_titles: [createMockSoftwareTitle()],
+  meta: {
+    has_next_results: false,
+    has_previous_results: false,
+  },
+};
+
+export const createMockSoftwareTitlesReponse = (
+  overrides?: Partial<ISoftwareTitlesResponse>
+): ISoftwareTitlesResponse => {
+  return { ...DEFAULT_SOFTWARE_TITLES_RESPONSE_MOCK, ...overrides };
 };

frontend/interfaces/software.ts

@@ -61,6 +61,7 @@ export interface ISoftwarePackage {
   pre_install_query?: string;
   post_install_script?: string;
   self_service: boolean;
+  icon_url: string | null;
   status: {
     installed: number;
     pending: number;
@@ -88,13 +89,12 @@ export interface IAppStoreApp {
 export interface ISoftwareTitle {
   id: number;
   name: string;
-  icon_url: string | null;
   versions_count: number;
   source: string;
   hosts_count: number;
   versions: ISoftwareTitleVersion[] | null;
-  available_for_install: boolean;
-  self_service: boolean;
+  software_package: ISoftwarePackage | null;
+  app_store_app: IAppStoreApp | null;
   browser?: string;
 }
 

frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTable/SoftwareTitlesTableConfig.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import { CellProps, Column } from "react-table";
 import { InjectedRouter } from "react-router";
 
-import { ISoftwareTitle, formatSoftwareType } from "interfaces/software";
+import {
+  IAppStoreApp,
+  ISoftware,
+  ISoftwarePackage,
+  ISoftwareTitle,
+  formatSoftwareType,
+} from "interfaces/software";
 import PATHS from "router/paths";
 
 import { buildQueryStringFromParams } from "utilities/url";
@@ -51,6 +57,41 @@ export const getVulnerabilities = <
   return vulnerabilities;
 };
 
+/**
+ * Gets the data needed to render the software name cell.
+ */
+const getSoftwareNameCellData = (
+  softwareTitle: ISoftwareTitle,
+  teamId?: number
+) => {
+  const teamQueryParam = buildQueryStringFromParams({ team_id: teamId });
+  const softwareTitleDetailsPath = `${PATHS.SOFTWARE_TITLE_DETAILS(
+    softwareTitle.id.toString()
+  )}?${teamQueryParam}`;
+
+  const { software_package, app_store_app } = softwareTitle;
+  let hasPackage = false;
+  let isSelfService = false;
+  let iconUrl: string | null = null;
+  if (software_package) {
+    hasPackage = true;
+    isSelfService = software_package.self_service;
+  } else if (app_store_app) {
+    hasPackage = true;
+    isSelfService = false;
+    iconUrl = app_store_app.icon_url;
+  }
+
+  return {
+    name: softwareTitle.name,
+    source: softwareTitle.source,
+    path: softwareTitleDetailsPath,
+    hasPackage: hasPackage && !!teamId,
+    isSelfService,
+    iconUrl,
+  };
+};
+
 const generateTableHeaders = (
   router: InjectedRouter,
   teamId?: number
@@ -63,31 +104,20 @@ const generateTableHeaders = (
       disableSortBy: false,
       accessor: "name",
       Cell: (cellProps: ITableStringCellProps) => {
-        const {
-          id,
-          name,
-          source,
-          available_for_install,
-          self_service,
-          icon_url,
-        } = cellProps.row.original;
-
-        const teamQueryParam = buildQueryStringFromParams({ team_id: teamId });
-        const softwareTitleDetailsPath = `${PATHS.SOFTWARE_TITLE_DETAILS(
-          id.toString()
-        )}?${teamQueryParam}`;
-
-        const hasPackage = available_for_install && !!teamId; // teamId is required for package installation
+        const nameCellData = getSoftwareNameCellData(
+          cellProps.row.original,
+          teamId
+        );
 
         return (
           <SoftwareNameCell
-            name={name}
-            source={source}
-            path={softwareTitleDetailsPath}
+            name={nameCellData.name}
+            source={nameCellData.source}
+            path={nameCellData.path}
             router={router}
-            hasPackage={hasPackage}
-            isSelfService={self_service === true}
-            iconUrl={icon_url ?? undefined}
+            hasPackage={nameCellData.hasPackage}
+            isSelfService={nameCellData.isSelfService}
+            iconUrl={nameCellData.iconUrl ?? undefined}
           />
         );
       },