Merge pull request #482 from DrDroidLab/integration

Integration
DrDroidLab · Sep 19, 2024 · e339a38 · e339a38
2 parents 140d7b1 + 82227dc
commit e339a38
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/web/src/components/Playbooks/create/IntegrationsList.tsx b/web/src/components/Playbooks/create/IntegrationsList.tsx
@@ -3,21 +3,32 @@ import { useEffect, useState } from "react";
 import { CircularProgress } from "@mui/material";
 import { usePlaybookBuilderOptionsQuery } from "../../../store/features/playbook/api/index.ts";
 import IntegrationOption from "./IntegrationOption";
+import useDebounce from "../../../hooks/common/useDebounce.ts";
 
 function IntegrationsList() {
   const { data, isLoading } = usePlaybookBuilderOptionsQuery();
   const supportedTaskTypes = data?.supportedTaskTypes;
   const [query, setQuery] = useState("");
   const [items, setItems] = useState(supportedTaskTypes || []);
+  const queryString = useDebounce(query, 250);
 
   const search = () => {
     if (!query) {
       setItems([]);
     }
+    const queryStr = queryString.toLowerCase();
     const filteredItems = supportedTaskTypes?.filter(
       (item) =>
-        item?.source?.toLowerCase().includes(query) ||
-        item?.display_name?.toLowerCase().includes(query),
+        item?.source?.toLowerCase().includes(queryStr) ||
+        item?.display_name?.toLowerCase().includes(queryStr) ||
+        item?.task_type?.toLowerCase().includes(queryStr) ||
+        item?.result_type?.toLowerCase().includes(queryStr) ||
+        item?.category?.toLowerCase().includes(queryStr) ||
+        (item?.form_fields ?? []).some(
+          (f: any) =>
+            f?.key_name?.toLowerCase().includes(queryStr) ||
+            f?.display_name?.toLowerCase().includes(queryStr),
+        ),
     );
     setItems(filteredItems || []);
   };
@@ -37,10 +48,10 @@ function IntegrationsList() {
   }, {});
 
   useEffect(() => {
-    if (query) {
+    if (queryString) {
       search();
     }
-  }, [query]);
+  }, [queryString]);
 
   return (
     <div className="flex flex-col">

diff --git a/web/src/hooks/common/useDebounce.ts b/web/src/hooks/common/useDebounce.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 
-function useDebounce<T>(value: T, delay: number): T {
+function useDebounce<T>(value: T, delay: number = 500): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {