feat: using code editor instead of input for sql editing (#678)

* feat: using code editor instead of input for sql editing

* update jq

---------

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

Author: LinuxSuRen

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

@@ -25,6 +25,7 @@ const columns = ref([] as string[])
 const queryTip = ref('')
 const loadingStores = ref(true)
 const showOverflowTooltip = ref(true)
+const complexEditor = ref(false)
 const dataFormat = ref('table')
 const dataFormatOptions = ['table', 'json']
 const queryDataMeta = ref({} as QueryDataMeta)
@@ -48,8 +49,10 @@ watch(store, (s) => {
         case 'atest-store-elasticsearch':
         case 'atest-store-etcd':
             sqlQuery.value = '*'
+            complexEditor.value = false
             break
         default:
+            complexEditor.value = true
             queryDataMeta.value.currentDatabase = ''
             sqlQuery.value = ''
     }
@@ -296,7 +299,7 @@ watch(largeContent, (e) => {
                                 </el-form-item>
                             </el-col>
                             <el-col :span="16">
-                                <el-form-item>
+                                <el-form-item v-if="!complexEditor">
                                     <HistoryInput :placeholder="queryTip" :callback="executeQuery" v-model="sqlQuery" />
                                 </el-form-item>
                             </el-col>
@@ -328,6 +331,7 @@ watch(largeContent, (e) => {
                             </el-col>
                         </el-row>
                     </el-form>
+                    <Codemirror v-model="sqlQuery" v-if="complexEditor" style="height: 180px"/>
                 </el-header>
                 <el-main>
                     <div style="display: flex; gap: 8px;">
@@ -336,7 +340,7 @@ watch(largeContent, (e) => {
                         <el-tag type="primary" v-for="label in queryDataMeta.labels">{{ label.value }}</el-tag>
                         <el-check-tag type="primary" :checked="showOverflowTooltip" @change="overflowChange" v-if="queryResult.length > 0">overflow</el-check-tag>
                     </div>
-                    <el-table :data="queryResult" stripe v-if="dataFormat === 'table'" height="calc(100vh - 200px)" @cell-dblclick="tryShowPrettyJSON">
+                    <el-table :data="queryResult" stripe v-if="dataFormat === 'table'" height="calc(100vh - 380px)" @cell-dblclick="tryShowPrettyJSON">
                         <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable :show-overflow-tooltip="showOverflowTooltip" />
                     </el-table>
                     <Codemirror v-else-if="dataFormat === 'json'" v-model="queryResultAsJSON" />

e2e/code-generator/Dockerfile

@@ -1,12 +1,13 @@
 ARG LAN_ENV=docker.io/library/golang:1.21
 
 FROM ghcr.io/linuxsuren/api-testing:master AS atest
-FROM docker.io/stedolan/jq AS jq
+FROM ghcr.io/linuxsuren/hd:v0.0.42 as downloader
+RUN hd install jq
 FROM $LAN_ENV
 
 WORKDIR /workspace
 COPY . .
-COPY --from=jq /usr/local/bin/jq /usr/local/bin/jq
+COPY --from=downloader /usr/local/bin/jq /usr/local/bin/jq
 COPY --from=atest /usr/local/bin/atest /usr/local/bin/atest
 
 CMD [ "/workspace/entrypoint.sh" ]