feat: go relate History panel

Author: SamYSF

console/atest-ui/src/App.vue

@@ -83,6 +83,12 @@ const handleChangeLan = (command: string) => {
   }
 };
 
+const ID = ref(null);
+const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
+  ID.value = selectID;
+  panelName.value = historyPanelName;
+}
+
 </script>
 
 <template>
@@ -140,8 +146,8 @@ const handleChangeLan = (command: string) => {
           </el-dropdown>
         </el-col>
       </div>
-      <TestingPanel v-if="panelName === 'testing'" />
-      <TestingHistoryPanel v-else-if="panelName === 'history'" />
+      <TestingPanel v-if="panelName === 'testing'" @toHistoryPanel="toHistoryPanel"/>
+      <TestingHistoryPanel v-else-if="panelName === 'history'" :ID="ID"/>
       <MockManager v-else-if="panelName === 'mock'" />
       <StoreManager v-else-if="panelName === 'store'" />
       <SecretManager v-else-if="panelName === 'secret'" />

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

@@ -24,7 +24,8 @@
         "fullScreen": "Full Screen",
         "cancelFullScreen": "Cancel Full Screen",
         "viewHistory": "View History Test Case Result",
-        "revert": "Revert"
+        "revert": "Revert",
+        "goToHistory": "Go to History"
     },
     "title": {
         "createTestSuite": "Create Test Suite",

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

@@ -24,7 +24,8 @@
         "fullScreen": "全屏显示",
         "cancelFullScreen": "取消全屏",
         "viewHistory": "查看历史记录",
-        "revert": "回退"
+        "revert": "回退",
+        "goToHistory": "跳转历史记录"
     },
     "title": {
         "createTestSuite": "创建测试用例集",

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

@@ -37,7 +37,7 @@ const props = defineProps({
   historySuiteName: String,
   historyCaseID: String
 })
-const emit = defineEmits(['updated'])
+const emit = defineEmits(['updated','toHistoryPanel'])
 
 let querySuggestedAPIs = NewSuggestedAPIsQuery(Cache.GetCurrentStore().name!, props.suite!)
 const testResultActiveTab = ref(Cache.GetPreference().responseActiveTab)
@@ -534,6 +534,21 @@ const submitForm = async (formEl) => {
   })
 }
 
+const goToHistory = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid: boolean, fields) => {
+    if (valid) {
+      caseRevertLoading.value = true
+      emit('toHistoryPanel', { ID: selectedHistory.value.ID, panelName: 'history' });
+      caseRevertLoading.value = false
+      historyDialogOpened.value = false
+      historyForm.value.selectedID = ''
+      const target = document.getElementById('compareView');
+      target.innerHTML = '';
+    }
+  })
+}
+
 const options = GetHTTPMethods()
 const requestActiveTab = ref(Cache.GetPreference().requestActiveTab)
 watch(requestActiveTab, Cache.WatchRequestActiveTab)
