feat: support loading key bindings from data file (#728)

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

console/atest-ui/src/components/MagicKey.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { Help } from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
 import { Magic } from '@/views/magicKeys'
 
@@ -24,6 +25,11 @@ onBeforeUnmount(() => {
     <el-drawer v-model="keyBindingsDialogVisible" size="50%">
       <template #header>
         <h4>{{ t('title.keyBindings') }}</h4>
+        <el-icon>
+            <el-link href="https://github.com/LinuxSuRen/atest-ext-data-swagger/tree/master/data/key-binding" target="_blank">
+                <Help />
+            </el-link>
+        </el-icon>
       </template>
       <template #default>
         <el-table :data="keyBindings">

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

@@ -34,6 +34,7 @@ const loadingStores = ref(true)
 const globalLoading = ref(false)
 const showOverflowTooltip = ref(true)
 const complexEditor = ref(false)
+const sqlEditorView = ref(null as any)
 const dataFormat = ref('table')
 const dataFormatOptions = ['table', 'json']
 const queryDataMeta = ref({} as QueryDataMeta)
@@ -293,18 +294,29 @@ watch(largeContent, (e) => {
   largeContentDialogVisible.value = e !== ''
 })
 
-Magic.AdvancedKeys([{
-  Keys: ['Ctrl+E', 'Ctrl+Enter'],
-  Func: executeQuery,
-  Description: 'Execute query'
-}, {
-  Keys: ['Ctrl+Shift+O'],
-  Func: () => {
+const sqlEditorReady = (editor: any) => {
+  sqlEditorView.value = editor.view
+}
+
+const executeWithSelectedQuery = () => {
+    const selectedTextObj = sqlEditorView.value.state.selection.main
+    const selectedText = sqlEditorView.value.state.sliceDoc(selectedTextObj.from, selectedTextObj.to)
+    if (selectedText !== '') {
+      showNativeSQL.value = false
+      executeWithQuery(selectedText)
+    }
+}
+
+const executeQueryWithoutShowingNativeSQL = () => {
     showNativeSQL.value = false
     executeWithQuery(sqlQuery.value)
-  },
-  Description: 'Execute query without showing native SQL'
-}])
+}
+
+Magic.LoadMagicKeys(import.meta.url, new Map([
+  ["executeQuery", executeQuery],
+  ["executeWithSelectedQuery", executeWithSelectedQuery],
+  ["executeQueryWithoutShowingNativeSQL", executeQueryWithoutShowingNativeSQL],
+]))
 </script>
 
 <template>
@@ -384,6 +396,7 @@ Magic.AdvancedKeys([{
             </el-row>
           </el-form>
             <Codemirror
+            @ready="sqlEditorReady"
             v-model="sqlQuery"
             v-if="complexEditor"
             style="height: var(--sql-editor-height);"

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

@@ -108,15 +108,10 @@ function addStore() {
     createAction.value = true
 }
 
-Magic.AdvancedKeys([{
-  Keys: ['Alt+KeyE', 'ctrl+n'],
-  Func: addStore,
-  Description: 'Add a new store'
-}, {
-  Keys: ['Alt+KeyR'],
-  Func: loadStores,
-  Description: 'Refresh the store list'
-}])
+Magic.LoadMagicKeys(import.meta.url, {
+  "addStore": addStore,
+  "loadStores": loadStores,
+})
 
 const rules = reactive<FormRules<Store>>({
   name: [{ required: true, message: 'Name is required', trigger: 'blur' }],

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

@@ -919,42 +919,30 @@ const renameTestCase = (name: string) => {
   })
 }
 
-Magic.AdvancedKeys([{
-  Keys: ['Alt+S', 'Alt+ß'],
-  Func: sendRequest,
-  Description: 'Send the request'
-}, {
-  Keys: ['Alt+KeyD'],
-  Func: openDuplicateTestCaseDialog,
-  Description: 'Duplicate the test case'
-}, {
-  Keys: ['Alt+KeyO'],
-  Func: () => {
+const openOutputTab = () => {
     if (duplicateTestCaseDialog.value) {
       duplicateTestCase()
     }
     testResultActiveTab.value = 'output'
-  },
-  Description: 'Open the output tab'
-}, {
-  Keys: ['Alt+KeyB'],
-  Func: () => {
+}
+const openBodyTab = () => {
     testResultActiveTab.value = 'body'
-  },
-  Description: 'Open the body tab'
-}, {
-  Keys: ['Alt+KeyH'],
-  Func: () => {
+}
+const openHeaderTab = () => {
     testResultActiveTab.value = 'header'
-  },
-  Description: 'Open the header tab'
-}, {
-  Keys: ['Alt+KeyQ'],
-  Func: () => {
+}
+const openQueryTab = () => {
     testResultActiveTab.value = 'query'
-  },
-  Description: 'Open the query tab'
-}])
+}
+
+Magic.LoadMagicKeys(import.meta.url), {
+  "sendRequest": sendRequest,
+  "openDuplicateTestCaseDialog": openDuplicateTestCaseDialog,
+  "openOutputTab": openOutputTab,
+  "openBodyTab": openBodyTab,
+  "openHeaderTab": openHeaderTab,
+  "openQueryTab": openQueryTab
+}
 </script>
 
 <template>

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

@@ -153,15 +153,10 @@ function openNewTestCaseDialog() {
   querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.name!)
 }
 
-Magic.AdvancedKeys([{
-  Keys: ['Alt+N', 'Alt+dead'],
-  Func: openNewTestCaseDialog,
-  Description: 'Open new test case dialog',
-}, {
-  Keys: ['Alt+S', 'Alt+ß'],
-  Func: saveTestSuite,
-  Description: 'Save test suite',
-}])
+Magic.LoadMagicKeys(import.meta.url, {
+  "openNewTestCaseDialog": openNewTestCaseDialog,
+  "saveTestSuite": saveTestSuite,
+})
 
 const submitTestCaseForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return

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

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { watch } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
+import { API } from './net'
 
 function Keys(func: (() => void) | ((k: string) => void), keys: string[]) {
     const magicKeys = useMagicKeys()
@@ -54,6 +55,46 @@ const AdvancedKeys = (keys: MagicKey[]) => {
     })
 }
 
+interface KeyBindings {
+    name: string
+    pages: Page[]
+}
+
+interface Page {
+    name: string
+    bindings: KeyBinding[]
+}
+
+interface KeyBinding {
+    keys: string[]
+    description?: string
+    action: string
+}
+
+const LoadMagicKeys = (url: String, mapping: Map<String, Function>) => {
+    const fileName = url.substring(url.lastIndexOf('/') + 1);
+    const pageName = fileName.split(".vue")[0];
+    API.GetBinding("default", (data) => {
+        const bindings = JSON.parse(data.message) as KeyBindings;
+        bindings.pages.forEach((page: Page) => {
+            if (page.name === pageName) {
+                const keys = [] as MagicKey[]
+                page.bindings.forEach((binding: KeyBinding) => {
+                    keys.push({
+                        Keys: binding.keys,
+                        Func: () => {
+                            mapping.has(binding.action) ? mapping.get(binding.action)!() : console.warn(`No action found for ${binding.action}`);
+                        },
+                        Description: binding.description,
+                    });
+                });
+                AdvancedKeys(keys);
+                return;
+            }
+        })
+    })
+}
+
 export const Magic = {
-    Keys, AdvancedKeys, MagicKeyEventName
+    Keys, AdvancedKeys, MagicKeyEventName, LoadMagicKeys
 }

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

@@ -908,6 +908,11 @@ const GetTheme = (name: string, callback: (d: any) => void | null) => {
         .then(DefaultResponseProcess).then(callback)
 }
 
+const GetBinding = (name: string, callback: (d: any) => void | null) => {
+    return fetch(`/api/v1/bindings/${name}`, {})
+        .then(DefaultResponseProcess).then(callback)
+}
+
 export const API = {
     DefaultResponseProcess,
     GetVersion,
@@ -921,6 +926,6 @@ export const API = {
     GetSecrets, DeleteSecret, CreateOrUpdateSecret,
     GetSuggestedAPIs, GetSwaggers,
     ReloadMockServer, GetMockConfig, SBOM, DataQuery, DataQueryAsync,
-    GetThemes, GetTheme,
+    GetThemes, GetTheme, GetBinding,
     getToken
 }

pkg/server/remote_server.go

@@ -1322,6 +1322,35 @@ func (s *server) GetTheme(ctx context.Context, in *SimpleName) (result *CommonRe
 	return
 }
 
+func (s *server) GetBindings(ctx context.Context, _ *Empty) (result *SimpleList, err error) {
+	loader := s.getLoader(ctx)
+	defer loader.Close()
+
+	result = &SimpleList{}
+	var bindings []string
+	if bindings, err = loader.GetBindings(); err == nil {
+		for _, theme := range bindings {
+			result.Data = append(result.Data, &Pair{
+				Key:   theme,
+				Value: "",
+			})
+		}
+	}
+	return
+}
+
+func (s *server) GetBinding(ctx context.Context, in *SimpleName) (result *CommonResult, err error) {
+	loader := s.getLoader(ctx)
+	defer loader.Close()
+
+	result = &CommonResult{}
+	result.Message, err = loader.GetBinding(in.Name)
+	if err != nil {
+		result.Message = fmt.Sprintf("failed to get binding: %v", err)
+	}
+	return
+}
+
 // implement the mock server
 
 // Start starts the mock server