From bd799c23935586d3331b7c264285e9f42774d7df Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Tue, 30 Jan 2024 16:14:33 +0000
Subject: [PATCH] fix os icons not showing properly (#16453)

relates to #15736

fix software icons not rendering properly.

- [x] Manual QA for all new/changed functionality
---
 .../OperatingSystems/OperatingSystemsTableConfig.tsx     | 4 +---
 .../SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx      | 2 +-
 frontend/pages/SoftwarePage/components/icons/index.ts    | 9 +++++++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx
index ec8a02fcad..e9f7712e75 100644
--- a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx
+++ b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx
@@ -77,8 +77,6 @@ const generateDefaultTableHeaders = (
       }
 
       const { name, name_only, version } = cellProps.row.original;
-      console.log("cellProps.row.original", cellProps.row.original);
-      console.log("name_only, version", name_only, version);
       const onClickSoftware = (e: React.MouseEvent) => {
         // Allows for button to be clickable in a clickable row
         e.stopPropagation();
@@ -92,7 +90,7 @@ const generateDefaultTableHeaders = (
           customOnClick={onClickSoftware}
           value={
             <>
-              <SoftwareIcon name={name} />
+              <SoftwareIcon name={cellProps.row.original.platform} />
               <span className="software-name">{name}</span>
             </>
           }
diff --git a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx
index 72541c8491..4401646078 100644
--- a/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx
@@ -100,7 +100,7 @@ const SoftwareOSDetailsPage = ({ location }: ISoftwareOSDetailsPageProps) => {
             os_name: osVersionDetails.name_only,
             os_version: osVersionDetails.version,
           }}
-          name={osVersionDetails.name}
+          name={osVersionDetails.platform}
         />
         {/* TODO: can we use Card here for card styles */}
         <div className={`${baseClass}__vulnerabilities-section`}>
diff --git a/frontend/pages/SoftwarePage/components/icons/index.ts b/frontend/pages/SoftwarePage/components/icons/index.ts
index 71a83bfca7..2262c04248 100644
--- a/frontend/pages/SoftwarePage/components/icons/index.ts
+++ b/frontend/pages/SoftwarePage/components/icons/index.ts
@@ -1,17 +1,22 @@
+import Linux from "components/icons/Linux";
 import AcrobatReader from "./AcrobatReader";
 import ChromeApp from "./ChromeApp";
 import Excel from "./Excel";
 import Extension from "./Extension";
 import Firefox from "./Firefox";
 import MacApp from "./MacApp";
+import MacOS from "./MacOS";
 import Package from "./Package";
 import Safari from "./Safari";
 import Slack from "./Slack";
 import Teams from "./Teams";
 import VisualStudioCode from "./VisualStudioCode";
 import WindowsApp from "./WindowsApp";
+import WindowsOS from "./WindowsOS";
 import Word from "./Word";
 import Zoom from "./Zoom";
+import ChromeOS from "./ChromeOS";
+import LinuxOS from "./LinuxOS";
 
 // SOFTWARE_NAME_TO_ICON_MAP list "special" applications that have a defined
 // icon for them, keys refer to application names, and are intended to be fuzzy
@@ -28,6 +33,10 @@ export const SOFTWARE_NAME_TO_ICON_MAP = {
   "visual studio code": VisualStudioCode,
   "microsoft word": Word,
   zoom: Zoom,
+  darwin: MacOS,
+  windows: WindowsOS,
+  chrome: ChromeOS,
+  linux: LinuxOS,
 } as const;
 
 // SOFTWARE_SOURCE_TO_ICON_MAP maps different software sources to a defined