From f26e7767bd7818113490a58df964c4743bd321b0 Mon Sep 17 00:00:00 2001
From: Carlos Feria <carlosthe19916@gmail.com>
Date: Wed, 26 Jun 2024 18:27:31 +0200
Subject: [PATCH] SBOM/Package replace id by version (#79)

---
 client/src/app/api/models.ts                   |  1 +
 client/src/app/pages/sbom-details/packages.tsx | 18 +++++++++---------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
index 068e90d2..3f5a11c5 100644
--- a/client/src/app/api/models.ts
+++ b/client/src/app/api/models.ts
@@ -94,6 +94,7 @@ export interface Package {
 export interface PackageWithinSBOM {
   id: string;
   name: string;
+  version: string;
   purl: string[];
 }
 
diff --git a/client/src/app/pages/sbom-details/packages.tsx b/client/src/app/pages/sbom-details/packages.tsx
index 5066d512..da0d5207 100644
--- a/client/src/app/pages/sbom-details/packages.tsx
+++ b/client/src/app/pages/sbom-details/packages.tsx
@@ -35,8 +35,8 @@ export const Packages: React.FC<PackagesProps> = ({ sbomId }) => {
     tableName: "packages-table",
     persistenceKeyPrefix: TablePersistenceKeyPrefixes.packages,
     columnNames: {
-      id: "Id",
       name: "Name",
+      version: "Version",
     },
     isPaginationEnabled: true,
     isSortEnabled: true,
@@ -112,8 +112,8 @@ export const Packages: React.FC<PackagesProps> = ({ sbomId }) => {
         <Thead>
           <Tr>
             <TableHeaderContentWithControls {...tableControls}>
-              <Th {...getThProps({ columnKey: "id" })} />
               <Th {...getThProps({ columnKey: "name" })} />
+              <Th {...getThProps({ columnKey: "version" })} />
             </TableHeaderContentWithControls>
           </Tr>
         </Thead>
@@ -125,7 +125,7 @@ export const Packages: React.FC<PackagesProps> = ({ sbomId }) => {
         >
           {currentPageItems?.map((item, rowIndex) => {
             return (
-              <Tbody key={item.name}>
+              <Tbody key={item.id}>
                 <Tr {...getTrProps({ item })}>
                   <TableRowContentWithControls
                     {...tableControls}
@@ -133,16 +133,16 @@ export const Packages: React.FC<PackagesProps> = ({ sbomId }) => {
                     rowIndex={rowIndex}
                   >
                     <Td
-                      width={30}
-                      {...getTdProps({ columnKey: "id" })}
+                      width={60}
+                      {...getTdProps({ columnKey: "name" })}
                     >
-                      {item.id}
+                      {item.name}
                     </Td>
                     <Td
-                      width={70}
-                      {...getTdProps({ columnKey: "name" })}
+                      width={40}
+                      {...getTdProps({ columnKey: "version" })}
                     >
-                      {item.name}
+                      {item.version}
                     </Td>
                   </TableRowContentWithControls>
                 </Tr>