Pipelines: Migrate to page-based pagination

Author: Venefilyn

frontend/src/components/pipeline/PipelinesTable.tsx

@@ -16,15 +16,16 @@ import {
 import { SkeletonTable } from "@patternfly/react-component-groups";
 import { LabelGroup } from "@patternfly/react-core";
 import { ExternalLinkAltIcon } from "@patternfly/react-icons";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { PipelineRun } from "../../apiDefinitions";
 import { pipelinesQueryOptions } from "../../queries/pipeline/pipelinesQuery";
 import coprLogo from "../../static/copr.ico";
 import kojiLogo from "../../static/koji.ico";
 import { ErrorConnection } from "../errors/ErrorConnection";
 import { ForgeIcon, ForgeIconByForge } from "../icons/ForgeIcon";
-import { LoadMore } from "../shared/LoadMore";
+import { PackitPagination } from "../shared/PackitPagination";
+import { PackitPaginationContext } from "../shared/PackitPaginationContext";
 import { Timestamp } from "../shared/Timestamp";
 import { StatusLabel } from "../statusLabels/StatusLabel";
 import { SyncReleaseTargetStatusLabel } from "../statusLabels/SyncReleaseTargetStatusLabel";
@@ -104,24 +105,20 @@ const columnNames = {
   external: "External",
 };
 export function PipelinesTable() {
-  const {
-    isLoading,
-    isError,
-    fetchNextPage,
-    data,
-    isFetchingNextPage,
-    hasNextPage,
-  } = useInfiniteQuery(pipelinesQueryOptions());
-
-  // Create a memoization of all the data when we flatten it out. Ideally one should render all the pages separately so that rendering will be done faster
-  const rows = useMemo(() => (data ? data.pages.flat() : []), [data]);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const value = { page, setPage, perPage, setPerPage };
+
+  const { isLoading, isError, data } = useQuery(
+    pipelinesQueryOptions(page, perPage),
+  );
 
   const mappedRows = useMemo(
     () =>
-      rows
-        .filter((run) => run.trigger)
+      data
+        ?.filter((run) => run.trigger)
         .map((run) => <PipelinesTableTr key={run.merged_run_id} run={run} />),
-    [columnNames, rows],
+    [columnNames, data],
   );
 
   const TableHeads = [
@@ -142,30 +139,24 @@ export function PipelinesTable() {
     return <ErrorConnection />;
   }
 
-  if (isLoading) {
-    return (
-      <SkeletonTable
-        variant={TableVariant.compact}
-        rows={10}
-        columns={TableHeads}
-      />
-    );
-  }
-
   return (
-    <>
-      <Table aria-label="Pipeline runs" variant={TableVariant.compact}>
-        <Thead>
-          <Tr>{TableHeads}</Tr>
-        </Thead>
-        <Tbody>{mappedRows}</Tbody>
-      </Table>
-      <LoadMore
-        isFetchingNextPage={isFetchingNextPage}
-        hasNextPage={hasNextPage}
-        fetchNextPage={() => void fetchNextPage()}
-      />
-    </>
+    <PackitPaginationContext.Provider value={value}>
+      <PackitPagination />
+      {isLoading ? (
+        <SkeletonTable
+          variant={TableVariant.compact}
+          rows={perPage}
+          columns={TableHeads}
+        />
+      ) : (
+        <Table aria-label="Pipeline runs" variant={TableVariant.compact}>
+          <Thead>
+            <Tr>{TableHeads}</Tr>
+          </Thead>
+          <Tbody>{mappedRows}</Tbody>
+        </Table>
+      )}
+    </PackitPaginationContext.Provider>
   );
 }
 

frontend/src/queries/pipeline/pipelines.ts

@@ -5,16 +5,18 @@ import { PipelineRun } from "../../apiDefinitions";
 
 export interface fetchPipelinesProps {
   pageParam: number;
+  perPage: number;
   signal?: AbortSignal;
 }
 
 // Fetch data from dashboard backend (or if we want, directly from the API)
 export const fetchPipelines = async ({
   pageParam = 1,
+  perPage,
   signal,
 }: fetchPipelinesProps): Promise<PipelineRun[]> => {
   const data = await fetch(
-    `${import.meta.env.VITE_API_URL}/runs?page=${pageParam}`,
+    `${import.meta.env.VITE_API_URL}/runs?page=${pageParam}&per_page=${perPage}`,
     { signal },
   )
     .then((response) => response.json())

frontend/src/queries/pipeline/pipelinesQuery.ts

@@ -1,25 +1,15 @@
 // Copyright Contributors to the Packit project.
 // SPDX-License-Identifier: MIT
 
-import { infiniteQueryOptions } from "@tanstack/react-query";
+import { queryOptions } from "@tanstack/react-query";
 import { fetchPipelines } from "./pipelines";
 
-export const pipelinesQueryOptions = () =>
-  infiniteQueryOptions({
-    queryKey: ["pipeline"],
-    queryFn: async ({ pageParam, signal }) =>
-      await fetchPipelines({ pageParam, signal }),
-    initialPageParam: 1,
-    getNextPageParam: (lastPage, _allPages, lastPageParam) => {
-      if (lastPage.length === 0) {
-        return undefined;
-      }
-      return lastPageParam + 1;
-    },
-    getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => {
-      if (firstPageParam <= 1) {
-        return undefined;
-      }
-      return firstPageParam - 1;
-    },
+export const pipelinesQueryOptions = (
+  pageParam: number,
+  perPage: number = 20,
+) =>
+  queryOptions({
+    queryKey: ["pipeline", { pageParam, perPage }],
+    queryFn: async ({ signal }) =>
+      await fetchPipelines({ pageParam, perPage, signal }),
   });