feat: implement pagination for transaction log queries (#5281)

* Add pagination support for transaction logs.

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* Replace 'TransactionData' with 'data' variable.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/controllers/API/queries/transactions/use-get-transactions.ts

@@ -9,11 +9,23 @@ import { UseRequestProcessor } from "../../services/request-processor";
 interface TransactionsQueryParams {
   id: string;
   params?: Record<string, unknown>;
-  mode?: "union" | "intersection";
+  mode: "union" | "intersection";
   excludedColumns?: string[];
 }
 
+interface PaginationType {
+  page?: number;
+  size?: number;
+  total?: number;
+  pages?: number;
+}
+
+interface TransactionsPagination extends PaginationType {
+  items?: Array<object>;
+}
+
 interface TransactionsResponse {
+  pagination: PaginationType;
   rows: Array<object>;
   columns: Array<ColDef | ColGroupDef>;
 }
@@ -25,13 +37,12 @@ export const useGetTransactionsQuery: useQueryFunctionType<
   // Function body remains unchanged
   const { query } = UseRequestProcessor();
 
-  const responseFn = (data: object[]) => {
-    if (mode) {
-      const columns = extractColumnsFromRows(data, mode, excludedColumns);
-      return { rows: data, columns };
-    } else {
-      return data;
-    }
+  const responseFn = (data: TransactionsPagination) => {
+    const pagination: PaginationType = { ...data };
+
+    const rows = data.items ?? [];
+    const columns = extractColumnsFromRows(rows, mode, excludedColumns);
+    return { pagination: pagination, rows: rows, columns };
   };
 
   const getTransactionsFn = async () => {
@@ -41,16 +52,23 @@ export const useGetTransactionsQuery: useQueryFunctionType<
       config["params"] = { ...config["params"], ...params };
     }
 
-    const result = await api.get<object[]>(`${getURL("TRANSACTIONS")}`, config);
+    const result = await api.get<TransactionsPagination>(
+      `${getURL("TRANSACTIONS")}`,
+      config,
+    );
 
     return responseFn(result.data);
   };
 
-  const queryResult = query(["useGetTransactionsQuery"], getTransactionsFn, {
-    placeholderData: keepPreviousData,
-    refetchOnWindowFocus: false,
-    ...options,
-  });
+  const queryResult = query(
+    ["useGetTransactionsQuery", id, { ...params }],
+    getTransactionsFn,
+    {
+      placeholderData: keepPreviousData,
+      refetchOnWindowFocus: false,
+      ...options,
+    },
+  );
 
   return queryResult;
 };

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -1,10 +1,11 @@
 import IconComponent from "@/components/common/genericIconComponent";
+import PaginatorComponent from "@/components/common/paginatorComponent";
 import TableComponent from "@/components/core/parameterRenderComponent/components/tableComponent";
 import { useGetTransactionsQuery } from "@/controllers/API/queries/transactions";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowSettingsPropsType } from "@/types/components";
 import { ColDef, ColGroupDef } from "ag-grid-community";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import BaseModal from "../baseModal";
 
 export default function FlowLogsModal({
@@ -13,11 +14,17 @@ export default function FlowLogsModal({
 }: FlowSettingsPropsType): JSX.Element {
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
 
+  const [pageIndex, setPageIndex] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
   const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
   const [rows, setRows] = useState<any>([]);
 
   const { data, isLoading, refetch } = useGetTransactionsQuery({
     id: currentFlowId,
+    params: {
+      page: pageIndex,
+      size: pageSize,
+    },
     mode: "union",
   });
 
@@ -27,8 +34,18 @@ export default function FlowLogsModal({
       setColumns(columns.map((col) => ({ ...col, editable: true })));
       setRows(rows);
     }
-    if (open) refetch();
-  }, [data, open, isLoading]);
+  }, [data]);
+
+  useEffect(() => {
+    if (open) {
+      refetch();
+    }
+  }, [open]);
+
+  const handlePageChange = useCallback((newPageIndex, newPageSize) => {
+    setPageIndex(newPageIndex);
+    setPageSize(newPageSize);
+  }, []);
 
   return (
     <BaseModal open={open} setOpen={setOpen} size="x-large">
@@ -46,12 +63,24 @@ export default function FlowLogsModal({
           key={"Executions"}
           readOnlyEdit
           className="h-max-full h-full w-full"
-          pagination={rows.length === 0 ? false : true}
+          pagination={false}
           columnDefs={columns}
           autoSizeStrategy={{ type: "fitGridWidth" }}
           rowData={rows}
           headerHeight={rows.length === 0 ? 0 : undefined}
         ></TableComponent>
+        {!isLoading && (data?.pagination.total ?? 0) >= 10 && (
+          <div className="flex justify-end px-3 py-4">
+            <PaginatorComponent
+              pageIndex={data?.pagination.page ?? 1}
+              pageSize={data?.pagination.size ?? 10}
+              rowsCount={[12, 24, 48, 96]}
+              totalRowsCount={data?.pagination.total ?? 0}
+              paginate={handlePageChange}
+              pages={data?.pagination.pages}
+            />
+          </div>
+        )}
       </BaseModal.Content>
     </BaseModal>
   );