From 203a42afd9468768f5f7c542b4a10a79d2dd2543 Mon Sep 17 00:00:00 2001
From: Lokananda Prabhu <lprabhu@redhat.com>
Date: Mon, 21 Oct 2024 13:36:43 +0530
Subject: [PATCH] Added load more resource from tekton results on scroll

---
 .../pipelineRuns-list/PipelineRunsList.tsx    | 29 +++++++++++++++++--
 .../pipelines-tasks/TaskRunsList.tsx          | 25 +++++++++++++++-
 src/components/utils/tekton-results.ts        |  2 +-
 3 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/components/pipelineRuns-list/PipelineRunsList.tsx b/src/components/pipelineRuns-list/PipelineRunsList.tsx
index e91c98fa..27252d19 100644
--- a/src/components/pipelineRuns-list/PipelineRunsList.tsx
+++ b/src/components/pipelineRuns-list/PipelineRunsList.tsx
@@ -32,6 +32,7 @@ const PipelineRunsList: React.FC<PipelineRunsListProps> = ({
   PLRsForKind,
 }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
+  const loadMoreRef = React.useRef<HTMLDivElement | null>(null);
   const { ns } = useParams();
   namespace = namespace || ns;
   const columns = usePipelineRunsColumns(namespace, repositoryPLRs);
@@ -44,12 +45,35 @@ const PipelineRunsList: React.FC<PipelineRunsListProps> = ({
     ? 5
     : 4;
 
-  const [pipelineRuns, pipelineRunsLoaded, pipelineRunsLoadError] =
-    useGetPipelineRuns(namespace, { name: PLRsForName, kind: PLRsForKind });
+  const [
+    pipelineRuns,
+    pipelineRunsLoaded,
+    pipelineRunsLoadError,
+    nextPageToken,
+  ] = useGetPipelineRuns(namespace, { name: PLRsForName, kind: PLRsForKind });
   const [data, filteredData, onFilterChange] = useListPageFilter(
     pipelineRuns,
     filters,
   );
+
+  // Once OCPBUGS-43538 ticket is closed, use onRowsRendered prop in VirtualizedTable for load more on scroll
+  React.useEffect(() => {
+    if (!loadMoreRef.current || !pipelineRunsLoaded) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting && nextPageToken) {
+        nextPageToken();
+      }
+    });
+
+    observer.observe(loadMoreRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [nextPageToken, pipelineRunsLoaded]);
+
   return (
     <ListPageBody>
       <ListPageFilter
@@ -88,6 +112,7 @@ const PipelineRunsList: React.FC<PipelineRunsListProps> = ({
         sortColumnIndex={sortColumnIndex}
         sortDirection={SortByDirection.desc}
       />
+      <div ref={loadMoreRef}></div>
     </ListPageBody>
   );
 };
diff --git a/src/components/pipelines-tasks/TaskRunsList.tsx b/src/components/pipelines-tasks/TaskRunsList.tsx
index d363aa5a..26487955 100644
--- a/src/components/pipelines-tasks/TaskRunsList.tsx
+++ b/src/components/pipelines-tasks/TaskRunsList.tsx
@@ -107,17 +107,39 @@ const TaskRunsList: React.FC<TaskRunsListPageProps> = ({
   ...props
 }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
+  const loadMoreRef = React.useRef<HTMLDivElement | null>(null);
   const [columns, activeColumns] = useTaskColumns();
   const params = useParams();
   const { ns: namespace } = params;
   const ns = namespace === ALL_NAMESPACES_KEY ? '-' : namespace;
   const sortColumnIndex = !namespace ? 6 : 5;
   const parentName = props?.obj?.metadata?.name;
-  const [taskRuns, loaded, loadError] = useTaskRuns(ns, parentName);
+  const [taskRuns, loaded, loadError, nextPageToken] = useTaskRuns(
+    ns,
+    parentName,
+  );
   const [staticData, filteredData, onFilterChange] = useListPageFilter(
     taskRuns,
     useTaskRunsFilters(),
   );
+
+  // Once OCPBUGS-43538 ticket is closed, use onRowsRendered prop in VirtualizedTable for load more on scroll
+  React.useEffect(() => {
+    if (!loadMoreRef.current || !loaded) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting && nextPageToken) {
+        nextPageToken();
+      }
+    });
+
+    observer.observe(loadMoreRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [nextPageToken, loaded]);
   return (
     <>
       <ListPageBody>
@@ -175,6 +197,7 @@ const TaskRunsList: React.FC<TaskRunsListPageProps> = ({
           sortColumnIndex={sortColumnIndex}
           sortDirection={SortByDirection.desc}
         />
+        <div ref={loadMoreRef}></div>
       </ListPageBody>
     </>
   );
diff --git a/src/components/utils/tekton-results.ts b/src/components/utils/tekton-results.ts
index 7de096c1..953cea2e 100644
--- a/src/components/utils/tekton-results.ts
+++ b/src/components/utils/tekton-results.ts
@@ -281,7 +281,7 @@ export const createTektonResultsUrl = async (
         MINIMUM_PAGE_SIZE,
         Math.min(
           MAXIMUM_PAGE_SIZE,
-          options?.limit >= 0 ? options.limit : options?.pageSize ?? 30,
+          options?.limit >= 0 ? options.limit : options?.pageSize ?? 50,
         ),
       )}`,
       ...(nextPageToken ? { page_token: nextPageToken } : {}),