fix: replace "CVE" wording by "Vulnerability" (#285)

Author: carlosthe19916

client/src/app/layout/sidebar.tsx

@@ -51,7 +51,7 @@ export const SidebarApp: React.FC = () => {
                 return css(LINK_CLASS, isActive ? ACTIVE_LINK_CLASS : "");
               }}
             >
-              CVEs
+              Vulnerabilities
             </NavLink>
           </li>
           <li className="pf-v5-c-nav__item">

client/src/app/pages/advisory-details/overview.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import prettyBytes from "pretty-bytes";
 
-import { ChartDonut } from "@patternfly/react-charts";
 import {
   Card,
   CardBody,
@@ -15,7 +14,6 @@ import {
   GridItem,
 } from "@patternfly/react-core";
 
-import { compareBySeverityFn, severityList } from "@app/api/model-utils";
 import { AdvisorySummary, Severity } from "@app/client";
 import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 import { formatDate } from "@app/utils/utils";
@@ -115,77 +113,3 @@ export const Overview: React.FC<InfoProps> = ({ advisory }) => {
     </Grid>
   );
 };
-
-//
-
-interface ChartData {
-  severity: Severity;
-  legend: string;
-  count: number;
-  color: string;
-}
-
-interface CVEsChartProps {
-  data: { [key in Severity]: number };
-}
-
-export const CVEsChart: React.FC<CVEsChartProps> = ({ data }) => {
-  const enrichedData = Object.entries(data)
-    .map(([severity, count]) => {
-      const severityProps = severityList[severity as Severity];
-
-      const result: ChartData = {
-        severity: severity as Severity,
-        legend: severityProps.name,
-        color: severityProps.color.value,
-        count: count,
-      };
-
-      return result;
-    })
-    .sort(compareBySeverityFn((item) => item.severity));
-
-  const chartData = enrichedData.map((e) => {
-    return {
-      x: e.legend,
-      y: e.count,
-    };
-  });
-
-  const chartLegendData = enrichedData.map((e) => ({
-    name: `${e.count} ${e.legend}`,
-  }));
-
-  const chartColorData = enrichedData.map((e) => e.color);
-
-  return (
-    <>
-      <div style={{ height: "230px", width: "350px" }}>
-        <ChartDonut
-          ariaDesc="CVEs"
-          ariaTitle="CVEs"
-          constrainToVisibleArea
-          data={chartData}
-          labels={({ datum }) => `${datum.x}: ${datum.y}`}
-          legendData={chartLegendData}
-          colorScale={chartColorData}
-          legendOrientation="vertical"
-          legendPosition="right"
-          name="CVEs"
-          padding={{
-            bottom: 20,
-            left: 20,
-            right: 140, // Adjusted to accommodate legend
-            top: 20,
-          }}
-          subTitle="CVEs"
-          title={enrichedData
-            .map((e) => e.count)
-            .reduce((prev, current) => prev + current, 0)
-            .toString()}
-          width={350}
-        />
-      </div>
-    </>
-  );
-};

client/src/app/pages/advisory-details/vulnerabilities-by-advisory.tsx

