feat: support sql completion for table names (#722)

* feat: support sql completion for table names

* add template functions autocomplation

---------

Co-authored-by: rick <linuxsuren@users.noreply.github.com>

Author: LinuxSuRen

console/atest-ui/package-lock.json

@@ -16,6 +16,8 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-sql": "github:codemirror/lang-sql",
     "@vueuse/core": "^10.11.0",
     "codemirror": "^5.65.17",
     "diff-match-patch": "^1.0.5",

console/atest-ui/package.json

@@ -42,6 +42,9 @@
 
   --page-title-right-padding: 10px;
   --page-title-bottom-padding: 5px;
+
+  --sql-editor-height: 180px;
+  --payload-editor-height: 180px;
 }
 
 *,
@@ -99,3 +102,8 @@ html.dark .el-main {
   height: 32px;
   padding-bottom: var(--page-title-bottom-padding, 0px);
 }
+
+.block-align-right {
+  display: flex;
+  justify-content: flex-end;
+}

console/atest-ui/src/assets/base.css

@@ -2,7 +2,6 @@
 
 #app {
     margin: 0 auto;
-    {{/* padding-top: 40px; */}}
     height: 100vh;
     font-weight: normal;
 }

console/atest-ui/src/assets/main.css

@@ -11,6 +11,7 @@
         "send": "Send",
         "copy": "Copy",
         "ok": "OK",
+        "next-page": "Next",
         "reload": "Reload",
         "insertSample": "Insert Sample",
         "toolbox": "Tool Box",

console/atest-ui/src/locales/en.json

@@ -11,6 +11,7 @@
         "send": "发送",
         "copy": "拷贝",
         "ok": "确定",
+        "next-page": "下一页",
         "reload": "重新加载",
         "insertSample": "插入样例",
         "toolbox": "工具箱",

console/atest-ui/src/locales/zh.json

@@ -7,6 +7,7 @@ import type { Pair } from './types'
 import { GetDataManagerPreference, SetDataManagerPreference } from './cache'
 import { ElMessage } from 'element-plus'
 import { Codemirror } from 'vue-codemirror'
+import { sql, StandardSQL } from "@codemirror/lang-sql"
 import HistoryInput from '../components/HistoryInput.vue'
 import type { Ref } from 'vue'
 import { Refresh, Document } from '@element-plus/icons-vue'
@@ -176,7 +177,9 @@ const ormDataHandler = (data: QueryData) => {
   }
 
   tablesTree.value = []
+  sqlConfig.value.schema = {}
   queryDataMeta.value.tables.forEach((i) => {
+    sqlConfig.value.schema[i] = []
     tablesTree.value.push({
       label: i,
     })
@@ -194,6 +197,13 @@ const keyValueDataHandler = (data: QueryData) => {
   })
 }
 
+const sqlConfig = ref({
+  dialect: StandardSQL,
+  defaultSchema: queryDataMeta.value.currentDatabase,
+  upperCaseKeywords: true,
+  schema: {}
+})
+
 const executeQuery = async () => {
   if (sqlQuery.value === '') {
     switch (kind.value) {
@@ -264,7 +274,7 @@ watch(largeContent, (e) => {
 })
 
 Magic.AdvancedKeys([{
-  Keys: ['Ctrl+E'],
+  Keys: ['Ctrl+E', 'Ctrl+Enter'],
   Func: executeQuery,
   Description: 'Execute query'
 }])
@@ -342,11 +352,16 @@ Magic.AdvancedKeys([{
                 </el-input>
               </el-col>
               <el-col :span="2">
-                <el-button type="primary" @click="nextPage">Next</el-button>
+                <el-button type="primary" @click="nextPage">{{ t("button.next-page") }}</el-button>
               </el-col>
             </el-row>
           </el-form>
-          <Codemirror v-model="sqlQuery" v-if="complexEditor" style="height: 180px"/>
+            <Codemirror
+            v-model="sqlQuery"
+            v-if="complexEditor"
+            style="height: var(--sql-editor-height);"
+            :extensions="[sql(sqlConfig)]"
+            />
         </el-header>
         <el-main>
           <div style="display: flex; gap: 8px;">

console/atest-ui/src/views/DataManager.vue

@@ -19,6 +19,10 @@ import { Codemirror } from 'vue-codemirror'
 import jsonlint from 'jsonlint-mod'
 
 import CodeMirror from 'codemirror'
+import { json, jsonLanguage } from "@codemirror/lang-json"
+import { LanguageSupport } from "@codemirror/language"
+import { CompletionContext } from "@codemirror/autocomplete"
+import type { Completion } from "@codemirror/autocomplete"
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/merge/merge.js'
 import 'codemirror/addon/merge/merge.css'
@@ -30,6 +34,36 @@ window.DIFF_DELETE = -1;
 window.DIFF_INSERT = 1;
 window.DIFF_EQUAL = 0;
 
+const templateFuncs = ref([] as Completion[])
+function myCompletions(context: CompletionContext) {
+  if (templateFuncs.value.length == 0) {
+    API.FunctionsQuery("", "template", (e) => {
+      if (e.data) {
+        e.data.forEach((item: any) => {
+          templateFuncs.value.push({
+            label: item.key,
+            type: "text",
+          } as Completion)
+        })
+      }
+    })
+  }
+
+  let word = context.matchBefore(/\w*/) || {
+    from: "",
+    to: ""
+  }
+  if (word.from == word.to && !context.explicit)
+    return null
+  return {
+    from: word.from,
+    options: templateFuncs.value
+  }
+}
+const jsonComplete = new LanguageSupport(jsonLanguage, jsonLanguage.data.of(
+  {autocomplete: myCompletions}
+))
+
 const { t } = useI18n()
 
 const props = defineProps({
@@ -1141,6 +1175,8 @@ Magic.AdvancedKeys([{
             <Codemirror v-if="bodyType === 3 || bodyType === 5 || bodyType === 6"
               @blur="jsonFormat(-1)"
               v-model="testCaseWithSuite.data.request.body"
+              style="height: var(--payload-editor-height);"
+              :extensions="[json(), jsonComplete]"
               :disabled="isHistoryTestCase"/>
             <el-table :data="testCaseWithSuite.data.request.form" style="width: 100%" v-if="bodyType === 4">
               <el-table-column label="Key" width="180">