chore: provide a way to toggle button as icon mode or not

console/atest-ui/src/App.vue

@@ -51,6 +51,9 @@ API.GetVersion((d) => {
 })
 
 const isCollapse = ref(true)
+watch(isCollapse, (v: boolean) => {
+  window.localStorage.setItem('button.style', v ? 'simple' : '')
+})
 const lastActiveMenu = window.localStorage.getItem('activeMenu')
 const activeMenu = ref(lastActiveMenu === '' ? 'welcome' : lastActiveMenu)
 const panelName = ref(activeMenu)
@@ -64,7 +67,7 @@ i18nLocale.value = locale.value
 
 watch(locale, (e: string) =>{
   Cache.WithLocale(e)
-  i18nLocale.value = locale
+  i18nLocale.value = e
 })
 
 const handleChangeLan = (command: string) => {

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const simpleButton = ref(localStorage.getItem('button.style') === 'simple')
+</script>
+
+<template>
+    <el-button v-bind="$attrs">
+        <slot v-if="!simpleButton || !($attrs.icon)"></slot>
+    </el-button>
+</template>

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

@@ -16,7 +16,7 @@
         "toolbox": "Tool Box",
         "refresh": "Refresh",
         "newtestcase": "New TestCase",
-        "viewYaml":"View YAML",
+        "viewYaml": "View YAML",
         "verify": "Verify",
         "duplicate": "Duplicate",
         "generateCode": "Generate Code",
@@ -32,6 +32,7 @@
         "createTestSuite": "Create Test Suite",
         "createTestCase": "Create Test Case",
         "createStore": "Create Store",
+        "updateStore": "Update Store",
         "createSecret": "Create Secret",
         "secretManager": "Secret Manager",
         "protoContent": "Proto Content",

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

@@ -32,6 +32,7 @@
         "createTestSuite": "创建测试用例集",
         "createTestCase": "创建测试用例",
         "createStore": "创建存储",
+        "updateStore": "更新存储",
         "createSecret": "创建凭据",
         "secretManager": "凭据管理",
         "apiRequestParameter": "API 请求参数",
@@ -63,6 +64,7 @@
         "plugin": "插件",
         "pluginName": "插件名称",
         "pluginURL": "插件地址",
+        "disabled": "禁用",
         "status": "状态",
         "operations": "操作",
         "storageLocation": "保存位置",

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

@@ -157,6 +157,8 @@ const executeWithQuery = async (sql: string) => {
         case 'atest-store-etcd':
             sqlQuery.value = '*'
             break;
+        case '':
+            return;
     }
 
     let success = false
@@ -238,7 +240,7 @@ const executeWithQuery = async (sql: string) => {
                             </el-col>
                             <el-col :span="2">
                                 <el-form-item>
-                                    <el-button type="primary" @click="executeQuery">Execute</el-button>
+                                    <el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
                                 </el-form-item>
                             </el-col>
                             <el-col :span="2">

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { reactive, ref, watch } from 'vue'
-import { Edit, Delete, QuestionFilled, Help } from '@element-plus/icons-vue'
+import { Edit, Delete, QuestionFilled, Help, Refresh } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Pair } from './types'
 import { API } from './net'
@@ -9,6 +9,7 @@ import { UIAPI } from './net-vue'
 import { SupportedExtensions, SupportedExtension } from './store'
 import { useI18n } from 'vue-i18n'
 import { Magic } from './magicKeys'
+import Button from '../components/Button.vue'
 
 const { t } = useI18n()
 
@@ -69,7 +70,7 @@ loadStores()
 Magic.Keys(loadStores, ['Alt+KeyR'])
 
 function deleteStore(name: string) {
-  API.DeleteStore(name, (e) => {
+  API.DeleteStore(name, () => {
     ElMessage({
       message: 'Deleted.',
       type: 'success'
@@ -207,8 +208,8 @@ const storeExtLink = ref('')
 <template>
     <div>Store Manager</div>
     <div>
-        <el-button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</el-button>
+        <Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</Button>
-        <el-button type="primary" @click="loadStores">{{t('button.refresh')}}</el-button>
+        <Button type="primary" @click="loadStores" :icon="Refresh">{{t('button.refresh')}}</Button>
     </div>
     <el-table :data="stores" style="width: 100%" v-loading=storesLoading>
       <el-table-column :label="t('field.name')" width="180">
@@ -254,8 +255,8 @@ const storeExtLink = ref('')
       <el-table-column :label="t('field.operations')" width="220">
         <template #default="scope">
           <div style="display: flex; align-items: center" v-if="scope.row.name !== 'local'">
-            <el-button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</el-button>
+            <Button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</Button>
-            <el-button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</el-button>
+            <Button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</Button>
           </div>
         </template>
       </el-table-column>
@@ -265,7 +266,7 @@ const storeExtLink = ref('')
       Follow <el-link href="https://linuxsuren.github.io/api-testing/#storage" target="_blank">the instructions</el-link> to configure the storage plugins.
     </div>
 
-    <el-dialog v-model="dialogVisible" :title="t('title.createStore')" width="30%" draggable>
+    <el-dialog v-model="dialogVisible" :title="t(createAction? 'title.createStore': 'title.updateStore')" width="30%" draggable>
       <template #footer>
       <span class="dialog-footer">
         <el-form
@@ -341,18 +342,18 @@ const storeExtLink = ref('')
             </el-table>
           </el-form-item>
           <el-form-item>
-            <el-button
+            <Button
               type="primary"
               @click="storeVerify(storeFormRef)"
               test-id="store-form-verify"
-              >{{t('button.verify')}}</el-button
+              >{{t('button.verify')}}</Button
             >
-            <el-button
+            <Button
               type="primary"
               @click="submitForm(storeFormRef)"
               v-loading="creatingLoading"
               test-id="store-form-submit"
-              >{{t('button.submit')}}</el-button
+              >{{t('button.submit')}}</Button
             >
           </el-form-item>
         </el-form>

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, watch, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Edit, Delete, Search, CopyDocument } from '@element-plus/icons-vue'
+import { Edit, Delete, Search, CopyDocument, Help } from '@element-plus/icons-vue'
 import JsonViewer from 'vue-json-viewer'
 import type { Pair, TestResult, TestCaseWithSuite, TestCase } from './types'
 import { NewSuggestedAPIsQuery, CreateFilter, GetHTTPMethods, FlattenObject } from './types'
+import Button from '../components/Button.vue'
 import { Cache } from './cache'
 import { API } from './net'
 import EditButton from '../components/EditButton.vue'
@@ -125,6 +126,7 @@ const handleTestResult = (e: any) => {
     testResult.value.bodyLength = e.body.length
     testResult.value.bodyObject = JSON.parse(e.body);
     testResult.value.originBodyObject = JSON.parse(e.body);
+    responseBodyFilter()
   }
 
     Cache.SetTestCaseResponseCache(suite + '-' + name, {
@@ -162,7 +164,7 @@ function responseBodyFilter() {
       json: testResult.value.originBodyObject,
       resultType: 'value'
     })
-    testResult.value.bodyObject = query[0]
+    testResult.value.bodyObject = query
   }
 }
 
@@ -905,16 +907,16 @@ const renameTestCase = (name: string) => {
   <el-container style="height: 100%;">
     <el-header style="padding-left: 5px;">
       <div style="margin-bottom: 5px">
-        <el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
+        <Button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
           disabled v-if="Cache.GetCurrentStore().readOnly || isHistoryTestCase"
-          >{{ t('button.save') }}</el-button>
+          >{{ t('button.save') }}</Button>
-        <el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
+        <Button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
           v-if="!Cache.GetCurrentStore().readOnly && !isHistoryTestCase"
-          >{{ t('button.save') }}</el-button>
+          >{{ t('button.save') }}</Button>
-        <el-button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</el-button>
+        <Button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</Button>
-        <el-button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</el-button>
+        <Button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</Button>
-        <el-button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</el-button>
+        <Button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</Button>
-        <el-button type="primary" v-if="!isHistoryTestCase && Cache.GetCurrentStore().kind.name == 'atest-store-orm'" @click="openHistoryDialog">{{ t('button.viewHistory') }}</el-button>
+        <Button type="primary" v-if="!isHistoryTestCase && Cache.GetCurrentStore().kind.name == 'atest-store-orm'" @click="openHistoryDialog">{{ t('button.viewHistory') }}</Button>
         <span v-if="isHistoryTestCase" style="margin-left: 15px;">{{ t('tip.runningAt') }}{{ HistoryTestCaseCreateTime }}</span>
         <EditButton :value="props.name" @changed="renameTestCase"/>
       </div>
@@ -1060,8 +1062,8 @@ const renameTestCase = (name: string) => {
 
         <el-tab-pane name="body">
           <span style="margin-right: 10px; padding-right: 5px;">
-            <el-button type="primary" @click="jsonFormat(4)">Beautify</el-button>
+            <Button type="primary" @click="jsonFormat(4)">Beautify</Button>
-            <el-button type="primary" @click="jsonFormat(0)">Minify</el-button>
+            <Button type="primary" @click="jsonFormat(0)">Minify</Button>
             <el-text class="mx-1">Choose the body format</el-text>
           </span>
           <template #label>
@@ -1221,8 +1223,8 @@ const renameTestCase = (name: string) => {
                 :value="item.key"
               />
             </el-select>
-            <el-button type="primary" @click="generateCode">{{ t('button.refresh') }}</el-button>
+            <Button type="primary" @click="generateCode">{{ t('button.refresh') }}</Button>
-            <el-button type="primary" @click="copyCode">{{ t('button.copy') }}</el-button>
+            <Button type="primary" @click="copyCode">{{ t('button.copy') }}</Button>
           </div>
           <Codemirror v-model="currentCodeContent"/>
         </template>
@@ -1257,24 +1259,24 @@ const renameTestCase = (name: string) => {
               </el-col>
               <el-col :span="4">
               <div style="display: flex;flex-wrap: nowrap;justify-content: flex-end;">
-                <el-button
+                <Button
                   type="primary"
                   @click="submitForm(viewHistoryRef)"
                   :loading="caseRevertLoading"
                   >{{ t('button.revert') }}
-                </el-button>
+                </Button>
-                <el-button
+                <Button
                   type="primary"
                   @click="goToHistory(viewHistoryRef)"
                   :loading="caseRevertLoading"
                   >{{ t('button.goToHistory') }}
-                </el-button>
+                </Button>
-                <el-button
+                <Button
                   type="primary"
                   @click="deleteAllHistory(viewHistoryRef)"
                   :loading="caseRevertLoading"
                   >{{ t('button.deleteAllHistory') }}
-                </el-button>
+                </Button>
               </div>
               </el-col>
             </el-row>
@@ -1322,7 +1324,7 @@ const renameTestCase = (name: string) => {
             </el-table-column>
           </el-table>
 
-          <el-button type="primary" @click="sendRequestWithParameter">{{ t('button.send') }}</el-button>
+          <Button type="primary" @click="sendRequestWithParameter">{{ t('button.send') }}</Button>
         </template>
       </el-drawer>
     </el-main>
@@ -1341,8 +1343,11 @@ const renameTestCase = (name: string) => {
         <el-tab-pane label="Body" name="body">
           <div v-if="testResult.bodyObject">
             <el-input :prefix-icon="Search" @change="responseBodyFilter" v-model="responseBodyFilterText"
-              clearable placeholder="$.key">
+              clearable placeholder="$.data[?(@.status==='SUCCEED')]">
               <template #prepend v-if="testResult.bodyLength > 0">Body Size: {{testResult.bodyLength}}</template>
+              <template #suffix>
+                <a href="https://www.npmjs.com/package/jsonpath-plus" target="_blank"><el-icon><Help /></el-icon></a>
+              </template>
             </el-input>
             <JsonViewer :value="testResult.bodyObject" :expand-depth="5" copyable boxed sort />
           </div>
@@ -1354,7 +1359,7 @@ const renameTestCase = (name: string) => {
                 <div>Response body is too large, please download to view.</div>
               </el-col>
               <el-col :span="2">
-                <el-button type="primary" @click="downloadResponseFile">Download</el-button>
+                <Button type="primary" @click="downloadResponseFile">Download</Button>
               </el-col>
             </el-row>
           </div>
@@ -1389,7 +1394,7 @@ const renameTestCase = (name: string) => {
             New Test Case Name:<el-input v-model="targetTestCaseName" />
         </template>
         <template #footer>
-            <el-button type="primary" @click="duplicateTestCase">{{ t('button.ok') }}</el-button>
+            <Button type="primary" @click="duplicateTestCase">{{ t('button.ok') }}</Button>
         </template>
     </el-drawer>
 </template>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { reactive, ref, watch } from 'vue'
-import { Edit, CopyDocument, Delete } from '@element-plus/icons-vue'
+import { Edit, CopyDocument, Delete, View } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { Suite, TestCase, Pair } from './types'
 import { NewSuggestedAPIsQuery, GetHTTPMethods, SwaggerSuggestion } from './types'
 import EditButton from '../components/EditButton.vue'
 import HistoryInput from '../components/HistoryInput.vue'
+import Button from '../components/Button.vue'
 import { Cache } from './cache'
 import { useI18n } from 'vue-i18n'
 import { API } from './net'
@@ -395,36 +396,36 @@ const renameTestSuite = (name: string) => {
           Share link: <el-input readonly v-model="shareLink" style="width: 80%" />
       </div>
       <div class="button-container">
-        <el-button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" v-if="!Cache.GetCurrentStore().readOnly">{{
+        <Button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" v-if="!Cache.GetCurrentStore().readOnly">{{
           t('button.save')
-        }}</el-button>
+        }}</Button>
-        <el-button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" disabled v-if="Cache.GetCurrentStore().readOnly">{{
+        <Button type="primary" @click="updateTestSuiteForm(testSuiteFormRef)" disabled v-if="Cache.GetCurrentStore().readOnly">{{
           t('button.save')
-        }}</el-button>
+        }}</Button>
-        <el-button type="danger" @click="del" :icon="Delete" test-id="suite-del-but">{{
+        <Button type="danger" @click="del" :icon="Delete" test-id="suite-del-but">{{
           t('button.delete')
-        }}</el-button>
+        }}</Button>
-        <el-button type="primary" @click="convert" test-id="convert">{{
+        <Button type="primary" @click="convert" test-id="convert">{{
           t('button.export')
-        }}</el-button>
+        }}</Button>
-        <el-button
+        <Button
           type="primary"
           @click="openDuplicateDialog"
           :icon="CopyDocument"
           test-id="duplicate"
-          >{{ t('button.duplicate') }}</el-button
+          >{{ t('button.duplicate') }}</Button
         >
-        <el-button type="primary" @click="viewYaml" test-id="view-yaml">{{
+        <Button type="primary" @click="viewYaml" :icon="View" test-id="view-yaml">{{
           t('button.viewYaml')
-        }}</el-button>
+        }}</Button>
       </div>
       <div class="button-container">
-        <el-button
+        <Button
           type="primary"
           @click="openNewTestCaseDialog"
           :icon="Edit"
           test-id="open-new-case-dialog"
-          >{{ t('button.newtestcase') }}</el-button
+          >{{ t('button.newtestcase') }}</Button
         >
       </div>
     </el-form>
@@ -479,12 +480,12 @@ const renameTestSuite = (name: string) => {
             </el-autocomplete>
           </el-form-item>
           <el-form-item>
-            <el-button
+            <Button
               type="primary"
               @click="submitTestCaseForm(testcaseFormRef)"
               v-loading="suiteCreatingLoading"
               test-id="case-form-submit"
-              >{{ t('button.submit') }}</el-button
+              >{{ t('button.submit') }}</Button
             >
           </el-form-item>
         </el-form>
@@ -499,9 +500,9 @@ const renameTestSuite = (name: string) => {
     width="40%"
     draggable
   >
-    <el-button type="primary" @click="isFullScreen = !isFullScreen" style="margin-bottom: 10px">
+    <Button type="primary" @click="isFullScreen = !isFullScreen" style="margin-bottom: 10px">
       <p>{{ isFullScreen ? t('button.cancelFullScreen') : t('button.fullScreen') }}</p>
-    </el-button>
+    </Button>
     <el-scrollbar>
       <Codemirror v-model="yamlFormat" />
     </el-scrollbar>
@@ -512,7 +513,7 @@ const renameTestSuite = (name: string) => {
       New Test Suite Name:<el-input v-model="targetSuiteDuplicateName" />
     </template>
     <template #footer>
-      <el-button type="primary" @click="duplicateTestSuite">{{ t('button.ok') }}</el-button>
+      <Button type="primary" @click="duplicateTestSuite">{{ t('button.ok') }}</Button>
     </template>
   </el-drawer>
 </template>
@@ -525,7 +526,7 @@ const renameTestSuite = (name: string) => {
   margin-bottom: 8px;
 }
 
-.button-container > .el-button + .el-button {
+.button-container > .Button + .Button {
   margin-left: 0px;
 }
 </style>

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

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import TestCase from './TestCase.vue'
-import TestSuite from './TestSuite.vue'
 import TemplateFunctions from './TemplateFunctions.vue'
-import { reactive, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { ElTree, ElMessage } from 'element-plus'
-import type { FormInstance, FormRules } from 'element-plus'
+import { Refresh } from '@element-plus/icons-vue'
-import { Edit, Refresh } from '@element-plus/icons-vue'
-import type { Suite } from './types'
-import { API } from './net'
 import { Cache } from './cache'
 import { useI18n } from 'vue-i18n'
 

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

@@ -13,6 +13,7 @@ import { Magic } from './magicKeys'
 import TestSuiteCreationDialog from '../components/TestSuiteCreationDialog.vue'
 import TestSuiteImportDialog from '../components/TestSuiteImportDialog.vue'
 import LoginDialog from '../components/LoginDialog.vue'
+import Button from '../components/Button.vue'
 
 const { t } = useI18n()
 
@@ -260,13 +261,13 @@ const viewName = ref('')
       <el-main style="padding-top: 5px; padding-bottom: 5px;">
         <el-container style="height: 100%">
           <el-aside>
-            <el-button type="primary" @click="openTestSuiteCreateDialog"
+            <Button type="primary" @click="openTestSuiteCreateDialog"
               data-intro="Click here to create a new test suite"
-              test-id="open-new-suite-dialog" :icon="Edit">{{ t('button.new') }}</el-button>
+              test-id="open-new-suite-dialog" :icon="Edit">{{ t('button.new') }}</Button>
-            <el-button type="primary" @click="openTestSuiteImportDialog"
+            <Button type="primary" @click="openTestSuiteImportDialog"
               data-intro="Click here to import from Postman"
-              test-id="open-import-suite-dialog">{{ t('button.import') }}</el-button>
+              test-id="open-import-suite-dialog">{{ t('button.import') }}</Button>
-            <el-button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</el-button>
+            <Button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</Button>
             <el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" style="padding: 5px;" />
 
             <el-tree

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

@@ -295,13 +295,13 @@ function DeleteTestCase(testcase: TestCase,
         .then(callback).catch(emptyOrDefault(errHandle))
 }
 
-interface RunTestCaseRequest {
+export interface RunTestCaseRequest {
     suiteName: string
     name: string
     parameters: any
 }
 
-interface BatchRunTestCaseRequest {
+export interface BatchRunTestCaseRequest {
     count: number
     interval: string
     request: RunTestCaseRequest