Update navigation bar to only show tables in selected schema

frontend/src/app/databases/database-selector.tsx

@@ -1,14 +1,19 @@
-import React, { useEffect, useState } from "react";
-import { H6, Menu, MenuDivider, MenuItem, Text } from "@blueprintjs/core";
-import { useSelectedDatabase } from "@/stores";
+import { MenuDivider, MenuItem, Text } from "@blueprintjs/core";
 import {
   useDatabaseSchemas,
   useDatabases,
   useUpdateDatabase,
 } from "@/data/use-database";
 import AddDatabase from "@/app/databases/add-database";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-const DatabaseSelector = ({ selectedDatabase, setSelectedDatabase }: any) => {
+
+const DatabaseSelector = ({
+  selectedDatabase,
+  setSelectedDatabase,
+  selectedSchema,
+  setSelectedSchema,
+}: any) => {
   const {
     data: databases,
     isLoading: isLoadingDatabases,
@@ -22,14 +27,9 @@ const DatabaseSelector = ({ selectedDatabase, setSelectedDatabase }: any) => {
     useUpdateDatabase(selectedDatabase?.id);
 
   const [isOpen, setIsOpen] = useState(false);
-  const [selectedSchema, setSelectedSchema] = useState(
-    selectedDatabase?.schema,
-  );
 
   useEffect(() => {
-    if (selectedDatabase) {
-      setSelectedSchema(selectedDatabase.schema);
-    }
+    setSelectedSchema(undefined);
   }, [selectedDatabase]);
 
   const handleUpdateDatabaseSchema = async (schema: string) => {

frontend/src/app/navigation-bar.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { Relation } from "@/definitions";
 import {
   Card,
   SwitchCard,
@@ -44,6 +43,9 @@ export default function NavigationBar({}) {
     NavigationTabEnums | undefined
   >();
   const [selectedDatabase, setSelectedDatabase] = useSelectedDatabase();
+  const [selectedSchema, setSelectedSchema] = useState<string | undefined>(
+    undefined,
+  );
   const { darkMode, setDarkMode } = useDarkModeContext();
   const [tablesToggle, setTablesToggle] = useState<boolean>(true);
   const [queriesToggle, setQueriesToggle] = useState<boolean>(true);
@@ -52,7 +54,7 @@ export default function NavigationBar({}) {
     data: tables,
     isLoading: isLoadingTables,
     error: tablesError,
-  } = useTables(selectedDatabase.id);
+  } = useTables(selectedDatabase.id, selectedSchema);
 
   const handlePageChange = (id: string) => {
     router.push(`/${id}`);
@@ -106,6 +108,8 @@ export default function NavigationBar({}) {
           <DatabaseSelector
             selectedDatabase={selectedDatabase}
             setSelectedDatabase={setSelectedDatabase}
+            selectedSchema={selectedSchema}
+            setSelectedSchema={setSelectedSchema}
           />
         </Menu>
       </div>

frontend/src/data/use-tables.ts

@@ -1,17 +1,25 @@
 import useSWR, { useSWRConfig } from "swr";
 import useSWRMutation from "swr/mutation";
-import { mergeByKey } from "@/utils/merge-by-key";
 import { backendDelete, backendGet, backendUpdate } from "./client";
 import { HydratedTable, UpdateTable } from "@/definitions";
 import * as _ from "lodash";
 import { FilterStep, OrderStep, TakeStep } from "@/definitions/pipeline";
 
-export function useTables(databaseId?: string) {
+export function useTables(databaseId?: string, schema?: string) {
   const { data, isLoading, isValidating, error } = useSWR<HydratedTable[]>(
     databaseId ? `/tables/db/${databaseId}` : null,
     backendGet,
   );
 
+  if (schema) {
+    return {
+      data: data?.filter((table) => table.schema === schema),
+      isLoading,
+      isValidating,
+      error,
+    };
+  }
+
   return { data, isLoading, isValidating, error };
 }