add http header autocomplete

Author: LinuxSuRen

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

@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import yaml from 'js-yaml';
 import { jsonSchema } from "codemirror-json-schema";
-import { NewLanguageComplete } from './languageComplete'
+import { NewTemplateLangComplete, NewHeaderLangComplete } from './languageComplete'
 import { jsonLanguage } from "@codemirror/lang-json"
 import { API } from './net';
 import {useI18n} from "vue-i18n";
@@ -13,7 +13,8 @@ import mockSchema from '../assets/api-testing-mock-schema.json';
 const { t } = useI18n()
 
 const mockschema = ref(mockSchema as any); // Type assertion to any for JSON schema
-const jsonComplete = NewLanguageComplete(jsonLanguage)
+const jsonComplete = NewTemplateLangComplete(jsonLanguage)
+const headerComplete = NewHeaderLangComplete(jsonLanguage)
 
 interface MockConfig {
   Config: string
@@ -91,11 +92,11 @@ items:
         <el-tabs v-model="tabActive">
             <el-tab-pane label="YAML" name="yaml">
                 <Codemirror v-model="mockConfig.Config"
-                    :extensions="[jsonComplete]" />
+                    :extensions="[jsonComplete, headerComplete]" />
             </el-tab-pane>
             <el-tab-pane label="JSON" name="json">
                 <Codemirror v-model="mockConfig.ConfigAsJSON"
-                    :extensions="[jsonSchema(mockschema), jsonComplete]" />
+                    :extensions="[jsonSchema(mockschema), jsonComplete, headerComplete]" />
             </el-tab-pane>
         </el-tabs>
     </div>

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

@@ -20,7 +20,7 @@ import jsonlint from 'jsonlint-mod'
 
 import CodeMirror from 'codemirror'
 import { json, jsonLanguage } from "@codemirror/lang-json"
-import { NewLanguageComplete } from './languageComplete'
+import { NewTemplateLangComplete } from './languageComplete'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/merge/merge.js'
 import 'codemirror/addon/merge/merge.css'
@@ -32,7 +32,7 @@ window.DIFF_DELETE = -1;
 window.DIFF_INSERT = 1;
 window.DIFF_EQUAL = 0;
 
-const jsonComplete = NewLanguageComplete(jsonLanguage)
+const jsonComplete = NewTemplateLangComplete(jsonLanguage)
 const { t } = useI18n()
 
 const props = defineProps({

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

@@ -19,6 +19,28 @@ function tplFuncCompletions(context: CompletionContext) {
     })
   }
 
+  return pairCompletions(context, templateFuncs.value)
+}
+
+const headerFuncs = ref([] as Completion[])
+function headerCompletions(context: CompletionContext) {
+  if (headerFuncs.value.length == 0) {
+    API.PopularHeaders((e) => {
+      if (e.data) {
+        e.data.forEach((item: any) => {
+          headerFuncs.value.push({
+            label: item.key,
+            type: "text",
+          } as Completion)
+        })
+      }
+    })
+  }
+
+  return pairCompletions(context, headerFuncs.value)
+}
+
+function pairCompletions(context: CompletionContext, source: Completion[]) {
   let word = context.matchBefore(/\w*/) || {
     from: "",
     to: ""
@@ -27,12 +49,18 @@ function tplFuncCompletions(context: CompletionContext) {
     return null
   return {
     from: word.from,
-    options: templateFuncs.value
+    options: source
   }
 }
 
-export const NewLanguageComplete = (lang: Language) => {
+export const NewTemplateLangComplete = (lang: Language) => {
     return new LanguageSupport(lang, lang.data.of(
         {autocomplete: tplFuncCompletions}
     ))
 }
+
+export const NewHeaderLangComplete = (lang: Language) => {
+    return new LanguageSupport(lang, lang.data.of(
+        {autocomplete: headerCompletions}
+    ))
+}