feat: add a manual refresh schema button

src/components/ConnectionSidebar.tsx

@@ -124,6 +124,28 @@ const ConnectionSidebar = () => {
     }
   }, [schemaList, currentConversation]);
 
+  const syncDatabaseList = async () => {
+    if (!currentConnectionCtx?.connection) {
+      return;
+    }
+
+    const prevDatabase = currentConnectionCtx.database;
+    const databaseList = await connectionStore.getOrFetchDatabaseList(currentConnectionCtx.connection, true);
+
+    // Retain the existing database if it exists in the new database list.
+    const database = databaseList.find((database) => database.name === prevDatabase?.name);
+    connectionStore.setCurrentConnectionCtx({
+      connection: currentConnectionCtx.connection,
+      database: database ? database : head(databaseList),
+    });
+    if (database) {
+      tableSchemaLoadingState.setLoading();
+      connectionStore.getOrFetchDatabaseSchema(database).then(() => {
+        tableSchemaLoadingState.setFinish();
+      });
+    }
+  };
+
   const handleDatabaseNameSelect = async (databaseName: string) => {
     if (!currentConnectionCtx?.connection) {
       return;
@@ -192,13 +214,23 @@ const ConnectionSidebar = () => {
           <div className="relative p-4 pb-0 w-64 h-full overflow-y-auto flex flex-col justify-start items-start bg-gray-100 dark:bg-zinc-700">
             <img className="px-4 shrink-0" src="/chat-logo.webp" alt="" />
             <div className="w-full grow">
-              {isRequestingDatabase && (
+              {isRequestingDatabase ? (
-                <div className="w-full h-12 flex flex-row justify-start items-center px-4 sticky top-0 border z-1 mb-4 mt-2 rounded-lg text-sm text-gray-600 dark:text-gray-400">
+                <div className="w-full h-12 flex flex-row justify-start items-center px-4 sticky top-0 border z-1 mb-4 mt-4 rounded-lg text-sm text-gray-600 dark:text-gray-400">
                   <Icon.BiLoaderAlt className="w-4 h-auto animate-spin mr-1" /> {t("common.loading")}
                 </div>
+              ) : (
+                currentConnectionCtx && (
+                  <button
+                    onClick={() => syncDatabaseList()}
+                    className="flex space-x-1 items-center justify-center mb-4 mt-4 w-full px-2 py-1 border rounded-lg dark:text-gray-300 bg-white dark:bg-zinc-700 hover:bg-gray-100 dark:hover:bg-zinc-800"
+                  >
+                    <Icon.BiRefresh className="h-6 w-auto" />
+                    <span>{t("connection.refresh-schema")}</span>
+                  </button>
+                )
               )}
               {databaseList.length > 0 && (
-                <div className="w-full sticky top-0 z-1 mt-4">
+                <div className="w-full sticky top-0 z-1">
                   <Select
                     className="w-full px-4 py-3 !text-base"
                     value={currentConnectionCtx?.database?.name}

src/locales/en.json

@@ -28,6 +28,7 @@
     "self": "Connection",
     "new": "Create Connection",
     "edit": "Edit Connection",
+    "refresh-schema": "Refresh Schema",
     "select-database": "Select your database",
     "select-table": "Select your table",
     "select-schema": "Select your Schema",

src/locales/zh.json

@@ -28,6 +28,7 @@
     "self": "连接",
     "new": "创建连接",
     "edit": "编辑连接",
+    "refresh-schema": "刷新 Schema",
     "select-database": "选择数据库",
     "select-table": "选择数据表",
     "select-schema": "选择 Schema",

src/store/connection.ts

@@ -4,7 +4,6 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { Connection, Database, Engine, ResponseObject, Schema } from "@/types";
 import { countTextTokens, generateUUID } from "@/utils";
-import { count } from "console";
 
 interface ConnectionContext {
   connection: Connection;