Skip to content

Commit b0612bc

Browse files
LinuxSuRenLinuxSuRen
committed
chore: provide a way to toggle button as icon mode or not
1 parent 9d3e7ad commit b0612bc

File tree

11 files changed

+95
-72
lines changed

11 files changed

+95
-72
lines changed

‎console/atest-ui/src/App.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@ API.GetVersion((d) => {
5151
})
5252
5353
const isCollapse = ref(true)
54+
watch(isCollapse, (v: boolean) => {
55+
window.localStorage.setItem('button.style', v ? 'simple' : '')
56+
})
5457
const lastActiveMenu = window.localStorage.getItem('activeMenu')
5558
const activeMenu = ref(lastActiveMenu === '' ? 'welcome' : lastActiveMenu)
5659
const panelName = ref(activeMenu)
@@ -64,7 +67,7 @@ i18nLocale.value = locale.value
6467
6568
watch(locale, (e: string) =>{
6669
Cache.WithLocale(e)
67-
i18nLocale.value = locale
70+
i18nLocale.value = e
6871
})
6972
7073
const handleChangeLan = (command: string) => {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
4+
const simpleButton = ref(localStorage.getItem('button.style') === 'simple')
5+
</script>
6+
7+
<template>
8+
<el-button v-bind="$attrs">
9+
<slot v-if="!simpleButton || !($attrs.icon)"></slot>
10+
</el-button>
11+
</template>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"toolbox": "Tool Box",
1717
"refresh": "Refresh",
1818
"newtestcase": "New TestCase",
19-
"viewYaml":"View YAML",
19+
"viewYaml": "View YAML",
2020
"verify": "Verify",
2121
"duplicate": "Duplicate",
2222
"generateCode": "Generate Code",
@@ -32,6 +32,7 @@
3232
"createTestSuite": "Create Test Suite",
3333
"createTestCase": "Create Test Case",
3434
"createStore": "Create Store",
35+
"updateStore": "Update Store",
3536
"createSecret": "Create Secret",
3637
"secretManager": "Secret Manager",
3738
"protoContent": "Proto Content",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"createTestSuite": "创建测试用例集",
3333
"createTestCase": "创建测试用例",
3434
"createStore": "创建存储",
35+
"updateStore": "更新存储",
3536
"createSecret": "创建凭据",
3637
"secretManager": "凭据管理",
3738
"apiRequestParameter": "API 请求参数",
@@ -63,6 +64,7 @@
6364
"plugin": "插件",
6465
"pluginName": "插件名称",
6566
"pluginURL": "插件地址",
67+
"disabled": "禁用",
6668
"status": "状态",
6769
"operations": "操作",
6870
"storageLocation": "保存位置",

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@ const executeWithQuery = async (sql: string) => {
157157
case 'atest-store-etcd':
158158
sqlQuery.value = '*'
159159
break;
160+
case '':
161+
return;
160162
}
161163
162164
let success = false
@@ -238,7 +240,7 @@ const executeWithQuery = async (sql: string) => {
238240
</el-col>
239241
<el-col :span="2">
240242
<el-form-item>
241-
<el-button type="primary" @click="executeQuery">Execute</el-button>
243+
<el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
242244
</el-form-item>
243245
</el-col>
244246
<el-col :span="2">

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<script setup lang="ts">
22
import { ElMessage } from 'element-plus'
33
import { reactive, ref, watch } from 'vue'
4-
import { Edit, Delete, QuestionFilled, Help } from '@element-plus/icons-vue'
4+
import { Edit, Delete, QuestionFilled, Help, Refresh } from '@element-plus/icons-vue'
55
import type { FormInstance, FormRules } from 'element-plus'
66
import type { Pair } from './types'
77
import { API } from './net'
88
import { UIAPI } from './net-vue'
99
import { SupportedExtensions, SupportedExtension } from './store'
1010
import { useI18n } from 'vue-i18n'
1111
import { Magic } from './magicKeys'
12+
import Button from '../components/Button.vue'
1213
1314
const { t } = useI18n()
1415
@@ -69,7 +70,7 @@ loadStores()
6970
Magic.Keys(loadStores, ['Alt+KeyR'])
7071
7172
function deleteStore(name: string) {
72-
API.DeleteStore(name, (e) => {
73+
API.DeleteStore(name, () => {
7374
ElMessage({
7475
message: 'Deleted.',
7576
type: 'success'
@@ -207,8 +208,8 @@ const storeExtLink = ref('')
207208
<template>
208209
<div>Store Manager</div>
209210
<div>
210-
<el-button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</el-button>
211-
<el-button type="primary" @click="loadStores">{{t('button.refresh')}}</el-button>
211+
<Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</Button>
212+
<Button type="primary" @click="loadStores" :icon="Refresh">{{t('button.refresh')}}</Button>
212213
</div>
213214
<el-table :data="stores" style="width: 100%" v-loading=storesLoading>
214215
<el-table-column :label="t('field.name')" width="180">
@@ -254,8 +255,8 @@ const storeExtLink = ref('')
254255
<el-table-column :label="t('field.operations')" width="220">
255256
<template #default="scope">
256257
<div style="display: flex; align-items: center" v-if="scope.row.name !== 'local'">
257-
<el-button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</el-button>
258-
<el-button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</el-button>
258+
<Button type="primary" @click="deleteStore(scope.row.name)" :icon="Delete">{{t('button.delete')}}</Button>
259+
<Button type="primary" @click="editStore(scope.row.name)" :icon="Edit">{{t('button.edit')}}</Button>
259260
</div>
260261
</template>
261262
</el-table-column>
@@ -265,7 +266,7 @@ const storeExtLink = ref('')
265266
Follow <el-link href="https://linuxsuren.github.io/api-testing/#storage" target="_blank">the instructions</el-link> to configure the storage plugins.
266267
</div>
267268

268-
<el-dialog v-model="dialogVisible" :title="t('title.createStore')" width="30%" draggable>
269+
<el-dialog v-model="dialogVisible" :title="t(createAction? 'title.createStore': 'title.updateStore')" width="30%" draggable>
269270
<template #footer>
270271
<span class="dialog-footer">
271272
<el-form
@@ -341,18 +342,18 @@ const storeExtLink = ref('')
341342
</el-table>
342343
</el-form-item>
343344
<el-form-item>
344-
<el-button
345+
<Button
345346
type="primary"
346347
@click="storeVerify(storeFormRef)"
347348
test-id="store-form-verify"
348-
>{{t('button.verify')}}</el-button
349+
>{{t('button.verify')}}</Button
349350
>
350-
<el-button
351+
<Button
351352
type="primary"
352353
@click="submitForm(storeFormRef)"
353354
v-loading="creatingLoading"
354355
test-id="store-form-submit"
355-
>{{t('button.submit')}}</el-button
356+
>{{t('button.submit')}}</Button
356357
>
357358
</el-form-item>
358359
</el-form>

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

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script setup lang="ts">
22
import { ref, watch, reactive } from 'vue'
33
import { ElMessage } from 'element-plus'
4-
import { Edit, Delete, Search, CopyDocument } from '@element-plus/icons-vue'
4+
import { Edit, Delete, Search, CopyDocument, Help } from '@element-plus/icons-vue'
55
import JsonViewer from 'vue-json-viewer'
66
import type { Pair, TestResult, TestCaseWithSuite, TestCase } from './types'
77
import { NewSuggestedAPIsQuery, CreateFilter, GetHTTPMethods, FlattenObject } from './types'
8+
import Button from '../components/Button.vue'
89
import { Cache } from './cache'
910
import { API } from './net'
1011
import EditButton from '../components/EditButton.vue'
@@ -125,6 +126,7 @@ const handleTestResult = (e: any) => {
125126
testResult.value.bodyLength = e.body.length
126127
testResult.value.bodyObject = JSON.parse(e.body);
127128
testResult.value.originBodyObject = JSON.parse(e.body);
129+
responseBodyFilter()
128130
}
129131
130132
Cache.SetTestCaseResponseCache(suite + '-' + name, {
@@ -162,7 +164,7 @@ function responseBodyFilter() {
162164
json: testResult.value.originBodyObject,
163165
resultType: 'value'
164166
})
165-
testResult.value.bodyObject = query[0]
167+
testResult.value.bodyObject = query
166168
}
167169
}
168170
@@ -905,16 +907,16 @@ const renameTestCase = (name: string) => {
905907
<el-container style="height: 100%;">
906908
<el-header style="padding-left: 5px;">
907909
<div style="margin-bottom: 5px">
908-
<el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
910+
<Button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
909911
disabled v-if="Cache.GetCurrentStore().readOnly || isHistoryTestCase"
910-
>{{ t('button.save') }}</el-button>
911-
<el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
912+
>{{ t('button.save') }}</Button>
913+
<Button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"
912914
v-if="!Cache.GetCurrentStore().readOnly && !isHistoryTestCase"
913-
>{{ t('button.save') }}</el-button>
914-
<el-button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</el-button>
915-
<el-button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</el-button>
916-
<el-button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</el-button>
917-
<el-button type="primary" v-if="!isHistoryTestCase && Cache.GetCurrentStore().kind.name == 'atest-store-orm'" @click="openHistoryDialog">{{ t('button.viewHistory') }}</el-button>
915+
>{{ t('button.save') }}</Button>
916+
<Button type="danger" @click="deleteCase" :icon="Delete">{{ t('button.delete') }}</Button>
917+
<Button type="primary" @click="openDuplicateTestCaseDialog" :icon="CopyDocument" v-if="!isHistoryTestCase">{{ t('button.duplicate') }}</Button>
918+
<Button type="primary" @click="openCodeDialog">{{ t('button.generateCode') }}</Button>
919+
<Button type="primary" v-if="!isHistoryTestCase && Cache.GetCurrentStore().kind.name == 'atest-store-orm'" @click="openHistoryDialog">{{ t('button.viewHistory') }}</Button>
918920
<span v-if="isHistoryTestCase" style="margin-left: 15px;">{{ t('tip.runningAt') }}{{ HistoryTestCaseCreateTime }}</span>
919921
<EditButton :value="props.name" @changed="renameTestCase"/>
920922
</div>
@@ -1060,8 +1062,8 @@ const renameTestCase = (name: string) => {
10601062

10611063
<el-tab-pane name="body">
10621064
<span style="margin-right: 10px; padding-right: 5px;">
1063-
<el-button type="primary" @click="jsonFormat(4)">Beautify</el-button>
1064-
<el-button type="primary" @click="jsonFormat(0)">Minify</el-button>
1065+
<Button type="primary" @click="jsonFormat(4)">Beautify</Button>
1066+
<Button type="primary" @click="jsonFormat(0)">Minify</Button>
10651067
<el-text class="mx-1">Choose the body format</el-text>
10661068
</span>
10671069
<template #label>
@@ -1221,8 +1223,8 @@ const renameTestCase = (name: string) => {
12211223
:value="item.key"
12221224
/>
12231225
</el-select>
1224-
<el-button type="primary" @click="generateCode">{{ t('button.refresh') }}</el-button>
1225-
<el-button type="primary" @click="copyCode">{{ t('button.copy') }}</el-button>
1226+
<Button type="primary" @click="generateCode">{{ t('button.refresh') }}</Button>
1227+
<Button type="primary" @click="copyCode">{{ t('button.copy') }}</Button>
12261228
</div>
12271229
<Codemirror v-model="currentCodeContent"/>
12281230
</template>
@@ -1257,24 +1259,24 @@ const renameTestCase = (name: string) => {
12571259
</el-col>
12581260
<el-col :span="4">
12591261
<div style="display: flex;flex-wrap: nowrap;justify-content: flex-end;">
1260-
<el-button
1262+
<Button
12611263
type="primary"
12621264
@click="submitForm(viewHistoryRef)"
12631265
:loading="caseRevertLoading"
12641266
>{{ t('button.revert') }}
1265-
</el-button>
1266-
<el-button
1267+
</Button>
1268+
<Button
12671269
type="primary"
12681270
@click="goToHistory(viewHistoryRef)"
12691271
:loading="caseRevertLoading"
12701272
>{{ t('button.goToHistory') }}
1271-
</el-button>
1272-
<el-button
1273+
</Button>
1274+
<Button
12731275
type="primary"
12741276
@click="deleteAllHistory(viewHistoryRef)"
12751277
:loading="caseRevertLoading"
12761278
>{{ t('button.deleteAllHistory') }}
1277-
</el-button>
1279+
</Button>
12781280
</div>
12791281
</el-col>
12801282
</el-row>
@@ -1322,7 +1324,7 @@ const renameTestCase = (name: string) => {
13221324
</el-table-column>
13231325
</el-table>
13241326

1325-
<el-button type="primary" @click="sendRequestWithParameter">{{ t('button.send') }}</el-button>
1327+
<Button type="primary" @click="sendRequestWithParameter">{{ t('button.send') }}</Button>
13261328
</template>
13271329
</el-drawer>
13281330
</el-main>
@@ -1341,8 +1343,11 @@ const renameTestCase = (name: string) => {
13411343
<el-tab-pane label="Body" name="body">
13421344
<div v-if="testResult.bodyObject">
13431345
<el-input :prefix-icon="Search" @change="responseBodyFilter" v-model="responseBodyFilterText"
1344-
clearable placeholder="$.key">
1346+
clearable placeholder="$.data[?(@.status==='SUCCEED')]">
13451347
<template #prepend v-if="testResult.bodyLength > 0">Body Size: {{testResult.bodyLength}}</template>
1348+
<template #suffix>
1349+
<a href="https://www.npmjs.com/package/jsonpath-plus" target="_blank"><el-icon><Help /></el-icon></a>
1350+
</template>
13461351
</el-input>
13471352
<JsonViewer :value="testResult.bodyObject" :expand-depth="5" copyable boxed sort />
13481353
</div>
@@ -1354,7 +1359,7 @@ const renameTestCase = (name: string) => {
13541359
<div>Response body is too large, please download to view.</div>
13551360
</el-col>
13561361
<el-col :span="2">
1357-
<el-button type="primary" @click="downloadResponseFile">Download</el-button>
1362+
<Button type="primary" @click="downloadResponseFile">Download</Button>
13581363
</el-col>
13591364
</el-row>
13601365
</div>
@@ -1389,7 +1394,7 @@ const renameTestCase = (name: string) => {
13891394
New Test Case Name:<el-input v-model="targetTestCaseName" />
13901395
</template>
13911396
<template #footer>
1392-
<el-button type="primary" @click="duplicateTestCase">{{ t('button.ok') }}</el-button>
1397+
<Button type="primary" @click="duplicateTestCase">{{ t('button.ok') }}</Button>
13931398
</template>
13941399
</el-drawer>
13951400
</template>

0 commit comments

Comments
 (0)