fix: sbom's packages view (#326)

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

@@ -15,6 +15,7 @@ import {
 } from "@patternfly/react-core";
 
 import { PathParam, useRouteParams } from "@app/Routes";
+import { LoadingWrapper } from "@app/components/LoadingWrapper";
 import { PackageQualifiers } from "@app/components/PackageQualifiers";
 import { useFetchPackageById } from "@app/queries/packages";
 import { decomposePurl } from "@app/utils/utils";
@@ -24,7 +25,7 @@ import { VulnerabilitiesByPackage } from "./vulnerabilities-by-package";
 
 export const PackageDetails: React.FC = () => {
   const packageId = useRouteParams(PathParam.PACKAGE_ID);
-  const { pkg } = useFetchPackageById(packageId);
+  const { pkg, isFetching, fetchError } = useFetchPackageById(packageId);
 
   const decomposedPurl = React.useMemo(() => {
     return pkg ? decomposePurl(pkg.purl) : undefined;
@@ -106,7 +107,9 @@ export const PackageDetails: React.FC = () => {
           aria-label="SBOMs using the Package"
           hidden
         >
-          {packageId && <SbomsByPackage packageId={packageId} />}
+          <LoadingWrapper isFetching={isFetching} fetchError={fetchError}>
+            {pkg?.purl && <SbomsByPackage purl={pkg.purl} />}
+          </LoadingWrapper>
         </TabContent>
       </PageSection>
     </>

client/src/app/pages/package-details/sboms-by-package.tsx

@@ -20,12 +20,10 @@ import { useSelectionState } from "@app/hooks/useSelectionState";
 import { useFetchSbomsByPackageId } from "@app/queries/sboms";
 
 interface SbomsByPackageProps {
-  packageId: string;
+  purl: string;
 }
 
-export const SbomsByPackage: React.FC<SbomsByPackageProps> = ({
-  packageId,
-}) => {
+export const SbomsByPackage: React.FC<SbomsByPackageProps> = ({ purl }) => {
   const tableControlState = useTableControlState({
     tableName: "sboms",
     persistenceKeyPrefix: TablePersistenceKeyPrefixes.sboms_by_package,
@@ -53,7 +51,7 @@ export const SbomsByPackage: React.FC<SbomsByPackageProps> = ({
     isFetching,
     fetchError,
   } = useFetchSbomsByPackageId(
-    packageId,
+    purl,
     getHubRequestParams({
       ...tableControlState,
       hubSortFieldKeys: {},

client/src/app/queries/sboms.ts

@@ -138,15 +138,15 @@ export const useUpdateSbomLabelsMutation = (
 };
 
 export const useFetchSbomsByPackageId = (
-  packageId: string,
+  purl: string,
   params: HubRequestParams = {}
 ) => {
   const { data, isLoading, error, refetch } = useQuery({
-    queryKey: ["SBOMsQueryKeysss", "by-package", packageId, params],
+    queryKey: ["SBOMsQueryKeysss", "by-package", purl, params],
     queryFn: () => {
       return listRelatedSboms({
         client,
-        query: { id: packageId, ...requestParamsQuery(params) },
+        query: { purl, ...requestParamsQuery(params) },
       });
     },
   });