feat: TT-166 task list redesign (#229)

* fix(table): make list size customizable

* test(mock): change mock data on tasks in the experiment details page

Author: safeamiiir

aqueductcore/frontend/src/__mocks__/queries/tasks/getAllTasks.tsx

@@ -1,7 +1,8 @@
 import { selected_experiment } from "__mocks__/queries/experiment/getExperimentByIdMock";
 import { GET_ALL_TASKS } from "API/graphql/queries/tasks/getAllTasks";
-import { taskListRowsPerPageOptions } from "constants/constants";
+import { taskListRowsPerPageOptions, taskListRowsPerPageOptionsInExperimentDetailsPage } from "constants/constants";
 import { TasksDataMock } from "__mocks__/TasksDataMock";
+import { createdNewExperiment } from "__mocks__/ExperimentsDataMock";
 
 const request = {
     query: GET_ALL_TASKS,
@@ -33,7 +34,7 @@ export const getAllTasks_mock = {
                 ...request,
                 variables: {
                     offset: 0,
-                    limit: taskListRowsPerPageOptions[0],
+                    limit: taskListRowsPerPageOptionsInExperimentDetailsPage[0],
                     filters: {
                         experiment: {
                             type: 'UUID',
@@ -45,8 +46,33 @@ export const getAllTasks_mock = {
             result: {
                 data: {
                     tasks: {
-                        tasksData: TasksDataMock.slice(0, taskListRowsPerPageOptions[0]),
-                        totalTasksCount: TasksDataMock.slice(0, taskListRowsPerPageOptions[0]).length
+                        tasksData: TasksDataMock.slice(0, taskListRowsPerPageOptionsInExperimentDetailsPage[0]),
+                        totalTasksCount: TasksDataMock.slice(0, taskListRowsPerPageOptionsInExperimentDetailsPage[0]).length
+                    }
+                },
+            },
+            maxUsageCount: Number.POSITIVE_INFINITY,
+        },
+        // New experiment mock data (it's being used in ExperimentRecordsPage.test.tsx) with no task
+        {
+            request: {
+                ...request,
+                variables: {
+                    offset: 0,
+                    limit: taskListRowsPerPageOptionsInExperimentDetailsPage[0],
+                    filters: {
+                        experiment: {
+                            type: 'UUID',
+                            value: createdNewExperiment.uuid
+                        }
+                    }
+                }
+            },
+            result: {
+                data: {
+                    tasks: {
+                        tasksData: [],
+                        totalTasksCount: 0
                     }
                 },
             },

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;
@@ -109,7 +111,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__";