JobList: add Global Filter

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

Signed-off-by: Vallari Agrawal <[email protected]>

src/components/JobList/index.tsx

@@ -70,6 +70,23 @@ const columns: MRT_ColumnDef<Job>[] = [
       );
     },
   },
+  {
+    header: "tasks",
+    id: "tasks",
+    accessorFn: (row: Job) => {
+      const tasks = Object.values(row.tasks || {});
+      const keys = tasks.map(task => Object.keys(task)[0]);
+      const result = keys.join(', ');
+      return result
+    },
+    size: 150,
+    enableColumnFilter: true,
+  },
+  {
+    header: "description",
+    accessorKey: "description",
+    size: 120,
+  },
   {
     header: "posted",
     id: "posted",
@@ -209,15 +226,17 @@ export default function JobList({ query, sortMode }: JobListProps) {
     ...options,
     columns,
     data: data,
-    rowCount: data.length,
     enableFacetedValues: true,
+    enableGlobalFilter: true,
     initialState: {
       ...options.initialState,
       columnVisibility: {
         posted: false,
         updated: false,
         duration: false,
         waiting: false,
+        tasks: false,
+        description: false,
       },
       pagination: {
         pageIndex: 0,

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;