Fix conflicting CSS class names (#3002)

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}

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;

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;