Merge pull request #161 from lokanandaprabhu/feature/SRVKP-6638

SRVKP-6638: PipelineRuns List page doesn't fetch next page data on scroll

Author: openshift-merge-bot[bot]

src/components/pipelineRuns-list/PipelineRunsList.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom-v5-compat';
 import { SortByDirection } from '@patternfly/react-table';
 import {
   ListPageBody,
@@ -11,8 +13,7 @@ import { usePipelineRunsFilters } from './usePipelineRunsFilters';
 import { PipelineRunKind } from '../../types';
 import { useGetPipelineRuns } from '../hooks/useTektonResult';
 import PipelineRunsRow from './PipelineRunsRow';
-import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useLoadMoreOnScroll } from '../utils/tekton-results';
 
 import './PipelineRunsList.scss';
 
@@ -32,6 +33,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 +46,19 @@ 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,
   );
+
+  useLoadMoreOnScroll(loadMoreRef, nextPageToken, pipelineRunsLoaded);
+
   return (
     <ListPageBody>
       <ListPageFilter
@@ -88,6 +97,7 @@ const PipelineRunsList: React.FC<PipelineRunsListProps> = ({
         sortColumnIndex={sortColumnIndex}
         sortDirection={SortByDirection.desc}
       />
+      <div ref={loadMoreRef}></div>
     </ListPageBody>
   );
 };

src/components/pipelines-tasks/TaskRunsList.tsx

@@ -19,6 +19,7 @@ import { TaskRunModel } from '../../models';
 import { ALL_NAMESPACES_KEY, TektonResourceLabel } from '../../consts';
 import { getReferenceForModel } from '../pipelines-overview/utils';
 import { useTaskRunsFilters } from './useTaskRunsFilters';
+import { useLoadMoreOnScroll } from '../utils/tekton-results';
 
 interface TaskRunsListPageProps {
   showTitle?: boolean;
@@ -107,17 +108,24 @@ 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(),
   );
+
+  useLoadMoreOnScroll(loadMoreRef, nextPageToken, loaded);
+
   return (
     <>
       <ListPageBody>
@@ -175,6 +183,7 @@ const TaskRunsList: React.FC<TaskRunsListPageProps> = ({
           sortColumnIndex={sortColumnIndex}
           sortDirection={SortByDirection.desc}
         />
+        <div ref={loadMoreRef}></div>
       </ListPageBody>
     </>
   );

src/components/utils/tekton-results.ts

@@ -7,6 +7,7 @@ import {
   k8sGet,
 } from '@openshift-console/dynamic-plugin-sdk';
 import _ from 'lodash';
+import { RefObject, useEffect } from 'react';
 import {
   ALL_NAMESPACES_KEY,
   DELETED_RESOURCE_IN_K8S_ANNOTATION,
@@ -281,7 +282,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 } : {}),
@@ -491,3 +492,24 @@ export const getTaskRunLog = async (taskRunPath: string): Promise<string> => {
   )}`;
   return consoleProxyFetchLog({ url, method: 'GET', allowInsecure: true });
 };
+
+export const useLoadMoreOnScroll = (
+  loadMoreRef: RefObject<HTMLElement>,
+  nextPageToken: (() => void) | null,
+  loaded: boolean,
+) => {
+  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, loadMoreRef]);
+};