Merge pull request #414 from bento-platform/features/drop_box_search_…

…text

add text search to drop-box

src/components/manager/ManagerDropBoxContent.js

@@ -13,6 +13,7 @@ import {
   Dropdown,
   Empty,
   Form,
+  Input,
   Layout,
   Modal,
   Spin,
@@ -280,6 +281,23 @@ DropBoxInformation.propTypes = {
 
 const DROP_BOX_ROOT_KEY = "/";
 
+const filterTree = (nodes, searchTerm) => {
+  return nodes.reduce((acc, node) => {
+    const matchesSearch = node.title.toLowerCase().includes(searchTerm);
+    const filteredChildren = node.children ? filterTree(node.children, searchTerm) : [];
+    const hasMatchingChildren = filteredChildren.length > 0;
+
+    if (matchesSearch || hasMatchingChildren) {
+      acc.push({
+        ...node,
+        children: filteredChildren,
+      });
+    }
+
+    return acc;
+  }, []);
+};
+
 const ManagerDropBoxContent = () => {
   const dispatch = useDispatch();
 
@@ -293,21 +311,29 @@ const ManagerDropBoxContent = () => {
   const ingestionWorkflows = workflowsByType.ingestion.items;
   const ingestionWorkflowsByID = workflowsByType.ingestion.itemsByID;
 
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const handleSearchChange = useCallback((event) => {
+    const newSearchTerm = event.target.value.toLowerCase();
+    setSearchTerm(newSearchTerm);
+    setSelectedEntries(newSearchTerm === "" ? [DROP_BOX_ROOT_KEY] : []);
+  }, []);
+
   const filesByPath = useMemo(
     () => Object.fromEntries(recursivelyFlattenFileTree([], tree).map((f) => [f.relativePath, f])),
     [tree],
   );
 
-  const treeData = useMemo(
-    () => [
+  const treeData = useMemo(() => {
+    const unfilteredTree = generateFileTree(tree);
+    return [
       {
         title: "Drop Box",
         key: DROP_BOX_ROOT_KEY,
-        children: generateFileTree(tree, ""),
+        children: filterTree(unfilteredTree, searchTerm),
       },
-    ],
-    [tree],
-  );
+    ];
+  }, [tree, searchTerm]);
 
   // Start with drop box root selected at first
   //  - Will enable the upload button so that users can quickly upload from initial page load
@@ -572,6 +598,15 @@ const ManagerDropBoxContent = () => {
             <Button icon={<UploadOutlined />} onClick={handleUpload} disabled={uploadDisabled}>
               Upload
             </Button>
+
+            <Input
+              placeholder="Search files..."
+              value={searchTerm}
+              onChange={handleSearchChange}
+              allowClear={true}
+              style={{ marginBottom: 8, maxWidth: 300 }}
+            />
+
             <Dropdown.Button
               menu={workflowMenu}
               disabled={ingestIntoDatasetDisabled}