chore(heureka): adds pagination to services table

Author: hodanoori

apps/heureka/src/components/Vulnerabilities/VulnerabilitiesList/VulnerabilityDetailsPanel/VulnerabilityServicesList.tsx

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useCallback, use, useEffect } from "react"
-import { useNavigate, useRouteContext, useSearch } from "@tanstack/react-router"
+import React, { use, Suspense } from "react"
+import { useNavigate } from "@tanstack/react-router"
 import {
   Stack,
   DataGrid,
@@ -18,23 +18,24 @@ import SectionContentHeading from "../../../common/SectionContentHeading"
 import { CursorPagination } from "../../../common/CursorPagination"
 import { ApolloQueryResult } from "@apollo/client"
 import { GetVulnerabilitiesQuery } from "../../../../generated/graphql"
-import { fetchVulnerabilities } from "../../../../api/fetchVulnerabilities"
 import { getNormalizedVulnerabilitiesResponse, getNormalizedVulnerabilityServicesResponse } from "../../utils"
-import { VulnerabilityService } from "../../utils"
 
 type VulnerabilityServicesListProps = {
   vulnerabilityName: string
   vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
   onServiceClick?: (serviceCcrn: string) => void
-  goToPage?: (after?: string | null) => void
+  goToPage: (after?: string | null) => void
 }
 
-export const VulnerabilityServicesList = ({
-  vulnerabilityName,
+const VulnerabilityServicesDataRows = ({
   vulnerabilitiesPromise,
+  vulnerabilityName,
   onServiceClick,
-  goToPage,
-}: VulnerabilityServicesListProps) => {
+}: {
+  vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
+  vulnerabilityName: string
+  onServiceClick?: (serviceCcrn: string) => void
+}) => {
   const navigate = useNavigate()
 
   const handleServiceClick = (serviceCcrn: string) => {
@@ -48,15 +49,6 @@ export const VulnerabilityServicesList = ({
     }
   }
 
-  const handlePageChange = useCallback(
-    (after?: string | null) => {
-      if (goToPage) {
-        goToPage(after)
-      }
-    },
-    [goToPage]
-  )
-
   // Use the promise passed from the parent
   const { data } = use(vulnerabilitiesPromise)
 
@@ -76,24 +68,83 @@ export const VulnerabilityServicesList = ({
   }
 
   return (
-    <Stack gap="4" direction="vertical">
-      <SectionContentHeading>Services ({totalCount})</SectionContentHeading>
+    <>
+      {services.map((service, index) => (
+        <DataGridRow key={index} className="cursor-pointer" onClick={() => handleServiceClick(service.ccrn)}>
+          <DataGridCell className="whitespace-nowrap">{service.ccrn}</DataGridCell>
+        </DataGridRow>
+      ))}
+    </>
+  )
+}
+
+const VulnerabilityServicesTotalCount = ({
+  vulnerabilitiesPromise,
+  vulnerabilityName,
+}: {
+  vulnerabilitiesPromise: Promise<ApolloQueryResult<GetVulnerabilitiesQuery>>
+  vulnerabilityName: string
+}) => {
+  const { data } = use(vulnerabilitiesPromise)
+  const { vulnerabilities } = getNormalizedVulnerabilitiesResponse(data)
+  const vulnerabilityData = vulnerabilities.find((vuln: Vulnerability) => vuln.name === vulnerabilityName)
+  const totalCount = vulnerabilityData?.servicesCount || 0
+
+  return <>{totalCount}</>
+}
+
+export const VulnerabilityServicesList = ({
+  vulnerabilityName,
+  vulnerabilitiesPromise,
+  onServiceClick,
+  goToPage,
+}: VulnerabilityServicesListProps) => {
+  return (
+    <Suspense>
+      <SectionContentHeading>
+        Services
+        <Suspense>
+          (
+          <VulnerabilityServicesTotalCount
+            vulnerabilitiesPromise={vulnerabilitiesPromise}
+            vulnerabilityName={vulnerabilityName}
+          />
+          )
+        </Suspense>
+      </SectionContentHeading>
 
       <div className="datagrid-hover">
         <DataGrid columns={1}>
           <DataGridRow>
             <DataGridHeadCell>Service CCRN</DataGridHeadCell>
           </DataGridRow>
-
-          {services.map((service, index) => (
-            <DataGridRow key={index} className="cursor-pointer" onClick={() => handleServiceClick(service.ccrn)}>
-              <DataGridCell className="whitespace-nowrap">{service.ccrn}</DataGridCell>
-            </DataGridRow>
-          ))}
+          <Suspense
+            fallback={
+              <DataGridRow>
+                <DataGridCell colSpan={1}>
+                  <Stack gap="2" alignment="center">
+                    <div>Loading</div>
+                    <Spinner variant="primary"></Spinner>
+                  </Stack>
+                </DataGridCell>
+              </DataGridRow>
+            }
+          >
+            <VulnerabilityServicesDataRows
+              vulnerabilitiesPromise={vulnerabilitiesPromise}
+              vulnerabilityName={vulnerabilityName}
+              onServiceClick={onServiceClick}
+            />
+          </Suspense>
         </DataGrid>
       </div>
-
-      {/* The CursorPagination component is removed as per the edit hint */}
-    </Stack>
+      <Suspense>
+        <CursorPagination
+          dataNormalizationMethod={getNormalizedVulnerabilityServicesResponse}
+          dataPromise={vulnerabilitiesPromise}
+          goToPage={goToPage}
+        />
+      </Suspense>
+    </Suspense>
   )
 }