chore: support not show the native sql (#726)

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

Author: LinuxSuRen

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

@@ -9,6 +9,7 @@ import { GetDataManagerPreference, SetDataManagerPreference } from './cache'
 import { ElMessage } 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"
 import HistoryInput from '../components/HistoryInput.vue'
 import type { Ref } from 'vue'
 import { Refresh, Document } from '@element-plus/icons-vue'
@@ -153,6 +154,7 @@ API.GetStores((data) => {
   loadingStores.value = false
 })
 
+const showNativeSQL = ref(true)
 const ormDataHandler = (data: QueryData) => {
   const result = [] as any[]
   const cols = new Set<string>()
@@ -168,7 +170,7 @@ const ormDataHandler = (data: QueryData) => {
 
   columns.value = [] as string[]
   data.meta.labels = data.meta.labels.filter((item) => {
-    if (item.key === '_native_sql') {
+    if (showNativeSQL.value && item.key === '_native_sql') {
       sqlQuery.value = item.value
       return false
     }
@@ -210,15 +212,15 @@ const keyValueDataHandler = (data: QueryData) => {
     })
   })
 }
-
 const sqlConfig = ref({
   dialect: StandardSQL,
   defaultSchema: queryDataMeta.value.currentDatabase,
   upperCaseKeywords: true,
   schema: {}
-})
+} as SQLConfig)
 
 const executeQuery = async () => {
+  showNativeSQL.value = true
   if (sqlQuery.value === '') {
     switch (kind.value) {
       case ExtensionKind.ExtensionKindElasticsearch:
@@ -291,6 +293,13 @@ Magic.AdvancedKeys([{
   Keys: ['Ctrl+E', 'Ctrl+Enter'],
   Func: executeQuery,
   Description: 'Execute query'
+}, {
+  Keys: ['Ctrl+Shift+O'],
+  Func: () => {
+    showNativeSQL.value = false
+    executeWithQuery(sqlQuery.value)
+  },
+  Description: 'Execute query without showing native SQL'
 }])
 </script>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from 'vue'
+import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Edit, Delete, Search, CopyDocument, Help } from '@element-plus/icons-vue'
 import JsonViewer from 'vue-json-viewer'
@@ -20,9 +20,7 @@ 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 { NewLanguageComplete } from './languageComplete'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/merge/merge.js'
 import 'codemirror/addon/merge/merge.css'
@@ -34,36 +32,7 @@ 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 jsonComplete = NewLanguageComplete(jsonLanguage)
 const { t } = useI18n()
 
 const props = defineProps({

console/atest-ui/src/views/languageComplete.ts

@@ -0,0 +1,38 @@
+import { Language, LanguageSupport } from "@codemirror/language"
+import { CompletionContext } from "@codemirror/autocomplete"
+import type { Completion } from "@codemirror/autocomplete"
+import { API } from './net'
+import { ref } from 'vue'
+
+const templateFuncs = ref([] as Completion[])
+function tplFuncCompletions(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
+  }
+}
+
+export const NewLanguageComplete = (lang: Language) => {
+    return new LanguageSupport(lang, lang.data.of(
+        {autocomplete: tplFuncCompletions}
+    ))
+}