@@ -744,14 +759,11 @@ Magic.Keys(() => {
   <el-container>
     <el-header style="padding-left: 5px;">
       <div style="margin-bottom: 5px">
-        <el-button type="primary" @click="saveTestCase" :icon="Edit" :loading="saveLoading"
-          disabled v-if="Cache.GetCurrentStore().readOnly || isHistoryTestCase"
-          >{{ t('button.save') }}</el-button>
         <el-button type="primary" @click="saveTestCase" :icon="Edit" :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">{{ t('button.duplicate') }}</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" @click="openHistoryDialog">{{ t('button.viewHistory') }}</el-button>
         <span v-if="isHistoryTestCase" style="margin-left: 15px;">{{ t('tip.runningAt') }}{{ HistoryTestCaseCreateTime }}</span>
@@ -1052,12 +1064,20 @@ Magic.Keys(() => {
                 </el-select>
               </el-col>
               <el-col :span="4">
+              <div style="display: flex">
                 <el-button
                   type="primary"
                   @click="submitForm(viewHistoryRef)"
                   :loading="caseRevertLoading"
                   >{{ t('button.revert') }}
                 </el-button>
+                <el-button
+                  type="primary"
+                  @click="goToHistory(viewHistoryRef)"
+                  :loading="caseRevertLoading"
+                  >{{ t('button.goToHistory') }}
+                </el-button>
+              </div>
               </el-col>
             </el-row>
           </el-form-item>

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

@@ -24,6 +24,9 @@ interface Tree {
   children?: Tree[]
 }
 
+const props = defineProps({
+  ID: String,
+})
 const testCaseName = ref('')
 const testSuite = ref('')
 const testKind = ref('')
@@ -151,19 +154,36 @@ function loadStores(lastSuitName?: string, lastCaseName?: string) {
 
         let targetSuite = {} as Tree
         let targetChild = {} as Tree
-        if (key.suite !== '' && key.testcase !== '') {
-          for (var i = 0; i < treeData.value.length; i++) {
-            const item = treeData.value[i]
-            if (item.id === key.suite && item.children) {
-              for (var j = 0; j < item.children.length; j++) {
-                const child = item.children[j]
-                if (child.id === key.testcase) {
-                  targetSuite = item
-                  targetChild = child
-                  break
+
+        const targetID = props.ID
+        if (targetID && targetID !== '') {
+          for (const suite of treeData.value) {
+            if (suite.children) {
+              const foundChild = suite.children.find(child => child.id === targetID)
+              if (foundChild) {
+                targetSuite = suite
+                targetChild = foundChild
+                handleNodeClick(targetChild)
+                updateTreeSelection(targetSuite, targetChild)
+                return
+              }
+            }
+          }
+        } else {
+          if (key.suite !== '' && key.testcase !== '') {
+            for (var i = 0; i < treeData.value.length; i++) {
+              const item = treeData.value[i]
+              if (item.id === key.suite && item.children) {
+                for (var j = 0; j < item.children.length; j++) {
+                  const child = item.children[j]
+                  if (child.id === key.testcase) {
+                    targetSuite = item
+                    targetChild = child
+                    break
+                  }
                 }
+                break
               }
-              break
             }
           }
         }
@@ -175,14 +195,7 @@ function loadStores(lastSuitName?: string, lastCaseName?: string) {
         }
 
         viewName.value = 'testsuite'
-        currentNodekey.value = targetChild.id
-
-        treeRef.value!.setCurrentKey(targetChild.id)
-        treeRef.value!.setCheckedKeys([targetChild.id], false)
-
-        testSuite.value = targetSuite.label
-        Cache.SetCurrentStore(targetSuite.store)
-        testKind.value = targetChild.kind
+        updateTreeSelection(targetSuite, targetChild)
       } else {
         viewName.value = ""
       }
@@ -198,6 +211,17 @@ function loadStores(lastSuitName?: string, lastCaseName?: string) {
 }
 loadStores()
 
+function updateTreeSelection(targetSuite: Tree, targetChild: Tree) {
+    currentNodekey.value = targetChild.id
+
+    treeRef.value!.setCurrentKey(targetChild.id)
+    treeRef.value!.setCheckedKeys([targetChild.id], false)
+
+    testSuite.value = targetSuite.label
+    Cache.SetCurrentStore(targetSuite.store)
+    testKind.value = targetChild.kind
+}
+
 const filterText = ref('')
 watch(filterText, (val) => {
   treeRef.value!.filter(val)
@@ -239,10 +263,8 @@ const deviceAuthNext = () => {
       <el-main style="padding-top: 5px; padding-bottom: 5px;">
         <el-container style="height: 100%">
           <el-aside>
-            <el-button type="primary" @click="Set" data-intro="History Set" test-id="history-set">设置</el-button>
             <el-button type="primary" @click="loadStores" :icon="Refresh">{{ t('button.refresh') }}</el-button>
             <el-input v-model="filterText" :placeholder="t('tip.filter')" test-id="search" style="padding: 5px;" />
-
             <el-tree
               v-loading="storesLoading"
               :data=treeData

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

@@ -280,6 +280,11 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   })
 }
 
+const emit = defineEmits(['toHistoryPanel']);
+const handleToHistoryPanel = (payload) => {
+  emit('toHistoryPanel', payload);
+};
+
 const importSuiteFormRules = reactive<FormRules<Suite>>({
   url: [
     { required: true, message: 'URL is required', trigger: 'blur' },
@@ -391,6 +396,7 @@ const suiteKinds = [{
               :suite="testSuite"
               :kindName="testSuiteKind"
               :name="testCaseName"
+              @toHistoryPanel="handleToHistoryPanel"
               @updated="loadStores"
               style="height: 100%;"
               data-intro="This is the test case editor. You can edit the test case here."