@@ -33,7 +33,7 @@ export const VulnerabilitiesByAdvisory: React.FC<
     items: vulnerabilities,
     isLoading: isFetching,
     columnNames: {
-      identifier: "CVE ID",
+      identifier: "ID",
       title: "Title",
       discovery: "Discovery",
       release: "Release",

client/src/app/pages/home/components/MonitoringSection.tsx

@@ -114,9 +114,9 @@ export const MonitoringSection: React.FC = () => {
               <Stack hasGutter>
                 <StackItem>
                   <TextContent>
-                    Below is a summary of CVE status for your last 10 ingested
-                    SBOMs. You can click on the SBOM name or CVE severity number
-                    below to be taken to their respective details page.
+                    Below is a summary of Vulnerability status for your last 10
+                    ingested SBOMs. You can click on the SBOM name to be taken
+                    to their respective details page.
                   </TextContent>
                 </StackItem>
                 <StackItem>

client/src/app/pages/importer-list/importer-list.tsx

@@ -274,7 +274,7 @@ export const ImporterList: React.FC = () => {
             </ToolbarContent>
           </Toolbar>
 
-          <Table {...tableProps} aria-label="CVEs table">
+          <Table {...tableProps} aria-label="Importer table">
             <Thead>
               <Tr>
                 <TableHeaderContentWithControls {...tableControls}>

client/src/app/pages/search/components/SearchMenu.tsx

@@ -1,19 +1,19 @@
-import React from "react";
+import { HubRequestParams } from "@app/api/models";
+import { FILTER_TEXT_CATEGORY_KEY } from "@app/Constants";
+import { useFetchAdvisories } from "@app/queries/advisories";
+import { useFetchPackages } from "@app/queries/packages";
+import { useFetchSBOMs } from "@app/queries/sboms";
+import { useFetchVulnerabilities } from "@app/queries/vulnerabilities";
 import {
+  Label,
   Menu,
   MenuContent,
   MenuItem,
   MenuList,
   Popper,
   SearchInput,
 } from "@patternfly/react-core";
-import { FILTER_TEXT_CATEGORY_KEY } from "@app/Constants";
-import { Label } from "@patternfly/react-core";
-import { useFetchAdvisories } from "@app/queries/advisories";
-import { HubRequestParams } from "@app/api/models";
-import { useFetchPackages } from "@app/queries/packages";
-import { useFetchSBOMs } from "@app/queries/sboms";
-import { useFetchVulnerabilities } from "@app/queries/vulnerabilities";
+import React from "react";
 import { Link } from "react-router-dom";
 
 export interface IEntity {
@@ -137,7 +137,7 @@ function useAllEntities(filterText: string) {
     title: item.identifier,
     description: item.description?.substring(0, 75),
     navLink: `/vulnerabilities/${item.identifier}`,
-    type: "CVE",
+    type: "Vulnerability",
     typeColor: "orange",
   }));
 

client/src/app/pages/search/components/SearchTabs.tsx

@@ -153,7 +153,7 @@ export const SearchTabs: React.FC<SearchTabsProps> = ({
             eventKey={2}
             title={
               <TabTitleText>
-                CVEs{"  "}
+                Vulnerabilities{"  "}
                 <Badge screenReaderText="Search Result Count">
                   {vulnerabilityTotalCount}
                 </Badge>

client/src/app/pages/vulnerability-details/index.ts

@@ -1 +1 @@
-export { CveDetails as default } from "./vulnerability-details";
+export { VulnerabilityDetails as default } from "./vulnerability-details";

client/src/app/pages/vulnerability-details/vulnerability-details.stories.tsx

@@ -1,17 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { CveDetails } from "./vulnerability-details";
+import { VulnerabilityDetails } from "./vulnerability-details";
 
 const meta = {
   title: "Components/VulnerabilityDetails",
-  component: CveDetails,
+  component: VulnerabilityDetails,
   parameters: {
     query: {
       vulnerabilityId: "CVE-2023-1664",
     },
   },
   tags: ["autodocs"],
-} satisfies Meta<typeof CveDetails>;
+} satisfies Meta<typeof VulnerabilityDetails>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

client/src/app/pages/vulnerability-details/vulnerability-details.tsx

@@ -22,7 +22,7 @@ import { AdvisoriesByVulnerability } from "./advisories-by-vulnerability";
 import { Overview } from "./overview";
 import { SbomsByVulnerability } from "./sboms-by-vulnerability";
 
-export const CveDetails: React.FC = () => {
+export const VulnerabilityDetails: React.FC = () => {
   const vulnerabilityId = useRouteParams(PathParam.VULNERABILITY_ID);
 
   const { vulnerability, isFetching, fetchError } =
@@ -69,15 +69,15 @@ export const CveDetails: React.FC = () => {
           mountOnEnter
           activeKey={activeTabKey}
           onSelect={handleTabClick}
-          aria-label="CVE detail tabs"
+          aria-label="Vulnerability detail tabs"
           role="region"
         >
           <Tab
             eventKey={0}
             title={<TabTitleText>Related SBOMs</TabTitleText>}
             tabContentId="refTabSbomsSection"
             tabContentRef={sbomsTabRef}
-            aria-label="Related SBOMs for this CVE"
+            aria-label="Related SBOMs for this Vulnerability"
           />
           <Tab
             eventKey={1}

client/src/app/pages/vulnerability-list/vulnerability-list.tsx

@@ -16,7 +16,7 @@ export const VulnerabilityList: React.FC = () => {
     <>
       <PageSection variant={PageSectionVariants.light}>
         <TextContent>
-          <Text component="h1">CVEs</Text>
+          <Text component="h1">Vulnerabilities</Text>
         </TextContent>
       </PageSection>
       <PageSection>