simplfy the buttons (#668)

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

* using goroutine to check store status

* support to duplicate a store on ui

---------

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

Author: LinuxSuRen

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

@@ -179,6 +179,14 @@ const executeQuery = async () => {
     return executeWithQuery(sqlQuery.value)
 }
 const executeWithQuery = async (sql: string) => {
+    switch (kind.value) {
+        case 'atest-store-etcd':
+            sqlQuery.value = '*'
+            break;
+        case '':
+            return;
+    }
+
     let success = false
     query.value.store = store.value
     query.value.key = queryDataMeta.value.currentDatabase
@@ -268,7 +276,7 @@ const nextPage = () => {
                             </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,14 +1,15 @@
 <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'
 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'
@@ -191,6 +192,11 @@ function storeVerify(formEl: FormInstance | undefined) {
   })
 }
 
+const storeDuplicate = async (formEl: FormInstance | undefined) => {
+  createAction.value = true
+  storeForm.name += '-copy'
+}
+
 function updateKeys() {
   const props = storeForm.properties
   if (props.findIndex(p => p.key === '') === -1) {
@@ -207,8 +213,8 @@ const storeExtLink = ref('')
 <template>
     <div>Store Manager</div>
     <div>
-        <el-button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</el-button>
-        <el-button type="primary" @click="loadStores">{{t('button.refresh')}}</el-button>
+        <Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</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 +260,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>
-            <el-button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</el-button>
+            <Button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</Button>
+            <Button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</Button>
           </div>
         </template>
       </el-table-column>
@@ -265,7 +271,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
@@ -274,7 +280,7 @@ const storeExtLink = ref('')
           ref="storeFormRef"
           status-icon label-width="120px">
           <el-form-item :label="t('field.name')" prop="name">
-            <el-input v-model="storeForm.name" test-id="store-form-name" />
+            <el-input v-model="storeForm.name" test-id="store-form-name" :disabled="!createAction"/>
           </el-form-item>
           <el-form-item label="URL" prop="url">
             <el-input v-model="storeForm.url" placeholder="http://foo" test-id="store-form-url" />
@@ -341,18 +347,23 @@ 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"
+              v-if="!createAction"
+              @click="storeDuplicate(storeFormRef)"
+              >{{t('button.duplicate')}}</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>
-        <el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
+          >{{ t('button.save') }}</Button>
+        <Button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
           v-if="!Cache.GetCurrentStore().readOnly && !isHistoryTestCase"
-          >{{ t('button.save') }}</el-button>
-        <el-button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</el-button>
-        <el-button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</el-button>
-        <el-button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</el-button>
-        <el-button type="primary" v-if="!isHistoryTestCase && Cache.GetCurrentStore().kind.name == 'atest-store-orm'" @click="openHistoryDialog">{{ t('button.viewHistory') }}</el-button>
+          >{{ t('button.save') }}</Button>
+        <Button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</Button>
+        <Button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</Button>
+        <Button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</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>
-            <el-button type="primary" @click="jsonFormat(0)">Minify</el-button>
+            <Button type="primary" @click="jsonFormat(4)">Beautify</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>
-            <el-button type="primary" @click="copyCode">{{ t('button.copy') }}</el-button>
+            <Button type="primary" @click="generateCode">{{ t('button.refresh') }}</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>
-                <el-button
+                </Button>
+                <Button
                   type="primary"
                   @click="goToHistory(viewHistoryRef)"
                   :loading="caseRevertLoading"
                   >{{ t('button.goToHistory') }}
-                </el-button>
-                <el-button
+                </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>