feat: support filter the database table names

ui/.env.development

@@ -0,0 +1 @@
+VITE_API_URL=http://127.0.0.1:8080

ui/index.html

@@ -16,6 +16,7 @@
     <script type="text/javascript">
       document.getElementById('enable-plugin')?.addEventListener('click', () => {
         sessionStorage.setItem('mode', 'dev');
+        window.location.reload();
       });
     </script>
     <script type="module" src="/src/main.ts"></script>

ui/src/components/DataManager.vue

@@ -7,7 +7,7 @@ import type { Store } from './store'
 import { Driver, GetDriverName, ExtensionKind } from './store'
 import type { Pair } from './types'
 import { GetDataManagerPreference, SetDataManagerPreference } from './cache'
-import { ElMessage } from 'element-plus'
+import {ElMessage, type ElTree} from 'element-plus'
 import { Codemirror } from 'vue-codemirror'
 import { sql, StandardSQL, MySQL, PostgreSQL, Cassandra } from "@codemirror/lang-sql"
 import type { SQLConfig } from "@codemirror/lang-sql"
@@ -44,6 +44,7 @@ const largeContentDialogVisible = ref(false)
 interface TreeItem {
   label: string
 }
+const tablesTreeRef = ref<InstanceType<typeof ElTree>>()
 const tablesTree = ref([] as TreeItem[])
 const storeChangedEvent = (s: string) => {
   kind.value = ''
@@ -336,6 +337,19 @@ const executeQueryWithoutShowingNativeSQL = () => {
     executeWithQuery(sqlQuery.value)
 }
 
+const tableNameFilter = ref('')
+watch(tableNameFilter, (val: string) => {
+  tablesTreeRef.value!.filter(val)
+})
+const tableNameFilterFunc = (value: string, row: any) => {
+  let filter = ''
+  if (value && value.toLowerCase) {
+    filter = value.toLowerCase().trim()
+    return row.label.toLowerCase().indexOf(filter) != -1
+  }
+  return true
+}
+
 Magic.LoadMagicKeys('DataManager', new Map([
   ["executeQuery", executeQuery],
   ["executeWithSelectedQuery", executeWithSelectedQuery],
@@ -359,7 +373,9 @@ Magic.LoadMagicKeys('DataManager', new Map([
             <el-option v-for="item in queryDataMeta.databases" :key="item" :label="item"
                        :value="item"></el-option>
           </el-select>
+          <el-input v-model="tableNameFilter" :placeholder="t('tip.filter')" style="padding: 5px;" clearable />
           <el-tree :data="tablesTree" node-key="label" highlight-current
+                   :filter-node-method="tableNameFilterFunc" ref="tablesTreeRef"
                    draggable>
             <template #default="{node, data}">
               <div class="space-between">

ui/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 declare global {
@@ -12,21 +12,23 @@ interface VuePlugin {
   unmount(): void;
 }
 
-export default defineConfig({
-  plugins: [vue()],
-  define: {
-    'process.env.NODE_ENV': JSON.stringify('production'),
-    'process.env': JSON.stringify({}),
-    'global': 'window'
-  },
-  resolve: {
-    alias: {
-      'process': 'process/browser'
-    }
-  },
-  build: {
-    lib: {
-      entry: ('src/main.ts'),
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, './');
+  return {
+    plugins: [vue()],
+    define: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env': JSON.stringify({}),
+      'global': 'window'
+    },
+    resolve: {
+      alias: {
+        'process': 'process/browser'
+      }
+    },
+    build: {
+      lib: {
+        entry: ('src/main.ts'),
       name: 'ATestPlugin',
       fileName: (format) => `atest-ext-store-database.${format}.js`
     },
@@ -42,33 +44,29 @@ export default defineConfig({
   server: {
     proxy: {
       '/server.Runner': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/server.Mock': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/mock/server': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/browser': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/v3': {
-        target: 'http://127.0.0.1:8080',
-        changeOrigin: true,
-      },
-      '/oauth': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/api': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
     },
   },
-});
+}});