From 33a2b7a743569233f6723c34f45e81e2b9b852ef Mon Sep 17 00:00:00 2001
From: gillespi314 <73313222+gillespi314@users.noreply.github.com>
Date: Wed, 17 Nov 2021 18:14:12 -0600
Subject: [PATCH] Fix conflicting CSS class names (#3002)

---
 .../SoftwareTable/SoftwareTableConfig.tsx              | 10 +++++-----
 .../SoftwareVulnCount/SoftwareVulnCount.tsx            |  6 +++---
 .../HostDetailsPage/SoftwareVulnCount/_styles.scss     |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/pages/hosts/HostDetailsPage/SoftwareTable/SoftwareTableConfig.tsx b/frontend/pages/hosts/HostDetailsPage/SoftwareTable/SoftwareTableConfig.tsx
index 16eb9247e9..797206f4fd 100644
--- a/frontend/pages/hosts/HostDetailsPage/SoftwareTable/SoftwareTableConfig.tsx
+++ b/frontend/pages/hosts/HostDetailsPage/SoftwareTable/SoftwareTableConfig.tsx
@@ -79,9 +79,9 @@ const generateSoftwareTableHeaders = (): IDataColumn[] => {
         return (
           <>
             <span
-              className={`software-vuln tooltip__tooltip-icon`}
+              className={`vulnerabilities tooltip__tooltip-icon`}
               data-tip
-              data-for={`software-vuln__${cellProps.row.original.id.toString()}`}
+              data-for={`vulnerabilities__${cellProps.row.original.id.toString()}`}
               data-tip-disable={false}
             >
               <img alt="software vulnerabilities" src={IssueIcon} />
@@ -91,10 +91,10 @@ const generateSoftwareTableHeaders = (): IDataColumn[] => {
               type="dark"
               effect="solid"
               backgroundColor="#3e4771"
-              id={`software-vuln__${cellProps.row.original.id.toString()}`}
+              id={`vulnerabilities__${cellProps.row.original.id.toString()}`}
               data-html
             >
-              <span className={`tooltip__tooltip-text`}>
+              <span className={`vulnerabilities tooltip__tooltip-text`}>
                 {vulnerabilities.length === 1
                   ? "1 vulnerability detected"
                   : `${vulnerabilities.length} vulnerabilities detected`}
@@ -135,7 +135,7 @@ const generateSoftwareTableHeaders = (): IDataColumn[] => {
                 id={`software-name__${cellProps.row.original.id.toString()}`}
                 data-html
               >
-                <span className={`tooltip__tooltip-text`}>
+                <span className={`software-name tooltip__tooltip-text`}>
                   <b>Bundle identifier: </b>
                   <br />
                   {bundle_identifier}
diff --git a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/SoftwareVulnCount.tsx b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/SoftwareVulnCount.tsx
index 68a5a863c6..bb4bf56b84 100644
--- a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/SoftwareVulnCount.tsx
+++ b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/SoftwareVulnCount.tsx
@@ -3,9 +3,9 @@ import React from "react";
 import { ISoftware } from "interfaces/software";
 import IssueIcon from "../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png";
 
-const baseClass = "software-vuln";
+const baseClass = "software-vuln-count";
 
-const SoftwareVulnerabilities = (vulnProps: {
+const SoftwareVulnCount = (vulnProps: {
   softwareList: ISoftware[];
 }): JSX.Element | null => {
   const { softwareList } = vulnProps;
@@ -32,4 +32,4 @@ const SoftwareVulnerabilities = (vulnProps: {
   ) : null;
 };
 
-export default SoftwareVulnerabilities;
+export default SoftwareVulnCount;
diff --git a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/_styles.scss b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/_styles.scss
index 625b94906f..6d92e0e62b 100644
--- a/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/_styles.scss
+++ b/frontend/pages/hosts/HostDetailsPage/SoftwareVulnCount/_styles.scss
@@ -1,4 +1,4 @@
-.software-vuln {
+.software-vuln-count {
   font-size: $x-small;
   background-color: $ui-off-white;
   border: solid 1px $ui-fleet-black-50;