feat: CVSS Scores - Vulnerabilities Table page (guacsec#991)

Signed-off-by: Bryan Ramos <bramos@redhat.com>

Author: CryptoRodeo

client/src/app/pages/vulnerability-list/components/CvssVersionBadge.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import type { ScoreType } from "@app/client";
+
+import { CvssVersionBadge } from "./CvssVersionBadge";
+
+describe("CvssVersionBadge", () => {
+  it("renders nothing when version is undefined", () => {
+    const { container } = render(<CvssVersionBadge version={undefined} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it.each<ScoreType>([
+    "2.0",
+    "3.0",
+    "3.1",
+    "4.0",
+  ])("renders a label with 'v%s' for version '%s'", (version) => {
+    render(<CvssVersionBadge version={version} />);
+    expect(screen.getByText(`v${version}`)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,23 @@
+import type React from "react";
+
+import { Label } from "@patternfly/react-core";
+
+import type { ScoreType } from "@app/client";
+
+interface CvssVersionBadgeProps {
+  version: ScoreType | undefined;
+}
+
+export const CvssVersionBadge: React.FC<CvssVersionBadgeProps> = ({
+  version,
+}) => {
+  if (!version) {
+    return null;
+  }
+
+  return (
+    <Label isCompact color="grey">
+      v{version}
+    </Label>
+  );
+};

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

@@ -11,6 +11,8 @@ import {
   Tr,
 } from "@patternfly/react-table";
 
+import { Flex, FlexItem } from "@patternfly/react-core";
+
 import { extendedSeverityFromSeverity } from "@app/api/models";
 import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
 import { SimplePagination } from "@app/components/SimplePagination";
@@ -24,6 +26,7 @@ import { Paths } from "@app/Routes";
 import { formatDate } from "@app/utils/utils";
 
 import { TdWithFocusStatus } from "@app/components/TdWithFocusStatus";
+import { CvssVersionBadge } from "./components/CvssVersionBadge";
 import { SbomsCount } from "./components/SbomsCount";
 import { VulnerabilitySearchContext } from "./vulnerability-context";
 
@@ -55,7 +58,7 @@ export const VulnerabilityTable: React.FC = () => {
                 {...getThProps({ columnKey: "severity" })}
                 info={{
                   tooltip:
-                    "The Common Vulnerability Scoring System measuring the severity of security flaws.",
+                    "Scores shown are the original CVSS records from the CVE Project. Refer to the SBOM view for product-specific impact assessments.",
                 }}
               />
               <Th {...getThProps({ columnKey: "published" })} />
@@ -115,14 +118,25 @@ export const VulnerabilityTable: React.FC = () => {
                       )}
                     </TdWithFocusStatus>
                     <Td width={10} {...getTdProps({ columnKey: "severity" })}>
-                      <SeverityShieldAndText
-                        value={extendedSeverityFromSeverity(
-                          item.base_score?.severity,
-                        )}
-                        score={item.base_score?.score ?? null}
-                        showLabel
-                        showScore
-                      />
+                      <Flex
+                        alignItems={{ default: "alignItemsCenter" }}
+                        gap={{ default: "gapSm" }}
+                        flexWrap={{ default: "nowrap" }}
+                      >
+                        <FlexItem>
+                          <SeverityShieldAndText
+                            value={extendedSeverityFromSeverity(
+                              item.base_score?.severity,
+                            )}
+                            score={item.base_score?.score ?? null}
+                            showLabel
+                            showScore
+                          />
+                        </FlexItem>
+                        <FlexItem>
+                          <CvssVersionBadge version={item.base_score?.type} />
+                        </FlexItem>
+                      </Flex>
                     </Td>
                     <Td width={10} {...getTdProps({ columnKey: "published" })}>
                       {formatDate(item.published)}

client/src/mocks/fileMock.ts

@@ -0,0 +1 @@
+export default "test-file-stub";

client/src/mocks/styleMock.ts

@@ -0,0 +1 @@
+export default {};