fix(table): make list size customizable

Author: safeamiiir

aqueductcore/frontend/src/components/organisms/TaskListInExperimentDetails/index.tsx

@@ -5,10 +5,10 @@ import { useState } from "react";
 import TaskExtensionActionName from "components/molecules/TaskListTableCells/TaskExtensionActionName";
 import TaskExtensionStatus from "components/molecules/TaskListTableCells/TaskExtensionStatus";
 import { ExperimentDataType, TaskDataType, TasksListColumnsType } from "types/globalTypes";
+import { taskListRowsPerPageOptionsInExperimentDetailsPage } from "constants/constants";
 import { dateFormatter, taskHistoryTableFormatter } from "helper/formatters";
 import { useGetAllTasks } from "API/graphql/queries/tasks/getAllTasks";
 import ExtensionsList from "components/organisms/ExtensionsList";
-import { taskListRowsPerPageOptions } from "constants/constants";
 import TasksListTable from "components/organisms/TasksListTable";
 import { Loading } from "components/atoms/Loading";
 import { Error } from "components/atoms/Error";
@@ -54,7 +54,7 @@ export const TasksListColumns: readonly TasksListColumnsType[] = [
 
 function TaskListInExperimentDetails({ experimentUuid }: { experimentUuid: ExperimentDataType['uuid'] }) {
     const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(taskListRowsPerPageOptions[0]);
+    const [rowsPerPage, setRowsPerPage] = useState(taskListRowsPerPageOptionsInExperimentDetailsPage[0]);
     const { data, loading, error } = useGetAllTasks({
         variables: {
             offset: page * rowsPerPage,
@@ -98,6 +98,7 @@ function TaskListInExperimentDetails({ experimentUuid }: { experimentUuid: Exper
             </Grid>
             <Box sx={{ mt: 2 }}>
                 <TasksListTable
+                    rowsPerPageOptions={taskListRowsPerPageOptionsInExperimentDetailsPage}
                     TaskRecordsColumns={TasksListColumns}
                     taskList={taskHistoryTableFormatter(tasks)}
                     maxHeight={`calc(100vh - ${tableHeightOffset}px)`}

aqueductcore/frontend/src/components/organisms/TasksListTable/index.tsx

@@ -12,11 +12,13 @@ import TaskDetailsModal from "components/organisms/TaskDetailsModal";
 import { taskListRowsPerPageOptions } from "constants/constants";
 
 function TasksListTable({
+    rowsPerPageOptions = taskListRowsPerPageOptions,
     TaskRecordsColumns,
     taskList,
     maxHeight,
     pageInfo,
 }: {
+    rowsPerPageOptions?: number[]
     TaskRecordsColumns: readonly TasksListColumnsType[];
     taskList: TaskDataType[];
     maxHeight?: string;
@@ -42,6 +44,7 @@ function TasksListTable({
         setRowsPerPage(+event.target.value);
         setPage(0);
     };
+    console.log('rowsPerPageOptions', rowsPerPageOptions)
     return (
         <Paper sx={{ width: "100%", overflow: "hidden" }}>
             <TableContainer sx={{ maxHeight }}>
@@ -109,7 +112,7 @@ function TasksListTable({
                 sx={{
                     borderTop: `1px solid ${grey[300]}`,
                 }}
-                rowsPerPageOptions={taskListRowsPerPageOptions}
+                rowsPerPageOptions={rowsPerPageOptions}
                 component="div"
                 count={count}
                 rowsPerPage={rowsPerPage}

aqueductcore/frontend/src/constants/constants.ts

@@ -8,7 +8,9 @@ export const DEBOUNCE_DELAY = 250; //ms
 // Pagination for Experiment Records
 export const experimentRecordsRowsPerPageOptions = [10, 25, 100];
 // Pagination for Tasks List
-export const taskListRowsPerPageOptions = [3];
+export const taskListRowsPerPageOptions = [10, 25, 100];
+// Pagination for Tasks List in experiment details page
+export const taskListRowsPerPageOptionsInExperimentDetailsPage = [3];
 
 export const FAVOURITE = "__favourite__";
 export const ARCHIVED = "__archived__";