From 1f79d6573bec264de2571190a35306f5fe73596b Mon Sep 17 00:00:00 2001
From: Vallari Agrawal <val.agl002@gmail.com>
Date: Sun, 1 Sep 2024 10:17:38 +0530
Subject: [PATCH] JobList: add Global Filter

This will allow to search across all fields of
all rows, in job list.

Signed-off-by: Vallari Agrawal <val.agl002@gmail.com>
---
 src/components/JobList/index.tsx | 40 +++++++++++++++++++++++++++++---
 src/lib/paddles.d.ts             |  6 +++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/JobList/index.tsx b/src/components/JobList/index.tsx
index 345319d..f7fcca0 100644
--- a/src/components/JobList/index.tsx
+++ b/src/components/JobList/index.tsx
@@ -70,6 +70,30 @@ const columns: MRT_ColumnDef<Job>[] = [
       );
     },
   },
+  {
+    header: "tasks",
+    id: "tasks",
+    accessorFn: (row: Job) => {
+      const tasks = Object.values(row.tasks || {});
+      const task_list = tasks.map(task => {
+          if (Object.keys(tasks).length > 0) 
+            return Object.keys(task)[0];
+          return [];
+        });
+      const result = task_list.join(', ');
+      return result;
+    },
+    size: 200,
+    filterFn: 'contains',
+    enableColumnFilter: true,
+  },
+  {
+    header: "description",
+    size: 200,
+    accessorFn: (row: Job) => row.description + "",
+    filterFn: 'contains',
+    enableColumnFilter: true,
+  },
   {
     header: "posted",
     id: "posted",
@@ -101,7 +125,7 @@ const columns: MRT_ColumnDef<Job>[] = [
     accessorFn: (row: Job) => {
       const start = Date.parse(row.started);
       const end = Date.parse(row.updated);
-      if (!end || !start) return null;
+      if (!end || !start) return "";
       return formatDuration(Math.round((end - start) / 1000));
     },
     enableColumnFilter: false,
@@ -121,7 +145,7 @@ const columns: MRT_ColumnDef<Job>[] = [
     accessorFn: (row: Job) => {
       const start = Date.parse(row.started);
       const end = Date.parse(row.updated);
-      if (!end || !start || !row.duration) return null;
+      if (!end || !start || !row.duration) return "";
       return formatDuration(Math.round((end - start) / 1000 - row.duration));
     },
     enableColumnFilter: false,
@@ -209,8 +233,15 @@ export default function JobList({ query, sortMode }: JobListProps) {
     ...options,
     columns,
     data: data,
-    rowCount: data.length,
     enableFacetedValues: true,
+    enableGlobalFilter: true,
+    enableGlobalFilterRankedResults: false,
+    positionGlobalFilter: "left",
+    globalFilterFn: 'contains',
+    muiSearchTextFieldProps: {
+      placeholder: 'Search across all fields',
+      sx: { minWidth: '200px' },
+    },
     initialState: {
       ...options.initialState,
       columnVisibility: {
@@ -218,6 +249,8 @@ export default function JobList({ query, sortMode }: JobListProps) {
         updated: false,
         duration: false,
         waiting: false,
+        tasks: false,
+        description: false,
       },
       pagination: {
         pageIndex: 0,
@@ -229,6 +262,7 @@ export default function JobList({ query, sortMode }: JobListProps) {
           desc: true,
         },
       ],
+      showGlobalFilter: true,
     },
     state: {
       isLoading: query.isLoading || query.isFetching,
diff --git a/src/lib/paddles.d.ts b/src/lib/paddles.d.ts
index aa3c086..7eb5cbf 100644
--- a/src/lib/paddles.d.ts
+++ b/src/lib/paddles.d.ts
@@ -23,9 +23,15 @@ export const JobStatuses = [
 
 export type JobStatus = (typeof JobStatuses)[number];
 
+export type Task = {
+  [key: string]: any;
+}
+
 export type Job = {
   id?: string;
   job_id: number;
+  tasks: Task;
+  description: string;
   name: string;
   suite: string;
   branch: string;