From 93f436fdf36e32d3ed085039efc3d1e5875e233e Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Fri, 25 Apr 2025 15:32:57 +0200
Subject: [PATCH 1/7] POC: quick prototype of showing snap CVE data in a table
 with select input for revisions

---
 .../js/publisher/pages/SnapCves/SnapCves.tsx  | 138 ++++++++++++++++++
 static/js/publisher/pages/SnapCves/index.ts   |   1 +
 static/js/publisher/publisher.tsx             |   7 +
 webapp/publisher/snaps/views.py               |   5 +
 4 files changed, 151 insertions(+)
 create mode 100644 static/js/publisher/pages/SnapCves/SnapCves.tsx
 create mode 100644 static/js/publisher/pages/SnapCves/index.ts

diff --git a/static/js/publisher/pages/SnapCves/SnapCves.tsx b/static/js/publisher/pages/SnapCves/SnapCves.tsx
new file mode 100644
index 0000000000..6c5d97f425
--- /dev/null
+++ b/static/js/publisher/pages/SnapCves/SnapCves.tsx
@@ -0,0 +1,138 @@
+import { useParams } from "react-router-dom";
+
+// import { setPageTitle } from "../../utils";
+import { useQuery } from "react-query";
+import { MainTable, Strip, Select } from "@canonical/react-components";
+import { useEffect, useState } from "react";
+
+interface ICve {
+  id: string;
+  description: string;
+  cvss_score: number | null;
+  cvss_severity: string | null;
+  ubuntu_priority: string | null;
+}
+
+function SnapCves(): JSX.Element {
+  const { snapId } = useParams();
+  const [currentRevision, setCurrentRevision] = useState<number | null>(null);
+  const { data: revisionsData, isLoading: isRevisionsLoading } = useQuery({
+    queryKey: ["snapRevisions", snapId],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/cves`);
+      if (!response.ok) {
+        throw new Error("There was a problem fetching listing data");
+      }
+      const data = await response.json();
+      if (!data.success) {
+        throw new Error(data.message);
+      }
+
+      return data.data;
+    },
+    staleTime: 1000 * 60 * 60 * 12, // 12 hours
+    cacheTime: 1000 * 60 * 60 * 12, // 12 hours
+    refetchOnWindowFocus: false,
+  });
+
+  useEffect(() => {
+    if (!currentRevision && revisionsData?.revisions?.length) {
+      setCurrentRevision(revisionsData.revisions[0]);
+    }
+  }, [currentRevision, revisionsData]);
+
+  const { data, isLoading: isCvesLoading } = useQuery({
+    queryKey: ["cves", snapId, currentRevision],
+    queryFn: async () => {
+      const response = await fetch(`/api/${snapId}/${currentRevision}/cves`);
+
+      if (!response.ok) {
+        throw new Error("There was a problem fetching listing data");
+      }
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.message);
+      }
+
+      return data.data;
+    },
+    enabled: !!currentRevision,
+    staleTime: 1000 * 60 * 60 * 12, // 12 hours
+    cacheTime: 1000 * 60 * 60 * 12, // 12 hours
+    refetchOnWindowFocus: false,
+  });
+
+  const getData = () => {
+    return data.map((cve: ICve) => ({
+      columns: [
+        { content: cve.id },
+        { content: cve.cvss_score },
+        { content: cve.cvss_severity },
+        { content: cve.ubuntu_priority },
+        { content: cve.description },
+      ],
+    }));
+  };
+
+  console.table(data);
+  //   setPageTitle(`Listing data for ${snapId}`);
+
+  const isLoading = isCvesLoading || isRevisionsLoading;
+
+  const revisionSelectOptions = revisionsData?.revisions.map(
+    (revision: string) => ({
+      label: revision,
+      value: revision,
+    })
+  );
+
+  return (
+    <>
+      <h1 className="p-heading--4" aria-live="polite">
+        <a href="/snaps">My snaps</a> / <a href={`/${snapId}`}>{snapId}</a> /
+        CVEs
+      </h1>
+
+      {isLoading && (
+        <Strip shallow>
+          <p>
+            <i className="p-icon--spinner u-animation--spin"></i>&nbsp;Loading{" "}
+            {snapId} CVE data
+          </p>
+        </Strip>
+      )}
+
+      {data && (
+        <>
+          <div>
+            <Select
+              //className="p-form__control"
+              //disabled={isEmpty}
+              value={currentRevision || ""}
+              onChange={(event) => {
+                const selectedRevision = event.target.value;
+                // Handle the revision change here
+                console.log("Selected revision:", selectedRevision);
+                setCurrentRevision(parseInt(selectedRevision));
+              }}
+              options={revisionSelectOptions}
+            />
+          </div>
+          <MainTable
+            headers={[
+              { content: "ID", width: "15%" },
+              { content: "CVSS score", width: "15%" },
+              { content: "CVSS severity", width: "15%" },
+              { content: "Ubuntu priority", width: "15%" },
+              { content: "Description", width: "40%" },
+            ]}
+            rows={getData()}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export default SnapCves;
diff --git a/static/js/publisher/pages/SnapCves/index.ts b/static/js/publisher/pages/SnapCves/index.ts
new file mode 100644
index 0000000000..99ac26239d
--- /dev/null
+++ b/static/js/publisher/pages/SnapCves/index.ts
@@ -0,0 +1 @@
+export { default } from "./SnapCves";
diff --git a/static/js/publisher/publisher.tsx b/static/js/publisher/publisher.tsx
index e79843787d..cf1e680e5a 100644
--- a/static/js/publisher/publisher.tsx
+++ b/static/js/publisher/publisher.tsx
@@ -2,6 +2,7 @@ import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { RecoilRoot } from "recoil";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
 
 import PublisherRoot from "./routes/publisher-root";
 import Publicise from "./pages/Publicise";
@@ -17,6 +18,7 @@ import AccountSnaps from "./pages/AccountSnaps";
 import RegisterNameDispute from "./pages/RegisterNameDispute";
 import RequestReservedName from "./pages/RequestReservedName";
 import RegisterSnap from "./pages/RegisterSnap";
+import SnapCves from "./pages/SnapCves";
 
 const router = createBrowserRouter([
   {
@@ -67,6 +69,10 @@ const router = createBrowserRouter([
         path: "/:snapId/releases",
         element: <Releases />,
       },
+      {
+        path: "/:snapId/cves",
+        element: <SnapCves />,
+      },
       {
         path: "/snaps",
         element: <AccountSnaps />,
@@ -104,6 +110,7 @@ root.render(
   <RecoilRoot>
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   </RecoilRoot>,
 );
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index 4284a9f4ac..d813c01c40 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -58,6 +58,11 @@
     view_func=listing_views.get_listing_snap,
     methods=["GET"],
 )
+publisher_snaps.add_url_rule(
+    "/<snap_name>/cves",
+    view_func=listing_views.get_listing_snap,
+    methods=["GET"],
+)
 publisher_snaps.add_url_rule(
     "/api/<snap_name>/listing",
     view_func=listing_views.get_listing_data,

From dc810035f78d1c374aa4379f776663356239c15c Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Tue, 6 May 2025 14:22:38 +0200
Subject: [PATCH 2/7] Add expanding table

---
 .../js/publisher/pages/SnapCves/SnapCves.tsx  | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/static/js/publisher/pages/SnapCves/SnapCves.tsx b/static/js/publisher/pages/SnapCves/SnapCves.tsx
index 6c5d97f425..a39aa97514 100644
--- a/static/js/publisher/pages/SnapCves/SnapCves.tsx
+++ b/static/js/publisher/pages/SnapCves/SnapCves.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 
 interface ICve {
   id: string;
+  status: string;
   description: string;
   cvss_score: number | null;
   cvss_severity: string | null;
@@ -63,15 +64,36 @@ function SnapCves(): JSX.Element {
     refetchOnWindowFocus: false,
   });
 
+  const [expandedRow, setExpandedRow] = useState<number | null>(null);
+
   const getData = () => {
-    return data.map((cve: ICve) => ({
+    return data.map((cve: ICve, index: number) => ({
       columns: [
         { content: cve.id },
+        { content: cve.status },
         { content: cve.cvss_score },
         { content: cve.cvss_severity },
         { content: cve.ubuntu_priority },
-        { content: cve.description },
+        {
+          content: (
+            <button
+              className="p-button is-dense"
+              onClick={() => {
+                if (expandedRow === index) {
+                  setExpandedRow(null);
+                } else {
+                  setExpandedRow(index);
+                }
+              }}
+              aria-expanded={expandedRow === index}
+            >
+              {expandedRow === index ? "Hide" : "Show"}
+            </button>
+          ),
+        },
       ],
+      expanded: expandedRow === index,
+      expandedContent: <p>{cve.description}</p>,
     }));
   };
 
@@ -120,12 +142,14 @@ function SnapCves(): JSX.Element {
             />
           </div>
           <MainTable
+            expanding
             headers={[
-              { content: "ID", width: "15%" },
+              { content: "ID", width: "20%" },
+              { content: "Status", width: "15%" },
               { content: "CVSS score", width: "15%" },
               { content: "CVSS severity", width: "15%" },
               { content: "Ubuntu priority", width: "15%" },
-              { content: "Description", width: "40%" },
+              { content: "Description", width: "15%" },
             ]}
             rows={getData()}
           />

From 1c825c101a9320c18eb88ca66e612f6affec35b3 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 7 May 2025 15:13:06 +0200
Subject: [PATCH 3/7] Get flattened list of affected binaries, paginater on
 client side

---
 .../js/publisher/pages/SnapCves/SnapCves.tsx  | 74 ++++++++++++++-----
 webapp/publisher/cve/cve_views.py             | 45 +++++++++++
 webapp/publisher/snaps/views.py               |  2 +-
 3 files changed, 103 insertions(+), 18 deletions(-)

diff --git a/static/js/publisher/pages/SnapCves/SnapCves.tsx b/static/js/publisher/pages/SnapCves/SnapCves.tsx
index a39aa97514..43be268323 100644
--- a/static/js/publisher/pages/SnapCves/SnapCves.tsx
+++ b/static/js/publisher/pages/SnapCves/SnapCves.tsx
@@ -12,6 +12,10 @@ interface ICve {
   cvss_score: number | null;
   cvss_severity: string | null;
   ubuntu_priority: string | null;
+  // affected binary
+  name: string;
+  version: string;
+  fixed_version: string;
 }
 
 function SnapCves(): JSX.Element {
@@ -66,14 +70,49 @@ function SnapCves(): JSX.Element {
 
   const [expandedRow, setExpandedRow] = useState<number | null>(null);
 
+  const headers = [
+    {
+      content: "CVE ID",
+      width: "15%",
+      style: { flexBasis: "15%" },
+    },
+    {
+      content: "Severity",
+      width: "15%",
+      style: { flexBasis: "15%" },
+    },
+    { content: "Status", width: "15%", style: { flexBasis: "15%" } },
+    {
+      content: "Revision",
+      width: "10%",
+      style: { flexBasis: "10%" },
+    },
+    {
+      content: "Affected source",
+      width: "15%",
+      style: { flexBasis: "15%" },
+    },
+    {
+      content: "Source version",
+      width: "20%",
+      style: { flexBasis: "20%" },
+    },
+    {
+      content: "Description",
+      width: "10%",
+      style: { flexBasis: "10%" },
+    },
+  ];
+
   const getData = () => {
-    return data.map((cve: ICve, index: number) => ({
-      columns: [
+    return data.map((cve: ICve, index: number) => {
+      const columns = [
         { content: cve.id },
-        { content: cve.status },
-        { content: cve.cvss_score },
         { content: cve.cvss_severity },
-        { content: cve.ubuntu_priority },
+        { content: cve.status },
+        { content: currentRevision },
+        { content: cve.name },
+        { content: cve.version },
         {
           content: (
             <button
@@ -91,10 +130,17 @@ function SnapCves(): JSX.Element {
             </button>
           ),
         },
-      ],
-      expanded: expandedRow === index,
-      expandedContent: <p>{cve.description}</p>,
-    }));
+      ] as { content: React.ReactNode; style?: React.CSSProperties }[];
+      columns.forEach((column, i) => {
+        column.style = headers[i].style;
+      });
+
+      return {
+        columns,
+        expanded: expandedRow === index,
+        expandedContent: <p>{cve.description}</p>,
+      };
+    });
   };
 
   console.table(data);
@@ -143,14 +189,8 @@ function SnapCves(): JSX.Element {
           </div>
           <MainTable
             expanding
-            headers={[
-              { content: "ID", width: "20%" },
-              { content: "Status", width: "15%" },
-              { content: "CVSS score", width: "15%" },
-              { content: "CVSS severity", width: "15%" },
-              { content: "Ubuntu priority", width: "15%" },
-              { content: "Description", width: "15%" },
-            ]}
+            paginate={20}
+            headers={headers}
             rows={getData()}
           />
         </>
diff --git a/webapp/publisher/cve/cve_views.py b/webapp/publisher/cve/cve_views.py
index ab9ba4bce4..8c219e4d12 100644
--- a/webapp/publisher/cve/cve_views.py
+++ b/webapp/publisher/cve/cve_views.py
@@ -147,3 +147,48 @@ def get_cves(snap_name, revision):
     )
 
     return flask.jsonify({"success": True, **cves})
+
+@login_required
+def get_binaries(snap_name, revision):
+    # Access check
+    has_access, error_message, status_code = can_user_access_cve_data(snap_name)
+    if not has_access:
+        return (
+            flask.jsonify({"success": False, "error": error_message}),
+            status_code,
+        )
+
+    # Pagination
+    page = flask.request.args.get("page", default=1, type=int)
+    page_size = flask.request.args.get("page_size", default=10, type=int)
+
+    # Load and flatten data
+    cves = CveHelper.get_cve_with_revision(snap_name, revision)
+
+    binaries = [
+        {
+            "id": cve["id"],
+            "cvss_score": cve["cvss_score"],
+            "cvss_severity": cve["cvss_severity"],
+            "description": cve["description"],
+            "ubuntu_priority": cve["ubuntu_priority"],
+            "channels_with_fix": cve["channels_with_fix"],
+            "usns": cve["usns"],
+            "name": binary["name"],
+            "status": binary["status"],
+            "version": binary["version"],
+            "fixed_version": binary.get("fixed_version"),
+        }
+        for cve in cves
+        for binary in cve.get("affected_binaries", [])
+    ]
+
+    # TODO: decide if we want to paginate on client (current) or server
+    # Currently we return all the binaries and paginate in the table on client side
+    return flask.jsonify({
+        "success": True,
+        "total": len(binaries),
+        "page": 1,
+        "page_size": len(binaries),
+        "data": binaries,
+    })
\ No newline at end of file
diff --git a/webapp/publisher/snaps/views.py b/webapp/publisher/snaps/views.py
index d813c01c40..0cc05dd194 100644
--- a/webapp/publisher/snaps/views.py
+++ b/webapp/publisher/snaps/views.py
@@ -287,7 +287,7 @@
 # CVE API
 publisher_snaps.add_url_rule(
     "/api/<snap_name>/<revision>/cves",
-    view_func=cve_views.get_cves,
+    view_func=cve_views.get_binaries,
 )
 
 publisher_snaps.add_url_rule(

From 20eabcb865771ec580f523bfe6db409c7e20366b Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Wed, 7 May 2025 16:48:15 +0200
Subject: [PATCH 4/7] Added custom styling of several CVE table cells

---
 .../js/publisher/pages/SnapCves/SnapCves.tsx  | 72 +++++++++++++++++--
 static/sass/_snapcraft_cves.scss              | 36 ++++++++++
 static/sass/styles.scss                       |  3 +
 3 files changed, 104 insertions(+), 7 deletions(-)
 create mode 100644 static/sass/_snapcraft_cves.scss

diff --git a/static/js/publisher/pages/SnapCves/SnapCves.tsx b/static/js/publisher/pages/SnapCves/SnapCves.tsx
index 43be268323..86b726e3b2 100644
--- a/static/js/publisher/pages/SnapCves/SnapCves.tsx
+++ b/static/js/publisher/pages/SnapCves/SnapCves.tsx
@@ -15,9 +15,60 @@ interface ICve {
   // affected binary
   name: string;
   version: string;
-  fixed_version: string;
+  fixed_version: string | null;
 }
 
+const SnapCveIdCell = ({ id }: { id: string }): JSX.Element => {
+  let link: string = "";
+
+  if (id.startsWith("http")) {
+    link = id;
+  } else if (id.startsWith("CVE")) {
+    link = `https://ubuntu.com/security/${id}`;
+  }
+
+  if (link) {
+    return <a href={link}>{id}</a>;
+  } else {
+    return <span>{id}</span>;
+  }
+};
+
+const SnapCveSeverityCell = ({ severity }: { severity: string | null }) => {
+  if (!severity) {
+    return (
+      <>
+        <i className="p-icon--help"></i> unknown
+      </>
+    );
+  }
+
+  const severityIcon = `p-icon--${severity}-priority`;
+
+  return (
+    <>
+      <i className={severityIcon}></i> {severity}
+    </>
+  );
+};
+
+const SnapCveStatusCell = ({
+  status,
+  fixedVersion,
+}: {
+  status: string;
+  fixedVersion: string | null;
+}) => {
+  const statusIcon = status === "fixed" ? `p-icon--success` : `p-icon--error`;
+  const statusLabel = status === "fixed" ? "fixed" : "vulnerable";
+  return (
+    <>
+      <i className={statusIcon}></i> {statusLabel}
+      {fixedVersion && <span className="u-text--muted"> {fixedVersion}</span>}
+    </>
+  );
+};
+
 function SnapCves(): JSX.Element {
   const { snapId } = useParams();
   const [currentRevision, setCurrentRevision] = useState<number | null>(null);
@@ -78,10 +129,10 @@ function SnapCves(): JSX.Element {
     },
     {
       content: "Severity",
-      width: "15%",
-      style: { flexBasis: "15%" },
+      width: "10%",
+      style: { flexBasis: "10%" },
     },
-    { content: "Status", width: "15%", style: { flexBasis: "15%" } },
+    { content: "Status", width: "20%", style: { flexBasis: "20%" } },
     {
       content: "Revision",
       width: "10%",
@@ -107,9 +158,16 @@ function SnapCves(): JSX.Element {
   const getData = () => {
     return data.map((cve: ICve, index: number) => {
       const columns = [
-        { content: cve.id },
-        { content: cve.cvss_severity },
-        { content: cve.status },
+        { content: <SnapCveIdCell id={cve.id} /> },
+        { content: <SnapCveSeverityCell severity={cve.cvss_severity} /> },
+        {
+          content: (
+            <SnapCveStatusCell
+              status={cve.status}
+              fixedVersion={cve.fixed_version}
+            />
+          ),
+        },
         { content: currentRevision },
         { content: cve.name },
         { content: cve.version },
diff --git a/static/sass/_snapcraft_cves.scss b/static/sass/_snapcraft_cves.scss
new file mode 100644
index 0000000000..37657a0967
--- /dev/null
+++ b/static/sass/_snapcraft_cves.scss
@@ -0,0 +1,36 @@
+@mixin snapcraft-cves {
+  // Icons introduced in CVE work
+  .p-icon--unknown-priority,
+  .p-icon--negligible-priority,
+  .p-icon--low-priority,
+  .p-icon--medium-priority,
+  .p-icon--high-priority,
+  .p-icon--critical-priority,
+  .p-icon--dark-tick {
+    @extend %icon;
+  }
+
+  .p-icon--unknown-priority {
+    background-image: url("#{$assets-path}2dff197f-CVE-Priority-icon-Unknown.svg");
+  }
+
+  .p-icon--negligible-priority {
+    background-image: url("#{$assets-path}ef6c75b8-CVE-Priority-icon-Negligible.svg");
+  }
+
+  .p-icon--low-priority {
+    background-image: url("#{$assets-path}03ac6f86-CVE-Priority-icon-Low.svg");
+  }
+
+  .p-icon--medium-priority {
+    background-image: url("#{$assets-path}8010f9e0-CVE-Priority-icon-Medium.svg");
+  }
+
+  .p-icon--high-priority {
+    background-image: url("#{$assets-path}3887354e-CVE-Priority-icon-High.svg");
+  }
+
+  .p-icon--critical-priority {
+    background-image: url("#{$assets-path}c96f27b9-CVE-Priority-icon-Critical.svg");
+  }
+}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index ff6e8a9bd2..959100bf78 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -175,6 +175,9 @@ $color-social-icon-foreground: $color-light;
 @include vf-p-icon-models;
 @include vf-p-icon-edit;
 @include vf-p-icon-units;
+@import "snapcraft_cves";
+@include snapcraft-cves;
+
 
 dl {
   margin-bottom: $spv--x-large;

From d0eaa852e01046f3da5e1cf84d834cffcacb8d05 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Thu, 8 May 2025 14:36:02 +0200
Subject: [PATCH 5/7] Update CVEs table styling

---
 .../js/publisher/pages/SnapCves/SnapCves.tsx  | 103 ++++++++++++------
 1 file changed, 68 insertions(+), 35 deletions(-)

diff --git a/static/js/publisher/pages/SnapCves/SnapCves.tsx b/static/js/publisher/pages/SnapCves/SnapCves.tsx
index 86b726e3b2..9b86476647 100644
--- a/static/js/publisher/pages/SnapCves/SnapCves.tsx
+++ b/static/js/publisher/pages/SnapCves/SnapCves.tsx
@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 // import { setPageTitle } from "../../utils";
 import { useQuery } from "react-query";
 import { MainTable, Strip, Select } from "@canonical/react-components";
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 interface ICve {
   id: string;
@@ -18,7 +18,19 @@ interface ICve {
   fixed_version: string | null;
 }
 
-const SnapCveIdCell = ({ id }: { id: string }): JSX.Element => {
+const SnapCveIdCell = ({
+  id,
+  isExpanded,
+  setExpandedRow,
+  index,
+  hasDescription = false,
+}: {
+  id: string;
+  isExpanded: boolean;
+  setExpandedRow: Dispatch<SetStateAction<number | null>>;
+  index: number;
+  hasDescription?: boolean;
+}): JSX.Element => {
   let link: string = "";
 
   if (id.startsWith("http")) {
@@ -27,11 +39,36 @@ const SnapCveIdCell = ({ id }: { id: string }): JSX.Element => {
     link = `https://ubuntu.com/security/${id}`;
   }
 
-  if (link) {
-    return <a href={link}>{id}</a>;
-  } else {
-    return <span>{id}</span>;
-  }
+  return (
+    <>
+      <button
+        className="p-button--base is-dense has-icon"
+        style={{ marginRight: "0.5rem", marginLeft: "-0.5rem" }}
+        onClick={() => {
+          if (isExpanded) {
+            setExpandedRow(null);
+          } else {
+            setExpandedRow(index);
+          }
+        }}
+        aria-expanded={isExpanded}
+        disabled={!hasDescription}
+      >
+        <i
+          className={
+            isExpanded ? "p-icon--chevron-down" : "p-icon--chevron-right"
+          }
+        ></i>
+      </button>
+      {link ? (
+        <a target="_blank" rel="noreferrer" href={link}>
+          {id}
+        </a>
+      ) : (
+        <span>{id}</span>
+      )}
+    </>
+  );
 };
 
 const SnapCveSeverityCell = ({ severity }: { severity: string | null }) => {
@@ -64,7 +101,14 @@ const SnapCveStatusCell = ({
   return (
     <>
       <i className={statusIcon}></i> {statusLabel}
-      {fixedVersion && <span className="u-text--muted"> {fixedVersion}</span>}
+      {fixedVersion && (
+        <>
+          {" "}
+          <span className="u-text--muted" style={{ whiteSpace: "nowrap" }}>
+            {fixedVersion}
+          </span>
+        </>
+      )}
     </>
   );
 };
@@ -124,15 +168,15 @@ function SnapCves(): JSX.Element {
   const headers = [
     {
       content: "CVE ID",
-      width: "15%",
-      style: { flexBasis: "15%" },
+      width: "20%",
+      style: { flexBasis: "20%" },
     },
     {
       content: "Severity",
       width: "10%",
       style: { flexBasis: "10%" },
     },
-    { content: "Status", width: "20%", style: { flexBasis: "20%" } },
+    { content: "Status", width: "25%", style: { flexBasis: "25%" } },
     {
       content: "Revision",
       width: "10%",
@@ -148,17 +192,23 @@ function SnapCves(): JSX.Element {
       width: "20%",
       style: { flexBasis: "20%" },
     },
-    {
-      content: "Description",
-      width: "10%",
-      style: { flexBasis: "10%" },
-    },
   ];
 
   const getData = () => {
     return data.map((cve: ICve, index: number) => {
       const columns = [
-        { content: <SnapCveIdCell id={cve.id} /> },
+        {
+          content: (
+            <SnapCveIdCell
+              id={cve.id}
+              index={index}
+              setExpandedRow={setExpandedRow}
+              isExpanded={expandedRow === index}
+              hasDescription={!!cve.description}
+            />
+          ),
+          className: "u-truncate",
+        },
         { content: <SnapCveSeverityCell severity={cve.cvss_severity} /> },
         {
           content: (
@@ -171,23 +221,6 @@ function SnapCves(): JSX.Element {
         { content: currentRevision },
         { content: cve.name },
         { content: cve.version },
-        {
-          content: (
-            <button
-              className="p-button is-dense"
-              onClick={() => {
-                if (expandedRow === index) {
-                  setExpandedRow(null);
-                } else {
-                  setExpandedRow(index);
-                }
-              }}
-              aria-expanded={expandedRow === index}
-            >
-              {expandedRow === index ? "Hide" : "Show"}
-            </button>
-          ),
-        },
       ] as { content: React.ReactNode; style?: React.CSSProperties }[];
       columns.forEach((column, i) => {
         column.style = headers[i].style;
@@ -210,7 +243,7 @@ function SnapCves(): JSX.Element {
     (revision: string) => ({
       label: revision,
       value: revision,
-    })
+    }),
   );
 
   return (

From 9700d40390944e9a0bb03adb3cffb9910c570a11 Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Thu, 8 May 2025 14:46:44 +0200
Subject: [PATCH 6/7] Add label to revision select

---
 .../js/publisher/pages/SnapCves/SnapCves.tsx  | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/static/js/publisher/pages/SnapCves/SnapCves.tsx b/static/js/publisher/pages/SnapCves/SnapCves.tsx
index 9b86476647..417e1c8149 100644
--- a/static/js/publisher/pages/SnapCves/SnapCves.tsx
+++ b/static/js/publisher/pages/SnapCves/SnapCves.tsx
@@ -2,7 +2,13 @@ import { useParams } from "react-router-dom";
 
 // import { setPageTitle } from "../../utils";
 import { useQuery } from "react-query";
-import { MainTable, Strip, Select } from "@canonical/react-components";
+import {
+  MainTable,
+  Strip,
+  Select,
+  Form,
+  Label,
+} from "@canonical/react-components";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 interface ICve {
@@ -243,7 +249,7 @@ function SnapCves(): JSX.Element {
     (revision: string) => ({
       label: revision,
       value: revision,
-    }),
+    })
   );
 
   return (
@@ -265,18 +271,18 @@ function SnapCves(): JSX.Element {
       {data && (
         <>
           <div>
-            <Select
-              //className="p-form__control"
-              //disabled={isEmpty}
-              value={currentRevision || ""}
-              onChange={(event) => {
-                const selectedRevision = event.target.value;
-                // Handle the revision change here
-                console.log("Selected revision:", selectedRevision);
-                setCurrentRevision(parseInt(selectedRevision));
-              }}
-              options={revisionSelectOptions}
-            />
+            <Form inline>
+              <Select
+                id="revision-selector"
+                label="Revision"
+                value={currentRevision || ""}
+                onChange={(event) => {
+                  const selectedRevision = event.target.value;
+                  setCurrentRevision(parseInt(selectedRevision));
+                }}
+                options={revisionSelectOptions}
+              />
+            </Form>
           </div>
           <MainTable
             expanding

From 43b4668ec17b0b8e8204789d5755f4bc67ade6bc Mon Sep 17 00:00:00 2001
From: Bartek Szopka <bartek.szopka@canonical.com>
Date: Thu, 29 May 2025 14:37:18 +0200
Subject: [PATCH 7/7] Add vulnerabilities tab

---
 .../components/SectionNav/SectionNav.tsx      | 97 +++++++++++--------
 static/js/publisher/hooks/useCves.ts          | 20 ++++
 .../js/publisher/pages/SnapCves/SnapCves.tsx  | 14 +--
 3 files changed, 79 insertions(+), 52 deletions(-)
 create mode 100644 static/js/publisher/hooks/useCves.ts

diff --git a/static/js/publisher/components/SectionNav/SectionNav.tsx b/static/js/publisher/components/SectionNav/SectionNav.tsx
index 9e1d7f0165..3e5f2eff5e 100644
--- a/static/js/publisher/components/SectionNav/SectionNav.tsx
+++ b/static/js/publisher/components/SectionNav/SectionNav.tsx
@@ -1,55 +1,66 @@
 import { Link } from "react-router-dom";
 import { Tabs } from "@canonical/react-components";
 
+import { usePublisher } from "../../hooks";
+
 type Props = {
   activeTab: string;
   snapName: string | undefined;
 };
 
 function SectionNav({ activeTab, snapName }: Props): React.JSX.Element {
-  return (
-    <Tabs
-      listClassName="u-no-margin--bottom"
-      links={[
-        {
-          label: "Listing",
-          active: activeTab === "listing" || !activeTab,
-          to: `/${snapName}/listing`,
-          component: Link,
-        },
-        {
-          label: "Builds",
-          active: activeTab === "builds",
-          to: `/${snapName}/builds`,
-          component: Link,
-        },
-        {
-          label: "Releases",
-          active: activeTab === "releases",
-          to: `/${snapName}/releases`,
-          component: Link,
-        },
-        {
-          label: "Metrics",
-          active: activeTab === "metrics",
-          to: `/${snapName}/metrics`,
-          component: Link,
-        },
-        {
-          label: "Publicise",
-          active: activeTab === "publicise",
-          to: `/${snapName}/publicise`,
-          component: Link,
-        },
-        {
-          label: "Settings",
-          active: activeTab === "settings",
-          to: `/${snapName}/settings`,
-          component: Link,
-        },
-      ]}
-    />
-  );
+  const { data: publisherData } = usePublisher();
+
+  const links = [
+    {
+      label: "Listing",
+      active: activeTab === "listing" || !activeTab,
+      to: `/${snapName}/listing`,
+      component: Link,
+    },
+    {
+      label: "Builds",
+      active: activeTab === "builds",
+      to: `/${snapName}/builds`,
+      component: Link,
+    },
+    {
+      label: "Releases",
+      active: activeTab === "releases",
+      to: `/${snapName}/releases`,
+      component: Link,
+    },
+    {
+      label: "Metrics",
+      active: activeTab === "metrics",
+      to: `/${snapName}/metrics`,
+      component: Link,
+    },
+    {
+      label: "Publicise",
+      active: activeTab === "publicise",
+      to: `/${snapName}/publicise`,
+      component: Link,
+    },
+    {
+      label: "Settings",
+      active: activeTab === "settings",
+      to: `/${snapName}/settings`,
+      component: Link,
+    },
+  ];
+
+  // TODO: verify if the snap has CVE data before adding the link
+  if (publisherData?.publisher?.is_canonical) {
+    links.splice(3, 0, {
+      label: "Vulnerabilities",
+      active: activeTab === "vulnerabilities",
+      to: `/${snapName}/cves`,
+      component: Link,
+    });
+  }
+
+  return <Tabs listClassName="u-no-margin--bottom" links={links} />;
 }
 
 export default SectionNav;
diff --git a/static/js/publisher/hooks/useCves.ts b/static/js/publisher/hooks/useCves.ts
new file mode 100644
index 0000000000..1b3eea905c
--- /dev/null
+++ b/static/js/publisher/hooks/useCves.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "react-query";
+
+function useCves() {
+  return useQuery({
+    queryKey: ["cves"],
+    queryFn: async () => {
+      const response = await fetch(`/api/docker/3213/cves`);
+
+      if (!response.ok) {
+        throw new Error("Unable to fetch CVEs");
+      }
+
+      const responseData = await response.json();
+
+      return responseData;
+    },
+  });
+}
+
+export default useCves;
diff --git a/static/js/publisher/pages/SnapCves/SnapCves.tsx b/static/js/publisher/pages/SnapCves/SnapCves.tsx
index 417e1c8149..4b8de2f870 100644
--- a/static/js/publisher/pages/SnapCves/SnapCves.tsx
+++ b/static/js/publisher/pages/SnapCves/SnapCves.tsx
@@ -2,14 +2,9 @@ import { useParams } from "react-router-dom";
 
 // import { setPageTitle } from "../../utils";
 import { useQuery } from "react-query";
-import {
-  MainTable,
-  Strip,
-  Select,
-  Form,
-  Label,
-} from "@canonical/react-components";
+import { MainTable, Strip, Select, Form } from "@canonical/react-components";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import SectionNav from "../../components/SectionNav";
 
 interface ICve {
   id: string;
@@ -270,7 +265,8 @@ function SnapCves(): JSX.Element {
 
       {data && (
         <>
-          <div>
+          <SectionNav activeTab="vulnerabilities" snapName={snapId} />
+          <Strip shallow>
             <Form inline>
               <Select
                 id="revision-selector"
@@ -283,7 +279,7 @@ function SnapCves(): JSX.Element {
                 options={revisionSelectOptions}
               />
             </Form>
-          </div>
+          </Strip>
           <MainTable
             expanding
             paginate={20}