Apply filters

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -22,6 +22,7 @@
   import { TableNames } from "constants"
   import { userSelectedResourceMap } from "builderStore"
 
+  export let searchTerm
   let openDataSources = []
 
   $: enrichedDataSources = enrichDatasources(
@@ -209,9 +210,11 @@
         {/if}
       </NavItem>
 
-      {#if datasource.open}
+      {#if datasource.open || searchTerm}
         <TableNavigator sourceId={datasource._id} {selectTable} />
-        {#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
+        {#each $queries.list.filter(query => query.datasourceId === datasource._id && (!searchTerm || query.name
+                ?.toLowerCase()
+                ?.indexOf(searchTerm.toLowerCase()) > -1)) as query}
           <NavItem
             indentLevel={1}
             icon="SQLQuery"

packages/builder/src/components/common/SearchBox.svelte

@@ -4,8 +4,8 @@
 
   export let title
   export let placeholder
+  export let value
 
-  let searchValue
   let searchInput
   let search = false
 
@@ -32,7 +32,7 @@
 <div class="header" class:search>
   <input
     readonly={!search}
-    bind:value={searchValue}
+    bind:value
     bind:this={searchInput}
     class="searchBox"
     class:hide={!search}

packages/builder/src/pages/builder/app/[application]/data/_layout.svelte

@@ -6,6 +6,8 @@
   import { datasources } from "stores/backend"
   import SearchBox from "components/common/SearchBox.svelte"
 
+  let searchValue
+
   $: {
     // If we ever don't have any data other than the users table, prompt the
     // user to add some
@@ -21,11 +23,15 @@
   {#if !$isActive("./new")}
     <Panel borderRight>
       <span class="panel-title-content" slot="panel-title-content">
-        <SearchBox title="Sources" placeholder="Search for sources" />
+        <SearchBox
+          title="Sources"
+          placeholder="Search for sources"
+          bind:value={searchValue}
+        />
       </span>
       <Layout paddingX="L" paddingY="XL" gap="S">
         <Button cta on:click={() => $goto("./new")}>Add source</Button>
-        <DatasourceNavigator />
+        <DatasourceNavigator searchTerm={searchValue} />
       </Layout>
     </Panel>
   {/if}