✨ [TC-2320] [TC-2180]Align SBOM packages table to the backend

client/src/app/pages/sbom-details/packages-by-sbom.tsx

@@ -1,15 +1,11 @@
 import type React from "react";
-import { useMemo } from "react";
 import { Link } from "react-router-dom";
 
 import {
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
   DescriptionListTerm,
-  Flex,
-  FlexItem,
-  Label,
   List,
   ListItem,
   Toolbar,
@@ -27,86 +23,75 @@ import {
   Tr,
 } from "@patternfly/react-table";
 
-import type { DecomposedPurl } from "@app/api/models";
-import type { PurlSummary } from "@app/client";
+import { FILTER_TEXT_CATEGORY_KEY } from "@app/Constants";
 import { FilterToolbar, FilterType } from "@app/components/FilterToolbar";
-import { PackageQualifiers } from "@app/components/PackageQualifiers";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
   ConditionalTableBody,
   TableHeaderContentWithControls,
   TableRowContentWithControls,
 } from "@app/components/TableControls";
-import { useLocalTableControls } from "@app/hooks/table-controls";
+import {
+  getHubRequestParams,
+  useTableControlProps,
+  useTableControlState,
+} from "@app/hooks/table-controls";
+import { useSelectionState } from "@app/hooks/useSelectionState";
 import { useFetchPackagesBySbomId } from "@app/queries/packages";
