From 6b73f6fcc2f13cb832d7be3e382dddcdb3fd49be Mon Sep 17 00:00:00 2001
From: Stanislas Polu <spolu@dust.tt>
Date: Wed, 24 Jan 2024 14:56:56 +0100
Subject: [PATCH] front: Add serach to data source selection modal

---
 .../AssistantBuilderDataSourceModal.tsx          | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx b/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
index 1e5ec4c9394b..a6b20811a210 100644
--- a/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
@@ -4,6 +4,7 @@ import {
   Item,
   Modal,
   Page,
+  Searchbar,
   SliderToggle,
 } from "@dust-tt/sparkle";
 import type { ConnectorProvider, DataSourceType } from "@dust-tt/types";
@@ -18,6 +19,7 @@ import type { AssistantBuilderDataSourceConfiguration } from "@app/components/as
 import DataSourceResourceSelectorTree from "@app/components/DataSourceResourceSelectorTree";
 import { orderDatasourceByImportance } from "@app/lib/assistant";
 import { CONNECTOR_CONFIGURATIONS } from "@app/lib/connector_providers";
+import { subFilter } from "@app/lib/utils";
 import type { GetConnectorResourceParentsResponseBody } from "@app/pages/api/w/[wId]/data_sources/[name]/managed/parents";
 
 export default function AssistantBuilderDataSourceModal({
@@ -143,6 +145,12 @@ function PickDataSource({
   show: boolean;
   onPick: (dataSource: DataSourceType) => void;
 }) {
+  const [query, setQuery] = useState<string>("");
+
+  const filtered = dataSources.filter((ds) => {
+    return subFilter(query.toLowerCase(), ds.name.toLowerCase());
+  });
+
   return (
     <Transition show={show} className="mx-auto max-w-6xl">
       <Page>
@@ -150,7 +158,13 @@ function PickDataSource({
           title="Select Data Sources in:"
           icon={CloudArrowLeftRightIcon}
         />
-        {orderDatasourceByImportance(dataSources).map((ds) => (
+        <Searchbar
+          name="search"
+          onChange={setQuery}
+          value={query}
+          placeholder="Search..."
+        />
+        {orderDatasourceByImportance(filtered).map((ds) => (
           <Item.Navigation
             label={getDisplayNameForDataSource(ds)}
             icon={