Filter at datasource navigator level

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

@@ -66,11 +66,27 @@
         views,
         viewsV2
       )
+
+      const dsTables = tables.list.filter(
+        table =>
+          table.sourceId === datasource._id &&
+          table._id !== TableNames.USERS &&
+          (!searchTerm ||
+            table.name?.toLowerCase()?.indexOf(searchTerm.toLowerCase()) > -1)
+      )
+      const dsQueries = queries.list.filter(
+        query =>
+          query.datasourceId === datasource._id &&
+          (!searchTerm ||
+            query.name?.toLowerCase()?.indexOf(searchTerm.toLowerCase()) > -1)
+      )
       return {
         ...datasource,
         selected,
         containsSelected,
         open: open || onlySource || !!searchTerm,
+        queries: dsQueries,
+        tables: dsTables,
       }
     })
   }
@@ -206,10 +222,8 @@
       </NavItem>
 
       {#if datasource.open}
-        <TableNavigator sourceId={datasource._id} {selectTable} {searchTerm} />
+        <TableNavigator tables={datasource.tables} {selectTable} />
-        {#each $queries.list.filter(query => query.datasourceId === datasource._id && (!searchTerm || query.name
+        {#each datasource.queries as query}
-                ?.toLowerCase()
-                ?.indexOf(searchTerm.toLowerCase()) > -1)) as query}
           <NavItem
             indentLevel={1}
             icon="SQLQuery"

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

@@ -1,5 +1,10 @@
 <script>
-  import { tables, views, viewsV2, database } from "stores/backend"
+  import {
+    tables as tablesStore,
+    views,
+    viewsV2,
+    database,
+  } from "stores/backend"
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
@@ -7,20 +12,10 @@
   import { goto, isActive } from "@roxi/routify"
   import { userSelectedResourceMap } from "builderStore"
 
-  export let searchTerm
+  export let tables
-  export let sourceId
   export let selectTable
 
-  $: sortedTables = $tables.list
+  $: sortedTables = tables.sort(alphabetical)
-    .filter(
-      table => table.sourceId === sourceId && table._id !== TableNames.USERS
-    )
-    .filter(
-      table =>
-        !searchTerm ||
-        table.name.toLowerCase()?.indexOf(searchTerm.toLowerCase()) > -1
-    )
-    .sort(alphabetical)
 
   const alphabetical = (a, b) => {
     return a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1
@@ -43,7 +38,7 @@
         icon={table._id === TableNames.USERS ? "UserGroup" : "Table"}
         text={table.name}
         selected={$isActive("./table/:tableId") &&
-          $tables.selected?._id === table._id}
+          $tablesStore.selected?._id === table._id}
         on:click={() => selectTable(table._id)}
         selectedBy={$userSelectedResourceMap[table._id]}
       >