-import { decomposePurl } from "@app/utils/utils";
-
-interface TableData extends PurlSummary {
-  decomposedPurl?: DecomposedPurl;
-}
 
 interface PackagesProps {
   sbomId: string;
 }
 
 export const PackagesBySbom: React.FC<PackagesProps> = ({ sbomId }) => {
-  const {
-    result: { data: allPackages },
-    isFetching,
-    fetchError,
-  } = useFetchPackagesBySbomId(sbomId, {
-    page: { pageNumber: 1, itemsPerPage: 0 },
-  });
-
-  const tableData = useMemo(() => {
-    return allPackages
-      .flatMap((item) => item.purl)
-      .map((item) => {
-        const result: TableData = {
-          ...item,
-          decomposedPurl: decomposePurl(item.purl),
-        };
-        return result;
-      });
-  }, [allPackages]);
-
-  const tableControls = useLocalTableControls({
+  const tableControlState = useTableControlState({
     tableName: "package-table",
-    idProperty: "uuid",
-    items: tableData,
-    isLoading: isFetching,
     columnNames: {
       name: "Name",
       version: "Version",
-      qualifiers: "Qualifiers",
     },
-    hasActionsColumn: false,
     isSortEnabled: true,
-    sortableColumns: ["name", "version"],
-    getSortValues: (item) => ({
-      name: `${item.decomposedPurl?.name}/${item.decomposedPurl?.namespace}`,
-      version: item.version.version,
-    }),
+    sortableColumns: ["name"],
     isPaginationEnabled: true,
     isFilterEnabled: true,
     filterCategories: [
       {
-        categoryKey: "filterText",
-        title: "Filter tex",
+        categoryKey: FILTER_TEXT_CATEGORY_KEY,
+        title: "Filter text",
+        placeholderText: "Search",
         type: FilterType.search,
-        placeholderText: "Filter",
-        getItemValue: (item) => {
-          return (
-            `${item.decomposedPurl?.name}/${item.decomposedPurl?.namespace}` ||
-            ""
-          );
-        },
       },
     ],
     isExpansionEnabled: true,
     expandableVariant: "single",
   });
 
+  const {
+    result: { data: packages, total: totalItemCount },
+    isFetching,
+    fetchError,
+  } = useFetchPackagesBySbomId(
+    sbomId,
+    getHubRequestParams({
+      ...tableControlState,
+      hubSortFieldKeys: {
+        name: "name",
+      },
+    }),
+  );
+
+  const tableControls = useTableControlProps({
+    ...tableControlState,
+    idProperty: "id",
+    currentPageItems: packages,
+    totalItemCount,
+    isLoading: isFetching,
+    selectionState: useSelectionState({
+      items: packages,
+      isEqual: (a, b) => a.id === b.id,
+    }),
+  });
+
   const {
     currentPageItems,
     numRenderedColumns,
@@ -145,52 +130,29 @@ export const PackagesBySbom: React.FC<PackagesProps> = ({ sbomId }) => {
             <TableHeaderContentWithControls {...tableControls}>
               <Th {...getThProps({ columnKey: "name" })} />
               <Th {...getThProps({ columnKey: "version" })} />
-              <Th {...getThProps({ columnKey: "qualifiers" })} />
             </TableHeaderContentWithControls>
           </Tr>
         </Thead>
         <ConditionalTableBody
           isLoading={isFetching}
           isError={!!fetchError}
-          isNoData={tableData?.length === 0}
+          isNoData={totalItemCount === 0}
           numRenderedColumns={numRenderedColumns}
         >
           {currentPageItems?.map((item, rowIndex) => {
             return (
-              <Tbody key={item.uuid}>
+              <Tbody key={item.id}>
                 <Tr {...getTrProps({ item })}>
                   <TableRowContentWithControls
                     {...tableControls}
                     item={item}
                     rowIndex={rowIndex}
                   >
-                    <Td width={30} {...getTdProps({ columnKey: "name" })}>
-                      <Flex>
-                        <FlexItem spacer={{ default: "spacerSm" }}>
-                          {(() => {
-                            const name = item.decomposedPurl?.name || "";
-                            const namespace = item.decomposedPurl?.namespace
-                              ? `/${item.decomposedPurl.namespace}`
-                              : "";
-                            return `${name}${namespace}`;
-                          })()}
-                        </FlexItem>
-                        <FlexItem>
-                          <Label isCompact color="blue">
-                            {item.decomposedPurl?.type}
-                          </Label>
-                        </FlexItem>
-                      </Flex>
+                    <Td width={80} {...getTdProps({ columnKey: "name" })}>
+                      {[item.name, item.group].filter(Boolean).join("/")}
                     </Td>
                     <Td width={20} {...getTdProps({ columnKey: "version" })}>
-                      {item.decomposedPurl?.version}
-                    </Td>
-                    <Td width={50} {...getTdProps({ columnKey: "qualifiers" })}>
-                      {item.decomposedPurl?.qualifiers && (
-                        <PackageQualifiers
-                          value={item.decomposedPurl?.qualifiers}
-                        />
-                      )}
+                      {item?.version}
                     </Td>
                   </TableRowContentWithControls>
                 </Tr>
@@ -204,36 +166,20 @@ export const PackagesBySbom: React.FC<PackagesProps> = ({ sbomId }) => {
                       className={spacing.pyLg}
                     >
                       <ExpandableRowContent>
-                        <DescriptionList
-                          columnModifier={{
-                            default: "3Col",
-                          }}
-                        >
-                          <DescriptionListGroup>
-                            <DescriptionListTerm>Packages</DescriptionListTerm>
-                            <DescriptionListDescription>
-                              <List>
-                                <ListItem>
-                                  <Link to={`/packages/${item.uuid}`}>
-                                    {item.purl}
-                                  </Link>
-                                </ListItem>
-                              </List>
-                            </DescriptionListDescription>
-                          </DescriptionListGroup>
+                        <DescriptionList>
                           <DescriptionListGroup>
                             <DescriptionListTerm>
-                              Base package
+                              External identifier
                             </DescriptionListTerm>
-                            <DescriptionListDescription>
-                              {item.base.purl}
-                            </DescriptionListDescription>
-                          </DescriptionListGroup>
-                          <DescriptionListGroup>
-                            <DescriptionListTerm>Versions</DescriptionListTerm>
                             <DescriptionListDescription>
                               <List>
-                                <ListItem>{item.version.version}</ListItem>
+                                {item.purl.map((item) => (
+                                  <ListItem key={item.uuid}>
+                                    <Link to={`/packages/${item.uuid}`}>
+                                      {item.purl}
+                                    </Link>
+                                  </ListItem>
+                                ))}
                               </List>
                             </DescriptionListDescription>
                           </DescriptionListGroup>