From a40ae04aa3c80d9d1ea3ec0817a3ed34e909cda4 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Mon, 27 Jan 2025 12:50:18 +0000
Subject: [PATCH] Add workflow table name filter

---
 .gitignore                             |  4 +-
 src/pages/approval-workflows/index.tsx | 76 ++++++++++++++++----------
 2 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/.gitignore b/.gitignore
index 30f9f1ed..46468831 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,4 +40,6 @@ next-env.d.ts
 .env
 .yarn/*
 .history*
-__ENV.js
\ No newline at end of file
+__ENV.js
+
+settings.json
\ No newline at end of file
diff --git a/src/pages/approval-workflows/index.tsx b/src/pages/approval-workflows/index.tsx
index d22d9326..556e6694 100644
--- a/src/pages/approval-workflows/index.tsx
+++ b/src/pages/approval-workflows/index.tsx
@@ -17,7 +17,7 @@ import clsx from "clsx";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { BsTrash } from "react-icons/bs";
 import { FaRegEdit } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
@@ -25,6 +25,7 @@ import { toast, ToastContainer } from "react-toastify";
 
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 import { FaRegClone } from "react-icons/fa6";
+import Input from "@/components/Low/Input";
 
 const columnHelper = createColumnHelper<ApprovalWorkflow>();
 
@@ -64,15 +65,10 @@ const StatusClassNames: { [key in ApprovalWorkflowStatus]: string } = {
     rejected: "bg-red-100 text-red-800 border border-red-300 before:content-[''] before:w-2 before:h-2 before:bg-red-500 before:rounded-full before:inline-block before:mr-2",
 };
 
-type CustomStatus = ApprovalWorkflowStatus | "all";
-type CustomEntity = EntityWithRoles | "all";
+type CustomStatus = ApprovalWorkflowStatus | undefined;
+type CustomEntity = EntityWithRoles["id"] | undefined;
 
 const STATUS_OPTIONS = [
-    {
-        label: "All",
-        value: "all",
-        filter: (x: ApprovalWorkflow) => true,
-    },
     {
         label: "Approved",
         value: "approved",
@@ -100,12 +96,6 @@ interface Props {
 export default function ApprovalWorkflows({ user, workflows, workflowsAssignees, userEntitiesWithLabel }: Props) {
 
     const ENTITY_OPTIONS = [
-        {
-            label: "All",
-            value: "all",
-            filter: (x: ApprovalWorkflow) =>
-                userEntitiesWithLabel.some(entity => entity.id === x.entityId),
-        },
         ...userEntitiesWithLabel
             .map(entity => ({
                 label: entity.label,
@@ -117,23 +107,43 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
 
     const [filteredWorkflows, setFilteredWorkflows] = useState<ApprovalWorkflow[]>([]);
 
-    const [statusFilter, setStatusFilter] = useState<CustomStatus>("all");
-    const [entityFilter, setEntityFilter] = useState<CustomEntity>("all");
+    const [statusFilter, setStatusFilter] = useState<CustomStatus>(undefined);
+    const [entityFilter, setEntityFilter] = useState<CustomEntity>(undefined);
+    const [nameFilter, setNameFilter] = useState<string>("");
 
     useEffect(() => {
-        const filters = [];
-        if (statusFilter) {
-            const filter = STATUS_OPTIONS.find((x) => x.value === statusFilter)?.filter;
-            if (filter) filters.push(filter);
+        const filters: Array<(workflow: ApprovalWorkflow) => boolean> = [];
+    
+        if (statusFilter && statusFilter !== undefined) {
+            const statusOption = STATUS_OPTIONS.find((x) => x.value === statusFilter);
+            if (statusOption && statusOption.filter) {
+                filters.push(statusOption.filter);
+            }
         }
-        if (entityFilter) {
-            const filter = ENTITY_OPTIONS.find((x) => x.value === entityFilter)?.filter;
-            if (filter) filters.push(filter);
+    
+        if (entityFilter && entityFilter !== undefined) {
+            const entityOption = ENTITY_OPTIONS.find((x) => x.value === entityFilter);
+            if (entityOption && entityOption.filter) {
+                filters.push(entityOption.filter);
+            }
         }
-
-        setFilteredWorkflows([...filters.reduce((d, f) => d.filter(f), workflows)]);
+    
+        if (nameFilter.trim() !== "") {
+            const nameFilterFunction = (workflow: ApprovalWorkflow) =>
+                workflow.name.toLowerCase().includes(nameFilter.toLowerCase());
+            filters.push(nameFilterFunction);
+        }
+    
+        // Apply all filters
+        const filtered = workflows.filter(workflow => filters.every(filterFn => filterFn(workflow)));
+        setFilteredWorkflows(filtered);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [workflows, statusFilter, entityFilter]);
+    }, [workflows, statusFilter, entityFilter, nameFilter]);
+    
+
+    const handleNameFilterChange = (name: ApprovalWorkflow["name"]) => {
+        setNameFilter(name);
+    };
 
     const deleteApprovalWorkflow = (id: string, name: string) => {
         if (!confirm(`Are you sure you want to delete this Approval Workflow?`)) return;
@@ -320,6 +330,16 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                     </div>
 
                     <div className="flex w-full items-center gap-4">
+                        <div className="flex w-full flex-col gap-3">
+                            <label className="text-mti-gray-dim text-base font-normal">Name</label>
+                            <Input
+                                name="nameFilter"
+                                type="text"
+                                value={nameFilter}
+                                onChange={handleNameFilterChange}
+                                placeholder="Filter by name..."
+                            />
+                        </div>
                         <div className="flex w-full flex-col gap-3">
                             <label className="text-mti-gray-dim text-base font-normal">Status</label>
                             <Select
@@ -327,7 +347,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 value={STATUS_OPTIONS.find((x) => x.value === statusFilter)}
                                 onChange={(value) => setStatusFilter((value?.value as ApprovalWorkflowStatus) ?? undefined)}
                                 isClearable
-                                placeholder="Status..."
+                                placeholder="Filter by status..."
                             />
                         </div>
                         <div className="flex w-full flex-col gap-3">
@@ -337,7 +357,7 @@ export default function ApprovalWorkflows({ user, workflows, workflowsAssignees,
                                 value={ENTITY_OPTIONS.find((x) => x.value === entityFilter)}
                                 onChange={(value) => setEntityFilter((value?.value as CustomEntity) ?? undefined)}
                                 isClearable
-                                placeholder="Entity..."
+                                placeholder="Filter by entity..."
                             />
                         </div>
                     </div>